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	类似 <