CSS布局

1 弹性布局

弹性布局是css3推出的布局方式，低版本的浏览器不支持，所有的移动端都支持

1.1 弹性布局的设置方式

弹性布局只需要给父容器设置display:flex;

1.2 布局内容的设置

1.2.1 flex-direction属性和flex-wrap属性

1. flex-direction属性： 设置 主轴的方向
   属性值：
   row：默认值，主轴为水平方向，起点在左边
   row-reverse：主轴为水平方向，起点在右边
   column：主轴为垂直方向，起点在上边
   column-reverse：主轴为垂直方向，起点在下边

2. flex-wrap属性： 设置子元素是否 换行
   属性值：
   nowrap：默认值，不换行，子元素可能会被压缩
   wrap：换行，行的起点在上边
   wrap-reverse：换行，行的起点在下边

以上两个属性可以合写为flex-flow

flex-flow： flex-direction的值  flex-wrap的值;

1.2.2 其他属性

1. align-content 设置多行元素的 排列方式

   值：
   stretch 默认值，如果子元素没有设置高度，会被拉伸
   flex-start 根据主抽方向排列元素，第二排紧跟第一排，他们之间的缝隙不会被弹性拉伸
   flex-end 根据主抽方向排列元素，第二排紧跟第一排，他们之间的缝隙不会被弹性拉伸，并且他的起始位置在主轴的垂直方向的下边
   space-around 行间距平分
   space-between 第一行和最后一行分别出现在 垂直主轴方向的上边和下边，如果有第三行，则行间距相等

2. justify-content 设置 主轴方向的对齐方式（重要）

   值：
   flex-start：(默认值)从左到右
   flex-end：从右到左
   center：居中
   space-around：在主轴方向把父级整体的尺寸按照子元素的数量平分，并且子元素在平分的尺寸范围内居中
   space-between：
   第一个子元素在主轴起始位置，第二组子元素在主轴结束位置
   如果子元素的数量>=3，则每一个子元素之间的间距相等，第一个子元素在主轴起始位置，最后一个子元素在主轴结束位置

3. align-items:设置 垂直于主轴(Y轴)方向的对齐方式

   值：
   stretch：默认值，如果子元素没有高度，则会被拉伸
   flex-start：Y轴 的起始点，如果子元素没有高度，则不会被拉伸
   flex-end：Y轴 的结束点
   center：垂直居中
   baseline：基线对齐

1.3 弹性布局的子元素设置

1.3.1 设置弹性布局子集内容的属性

order 设置单个弹性布局的顺序,order的值越大，元素越靠后，默认是0

1. flex-grow 设置元素的放大比例，默认值为0，不放大

使用条件是：总宽度小于父元素的在这里插入代码片宽度
元素的最终宽度 = 元素宽度+flex-grow的值/总flex-grow的值*总体剩余宽度

/* 当父元素的宽度大于所有子元素的宽度，设置比例大小 */
        .grow1{
            flex-grow: 1;
        }

2. flex-shrink 设置元素的缩小比例，默认值为1

使用条件是：总宽度大于父元素的宽度
如果值为0，则表示不缩小，保持原宽度

/* 当父元素的宽度小于所有子元素的宽度，设置比例大小 */
        .sh1{
            flex-shrink: 3;
        }

3. flex-basis 设置子元素在父元素的主轴方向上所占空间的大小，他的值可以是具体的值，也可是百分比，默认是auto，auto的含义是遵循给该子元素设置的 width值

/* 设置子元素所占的空间大小(具体的值) */
        .bas1{
            flex-basis: 100px;
        }

1.3.2 三个属性合写

以上三个属性可以合写为： flex：flex-grow flex-shrink flex-basis;
因此默认是：flex：0 1 auto;
后面两个属性不是必写项
可以简写为 flex:flex-grow;
flex:1;

/* 合写 */
        .fl1{
            flex: 1;
        }

align-self 该属性可以设置单个子元素的垂直于主轴方向的对齐方式，他可以覆盖 align-items 设置的方式
align-self的属性值和 align-items相同，意义相同

2 流式布局

流式布局，就是百分比布局

1. 高度的百分比，是基于父元素的百分比进行渲染，因此使用百分比作为高度，他的父级必须定高

2. 特殊属性的百分比
   元素的margin-top，margin-bottom，padding-top，padding-bottom，他们的百分比设置都是基于父元素宽度的百分比

3. line-height 如果设置百分比，不是基于父元素的line-height值，而是基于他自己字号的百分比

2.1 单位

1. em 相对单位，他是父级font-size的倍数
   可以理解为 子级设置长度单位或者尺寸时，可以使用em作为单位
   1em = 父级的font-size
   如果当前元素设置了font-size，则1em = 当前元素的font-size

2. rem 相对单位，在html标签上设置一个font-size 作为整个页面的root，在设置所有标签尺寸的时候，可以直接以html设置的字号大小为根字号，即为1rem
rem常用于移动端开发

3. vh/vw：vh是 view-height 视窗的高度
   1vh = 视窗的高度 * 1% 100vh是一个视窗的高度
   vw是 view-height 视窗的宽度
   1vh = 视窗的宽度 * 1%

4. css的最大最小属性
   min-height：最小高度
   max-height：最大高度
   min-width：最小宽度
   max-width：最大宽度

3 h5新增布局标签

