一起探索盒模型和 em 小案例演示

一、什么是盒模型？

简单的说，可以把任何一个网页看作是一个盒子，它具有:内容（content）,内边距（padding）,边框（border）,外边距（margin）四个属性，这就是盒子模型。

1. 内容（content）:我们把 content 想象理解为一个鸡蛋里的蛋黄

2. 内边距（padding）:可以理解为里面裹覆着蛋黄的蛋清

3. 边框（border）:可以理解为保护鸡蛋作用的蛋壳

4. 外边距（margin）:可以理解保护鸡蛋不被挤压的外包装盒

这样一比喻，是不是很容易理解啦！呵呵~~~

二、常用的盒子模型属性有以下

序号	属性	描述	实例
1	border	border-top（上边框）、border-bottom（下边框）、border-left（左边框）、border-right（右边框）	border-top:20px; border-bottom:20px; border-left:20px; border-right:20px;
2	border-width	设置边框的宽度	border-width:2px;
3	border-color	设置边框的颜色	border-color:#fff;
4	border-style	边框样式有：dashed（虚线）,dotted（点线）,solid（实线）	border-style:dashed; border-style:dotted; border-style:solid;
5	padding	边框内壁与内部元素之间的距离，padding-top，padding-bottom，padding-left，padding-right	padding-top:10px; padding-bottom:10px; padding-left:10px; padding-right:10px;
6	margin	代表边框外壁与其它元素之间的距离，margin-top，margin-bottom，margin-left，margin-right	margin-top:15px; margin-bottom:15px; margin-left:15px; margin-right:15px;

简写实例：

• 边框有三个值：粗细、样式和颜色

  例：border:2px solid red;

• 属性分为上、右、下、左。代码可如下简写：

  div{border:10px 15px 20px 25px;}

  div{padding:10px 15px 20px 25px;}

  div{margin:10px 15px 20px 25px;}

• 如果左右的属性都为 15px;可以这么写：

  div{border:10px 15px 20px;}

  div{padding:10px 15px 20px;}

  div{margin:10px 15px 20px;}

• 如果上右下左的属性都为 10px;可以这么简写：

  div{border:10px;}

  div{padding:10px;}

  div{margin:10px;}

• 如果上下的属性为 10px;左右的属性为 20px;可以这么简写：

  div{border:10px 20px;}

  div{padding:10px 20px;}

  div{margiin:10px 20px;}

• 需要注意：块级元素可以设置宽高，内边距，边框，外边距，行内元素宽高自动，并排显示

三、盒子模型有两种形式：标准盒子模型，怪异盒子模型。

1. 两种模式可以利用 box-sizing 属性进行自行选择。

标准模式：box-sizing:content-box;

怪异模式：box-sizing:border-box;

2. 两种模式的区别：

标准模式会被设置的 padding 撑开，而怪异模式则相当于将盒子的大小固定好，再将内容装入盒子。盒子的大小并不会被 padding 所撑开。

例：

.box{
    box-sizing:border-box; //没有添加时，默认按标准模式计算， 添加时按照怪异模式计算
    width:300px;
    height:300px;
    border:1px solid red;
    padding:30px;
    margin:30px;
 }

3. 标准模式：盒子总宽度 / 高度 = 内容区宽度 / 高度+padding+border + margin。如下效果图：

4. 怪异模式：盒子总宽度 / 高度 = width/height + margin。如下效果图：

四、什么是 em 单位？

em 是一个相对的度量单位，对于浏览器来说，1em=16px，16px 为浏览器的默认字体大小。

为了便于理解，用下面这个小案例一起来研究吧！

核心css代码：

<style>
    p {
        text-align: center;
        font-size: 1.5em;
    }
    .bth {
        color:rgb(255, 255, 255);
        background: rgb(50, 98, 255);
        padding:12em 1em 0;
        margin: 4em 0.8em;
        border: none;
        outline: none;
        border-radius: 0.6em;
    }
    .bth:hover {
        opacity: 0.8;
        cursor:pointer;
        transition: 0.5s;
        background: rgb(25, 103, 221);
        box-shadow: 0 0 7px rgb(44, 44, 44);
    }
    .january {
        font-size: 14px;
    }
    .february {
        font-size:16px;
    }
    .march {
        font-size: 18px;;
    }
    .april {
        font-size: 20px;;
    }
    </style>

实例效果图：

总结和思考：

em单位为一个相对的度量单位，它通过寻找父标签的font-size。然后通过计算得出自身的font-size。利用em单位设置便签的width或者height等属性原理也一样。

比如有一个块级容器，里面有一些文字。这个布局已经定了，height和width等属性都已经定了，不想改变了，但是你想改变里面的字体大小，那么，通过修改font-size。然后发现，height、width等属性值都变了，这个容器的大小也改变了。为什么会变？？因为你改变font-size的值。height、width的值也需要重新计算。