CSS总结（盒子模型）

盒子模型

盒子模型属性看下图就很直白了

• width 和height 设置了内容框的宽/高
• padding 家族属性设置内边距的宽度(别忘了普通属性比如 padding-bottom ，一次设置一个边).
• border 家族属性设置边界的宽度、样式和颜色(许多可用的普通边界属性还有很多)。
• margin 家族属性设置包围CSS盒子外部区域的宽度，这个属性推开布局中其他的CSS盒子

溢流（overflow）

当用绝对的值设置盒子的大小时（比如，固定像素的 width 和 height），内容可能会超出设置的大小，此时内容就会溢流盒子。要控制这时候发生的事情，我们可以使用 overflow 属性。 该属性有几个可能的取值，不过最常用的是：

• auto：如果内容太多，那么超出盒子大小的内容会被隐藏，滚动条显示出来，从而可以让用户滚动看到所有内容。
• hidden：如果内容太多，那么超出盒子大小的内容被隐藏了。
• visible：如果内容太多，超出盒子大小的内容显示在盒子之外（这通常是默认的行为）。

背景剪裁 (Background clip)

盒背景由颜色和图像组成，堆叠在彼此之间(background-color，background-image)。它们被应用于一个盒并在该盒子下画。默认情况下，背景延伸到边界的外边缘。这通常很好，但在某些情况下可能会令人烦恼(如果您有一个平铺的背景图片，您只想扩展到内容的边缘呢?)这种行为可以通过设置background-clip属性。

轮廓(Outline)

盒子的 outline 看起来像边界，但是它不是盒模型的一部分。它表现得像边界，但是是画在盒子之上，不会修改盒子的大小（具体来说，ouline 是画在边界框之外，外边距区域之内）。

设置宽和高的约束

通过属性 min-width、max-width、min-height 和 max-height 实现设置大小约束

width: 70%;
max-width: 1280px;
min-width: 480px;

完全改变盒模型

一个盒子的总宽度是它的width， padding-right，padding-left，border-right和border-left属性之和。 在某些情况下比较麻烦（例如，要是您想要一个宽度为50％的盒子（box），边界（border）和内边距（padding）以像素为单位怎么办？）为了避免这种问题，可以使用属性box-sizing调整盒模型。 用值 border-box，它将盒模型更改为这样新的模型：

我们来看一个生动的例子。 我们将设置两个相同的<div>元素，赋予每个元素相同的width，border和padding。 我们还将使用一些 JavaScript 脚本来打印出每个盒子宽度的计算值（最终屏幕上的像素值）。 唯一的区别是底部的盒子我们给出box-sizing: border-box，顶部的盒子留着默认行为

<div class="one"></div>
<div class="two"></div>

html {
  font-family: sans-serif;
  background: #ccc;
}

.one, .two {
  background: red;
  width: 300px;
  height: 150px;
  padding: 20px;
  border: 10px solid black;
  margin: 20px auto;
}

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

用JavaScript计算两个框的计算宽高值

var one = document.querySelector('.one');
var two = document.querySelector('.two');

function outputWH(box) {
  var width = box.offsetWidth;
  var height = box.offsetHeight;
  box.textContent = 'Width: ' + width + 'px, Height: ' + height + 'px.'
}

outputWH(one);
outputWH(two);

效果：

第一个框的宽度和高度等于content + padding + border。 然而，第二个框的宽度和高度等于通过CSS设置在 content 的宽度和高度。 padding 和 border 并没有添加到总宽度和高度上; 反而，他们占用一些内容的空间，使内容更小，并保持总体尺寸相同。

盒子显示（display）类型

常见的display的类型

display 可以有很多种不同的值, 其中三种常见的值为 block, inline, 和 inline-block.

• 块盒(block box)是被定义为堆放在其它盒子之上的盒子（即盒子之前以及之后的内容出现在不同的行上），并且可以给它设置高度和宽度。上面所述的整个盒模型都适用于块盒。
• 行内盒（inline box）与块盒相反：它跟随文档的文本流堆放（即，它会与周围的文本和其它行内元素出现在同一行，并且其内容会像段落中的文本行一样，随着文本流换行）。宽度和高度设置对行内盒无效；在行内盒上的所有内边距、外边距和边界设置会改变周围文本的位置，但是不会影响周围块盒的位置。
• 行内块盒（inline-block box）介于前两者之间： 它会像行内盒一样，跟随周围的文本流堆放，不会在其前后创建换行；不过，它可以像块盒一样，使用宽度和高度设置大小，并且维护其块完整性 — 它不会跨段落行换行（对于一行文本容纳不下的行内盒，会落到第二行上，因为第一行上没有足够的空间容纳它，并且不会跨两行换行）。

块级元素默认设置为 display: block; ，行内元素默认设置为 display: inline; 。

不常见的display类型

同时， display 属性也有一些不常用的值，在以后你将会遇到。其中一些已经出现了有一段时间，并且可以很好的被支持, 而另一些则比较新，不能够被很好的支持。这些值通常是为了使创建网页/网页应用更简单而被创造出来。最被关注的有这些:

• display: table — 允许你像处理table布局那样处理非table元素，而不是滥用HTML的<table>标签来达到同样的目的。
• display: flex — 允许你处理一些困扰CSS已久的一些传统布局问题，例如布置一系列弹性等宽容器或者垂直居中内容。
• display: grid — 给出一种简单实现CSS网格系统的方式，而在传统上它依赖于一些棘手难以处理的CSS网格框架。