一、盒模型介绍
盒模型是css布局的基石,它规定了网页元素如何显示以及元素间相互关系。盒模型示意图如下:
把元素看成页面中的盒子,盒子周围的相互关系分别为:
盒子的边框:border;
盒子与盒子之间的间距:margin;
盒子内容与边框之间的间距:padding;
二、padding属性:
1、 padding是在盒子里面,在盒子与内容之间,即控制子元素在父元素里面的位置关系,padding会把盒子撑大。
2、让盒子保持原有的大小:在宽高基础上减掉所加padding值。(如果一个元素是被内容撑开的,没有设置固定的宽高,padding直接撑开。不用减掉)
3:设置内间距:
距顶部内间距20px,距左边内间距30px
4、padding边距简写:
5、padding不会对背景图的位置造成影响。
三、margin属性
1、margin在元素外围,不会撑大元素的大小,控制元素与元素之间的间距。
2、设置margin:
距离底部外边距10px,距离左边外边距20px。
4、margin简写设置同padding。
5、margin:0 auto;让当前元素在父元素里面左右居中。
6、margin常出现的bug
a:两个相邻元素,如果没有设置浮动的上下两个盒子之间的margin区域是重叠的,按较大值设置;如果设置了浮动,之间的margin区域不重叠,值就是加起来的值。
b:如果父元素和第一个子元素没有浮动的情况下,给第一个子元素添加margintop,会错误放在父元素上面。
四,盒子的计算
盒子原大小:300px500px
边框:30px ;
margin:10px
margin不改变盒子的大小,占用空间。
因此现在盒子实际大小:
width=300px+30px2+20px2
height=500px+30px2+20px*2
盒子所占空间:
width=300px+30px*2+20px*2+10px*2
height=500px+30px*2+20px*2+10px*2
注意:元素wight,height:元素的宽高。盒子的大小包括:内容,内间距,边框。