web前端：网页布局【基础布局、响应式布局、栅格布局、表格布局（table）、弹性布局（flex）、网格布局（grid）】

网页布局

• 原因：美观，吸引流量>变现

基础布局

1. 头部

2. 导航

3. 内容

4. 底部

5. h3属性	描述
   text-align: center;	文字水平居中
   vertical-align: middle;	垂直居中
   margin: auto；	容器水平居中

媒体查询

1. 语法：

   • @media [not|only] mediatype and (mediafeature and|or|not mediafeature){选择器{属性}}

   • not：必须指定媒体类型(mediatype)

   • only：指定媒体类型

   • ，（逗号）：

   • and：

2. 多媒体类型：

   • all：所有媒体类型

   • print：打印机

   • screen：电脑、平板、智能手机

   • speech：屏幕阅读器

响应式布局

1. flex：1 33%；+ flex：1 100%；

2. width：calc（100/6*1%）；+ flex：1 auto；

栅格布局

结合响应式布局，如有框架例如bootstrap等有对应的语法

table布局【垃圾，请忽略】

1. display：table；

2. 布局方式：

   • 布局方式一：使用 table 元素及相关元素进行布局。

   • 布局方式二：使用与表格相关的 display 属性值来模拟表格进行布局。

4. display的值	描述
   table	类似 <table>，此元素会作为块级表格来显示。
   inline-table	类似 <table>，此元素会作为内联表格来显示。
   table-row-group	类似 <tbody>，此元素会作为一个或多个行的分组来显示。
   table-header-group	类似 <thead>，此元素会作为一个或多个行的分组来显示。
   table-footer-group	类似 <tfoot>，此元素会作为一个或多个行的分组来显示。
   table-row	类似 <tr>，此元素会作为一个表格行显示。
   table-column-group	类似 <colgroup>，此元素会作为一个或多个列的分组来显示。
   table-column	类似 <col>，此元素会作为一个单元格列显示。
   table-cell	类似 <td> 和 <th>，此元素会作为一个表格单元格显示。
   table-caption	类似 <caption>，此元素会作为一个表格标题显示。

flex布局

1. display：flex；

2. 子元素的float、clear、vertical-aligh(垂直属性)属性将失效

3. 属性：

   1. flex-direction：主轴方向

      • row【默认】：主轴水平，从左到右

      • row-reverse：

      • column：主轴垂直，从上向下

      • column-reverse：

   2. flex-wrap：换行

      • nowrap【默认】：不换行

      • wrap：换行，第一行在上方

      • wrap-reverse：第一行在下方

   3. flex-flow：1+2的简写

      • flex-direction属性值 flex-wrap属性值

   4. justufy-content：主轴对齐方式

      • flex-start：左对齐

      • flex-end：右对齐

      • center：居中

      • space-between：两端对齐，中间间隔都相等

      • space-around：每个项目的间隔都相等，两边间隔是中间间隔一半

      • space-evenly：项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。

   5. align-items：交叉轴对齐

      • stretch【默认】：未设置高度则占满高度

      • flex-start：起点对齐

      • flex-end：终点对齐

      • center：交叉轴中点对齐

      • baseline：项目第一行文字基线对齐

   6. aligh-content：多轴对齐

      • stretch【默认】：轴线占满整个交叉轴

      • flex-start：与交叉轴起点对齐

      • flex-end：与交叉轴终点对齐

      • center：与交叉轴的中点对齐

      • space-between：与交叉轴两端对齐，轴线之间间隔都相等

      • space-around：每根轴线两端间距都相等

      • space-evenly：项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。

4. order：排列顺序，

   • 【默认0】

   • 值越小在前边

5. flex-grow：放大比例，

   • 【默认0】

   • 按比例瓜分剩余空间

6. flex-shrink：缩小比例

   • 【默认1】

   • 如果空间不足，项目按比例缩小

   • 属性为1等比缩小，属性为0不缩小

7. flex-basis：分配多余空间前，项目占据的主轴空间

   • 【默认auto】

   • **%

8. flex：grow+shrink+basis三个属性

   • 【默认0 1 auto】

   • auto：1 1 auto

   • none：0 0 auto

9. align-self：单个项目与其他项目不同的对齐方式，覆盖align-items

   • 【默认auto】：继承父元素的align-items，无父元素，则stretch

   • stretch：未设置高度则占满高度

   • flex-start：起点对齐

   • flex-end：终点对齐

   • center：交叉轴中点对齐

   • baseline：项目第一行文字基线对齐

