盒模型定义: 在HTML中每一个标签都具有一个盒模型
盒模型的组成部分: 由以下四部分组成
1️⃣ content(内容): 由width和height来设置,用于控制元素承载内容的区域
2️⃣ padding(内边距): 用于设置边框与内容之间的距离
3️⃣ border(边框): 用于设置元素的边框
4️⃣ margin( =外边距): 用于设置两个元素之间的距离
组成部分分别属性设置 :
1️⃣ padding(内边距): 用于设置边框与内容之间的距离
2️⃣ border(边框)样式设置:
1, solid 实线;
2, dotted 点线
3, dashed 虚线
4, double 双实线
margin的bug:
解决方案一 : 父元素添加边框, 会影响父元素的盒模型大小不是最优解决方案
解决方案二 : 为父元素 设置 overflow: hidden;属性最优解决方案