布局-将元素以正确的大小摆放在正确的位置。
display 设置元素的显示方式（大小、位置）
display：block 块级元素 默认宽度为父元素宽度、可设置宽高（元素的大小） 换行显示（位置）
div ,p ,h1-h6,ul,form 这些元素默认的都是块级元素。
display：inline 行级元素 默认宽度为内容宽度（文字宽度） 不可设置宽高 同行显示 在行的内部可以换行
span, a, label,cite, em 这些元素默认的都是行级元素。
display：inline-block 默认宽度为内容宽度（文字宽度） 可以设置宽高 同行显示 如果后续元素 超过范围 将整块换行。
input, textarea, select, button 这些表单元素默认的都是 inline-block
diplay：none 设置元素不显示（隐藏 后续元素会替代他的位置） 与 visibility：hidden 的区别（隐藏但是还占原来位置）。
块级元素的水平居中（布局）：{margin：auto; 978px;} {margin: 0 auto;}
居中导航（布局）： 导航栏的居中 无序列表 <ul> display:inline-block 可设置大小的同行显示。
定位 position 设置定位方向
top ，right，bottom，left，z-index -设置其与参照物边距的距离。
如果同时设置 top，bottom 或 left，right 这个元素将被抻开。
z-index:1 z-index:0 (默认是0, 按照文档流的顺序排序） 1将覆盖0，设置元素在z轴上的排序
？是否z-index越大就一定排列在上面 （不一定有栈的概念，如果大z-index的父元素的z-index 小于 小的z-index的父元素的z-index 小的将覆盖大的）
relative相对定位 仍在文档流中 参照物为元素本身 改变元素位置上的层级 是绝对定位的参照物
absolute绝对定位 默认宽度为内容宽度 脱离文档流 参照物为第一个定位祖先/跟元素 （不一定是其父元素） 绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。如下 其参照物 不是container而是html元素的body，如果去掉注释其参照物将是其父元素。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>绝对定位</title> <style> .container{width: 300px;margin: 50px;line-height: 2;border: 1px dashed #aaa;} .sample{background-color: pink;} .sample{position: absolute;} .sample{bottom: 10px;left: -30px;} /*.container{position: relative;}*/ </style> </head> <body> <div class="container"> <div>绝对定位元素的前序元素</div> <div class="sample">sample</div> <div>绝对定位元素的后序元素</div> </div> </body> </html>
eg：轮播头图（布局方式）
fixed 固定定位 默认宽度为内容宽度 脱离文档流 参照物为窗口
eg：固定顶栏（布局方式）
遮罩(布局方式) position：fixed; top 0; left 0; z-index:999; 100%; height:100%
三行自适应布局 顶行 与 底行 固定 滚动条在 中间内容区。（绝对定位元素没有设置宽高，同时设置top 与bottom的 body被抻开）
内容区两列布局（分为主内容区、和边栏） （块级元素在同行显示 并且 在文档流 ？）
用float 浮动
float: left|right 默认宽度为内容宽度、半脱离文档流（对于元素脱离文档流 ，对于内容仍然在文档流里面）、会向指定方向一直移动（一直到不能移动为止）。
float 元素在同一文档流中 父元素中 三个元素都设置float：left; 父元素将没有高度 因为脱离了文档流 父元素没有内容了、三个元素的宽度都为内容宽度、第二个元素移动将被第一个元素挡住，不覆盖。
clear：both| left | right
应用于float元素的后续元素，清除float对后续元素的影响。通常情况下 应用于块级元素 。
两列布局代码：
两列自适应布局 如果父元素变宽 或者浏览器变宽 两列中有一列随着变化
多行自适应 多列自适应 间距自适应 任意对齐 （flex）弹性布局 display:flex;
flex container 弹性的容器 flex item 弹性元素 flex item 的排列方向 为主轴 ： main axis 辅轴 ：cross axis
？弹性容器所有的元素 都是flex item 弹性元素？ 不是
只有弹性容器在文档流中的直接子元素才是弹性元素。
方向 flex-direction :row(默认)左->右， row-reverse 右->左 ，column(从上往下排的)，column-reverse（从下往上排的）
flex-wrap(换行)：nowrap(默认) | wrap | wrap-reverse
flex-flow: <flex-direction||flex-wrap>
order：<interger> 默认是0
弹性 flex-basis :main-size（默认是主轴） | <width> 设置flex item的初始宽/高。
flex-grow :<number> 0(默认) 是元素所能分配到的剩余空间比例。
弹性元素的大小= flex-basis + flex-grow/sum(flex-grow)*remain
flex-shrink :<number> 1(默认值) 与flex-grow类似 分配的是负的剩余空间
flex： <flex-grow>||<flex-shrink>||<flex-basis> 0 1 main-size(默认)
对齐 justify-content 设置main-axis(主轴)方向的对齐方式。
aligin-items:辅轴的对齐方式：like vertical-align
align-self 设置容器上单独的元素的对齐方式，二align-items 设置的是整个容器的对齐方式。他们都是设置辅轴的、值是一样的。
align-content：flex-start | flex-end | center | space-between | space-around | stretch
设置cross-axis(辅轴)上的对齐方式。(行)
eg：三行两列自适应布局