盒模型概念和组成
盒子模型是CSS的基石,指定标签如何显示以及元素间相互关系;
页面上的每个元素都被当成一个矩形盒子,占据一定的页面空间,这个盒子由内容(content)、内边距(补白,填充,padding)、边框(border)和外边界(margin)组成;
1) padding内填充
padding区域在border与content之间;
背景色和背景图像会覆盖padding和content组成的区域;
2)padding的使用方法
padding,在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。也称补白(内填充)。
用法:
1)用来调整内容在容器中的位置关系
2)用来调整子元素在父元素中的位置关系。
注:padding属性可以添加在父元素上。
3)padding值是额外加在元素原有大小之上的,如想保证元素大小不变,需从元素宽或高上减掉后添加的padding属性值。
属性值的4种方式:
四个值:上 右 下 左 {padding:10px 20px 30px 40px;}
三个值:上 左右 下 {padding:10px 20px 30px ;}
二个值:上下 左右 {padding:10px 20px ;}
一个值:四个方向 padding:2px; /定义元素四周填充为2px/
说明:可单独设置一方向填充,
如:上方向padding-top:10px; 右方向pahdding-right:10px;
下方向padding-bottom:10px; 左方向padding-left:10px;
3) margin(外边距/边界)的使用方法
边界:margin,在元素外边的空白区域,被称为边距。
外边距(margin)在border之外,margin区域不应用背景;
在这里插入图片描述
margin-left:左边界 margin-right:右边界
margin-top:上边界 margin-bottom:下边界
*margin:0 auto;/在浏览器中横向居中。 Margin可取负值
左右相加,上下重合(取大值)但如果两个盒子有浮动,上下就不重合了,变成相加.
盒模型的计算
1)盒子的实际大小(公式):
宽 =左右margin+左右border+左右padding+width
高 =上下margin+上下border+上下padding+height
例如:一个盒子的 margin 为 20px,border 为 1px,padding 为 10px,content 的宽为 200px、高为 50px
宽=margin2 + border2 + padding2 + content.width = 202 + 12 + 102 +200 = 262px
高=margin2 + border2 + padding2 + content.height = 202 + 12 +102 + 50 = 112px
两种盒子模型
1.W3C盒子模型(默认盒子模型) | |||
---|---|---|---|
内容区 | 盒子 | 所占屏幕 | |
宽 | width | width+padding+border | width+padding+border+margin |
高 | height | height+padding+border | height+padding+border+margin |
2.IE盒子模型(边框盒子模型) | |||
---|---|---|---|
内容区 | 盒子 | 所占屏幕 | |
宽 | width-padding-border | width | width+margin |
高 | height-padding-border | height | height+margin |
3.box-sizing可以改变盒子模型
取值为content-box的是默认盒子模型也就是W3C盒子模型
取值为border-box的是IE盒子模型