[CSS]关于盒子模型

jsyzchen 发布于2019-08-30 15:53 / 654人阅读

摘要：盒子模型概念盒子模型又称框模型，包含了元素内容内边距边框外边距几个要素。盒子的包含内容即总宽度很多框架，都会对盒子模型的计算方法进行简化。规定应从父元素继承属性的值一般设置为比较好，符合直觉浏览器间的盒子模型。

盒子模型概念

CSS css盒子模型又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。

外边距的合并

两个上下方向相邻的元素框垂直相遇时，外边距会合并，合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值，如图：

需要注意的是：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

box-sizing属性介绍

box-sizing : content-box|border-box|inherit;

(1) content-box ,默认值，可以使设置的宽度和高度值应用到元素的内容框。盒子的width只包含内容。

即总宽度=margin+border+padding+width

(2) border-box , 设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容

即总宽度=margin+width

很多CSS框架，都会对盒子模型的计算方法进行简化。

(3) inherit , 规定应从父元素继承 box-sizing 属性的值

一般设置为border-box比较好，符合直觉

浏览器间的盒子模型。

（1）ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值。

（2）标准盒子模型与IE模型之间的差异：

标准的盒子模型就是上述介绍的那种，而IE模型更像是 box-sizing : border-box; 其内容宽度还包含了border和padding。解决办法就是：在html模板中加doctype声明。

GPU云服务器云服务器盒子模型比价盒子盒子比价电视盒子

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

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

CSS中盒模型的理解

摘要：如图为了方便大家理解和尝试，我写了一个小放上来方便大家尝试显示盒模型盒模型计算规则元素框的总宽度元素的的左边距和右边距的值的左边距和右边距的值的左右宽度元素框的总高度元素的的上下边距的值的上下边距的值的上下宽度。今天突然看到一篇关于CSS中盒模型的文章，忽然觉得自己竟然遗忘了很多小的地方，所以写一篇文章来记忆一下（摘抄于千与千寻写的CSS盒子模型理解，并在自己基础上添加了一些东西，希望更完...

shmily 2019-04-23 11:49 评论0 收藏0
关于CSS你应该知道的基础知识 - 盒模型篇

摘要：浏览器渲染引擎通过盒模型的方式来布局元素。应用后元素的外边框增加了宽度。应用后元素内的内容和边框之间产生了相应的空间。上面的代码在中的计算结果如下上栗中，我们将盒子四个方向的都设置成了。关于盒模型的高度，可以通过属性来设置。浏览器渲染引擎通过盒模型的方式来布局html元素。我们可以将每一个html元素都看做是一个盒子，每一个盒子都有长和款，多个这样的盒子组成了我们的网页。 Margi...

OnlyLing 2019-08-02 10:13 评论0 收藏0
关于CSS你应该知道的基础知识 - 盒模型篇

摘要：浏览器渲染引擎通过盒模型的方式来布局元素。应用后元素的外边框增加了宽度。应用后元素内的内容和边框之间产生了相应的空间。上面的代码在中的计算结果如下上栗中，我们将盒子四个方向的都设置成了。关于盒模型的高度，可以通过属性来设置。浏览器渲染引擎通过盒模型的方式来布局html元素。我们可以将每一个html元素都看做是一个盒子，每一个盒子都有长和款，多个这样的盒子组成了我们的网页。 Margi...

Jrain 2019-08-30 15:53 评论0 收藏0
关于css margin，你需要知道的一切

摘要：前两个元素之间的是，因为较小的顶部与较大的底部相结合。这是由于两个重叠造成的。同样，这种行为也有一定的逻辑。这意味着在使用百分比时，元素周围的大小都是相同的。为了保证的可读性，本文采用意译而非直译。当我们学习CSS时，我们大多数人学到的第一件事是CSS中盒子的各个部分的细节，这部分通过叫做 CSS盒、模型。盒模型中的元素之一是margin，即盒子周围的透明区域，它会将其他元素从盒子...

FreeZinG 2019-08-30 15:44 评论0 收藏0
关于css margin，你需要知道的一切

摘要：前两个元素之间的是，因为较小的顶部与较大的底部相结合。这是由于两个重叠造成的。同样，这种行为也有一定的逻辑。这意味着在使用百分比时，元素周围的大小都是相同的。为了保证的可读性，本文采用意译而非直译。当我们学习CSS时，我们大多数人学到的第一件事是CSS中盒子的各个部分的细节，这部分通过叫做 CSS盒、模型。盒模型中的元素之一是margin，即盒子周围的透明区域，它会将其他元素从盒子...

libxd 2019-08-26 10:28 评论0 收藏0