这是我参与「第四届青训营」笔记创作活动的的第3天。
此次的话题是CSS盒子模型。
一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。
margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分，content则是HTML元素的内容。
盒子的宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
内容content
width
- 指定 content box 宽度
- 取值为长度、百分数、auto
- auto 由浏览器根据其它属性确定
- 百分数相对于容器的 content box 宽度
height
- 指定 content box 高度
- 取值为长度、百分数、auto
- auto 取值由内容计算得来
- 百分数相对于容器的 content box 高度
- 容器有指定的高度时，百分数才生效
内边距padding
- 指定元素四个方向的内边距
- 百分数相对于容器宽度
- 四个方向：padding-top:上内边距、padding-right:右内边距、padding-bottom:下内边距、padding-left:左内边距
例1：样式简写
padding: 10px; /*四条边等距*/
padding: 10px 20px; /*上下 左右*/
padding: 10px 20px 30px; /*上 左右 下*/
padding: 10px 20px 30px 40px; /*上 右 下 左 （顺时针）*/
边框border
- border-style属性值：指定容器边框样式、粗细和颜色
- 边框样式(四种线)：none(无)、soild(实线)、dashed(方块虚线)、dotted(圆点虚线)
- border-sytle属性可取值：
- none：定义无边框。
- hidden：与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
- dotted：定义点状边框。在大多数浏览器中呈现为实线。
- dashed：定义虚线。在大多数浏览器中呈现为实线。
- solid：定义实线。
- double：定义双线。双线的宽度等于 border-width 的值。
- groove：定义 3D 凹槽边框。其效果取决于 border-color 的值。
- ridge：定义 3D 垄状边框。其效果取决于 border-color 的值。
- inset：定义 3D inset 边框。其效果取决于 border-color 的值。
- outset：定义 3D outset 边框。其效果取决于 border-color 的值。
- inherit：规定应该从父元素继承边框样式
- 四种属性
- border-width
- border-style
- border-color
- border-radius
border-radius值的个数以及每个值对应控制的位置
| 值的个数 | 表达意思 |
|---|---|
| 1 | 设置四个角有相同的边界半径 |
| 2 | 第一个值设置左上角和右下角，第二个值设置右上角和左下角 |
| 3 | 第一个值设置左上角，第二个值设置右上角和左下角，第三个值设置右下角 |
| 4 | 第一个值设置左上角，第二个值设置右上角，第三个值设置右下角，第四个之设置左下角 |
- 四个方向
- border-top
- border-right
- border-bottom
- border-left
例1：样式简写
/*使用简写属性设置宽度、样式和颜色，同时作用于四条边*/
border: 2px dotted green;
/*border-top/right/bottom/left:2px dotted green; */
/*下面的样式与上面的样式等价*/
border-width: 2px;
border-style: dotted;
border-color: green;
例2：三角形
<style>
.box {
width: 0px;
height: 0px;
border-top: 50px solid black;
border-right: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid transparent;
}
</style>
<body>
<div class="box"></div>
</body>
外边距margin
- 指定元素四个方向的外边距
- 取值可以是长度、百分数、auto
- 百分数相对于容器宽度
例1：样式简写
margin: 10px; /*四条边等距*/
margin: 10px 20px; /*上下 左右*/
margin: 10px 20px 30px; /*上 左右 下*/
margin: 10px 20px 30px 40px; /*上 右 下 左 （顺时针）*/
例2：使用 margin:auto 水平居中
<style>
div {
width: 200px;
height: 200px;
background: coral;
margin-left: auto;
margin-right: auto;
}
</style>
<body>
<div></div>
</body>
例3：margin collapse
<style>
.a {
background: lightblue;
height: 100px;
margin-bottom: 150px;
}
.b {
background: coral;
height: 100px;
margin-top: 100px;
}
</style>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
margin在垂直方向上会合并，取较大的进行合并(两矩形间距为150px)：
标准盒子模型与怪异盒子模型
- 标准盒子模型：采用W3C标准，盒子的content内容由width宽度和height高度决定，添加padding内边距或border外边距，宽高都会进行相应的增长
- 怪异盒子模型：怪异盒模型的宽高在div盒子初次设置时就已经规定，添加padding或者border，会从中减少content内容的占据区域，来为padding和border制造空间，宽高不会相对应的进行增长。
-
标准盒子模型：
- 内容计算：content=width*height
- 盒子的总宽度=width+padding（左右）+margin（左右）+border（左右）
-
怪异盒子模型：
- 内容计算：content=width*height+padding+border
- 盒子的总宽度=width+margin（左右），此时的width宽度已经包含了padding和border的值
<style>
html {
font-size: 24px;
}
.a {
box-sizing: content-box;/*标准盒子模型，此句可写可不写(默认为标准盒子模型)*/
width: 100%;
padding: 1em;
border: 3px solid #ccc;
}
.b {
box-sizing: border-box;/*怪异盒子模型*/
width: 100%;
padding: 1em;
border: 3px solid #ccc;
}
</style>
<body>
<p class="a">
标准盒子模型：采用W3C标准，盒子的content内容由width宽度和height高度决定，添加padding内边距或border外边距，宽高都会进行相应的增长。采用W3C标准，盒子的content内容由width宽度和height高度决定，添加padding内边距或border外边距，宽高都会进行相应的增长。
</p>
<p class="b">
怪异盒子模型：怪异盒模型的宽高在div盒子初次设置时就已经规定，添加padding或者border，会从中减少content内容的占据区域，来为padding和border制造空间，宽高不会相对应的进行增长。怪异盒模型的宽高在div盒子初次设置时就已经规定，添加padding或者border，会从中减少content内容的占据区域，来为padding和border制造空间，宽高不会相对应的进行增长。
</p>
</body>
设置box-sizing: content-box属性：为标准盒子模型，但默认情况下都会认定为标准盒子模型，可不设置
设置box-sizing:border-box属性：为怪异盒子模型
