CSS盒子模型

---

前言

---

一、认识盒子模型

HTML每个元素都是盒子

二、内容width/height

◼ 设置内容是通过宽度和高度设置的:
 宽度设置: width
 高度设置: height
◼ 注意: 对于行内级非替换元素来说, 设置宽高是无效的!
◼ 另外我们还可以设置如下属性:
 min-width：最小宽度，无论内容多少，宽度都大于或等于min-width
 max-width：最大宽度，无论内容多少，宽度都小于或等于max-width
 移动端适配时, 可以设置最大宽度和最小宽度;
◼ 下面两个属性不常用:
 min-height：最小高度，无论内容多少，高度都大于或等于min-height
 max-height：最大高度，无论内容多少，高度都小于或等于max-height

三、内边距padding

◼ padding属性用于设置盒子的内边距, 通常用于设置边框和内容之间的间距;
◼ padding包括四个方向, 所以有如下的取值:
 padding-top：上内边距
 padding-right：右内边距
 padding-bottom：下内边距
 padding-left：左内边距
◼ padding单独编写是一个缩写属性：
 padding-top、padding-right、padding-bottom、padding-left的简写属性
 padding缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左;
◼ padding并非必须是四个值, 也可以有其他值;

四、边框/圆角border

◼ 边框宽度
 border-top-width、border-right-width、border-bottom-width、border-left-width
 border-width是上面4个属性的简写属性
◼ 边框颜色
 border-top-color、border-right-color、border-bottom-color、border-left-color
 border-color是上面4个属性的简写属性
◼ 边框样式
 border-top-style、border-right-style、border-bottom-style、border-left-style
 border-style是上面4个属性的简写属性

边框的样式设置值

◼ 边框的样式有很多, 我们可以了解如下的几个:
 groove：凹槽, 沟槽, 边框看上去好象是雕刻在画布之内
 ridge：山脊, 和grove相反，边框看上去好象是从画布中凸出来

圆角 – border-radius

◼ border-radius事实上是一个缩写属性:
 将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottomleft-radius 简写为一个属性。
 开发中比较少见一个个圆角设置;
◼ 如果一个元素是正方形, 设置border-radius大于或等于50%时，就会变成一个圆.

五、外边距margin

◼ margin属性用于设置盒子的外边距, 通常用于元素和元素之间的间距;
◼ margin包括四个方向, 所以有如下的取值:
 margin-top：上内边距
 margin-right：右内边距
 margin-bottom：下内边距
 margin-left：左内边距
◼ margin单独编写是一个缩写属性：
 margin-top、margin-right、margin-bottom、margin-left的简写属性
 margin缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左;
◼ margin也并非必须是四个值, 也可以有其他值;

上下margin的传递

◼ margin-top传递
 如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素
◼ margin-bottom传递
 如果块级元素的底部线和父元素的底部线重写，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素
◼ 如何防止出现传递问题？
 给父元素设置padding-top\padding-bottom
 给父元素设置border
 触发BFC: 设置overflow为auto
◼ 建议
 margin一般是用来设置兄弟元素之间的间距
 padding一般是用来设置父子元素之间的间距
上
◼ margin-top传递
 如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素
◼ margin-bottom传递
 如果块级元素的底部线和父元素的底部线重写，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素
◼ 如何防止出现传递问题？
 给父元素设置padding-top\padding-bottom
 给父元素设置border
 触发BFC: 设置overflow为auto
◼ 建议
 margin一般是用来设置兄弟元素之间的间距
 padding一般是用来设置父子元素之间的间距

六、盒子和文字阴影

盒子阴影 – box-shadow

◼ box-shadow属性可以设置一个或者多个阴影
 每个阴影用表示
 多个阴影之间用逗号,隔开，从前到后叠加
◼ 的常见格式如下
 第1个：offset-x, 水平方向的偏移，正数往右偏移
 第2个：offset-y, 垂直方向的偏移，正数往下偏移
 第3个：blur-radius, 模糊半径
 第4个：spread-radius, 延伸半径
 ：阴影的颜色，如果没有设置，就跟随color属性的颜色
 inset：外框阴影变成内框阴影

◼ 我们可以通过一个网站测试盒子的阴影:
 https://html-css-js.com/css/generator/box-shadow/

文字阴影 - text-shadow

◼ text-shadow用法类似于box-shadow，用于给文字添加阴影效果
◼ 的常见格式如下
 相当于box-shadow, 它没有spread-radius的值;
◼ 我们可以通过一个网站测试文字的阴影:
 https://html-css-js.com/css/generator/box-shadow/

七、box-sizing

◼ box-sizing用来设置盒子模型中宽高的行为
◼ content-box
 padding、border都布置在width、height外边
◼ border-box
 padding、border都布置在width、height里边

元素的水平居中方案

◼ 在一些需求中，需要元素在父元素中水平居中显示（父元素一般都是块级元素、inline-block）
◼ 行内级元素(包括inline-block元素)
 水平居中：在父元素中设置text-align: center
◼ 块级元素
 水平居中：margin: 0 auto