盒子模型
概念:HTML中的每一个元素都可以看做是一个盒子,如右下图所示,可以具备这4个属性。
- 内容(content):元素的内容width/height
- 内边距(padding):元素和内容之间的间距
- 边框(border):元素自己的边框
- 外边距(margin):元素和其他元素之间的间距
盒子模型如下图所示(标注:图片来源于网络)
这里给大家记个口诀,来区分margin和padding的记忆。
margin是外边距,因为外国人喜欢吸收大妈,
padding是内边距,你拍领导马屁的时候,要偷偷的拍,所以是拍内。
padding 内边距
padding包括四个方向, 所以有如下的取值:
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
padding缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左;
举例:
padding: 10px 20px 30px 40px;的意思是:
top: 10px, right: 20px, bottom: 30px, left: 40px;
border 边框
边框具备宽度width;
边框具备样式style;
边框具备颜色color;
margin 外边距
margin属性用于设置盒子的外边距, 通常用于元素和元素之间的间距;
margin的四个方向:
margin-top:上内边距
margin-right:右内边距
margin-bottom:下内边距
margin-left:左内边距
margin缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左;
如何防止出现传递问题?
给父元素设置padding-top、padding-bottom
给父元素设置border
触发BFC: 设置overflow为auto