1. 盒模型:每个标签都可以称为盒模型;
2. 盒模型的学习是为了让我们更好的进行网页布局.
盒模型的组成部分:
- 1.content 标签本身的大小,width height
- 2.padding 内填充,存在于内容和边框之间.默认同标签背景色一致.不能展示任何文本.
- 3.border 边框
- 4.margin 外间距,标签与标签之间的间隙. 没有颜色!!
注意:
margin的问题
- 第一个子标签的margin-top值会传递给父标签!(解决方式见代码)
- 推荐:父子间距用padding; 兄弟间距用margin
margin的问题
- 上下两个相邻标签,margin间距取最大值!
- 左右两个相邻标签,最终间距margin值要相加!
行元素:
- 上下margin值无效! 左右可正常使用!