Grid布局【最强大的css布局方案】

1. display：grid

2. 容器属性：项目属性【子元素】+容器属性【父元素】

   1. 【默认块级元素】，display：inline-grid 设为行内元素

   2. grid-template-columns 列宽（垂直）

      • 划分列，定义列宽

      • 代码：grid-template-columns：10px 10px 10px；

      • 代码：grid-template-columns：33.3% 33.3% 33.3%；

   3. grid-template-row 行高（水平）

      • 划分行，定义行高

      • 代码：grid-template-row：10px 10px 10px；

      • 代码：grid-template-row：33.3% 33.3% 33.3%；

   4. repeat（）函数/方法

      • repeat（重复次数，重复值）

      • 代码：grid-template-row：repeat（3，33.3%）；

      • 还可以作为重复模式

      • 代码：grid-template-row：repeat（2，1 2 3 4）；//值为1 2 3 4 1 2 3 4

   5. minmax（）函数/方法

      • 长度在这个范围内

      • 代码：grid-template-row：1fr 1fr minmax（100px，1fr）；

   6. auto-fill关键字

      • 自动填充：每一行（或每一列）容纳尽可能多的单元格

      • 代码：grid-template-row：repeat（auto-fill，10px）；

   7. fr关键字

      • 片段

      • 代码：grid-template-row：1fr 2fr；//分三份，前者占一份

      • 与绝对长度结合使用

      • 代码：grid-template-row：10px 1fr 2fr；//剩下的宽度分三份，中间占一份

   8. auto关键字

      • 浏览器自己决定宽度

      • 一般来说，auto的宽度是最大宽度，除非min-width大于auto

      • 代码：grid-template-row：100px auto 100px；

   9. 网格线的名称

      • 给网格线起名字，允许同一根线有多个名字，比如 [fifth-line row-5]

      • 代码：grid-template-columns：[a1] 10px [a2] 10px [a3] 10px [a4]；

      • row也一样的

   10. row-gap和column-gap【外边距】

       • 行与行之间的间距

       • 简写：gap：row column；和gap：单个值；

   11. grid-template-areas

       • 区域命名：影响网格线，每个区域起始网格线命名为区域名-start

       • grid-template-areas：'a b c''a b c';

       • grid-template-areas：'a a a''b b b';//合并单元格

       • grid-template-areas：'a . c''a . c';//不被使用

   12. grid-auto-flow放置顺序【主轴方向】

       • 【默认row】先行后列

       • grid-auto-flow：column；//先列后行

       • grid-auto-flow：column dense；//先列后行，填满剩余空间

   13. justify-items和align-items【单元格内容对齐方式】

       • 属性一样

       • stretch：【默认值】拉伸，占满单元格整个高度

       • start：对齐单元格起始边缘

       • end：结束边缘

       • center：单元格内部剧中

       • 简写：place-items：垂直 居中；//一个值就代表两个属性都一样

   14. justify-content和align-content【单元格对齐方式】

       • 属性一样

       • start：对齐单元格起始边缘

       • end：结束边缘

       • center：单元格内部剧中

       • stretch：拉伸，占满整个网格容器

       • space-between：两端对齐，中间间隔都相等

       • space-around：每个项目的间隔都相等

       • space-evenly：项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。

       • 简写：place-content：align justify；

   15. grid-auto-columns和grid-auto-rows自动填充空间

   16. grid-template和grid

       • grid-template是grid-template-columns + grid-template-rows + grid-template-areas

       • grid是grid-template-columns + grid-template-rows + grid-template-areas+grid-auto-rows+grid-auto-columns+grid-auto-fliw

3. 项目属性：

   1. 网格线等同于合并单元格

      • grid-column-start：左边框开始的垂直网格线

      • grid-column-end：右边框开始的垂直网格线

      • grid-row-start：上边框开始的水平网格线

      • grid-row-end：下边框开始的水平网格线

      • 简写：grid-column：起始/结束；

      • 简写：grid-row：起始/结束；

      • 简写：grid-area：row-start column-start row-end column-end；

   2. justify-self和align-self

      • 单元格水平左中右，

      • 垂直的上中下，

      • 但是只用于单个项目