CSS网页布局:盒子模型
一、盒子模型
标准盒子模型(W3C盒子)
不论是标准盒模型还是IE盒子模型,都有content、padding、border、margin四个部分组成,但从上图也可以看出W3C盒子和IE盒子主要区别在与content宽度上的区别
w3c中的盒子模型的宽:包括margin+border+padding+width;
width:margin*2+border*2+padding*2+width;
height:margin*2+border*2+padding*2+height;
iE中的盒子模型的width:也包括margin+border+padding+width;
上面的两个宽度相加的属性是一样的。不过在ie中content的宽度包括padding和border这两个属性;
举例说明的话:
例如一个盒子模型如下:margin:20px,border:10px,padding:10px;width:200px;height:50px;
如果用w3c盒子模型解释,那么这个盒子模型占用的
宽度为:20*2+10*2+10*2+200=280px;
高度:20*2+10*2+20*2+50=130px;
盒子的实际宽度大小为:10*2+10*2+200=240px;
实际高度:10*2+10*2+50=90px;
用ie的盒子模型解释 :盒子在网页中占据的大小为20*2+200=240px;
高:20*2+50=90px;
盒子的实际大小为:宽度:200px,
高度:50px;
CSS3中增加了box-sizing属性可用于调整盒子
box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box。
content-box,border和padding不计算入width之内 默认的标准盒子
padding-box,padding计算入width内
border-box,border和padding计算入width之内,其实就是IE盒子了
<style type="text/css">
.content-box{
box-sizing:content-box;
-moz-box-sizing:content-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #E6A43F;
background: blue;
}
.padding-box{
box-sizing:padding-box;
-moz-box-sizing:padding-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #186645;
background: red;
}
.border-box{
box-sizing:border-box;
-moz-box-sizing:border-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #3DA3EF;
background: yellow;
}
</style>
最新文章
- Flask备注三(Context)
- Angular实现瀑布流的库angular-deckgrid
- OC-数组排序-NSSortDescriptor使用
- 38.Android之ListView简单学习(一)
- MYSQL操作的一些知识点,持续更新中&#183;&#183;&#183;&#183;
- .NET 简单的扩展方法使用。
- Gym 100917L Liesbeth and the String 规律&;&;胡搞
- Kinect用体感来实现UI控件的点击
- 规则集之探究何时使用HashSet、LinkedHashSet以及TreeSet?
- 【温故而知新】HTTP 概述
- Python 通过脚本获取Android的apk的部分属性,再通过加密算法生成秘钥。
- apache benchmark 的简单安装与测试
- noi2015品酒大会(sa)
- python txt文件数据转excel
- 解决python中 .to_csv() 的乱码问题
- BZOJ 2754 【SCOI2012】 喵星球上的点名
- Task 4.5 求二维数组中的最大连通子数组之和
- rabbitmq 和Spring 集成 实现(一)
- 《LeetBook》leetcode题解(7): Reverse Integer[E]——处理溢出的技巧
- 【js】五子棋-UI学习