H5入门6：盒子模型

H5入门6：盒子模型

1.什么是盒子模型

盒子模型相关属性

1. 宽度属性
   

2. 高度属性

3. 哪些元素可以设置宽高

4. 边框属性

5. 边框样式

6. 设置不同方向上的边框属性，在中间加上方向即可

7. padding的设置规则

注：padding 不能设置负值

8. 外边距margin属性设置规则

注意：margin是可以为负值的

9. 块级元素有默认外边距margin

注意：
- 如果垂直方向上，两个相邻的元素都设置外边距，外边距会合并，合并后外边距的高度采用的是外边距最大的那个值；
-

10. 盒子模型的计算规则

• 元素占用空间是指元素在网页中占据的大小
• 我们设置的元素的width和height则是内容的宽高，不是盒子占用的宽高
• 盒子的实际高度是：上边框+上内边距+内容高度+下内边距+下边框；
• 盒子在页面中所占据的高度是：上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距；
• 实际高度不包含margin
• 宽度想同的原理

11. 不同浏览器盒子模型的计算

12. 盒子模型的display属性，inline 和block

13. 盒子模型display属性：inline-block 和none

End！