1. header：页面的头部区域，要和head标签区分开
2. footer：页面的底部区域
3. nav：导航区域
4. aside：侧边栏区域
5. section：一个独立的区域，类似div
6. article：一般包含在section中，使用article包裹独立的模块

<header>头部内容</header>
<nav>导航部分</nav>
<section>
     <aside>侧边栏</aside>
     <article>主要内容</article>
</section>
<footer>底部内容</footer>

4 viewport 视窗

用户通过视窗可以看到浏览器渲染的内容
常用于 移动端的布局

通过meta 标签设置

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width：值是正整数，定义视窗的宽度，单位是px，也可以设置他的值是device-width(设备的宽度)，表示视窗的宽度为设备的宽度
height：值是正整数，定义视窗的高度，单位是px，也可以设置他的值是device-height(设备的高度)，表示视窗的高度为设备的高度

initial-scale：范围[0,1]，用来定义初始时候的缩放值

mininum-scale：范围[0,1]，定义最小缩放比例，他的值必须小于或等于 initial-scale的值
maxinum-scale：范围[0,1]，定义最大缩放比例，他的值必须大于或等于 initial-scale的值

user-scalable 设置用户是否能够手动缩放，他的值是 yes/no,默认yes

5 多列布局

css3 中最新给出的多列布局方案，是css布局的一个新的扩展

1. 设置列宽
   column-width：具体值 / auto
   具体值的直接设置元素的宽度
   auto是根据页面的宽度，自定义列宽

/* 分列的宽度 */
            column-width: 200px;

2. 设置列数
   column-count：num
   num是具体的正整数，[1,10]

/* 分列的列数 */
            column-count: 3;

以上两个属性合写：
columns：width count;

/* 合写 */
            columns: 180px 3;

3. 设置列间距
   column-gap：normal /具体数值
   normal 默认值，大小是1em

/* 设置列间距 */
            column-gap: 20px;

4. 设置两列之间的边框
   column-rule 具体设置规则和css中的border一致

/* 设置两列之间的边框 */
            column-rule: 10px #f00 dashed;

5. 设置标题跨列
   column-span：all / none
   只具有两个值
   （1）none表示不跨列
   （2）all表示跨所有列

6 网格布局

网格布局，是css3新出的一种布局方式，常见的适用案例为 九宫格布局

1. 声明网格布局的环境
   display：grid;(最常用)
   display：inline-grid;

2. 设置列
   grid-template-colums设置列
   值是 fr，1fr就是代表一个比例划分
   有几列就可以设置几个fr，每一个fr所占据的 宽度比例为1fr，如果需要设置其他比例的宽度，则可以设置整倍fr
   如：grid-template-colums：1fr 2fr 3fr;
   设置了当前网格为3列，第一列的宽度为1fr，第二列的宽度是第一列的2倍，第三列宽度是第一列的3倍
   有几个fr值，就有几列

还可以直接设置具体宽度
grid-template-colums：100px 100px 200px;
还可以设置 宽度+auto，auto是除了具体宽度列数之外的自适应宽度

也可以 宽度 + fr 组合

3. 设置行
   grid-template-rows值是行高，有几个值，就设置几个行高
   grid-template-rows：100px 200px 300px;
   以上案例的含义是，设置了三行，第一行行高是100px，第二行行高是200px，第三行行高是300px
   如果总行高小于父元素grid的高度，则父级剩余的高度会被剩余的子元素平分

4. 行、列的合写
   grid-template：行 / 列；
grid-template:auto auto auto / 1fr 1fr 1fr ;

   设置列间距
   column-gap: 具体数值
   设置行间距
   row-gap: 具体数值
   合写间距
   gap: row column;

   指定开始行
   grid-row-start:1;从第一行开始跨行
   指定结束行
   grid-row-end：3; 到第三行结束，合并3行
   指定开始列
   grid-col-start:1;从第一列开始跨列
   指定结束列
   grid-col-end：3; 到第三列结束，合并3列

7 css和hack

7.1 css hack

由于不同的浏览器厂商，比如IE、火狐、谷歌、Safari(苹果)等，他们在生产浏览器的时候，会有不同的渲染解决方案，还有不同版本的浏览器也可能对相同的css设置渲染不同的效果，例如 IE6 7 8 9。css hack是浏览器厂商给自己的浏览器专门制定的一套特殊的css指令。可以理解为css hack的目的就是解决不同的浏览器的css兼容问题，当然也可以使用css hack 为不同的浏览器时制定不同的css

7.2 IE的条件注释

[if IE]：只要是IE浏览器都生效
[if lte IE 6]：浏览器的版本小于等于IE6的时候生效
[if lt IE 6]：浏览器的版本小于IE6的时候生效
[if gte IE 6]：浏览器的版本大于等于IE6的时候生效
[if gt IE 6]：浏览器的版本大于IE6的时候生效
[if IE 6]：浏览器的版本等于IE6的时候生效
[endif]：条件注释的结束指令
[if ! IE 6]：浏览器的版本不是IE6的时候生效

7.3 特殊符号 hack

*在 IE10 及其以上生效
- 减号，只对 IE6生效
+ 加号，对IE7生效
_ 下划线，对IE6 7生效
\9 对IE 6 7 8 9 10都生效
\0 对IE8 9 10都生效
\9\0 只对IE9 10生效