我理解的css盒模型以及使用场景

icyfire 发布于2019-08-30 15:55 / 1365人阅读

摘要：在中我们可以通过设置的属性来完成标准或者怪异模式之间的切换。设为之后，和的厚度可以随意调，并不会溢出父元素。

- css盒模型是什么
网页设计中css技术所使用的一种思维模型

- 盒模型的组成

- 盒模型的两种标准（在不考虑css3的情况下）

两种模型唯一的差异就在元素宽高度的定义
w3c标准模型的元素宽高＝内容（content）的宽高
IE模型的元素宽高＝内容（content）＋填充（padding）＋边框（border）的总宽高

在html头部有一个声明，浏览器会根据这个声明来判断文件是什么类型的，也会根据这个声明来解析文件

当我们写了doc声明的时候，无论哪种内核的浏览器都会解析为标准模型，元素宽度＝content的宽度，即当我们设置width：100px的时候，这个宽度指的就只是content的宽度
总宽度＝我们设置的width＋padding＋border

当头部的doc声明缺失的时候，部分ie内核的浏览器则会触发ie模式即怪异模式（ie6，7，8）width＝content＋padding＋border
总宽度＝width

- 为什么会出现不同模型

当年微软的IE浏览器占据超过80%市场份额的时候，想自己独立制定一套浏览器标准，其中就包括IE的盒模型，但是有很多公司不同意IE的做法，他们遵循的是W3C的标准来定制浏览器，也就造成了现在浏览器不同的CSS盒模型，但是仍有很多老网站采用的是老IE的标准(怪异模式)，因此很多浏览器保留了IE的怪异模式。

- box-sizing
在CSS3中我们可以通过设置 box-sizing的属性来完成标准或者怪异模式之间的切换。

（1）box-sizing ： content-box 采用标准模式也是默认样式

（2）box-sizing： border-box 采用ie怪异模式

- content-box的缺点
目前任何浏览器默认使用的都是content-box，但是这个内容盒子有一个缺点，举个栗子
假设我们想要两个子容器float:left，宽度各50%，然后给一点padding，最后让子容器并排充满父容器，代码如下




  
  Title
  



  left-box
  right-box

我们在浏览器中运行之后发现，想象的很美好结果却并不美好，因为两个子元素宽度超过了50%，导致了折行，于是宽度就不能设置为50%了，只能将宽度减去padding的值，在这种时候，border-sizing就派上用场了

了解border-sizing
border-sizing是css3新增的声明，很多开发者可能都不曾用过，既然标准模型诞生的早，又叫标准模型，为什么还要出现border-sizing呢

border-sizing的优点
border-sizing的诞生就是为了解决content-sizing的缺点，border－sizing意味着子容器的padding和border厚度都算在50%内，这样你就可以随意修改padding和border的值，而不用担心父容易被撑爆

border-sizing的兼容性
ie8也支持该属性，所以不用担心兼容性问题

border-box的使用场合
目前最流行的css框架几乎都采用了border－sizing，框架想要具备栅格系统，肯定要用border－sizing
通常情况下你只需要在必须使用border－sizing元素的身上使用这个属性，其他元素都保持content－sizing就好了

子元素有padding和border，或者至少有其一，并且需要给子元素设定100%宽度（或者50%宽度等等），这时候显然需要border-box。设为border-box之后，padding和border的厚度可以随意调，并不会溢出父元素。如果是content-box，那么，宽度必然会溢出，而且，为了不溢出，你设定子元素的宽度就只能是一个定值，或者是一个计算值（比如calc(100%- 20px)）。

由于之前一直对于css盒模型的理解模棱两可，所以最近趁有时间查了很多相关文章，归纳了以上内容终于搞懂了这个难啃的骨头，参考的资料有以下几篇文章，感兴趣的可以自己查阅，由于自己也是边理解边总结的内容，如果文章中有什么不对的地方还请大家指正。
https://blog.csdn.net/qq_3190...
https://www.cnblogs.com/cheng...
https://www.jianshu.com/p/006...

云服务器 GPU云服务器盒模型盒模型html吗简述html盒模型 redis的使用场景

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

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

深入理解盒模型与BFC

摘要：标准盒模型与盒模型开发者们都知道，由于历史遗留问题与既定标准的发展，存在着两个盒模型。即的标准盒模型以及的怪异盒模型。在中，可以用去定义元素的盒模型。比较这两个盒模型的差异之前，我们先来看一张图先不讨论宽高，我们把一个元素的组成分为。标准盒模型与IE盒模型开发者们都知道，由于历史遗留问题与既定标准的发展，存在着两个css盒模型。即W3C的标准盒模型以及IE的怪异盒模型。在css中，...

gself 2019-08-29 17:14 评论0 收藏0
CSS常见问题小结

摘要：常见问题小结一行内样式内联样式外部样式行内样式代码写在具体网页中的一个元素内比如一般不需要担心样式优先级与样式覆盖在制作页面的时候需要为很多的标签设置属性，所以会导致页面不够纯净，文件体积过大不利于，后期维护成本高。 CSS常见问题小结一、行内样式、内联样式、外部样式行内样式：代码写在具体网页中的一个元素内；比如：一般不需要担心样式优先级与样式覆盖在制作页面的时...

ivyzhang 2019-08-30 10:48 评论0 收藏0
【前端芝士树】详解CSS盒模型、BFC、OffsetWidth&ClientWidth&am

摘要：提供了糟糕的支持，而虽然接近标准，但依旧未能完全正确的支持标准。尽管修复了许多的问题，但是依然延续实现中的其它故障主要是盒模型问题。因此大部分的声明将触发严格模式即依据标准的规则渲染网页。深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文将从盒模型开始，一步步涉及一些常见的前端笔试和面试点主要参考自第一篇文章，然而笔者在读的时...

binta 2019-08-29 16:13 评论0 收藏0
CCS 盒模型分析

摘要：基本概念页面中的每个元素都可以看成一个盒子，盒子里面可以装其他盒子，层层嵌套。标签就是最外面的大盒子。每个盒子由内向外分别是。分类盒模型有两种，标准盒模型和盒模型。基本概念页面中的每个元素都可以看成一个盒子，盒子里面可以装其他盒子，层层嵌套。html 标签就是最外面的大盒子。每个盒子由内向外分别是 content, padding, border, margin 。 showImg...

Jochen 2019-08-30 15:56 评论0 收藏0