第三章-流、元素和基本尺寸

• 由于块元素具有换行特性、可以用它清除浮动

.clear:after{
    content:'';
    display:table;
    clear:both;
}

不使用list-item原因：IE11不支持after,before的display为list-item，因为ie11不支持标记盒子;

• width:auto 详解
  四种宽度表现:
  1.充分利用可用空间，比如div、p，叫做fill-available;
  2.收缩与包裹。典型代表就是浮动、绝对定位、inline-block元素或table元素，成为shrink-to-fit。css3中的fit-content指的就是这种包裹性表现。
  3.收缩到最小。最容易出现在table-layout为auto的表格中。
  4.超出容器限制。出现情况：内容很长的连续的英文和数字，或者内联元素被设置了white-space:nowrap，则表现为：“恰似一江春水向东流，流到断崖也不回头。”

• 外部尺寸与流体特性
  以上四种width:auto表现,第一种是外部尺寸表现，其余的都是内部尺寸表现
  1.正常流宽度:尽量避免设置width:100%，利用流的特性自动填满；
  2.格式化宽度：仅出现在绝对定位中，也就是出现在position:absolute和fixed中，默认情况下，绝对定位元素的宽度表现是“包裹性”，宽度由内部尺寸决定。但是，对于非替换元素，当left/right，top/bottom对立方位的属性值同时存在的时候，元素的宽度表现为格式化宽度，其宽度大小相对于最近的具有定位特性的祖先元素计算。

• 内部尺寸与流体特性
  1.包裹性：对于一个元素，如果其display属性是inline-block，那么即使其里面内容再多，只要是正常文本，宽度也不会超过容器。于是，图文混排的时候，我们只要关心内容。除非首选最小宽度比容器宽度还要大，否则我们完全不需要担心某个元素内容太多而破坏了布局。
  包裹性的例子：<button>和<input type="button">，按钮文字越多宽度越宽，但如果文字足够多，则会在容器的宽度处自动换行。input按钮不会换行，因为input标签按钮，默认white-space:pre是不会换行的，需要将pre设置为normal;
  2.首选最小宽度：每个汉字的宽度，或者连续的英文字符单元的宽度，如果想让英文字符和中文一样，每一个字符都用最小宽度单元，可以试试word-break:break-all。类似图片这样的替换元素的最小宽度就是该元素内容本身的宽度。
  3.最大宽度。最大宽度就是元素可以有的最大宽度。“最大宽度”实际等同于“包裹性”元素设置white-space:nowrap声明后的宽度。如果内部没有块级元素或者块级元素没有设置宽度，则最大宽度实际上是最大连续内联盒子的宽度。

• width的作用和细节
  1.宽度分离原则：父元素设置宽度，子元素不设置宽度，只设置margin、padding。子元素会如流水般自动填满父容器。
  2.box-sizing：对于替换元素，尺寸不受display:block水平影响，无法实现尺寸100%适应父容器。像textarea标签又需要padding值，这时候使用box-sizing:border-box是最方便的了。

• 相对简单而单纯的height:auto
  1.为何父级没有具体高度值的时候，height:100%会无效？
  先了解一下浏览器渲染基本原理：首先，先下载文档内容，加载头部的样式资源，然后按照从上而下、自外而内的顺序渲染DOM内容。因此，当渲染到父元素的时候，子元素的width:100%并没有渲染，宽度就是图片加文字内容的宽度；等渲染到文字这个子元素的时候，父元素的宽度已经固定，此时的width:100%就是已经固定好的父元素的宽度。宽度不够怎么办。溢出就好了，overflow属性就是为此而生的。
  为何宽度支持，高度不支持？如果包含块的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为auto关键字。（auto 是无法和百分比进行计算的）。
  但是宽度的解释：如果包含块的宽度取决于该元素的宽度，那么产生的布局在css2.1中是未定义的。

• 如何让元素支持height:100%的效果
  1.设定显式的高度值。如：

html,body{
  height:100%;
}

2.使用绝对定位。

div{
  height:100%;
  position:absolute;
}

区别：绝对定位中即使祖先元素的height计算为auto，也可以生效。而显式则不行。另外绝对定位元素的宽高百分比计算是相对于padding box的，而显式的则相对于content-box;

• min-width/max-width和min-height/max-height二三事
  初始值：min-*:auto; max-*: none
  1.超越!important，超越最大。优先级：min-width > max-width > !important;
  技巧：利用max-height实现展开动画。注意：max-height不能过大，不然动画会有很长的停留时间。