摘要:标准的的盒子模型与低版本的盒子模型有什么不同的标准盒子模型宽度内容的宽度与向内容外填充低版本盒子模型宽度内容宽度与向内容内填充标准盒子模型盒子模型上刺刀可以看出我们设置了属性用来控制元素的盒子模型的解析模式,默认为的标准盒子模型,设
标准的CSS的盒子模型与低版本IE的盒子模型有什么不同的?
标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin
(border与padding向内容外填充)
低版本IE盒子模型:宽度=内容宽度(content+border+padding)+ margin
(border与padding向内容内填充)
标准盒子模型
IE盒子模型
上刺刀
box1
box2
可以看出我们设置了box-sizing
box-sizing属性?
用来控制元素的盒子模型的解析模式,默认为content-box
context-box:W3C的标准盒子模型,设置元素的 height/width 属性指的是content部分的高/宽,定义的宽度和高度之外绘制元素的内边距和边框
border-box:IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽
适用场景
比如我们在写一个头部,background:gray,我们需要两边有10px的距离,如果设margin:0 10px的话,会发现两边有了间距,但是间距不是灰色背景,而且出现了滚动条,这个时候就需要我们的padding:0 10px,完美解决了两边留白的尴尬,但是滚动条还在,这就需要上大刀box-sizing:border-box;就会发现滚动条没了,头部也很美观。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/114731.html
摘要:盒模型要点知识务必注意看,这可是前端面试必定会遇到的问题。盒模型的主要属性,除继承外有两个值这里不再细说历史原因,只说其作用。严格来说与标签大小无关,但是影响视觉上的位置。具象化需调试指出,如下其中的最外圈的黄色区域就是了。 盒模型要点知识 务必注意看,这可是前端面试 必定会遇到 的问题。 box-sizing 盒模型的主要CSS属性,除继承外有两个值: content-box...
摘要:盒模型要点知识务必注意看,这可是前端面试必定会遇到的问题。盒模型的主要属性,除继承外有两个值这里不再细说历史原因,只说其作用。严格来说与标签大小无关,但是影响视觉上的位置。具象化需调试指出,如下其中的最外圈的黄色区域就是了。 盒模型要点知识 务必注意看,这可是前端面试 必定会遇到 的问题。 box-sizing 盒模型的主要CSS属性,除继承外有两个值: content-box...
摘要:前端之盒模型显隐定位与流式布局思想前端之盒模型显隐定位与流式布局思想盒模型的显隐盒模型的显隐盒子的显隐通过控制盒子的显示方式来隐藏盒子该隐藏方式在页面中不占位通过控制盒子的透明度来隐藏盒子该隐藏方式在页面中占位注一般显隐操作的盒子都是采用前端之盒模型显隐、定位与流式布局思想 盒模型的显隐 盒子的显隐 .box, .wrap { ...
阅读 1807·2021-11-22 15:24
阅读 1266·2021-11-12 10:36
阅读 3101·2021-09-28 09:36
阅读 1751·2021-09-02 15:15
阅读 2583·2019-08-30 15:54
阅读 2359·2019-08-30 11:02
阅读 2343·2019-08-29 13:52
阅读 3476·2019-08-26 11:53