内容区域的宽度和高度
作用：利用 width 和 height 属性默认设置是盒子 内容区域 的大小
Ø 属性：width / height
Ø 常见取值：数字+px
边框 border
边框（border）- 单个属性
作用：给设置边框粗细、边框样式、边框颜色效果
Ø 单个属性：
边框（border）- 连写形式
属性名：border
Ø 属性值：单个取值的连写，取值之间以空格隔开
如：border : 10px solid red;
Ø 快捷键：bd + tab
边框（border）- 单方向设置
场景：只给盒子的某个方向单独设置边框
Ø 属性名：border - 方位名词
Ø 属性值：连写的取值
盒子实际大小初级计算公式
需求：盒子尺寸 400*400，背景绿色，边框10px 实线 黑色，如何完成？
注意点： ① 设置width和height是内容的宽高！② 设置border会撑大盒子！
Ø 盒子实际大小初级计算公式：
盒子宽度 = 左边框 + 内容宽度 + 右边框
盒子高度 = 上边框 + 内容高度 + 下边框
Ø 解决：当盒子被border撑大后，如何满足需求？
解决：计算多余大小，手动在内容中减去（手动内减）
内边距 padding
内边距（padding）- 取值
作用：设置 边框 与 内容区域 之间的距离
Ø 属性名：padding 常见取值
记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的
内边距（padding）- 单方向设置
场景：只给盒子的某个方向单独设置内边距
Ø 属性名：padding - 方位名词
Ø 属性值：数字 + px
盒子实际大小终极计算公式
需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？
注意点：① 设置width和height是内容的宽高！② 设置border会撑大盒子 ③ 设置padding会撑大盒子
Ø 盒子实际大小终极计算公式：
盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框
Ø 解决：当盒子被border和padding撑大后，如何满足需求？
自己计算多余大小，手动在内容中减去（手动内减）
不会撑大盒子的特殊情况
不会撑大盒子的特殊情况（块级元素）
-
如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
-
此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子
CSS3盒模型（自动内减）
需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？
给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大？
Ø 解决方法 ① ：手动内减
操作：自己计算多余大小，手动在内容中减去
缺点：项目中计算量太大，很麻烦
Ø 解决方法 ② ：自动内减
操作：给盒子设置属性 box-sizing : border-box ; 即可
优点：浏览器会自动计算多余大小，自动在内容中减去
外边距 margin
外边距（margin）- 取值
作用：设置边框以外，盒子与盒子之间的距离
Ø 属性名：margin
Ø 常见取值：
记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！
外边距（margin） - 单方向设置
场景：只给盒子的某个方向单独设置外边距
Ø 属性名：margin - 方位名词
Ø 属性值：数字 + px
margin单方向设置的应用
清除默认内外边距
浏览器会默认给部分标签设置默认的margin和padding
- {margin:0;padding:0;}
外边距正常情况
场景：水平布局 的盒子，左右的margin正常，互不影响
Ø 结果：最终两者距离为左右margin的和
外边距折叠现象 – ① 合并现象
场景：垂直布局 的 块级元素，上下的margin会合并
Ø 结果：最终两者距离为margin的最大值
Ø 解决方法：避免就好
只给其中一个盒子设置margin即可
外边距折叠现象 – ② 塌陷现象
场景：互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上
Ø 结果：导致父元素一起往下移动
Ø 解决方法：
-
给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
-
给父元素设置overflow：hidden
-
转换成行内块元素
-
设置浮动
行内元素的margin和padding无效情况
场景：给行内元素设置margin和padding时
Ø 结果：
-
水平方向的margin和padding布局中有效！
-
垂直方向的margin和padding布局中无效！
