盒子模型
从里到外:内容区、内填充、边框、外边距
padding
1、padding设置在内容和父元素之间,在父元素内部
2、padding的作用:控制子元素在父元素里面的位置关系
3、padding会把盒子撑大
4、添加padding之后想让盒子保持原来的大小,需要在宽高的基础上减掉padding的值
5、给单一方向设置padding的值:padding-top/right/bottom/left
6、padding值的设置
一个值:四周
两个值:上下、左右
三个值:上、左右、下
四个值:上、右、下、左
7、padding的值不会对背景图的位置造成影响
8、padding不能设置负值
9、注意!!!如果父元素没有设置宽高,父元素是被内容撑开的,添加padding之后不需要去除宽高值
border
1、border在盒子里面,占空间,想要保持盒子原来的大小,需要在原有宽高的基础上减掉border的值
margin
1、margin值是在盒子边框外面的
2、margin值在页面中是占据空间的
3、margin的作用:调整盒子与盒子之间的距离
4、margin不会撑开盒子的宽高
5、给单一方向设置margin值:margin-top/right/bottom/left
6、margin值的设置
一个值:四周
两个值:上下、左右
三个值:上、左右、下
四个值:上、右、下、左
7、margin值可以设置负数
8、让子元素在父元素中左右居中 margin:0 auto;
9、margin常见的bug:
(1)一个父元素和第一个子元素,在没有添加浮动的情况下,会错误的将第一个元素的margin-top值加在父元素上
(2)两个同级元素之间上下的margin值不会叠加,会按照两者之间最大值设置,左右是正常的,会叠加
img标签之间有间距
img标签左右排列处理空白间距方法:
1、设置父元素的font-size为0;
2、设置float
3、使用负值margin消除间距
4、给img设置display:block
img标签上下排列处理空白间距的方法:
img标签具有文字的属性,首先需要去除行高line-height的影响
1、line-height:0;
文本在网页中显示是基于基线对齐的,如果先要让上下两者中间没有间距,也要消除对齐方式的影响,将垂直对齐方式设置为中线对齐。
2、virtical-align:middle
margin间距超出处理
1、对需要进行margin间距隐藏的标签使用div1包起来
2、给div1设置宽高,宽高为整段标签的合计宽高,包括超出的margin部分
3、给div1的直接父元素标签添加溢出隐藏overflow:hidden;