深入CSS-001

啥是“流”

流实际上是CSS中的一种基本的定位和布局机制

啥是流体布局

指的是利用元素流的特性实现的各类布局效果。因为流本身具有自适应特性，所以流体布局也具有自适应性 注意：流的特性不适用于table标签

块级元素

有div、li、table等 注意：块级元素和display是block的元素不是一个概念 块级元素独占一行的特性，导致理论上都可以配合clear属性清除浮动带来的影响

标记盒子

list-item本来是没有的圆点那些东西，但是列表需要有，就在list-item外面添加了附加盒子

inline-block的原理

通过两个盒子构成，外面的盒子负责处理是一行还是换行，内部盒子负责宽高和内容的显示

深入width：auto

width的默认值是auto，有4种不同的宽度表现 1、可充分利用空间 2、收缩与包裹，典型代表如浮动、绝对定位等 3、收缩到最小 4、超出容器限制 注意：布局应使用无宽度布局，可以减少代码、减少计算、减少维护，避免由于宽度改变重新运算宽度 对于一个元素，如果其display属性值是inline-block，那么即使其里面内容再多，只要是正常文本，宽度也不会超过容器 按钮就是CSS中极具代表性的inline-block元素，具体表现为：按钮文字越多宽度越宽（内部尺寸特性），但如果文字足够多，则会在容器的宽度处自动换行（自适应性） 按钮最大宽度就是容器的240像素

首选最小宽度

由于换行等问题，CSS的设计者让首选最小宽度不会打断整个文字 东亚文字：最小宽度为每个汉字的宽度 西方文字：一般会终止于空格、短横线、问号等非英文字符

盒尺寸

CSS流体布局下的宽度分离原则：就是CSS中的width属性不与影响胯宽度的padding/border属性共存 具体写法是width独立占用一层标签，而padding、border、margin利用流动性在内部自适应性呈现

.father {
  width: 204px;
}

.child {
  border: 1px solid;
  padding: 20px;
}

这样写就可以得到距离边框20像素的内容

box-sizing的作用

盒尺寸是改变了width作用的盒子，在使用box-sizing之后，就可作用到其他盒子，如content-box、padding-box等

深入height

CSS中默认流是水平方向，宽度是稀缺的，高度是无限的

height：100%

对于width属性，就算父元素width为auto，其百分比也是支持的，但是对于height属性，如果父元素height为auto，只要子元素在文档流中，其百分比就完全被忽略 不了解就会写成这样（我也写出过这样的问题），不会有任何效果

div {
  width: 100%; /*多余的*/
  height: 100%; /*无效的*/
  background-color: blue;
}

原因是对于普通的文档流，百分比高度值要想起作用父级必须要有个可以生效的高度值

height：100%无效的原因

如果包含块的高度没有显式指定，并且该元素不是绝对定位，则计算值为auto

如何让元素支持height：100%

1、设定显示高度值 2、使用绝对定位，position：absolute

最大最小宽高

min-width/max-width出现的场景一定是自适应布局或者流体布局 为了避免图片在移动端展示过大影响体验，常常会有max-width限制 强制height为auto可以确保宽度不超出同事使图片保持原来的比例 max-width和max-height的默认值是none，min-width和min-height默认值是...... 超越!important指的是max-width会覆盖width