水平垂直居中、两栏布局、三栏布局、flex布局、常见的块级/行内/空元素、CSS Hack

一、水平垂直居中

1、父元素relative定位，子元素absottet定位（transform）

2、父相子绝加margin auto

3、父相子绝加margin负值（与transform思路一致） 

4、子元素转换为行内块

5、弹性盒子 

 

二、两栏布局

1、 两个盒子，第一个设置固定宽高然后浮动，第二个加overflow:hidden变成BFC清除浮动的影响

2、弹性盒子：一个大盒子内包两个盒子，给大盒子设置display:flex,大盒子内第一个盒子设置固定宽高，第二个盒子高度与其相等，加flex:1

三、三栏布局（两边固定中间自适应）

1、圣杯布局：一个大盒子包3个盒子，中间栏放在最上边，给大盒子设置padding值，值与左右两个盒子的宽相等，给三个盒子设置左浮动，中间的盒子宽度为100%，左边的盒子设置margin-left：-100%，再设置绝对定位，方位词rigth的值为本身的宽度，右边的盒子设置margin-right,值为负本身的宽度

2、 双飞翼布局：dom结构与圣杯布局有一点不同，还是一个大盒子包3个盒子，第一个盒子内再包一个盒子为center，center的父级与left、right是同级，center盒子设置margin-left，margin-right，值为左右盒子的宽度，他的父级和left、right盒子全部设置左浮动，其父级的宽度为100%，左盒子设置margin-left：-100%，右盒子设置margin-left值为自身宽度

四、flex布局

1、概念：弹性容器通过display属性的值为flex，将其定义为弹性容器，采用flex布局元素，称为flex容器，简称容器，它所有的子元素自动成为容器成员，成为flex项目，简称项目

2、容器属性

1）主轴方向：flex-driection

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

2）如何换行：flex-wrap 

• nowrap（默认值）：默认不换行
• wrap：换行，第一行在上
• wrap-reverse：换行，第一行在上

3）主轴方向和换行的复合：flex-flow

    默认：flex-flow：row  nowrap 

4）主轴对齐方式：justify-content

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
• space-evenly：所有间距均相等

 5）交叉轴对齐方式：align-items

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

6）多根轴线时（多行）：align-content

• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
• stretch（默认值）：轴线占满整个交叉轴。

3、项目属性

• order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
• flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
• flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

• 负值对该属性无效。

• flex-basis

  属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

• flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。flex:1布局自适应
• align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

 五、常见的块级/行内/空元素

• 行内元素有：span a b i img input select strong lable u
• 块级元素有：div p h1-h6 ul table form ul ol li dl dt dd…
• 空元素(没有内容)： <br> <hr> <img> <input> <link> <meta>

六、 CSS Hack

1、一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。CSS Hack常见的有三种形式：属性Hack、选择符Hack、条件注释Hack， Hack主要针对IE浏览器

2、浏览器优先级别:FF<IE7<IE6,CSS hack