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

VPointer 发布于2019-08-30 15:54 / 1090人阅读

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

盒模型要点知识

务必注意看，这可是前端面试 必定会遇到 的问题。

box-sizing

盒模型的主要CSS属性，除继承外有两个值：

content-box

这里不再细说历史原因，只说其作用。

content-box将一个标签元素所占的 物理像素区域 的计算方法表达为：宽高 + 内边距 + 边框 + 外边距

border-box

border-box将一个标签元素所占的 物理像素区域 的计算方法表达为：宽高、内边距、边框的最大值 + 外边距

这里说的宽高就是CSS属性的width与height，或者是子标签所撑起来的大小。

下面介绍其他三个相关属性

内边距（padding）

首先，你想想一个立方体包装盒，其内部有一个小一点的盒子，那么里面盒子与外面这个盒子相隔的区域就是内边距，换做HTML标签具象化如下：

其中红色区域就是内边距

边框（border）

边框就是字面意思，其HTML具象化如下：

其中黑色就是边框

外边距（margin）

外边距就是标签间的间距或便签与父标签边线的距离。严格来说与标签大小无关，但是影响视觉上的位置。HTML具象化需调试指出，如下：

其中的最外圈的黄色区域就是margin了。

注意一下：margin可以负值；inline标签的上下margin无效。

如果你确实明白了上述概念后，有如下图示与解说，详细说了具体的标签大小计算方式，这里注意，标签大小是指 物理像素大小，而不是上文说的 物理像素区域。

所占大小就是实际的像素值，而所占区域是包含了margin外边距的。

注意计算时候，padding和border可都是有四边的。
官方定义border-box是指把padding与border都算作宽高，理解上有歧义，所以你直接取值当做wh与padding与border最大值即可。

小建议

强烈推荐使用border-box来在实际中使用，实际工作或项目中，定制好padding与border后再去修改这两个值的可能性远远低于不改的可能性，所以能用border-box就用border-box吧，* {box-sizing: border-box;}可能是个好习惯。

否则UI丢你个80*80像素大小的样式，你自己就去拆分吧。

源码相关

CodePen

如果文章对你有一点帮助，我就非常开心了。
喜欢文章的话，请关注下我，定期发布技术相关文章，满满都是干货。

云服务器私有云 css入门 css快速入门 css入门到精通 css入门教程

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

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

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

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

taoszu 2019-08-05 14:23 评论0 收藏0
CSS入门之盒模型（六分之四）

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

yearsj 2019-08-02 10:54 评论0 收藏0
CSS入门之引用、选择器、属性（六分之三）

摘要：入门教程六分之三篇没办法，我直播教小伙伴入门，属性讲完，准备说定位的时候，他们就喊停，不住了。。。选择器表达式如下相关效果见表达式关键词特性属性属性即样式定制的具体样式，比如定制宽高，分别为与等。 CSS 入门教程六分之三篇没办法，我直播教小伙伴CSS入门，属性讲完，准备说定位的时候，他们就喊停，hold不住了。。。所以先写到六分之三，23333333 要点解释引用如...

baishancloud 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
面试之盒模型

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

LiveVideoStack 2019-08-30 11:02 评论0 收藏0