摘要:一盒子模型标准盒子模型盒子不论是标准盒模型还是盒子模型,都有四个部分组成,但从上图也可以看出盒子和盒子主要区别在与宽度上的区别中的盒子模型的宽包括中的盒子模型的也包括上面的两个宽度相加的属性是一样的。
不论是标准盒模型还是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盒子了
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/2267.html
摘要:一流体布局引出的几种网页布局方式布局方式描述特点场景静态布局,传统设计,网页上的所有元素的尺寸一律使用作为单位。世界中,提出了流体布局的概念所谓流体布局,指的是利用元素流的特性实现的各类布局效果。 下一篇:《CSS世界》笔记二:盒模型四大家族 写在前面 初读《CSS世界》还是在深圳,属于换工作前的充能。那时候除了工作,其他时间基本都在这本书里了,因为它的确吸引人。之前看过《CSS揭密》...
摘要:中间左栏右栏清除浮动如下图缺点结构不正确多了一层标签布局左栏中间右栏如下图缺点兼容性问题参考文章 W3C标准 由万维网联盟制定的一系列标准,包括: 结构化标准语言(HTML和XML) 表现标准语言(CSS) 行为标准语言(DOM和ECMAScript) CSS中的定位机制 在CSS中存在三种定位机制: 标准文档流(Normal flow) 浮动(Floats) 绝对定位(Abs...
摘要:接受个参数事件类型,是否冒泡,是否阻止浏览器的默认行为触发上绑定的自定义事件触发元素上绑定事件事件的委托代理的原理以及优缺点。委托代理事件是那些被绑定到父级元素的事件,但是只有当满足一定匹配条件时才会被挪。 一、页面布局 1.问题:假设高度已知,请写出三栏布局 ,其中左栏、右栏宽度各为300px,中间自适应。 解决方案一:使用浮动布局` Document ...
阅读 924·2021-11-22 09:34
阅读 2136·2021-11-11 16:54
阅读 2165·2021-09-27 14:00
阅读 910·2019-08-30 15:55
阅读 1499·2019-08-29 12:46
阅读 571·2019-08-26 18:42
阅读 606·2019-08-26 13:31
阅读 3152·2019-08-26 11:52