CSS葵花宝典——盒模型

CSS假定每个元素都会生成一个或者多个矩形框，这称为元素框（规范的将来版本可能允许非矩形框，不过对现在来说，框都是矩形的）。各元素框中心有一个内容区（content area）。这个内容区周围有可选的内边框、边框和外边框。——《CSS权威指南》

任何一个页面，都是由一个一个的盒子构成；而每个元素，其实都是一个矩形盒子，也就是所谓的盒模型；所以，写一个页面，无非就是把这些盒子按照一定方式进行排列，是不很简单——凡是都是盒子

以Google的开发者网站来展示：

先拆分成两个大盒子（红色虚线标准），然后在每个大盒子中又包括很多小盒子（你看，文字也是由矩形框包围起来的），把这些盒子进行布局排版，再加上视觉效果，这个页面就可以写出来了。

盒模型基本结构

扯了这么多，具体看看一个盒子是怎么样的：

修改上面的例子，避免出现滚动条，设置成border-box就好了：

.box{
  box-sizing: border-box; 
}

box-sizing 实战应用

为了避免不必要的麻烦，建议将所有元素都设置成border-box，推荐写法：

html {
  box-sizing: border-box;
}
*, *:before, *:after{
  box-sizing: inherit;
}

注意，是通过为根元素html设置border-box，其他元素继承实现的，而不是像这样：

* {
  box-sizing: border-box;
}

想想区别在哪，有啥好处

解释在这：box-sizing best practices

display

不管是 div 也好， a 标签也好，在页面中都是一个盒模型的实例，但每个盒子因为 display属性不同，又可以分为不同的类别（inline, block, inline-block, table 等），在排版上有各自的特点。

The display CSS property specifies the type of rendering box used for an element. In HTML, default display property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. The default value in XML is inline.——MDN/CSS/display

我们说过，页面中的每个元素都是一个盒子，block、inline 是大多数元素的默认类型。元素以什么样的方式展现出来，不是根据它是什么元素，而是由display属性决定。

举例说明——块级元素、行内元素

常说的块级元素和行内元素实际包含两个方面：

1. HTML的嵌套规则

   一般块级元素可以包含行内元素和其他块级元素，而行内元素内不可嵌套块级元素

2. 用户代理默认display属性值

   W3C为元素指定了默认的display值，用户代理（浏览器）根据W3C的标准，实现默认的样式规则。

   W3C标准：
   

   

   浏览器默认样式

   

   第一个p标签，默认是block。height，width，margin-top，padding-left均有效，单独占一行，注意它的margin-left/right和width的关系！

   第二个p标签，dislplay: inline。height，width，margin-top都无效了

   第三个p标签，display: inline-block。一切正常，而且不换行

   block, inline, inline-block 总结

   block

   • （默认）宽度：等于父元素content的宽度
   • （默认）高度：由子元素高度确定
   • width、height 可设置
   • 单独占一行

   inline

   • 设置width和height无效
   • margin和padding 垂直方向上设置无效
   • 只要宽度足够，从左往右（对于从左往右阅读的语言）挨个排列

   inline-block

   inline-block继承了inline和block的特点，W3chools的总结简直完美：

   An inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element.

   • 可设置width和height
   • margin和padding垂直方向上有效
   • 不换行

   The Display Declaration这篇文章有更多的display属性的演示和说明

   挑战一下

   搞懂 display 和 block, inline, inline-block 后，很多页面你都可以完成了。实现Google开发者网站我们的截图部分：

   建议你拿我们最开始举例的Google开发者网站练手，要求如下：

   • 不允许用浮动
   • 你要解决 inline-block 可能出现的空白问题
   CSS 盒模型 任务

   我这不直接贴代码了，如果实现有问题或者需要参考的，直接联系我就好了

   原文地址：CSS葵花宝典——盒模型-4光年