盒模型
盒模型:在html中每一个标签都具有一个盒模型
一、盒模型的组成部分
-
content(内容)
标签元素的内容,一般自定义宽和高,或者由子元素的内容撑开其宽和高
-
padding(内边距)
设置元素内容到元素边框之间的距离
-
border(边框)
指的是元素的边框
-
margin(外边距)
设置当前元素到相邻元素之间的距离
二、padding 设置内边距
padding-top:num; 设置上边距
padding-right:num; 设置右边距
padding-bottom:num; 设置下边距
padding-left:num; 设置左边距
-
合写:
padding:上 右 下 左;
-
左=右 上!=下
padding:上 右 下;
-
左=右 上=下
padding:上 右;
-
左=右=上=下
padding:上;
三、 margin 设置外边距
margin-top:num; 设置元素上边的外边距
margin-right:num; 设置元素右边的外边距
margin-bottom:num; 设置元素下边的外边距
margin-left:num; 设置元素左边的外边距
- 合写
margin: 上 右 下 左;
- 上=下 右!=左
margin: 上 右 下 左;
- 上!=下 右=左
margin: 上 右 下 ;
- 上=下 右=左
margin: 上 右 ;
- 上=下=右=左
margin: 上;
margin的经典bug
-
上下两个兄弟元素的margin重叠问题
上下两个兄弟标签,设置margin的时候,他们之间的距离不是相加,而是谁设置的margin值大,就显示谁的距离,即为值大的覆盖小的
可以理解为,上面元素的 margin-bottom和下面元素的margin-top 他们的值取最大的一个
-
解决方法:
给下面的元素添加 display:inline-block;
-
-
父子级子元素的margin-top 传递问题
在子元素中设置的margin-top,表现的结果是该margin-top传递到了父级元素上,使得父元素距离他上面的元素为该margin-top值
-
解决方法:
a.给父元素添加 overflow:hidden;
b.给父元素添加 border
-
水平居中
margin 的左右方向可以设置自适应 auto,这样他所修饰的块属性标签就会在水平方向上自动居中
注意:auto 只能控制水平方向的自动居中,不能控制垂直方向的自动居中
margin:0 auto;
auto的原理
auto的值 = (父元素的宽度-当前元素的宽度)/2;
通常在css刚开始就设置
/* 重置全局标签的内外边距 */
*{
margin: 0;
padding: 0;
}