CSS学习笔记-盒模型(七)
2016-09-30 22:57
155 查看
CSS 盒子模型 (Box Model)
规定了元素处理元素内容、内边距、边框 和 外边距 的方式。在 CSS 中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。
假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素,就需要将内容的宽度设置为 70 像素,请看下图:
标准盒模型
标准 W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。
怪异(IE)盒模型
从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content,和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 pading。
网页中的盒子模型;我们常常要控制盒子模型的宽度width:
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;
盒子的实际宽度大小为:10*2+10*2+200=240px;
用ie的盒子模型解释 :盒子在网页中占据的大小为20*2+200=240px;
高:20*2+50=90px;
盒子的实际大小为:宽度:200px, 高度:50px;
我们常常理解的盒子模型是w3c这样的盒子模型
相关文章推荐
- CSS学习笔记(四)浮动、定位和框模型
- CSS学习笔记(float和盒子模型)
- CSS学习笔记(二) ----盒子模型
- css学习笔记(三)——布局模型
- 基于角色、标记及BLP模型的多级访问控制-B/S架构OA系统应用
- 存货的计划属性设置(ATO模型和PTO模型)
- epoll模型的使用及其描述符耗尽问题的探讨
- 沫沫金:详解Spring MVC模型(Model)层和视图(View)层
- 总线设备驱动模型
- Spark分布式计算和RDD模型研究
- Logistic Regression 模型简介
- 基于MFC平台的对话框软件模型
- jdbc关联模型查询-多表查询返回结果集
- 利用RANSAC方法找到二维与三维的最佳模型(仅线性)
- 谷歌DataFlow编程模型以及Spark/Flink/StreamCQL的相关实现
- 互金平台数据透析:用这3个模型就够了
- 多元模型的交互作用与共线性
- UML模型的基本概念
- CSS的Box模型图
- 服务器网络模型(1)--I/O模型与I/O复用