Css布局技巧
常规游：行级 块级 表格布局 flexbox grid布局 浮动 绝对定位
盒模型：属性：width height border padding margin
Width height属性：指定；取值长度百分数或auto(auto由其他属性确定，百分数相当于容器content box宽度，容器有指定高度百分数才能生效)；
padding(内边踩)属性：padding-top,padding-bottom,padding-left,padding-right； 一个值：四个方向 两个值：上下第一个值，左右第二个值 四个值：上下左右； 可设值或百分比；
border：属性：1.样式border-style：solid实现 dashed虚线 dotted点化线 2.粗细border-width四个方向 3.颜色border-color；
margin：四个方向 margin:auto水平居中 margin collapse：垂直方向边距取两个框较大边距的数据，不是相加； 如上代码 margin:0 auto让框居中 text-align:center让文字居中 width,height设置宽高 border设置粗细实线和颜色
box-sizing:border-box 100%减去padding border的值；
overflow：溢出内容 visible可见 hidden不可见 scroll超出的滚动；
块级block level box:不和其他盒子并列摆放，适用所有的盒模型属性； 块级盒子 body article div main section h1-6 pul li display:block； 块级 创建BFC 根元素；浮动，绝对定位，Inline-block；overflow值不是visible的块盒；display：flow-root；
行级 Inline Level box：和其它行级盒子放在一行或拆开成多行，盒模型中width height不适用； 行级盒子 span em strong cite code display:inline； display:Inline-block行级 可设宽高 作为一个整体不会被拆散成多行；
display属性
- display: inline
- display: inline-block 与
display: inline相比，主要区别在于display: inline-block允许在元素上设置宽度和高度。设置了 display: inline-block，将保留上下外边距/内边距. - display: block 相比于
display：inline-block在元素之后添加换行符
行级 只有行级盒子可创建一个IFC 盒子在一行水平摆放；可换行；text-align水平对齐；vertical-align垂直对齐；避开浮动(float)元素；
排版：盒子从上到下；垂直margin合并；BFC内盒子margin不会与外面合并；BFC不会和浮动元素重叠
Flex box：单一方向布局 grid：二级容器，二维网格display:grid
Position：static默认:静态定位的元素不受 top、bottom、left 和 right 属性的影响。
position: static:的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位；relative偏移，不脱离文档流(使用too left bottom right),不会对其余内容进行调整来适应元素留下的任何空间。；absolute绝对定位,脱离常规游:相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。注意：“被定位的”元素是其位置除 static 以外的任何元素。；fixed相对于视口绝对定位:相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。固定定位的元素不会在页面中通常应放置的位置上留出空隙。
