CSS盒子模型

---

1.认识盒子模型

• HTML中的每一个元素都可以看做是一个盒子，可以具备四个属性。

内容（content）：元素的内容width/height
内边距（padding）：元素和内容之间的间距
边框（border）：元素自己的边框
外边距（margin）：元素和其他元素之间的间距

• 因为盒子有四边，所以padding/border/margin都有top/right/bottom/left四个边。
  
• 块级盒子
  在CSS中通过display:block属性将元素定义成块级盒子。在HTML的标签元素中，<div>，<p>，<h>等在CSS中默认都是块级盒子。

1.每个盒子会独占一行
2.width和height属性会有效果
3.边距（margin/padding）和边框（border）会将其他元素从盒子周围推开

• 内联盒子
  在CSS中通过display:inline属性将元素定义成内联盒子。在HTML的标签元素中，<a>，<span>，<strong>,<em>等在CSS中默认都是内联盒子。

1.盒子不会独占一行
2.width和height属性没有效果
3.边距（margin-left/right，padding-left/right）和边框（border）会将其他处于inline状态的盒子推开

2.内容width/height

• 设置宽度：width
• 设置高度：height
  注意：对于行内级非替换元素（如<span>,<a>等）来说，设置宽高是无效的！

3.内边距padding

padding属性用于设置盒子的内边距, 通常用于设置边框和内容之间的间距

1.padding简写属性：padding-top，padding-right，padding-bottom，padding-left
2.padding缩写属性:是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左

• padding并非必须是四个值，也可以是其他值

padding值的个数	padding的例子	代表的含义
4	padding：10px 20px 30px 40px	top: 10px, right: 20px, bottom: 30px, left: 40px
3	padding：10px 20px 30px	缺少left，left使用right的值
2	padding：10px 20px	缺少left，left使用right的值；缺少bottom，bottom用top的值
1	padding：10px	right/bottom/left都使用top的值

4.边框/圆角border

• 边框

1.边框宽度
border-top-width、border-right-width、border-bottom-width、border-left-width
border-width是上面4个属性的简写属性
2.边框样式
border-top-style、border-right-style、border-bottom-style、border-left-style
border-color是上面4个属性的简写属性

3.边框颜色
border-top-style、border-right-style、border-bottom-style、border-left-style
border-style是上面4个属性的简写属性

• 如果我们相对某一边同时设置 宽度 样式 颜色, 可以进行如下设置:

border-top，border-right，border-bottom，border-left

• 同时设置四边的边框

border
例如：border:5px solid pink

• 圆角（border-radius）

1.数值: 通常用来设置小的圆角, 比如6px;
2.百分比: 通常用来设置一定的弧度或者圆形
3.如果一个元素是正方形, 设置border-radius大于或等于50%时，就会变成一个圆.

5.外边距margin

margin属性用于设置盒子的外边距, 通常用于元素和元素之间的间距

margin的简写属性，缩写属性，取值类似于padding

• 上下margin的传递

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

• 上下margin的折叠

1.垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin，这种现象叫做collapse（折叠）
2.水平方向上的margin（margin-left、margin-right）永远不会collapse
3.折叠后最终值的计算规则:两个值进行比较，取较大的值
4.如何防止margin collapse:只设置其中一个元素的margin

6.盒子和文字阴影

• 盒子阴影 （ box-shadow）

/* x 偏移量 | y 偏移量 | 阴影颜色 */

box-shadow: 60px -16px teal;

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */

box-shadow: 10px 5px 5px black;

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */

box-shadow: 10px 5px 5px black;

/* 插页 (阴影向内) | x 偏移量 | y 偏移量 | 阴影颜色 */

box-shadow: inset 5em 1em gold;

• 文字阴影 （ text-shadow）
  类似于box-shadow，但text-shadow没有spread-radius的值

7.box-sizing

box-sizing用来设置盒子模型中宽高的行为

• content-box：padding、border都布置在width、height外边
  

• border-box：padding、border都布置在width、height里边