面试之盒模型

LiveVideoStack 发布于2019-08-30 11:02 / 2373人阅读

摘要：标准的的盒子模型与低版本的盒子模型有什么不同的标准盒子模型宽度内容的宽度与向内容外填充低版本盒子模型宽度内容宽度与向内容内填充标准盒子模型盒子模型上刺刀可以看出我们设置了属性用来控制元素的盒子模型的解析模式，默认为的标准盒子模型，设

标准的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;就会发现滚动条没了，头部也很美观。

云服务器 GPU云服务器对象模型与数据模型 java动画模型模型语言模型大模型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114731.html

CSS入门之盒模型（六分之四）

摘要：盒模型要点知识务必注意看，这可是前端面试必定会遇到的问题。盒模型的主要属性，除继承外有两个值这里不再细说历史原因，只说其作用。严格来说与标签大小无关，但是影响视觉上的位置。具象化需调试指出，如下其中的最外圈的黄色区域就是了。盒模型要点知识务必注意看，这可是前端面试必定会遇到的问题。 box-sizing 盒模型的主要CSS属性，除继承外有两个值： content-box...

yearsj 2019-08-02 10:54 评论0 收藏0
CSS入门之盒模型（六分之四）

摘要：盒模型要点知识务必注意看，这可是前端面试必定会遇到的问题。盒模型的主要属性，除继承外有两个值这里不再细说历史原因，只说其作用。严格来说与标签大小无关，但是影响视觉上的位置。具象化需调试指出，如下其中的最外圈的黄色区域就是了。盒模型要点知识务必注意看，这可是前端面试必定会遇到的问题。 box-sizing 盒模型的主要CSS属性，除继承外有两个值： content-box...

VPointer 2019-08-30 15:54 评论0 收藏0
css之盒模型

摘要：内容不会被修剪，会呈现在元素框之外。内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。规定应该从父元素继承属性的值。盒模型 1.定义 1.任意一个元素都可以当作盒模型 2.盒子的大小由内容宽高(width/height)+边距(padding)+边框(border) 3.盒子由外边距(margin),影响盒子的位置广义盒模型:文档中所有功能性及内容性标签,及文档中所有显示性标签. 狭...

SKYZACK 2019-04-23 13:21 评论0 收藏0
前端（六）之盒模型显隐、定位与流式布局思想

摘要：前端之盒模型显隐定位与流式布局思想前端之盒模型显隐定位与流式布局思想盒模型的显隐盒模型的显隐盒子的显隐通过控制盒子的显示方式来隐藏盒子该隐藏方式在页面中不占位通过控制盒子的透明度来隐藏盒子该隐藏方式在页面中占位注一般显隐操作的盒子都是采用前端之盒模型显隐、定位与流式布局思想盒模型的显隐盒子的显隐 .box, .wrap { ...

cikenerd 2019-04-23 13:07 评论0 收藏0