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

时间 2019-11-08

标签理解 css 模型以及使用场景栏目 CSS 繁體版

原文原文链接

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

- 盒模型的组成html

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

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

在html头部有一个<!Doctype 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的属性来完成标准或者怪异模式之间的切换。spa

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .father-box{
      width: 500px;
      background: #0ba1b5;
    }
    .left-box{
      width: 50%;
      padding: 10px;
      height: 100px;
      float: left;
      background: #b23e35;
    }
    .right-box{
      width: 50%;
      padding: 10px;
      float: left;
      height: 100px;
      background:#77b55a;
    }

  </style>
</head>
<body>
<div class="father-box">
  <div class="left-box">left-box</div>
  <div class="right-box">right-box</div>
</div>
</body>
</html>

咱们在浏览器中运行以后发现，想象的很美好结果却并不美好，由于两个子元素宽度超过了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...