网页布局
什么是网页布局
网页布局是一种定义网站结构的模式（或框架）。
为什么要进行网页布局
良好的布局能给予用户更好的视觉效果。
基础布局
网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。
重置样式
在不同的浏览器中，默认样式会有所不同。css重置样式主要是为了让各个浏览器的css样式有一个统一的基准。我们可以通过重置样式，把浏览器的默认样式全部去掉，设置一个统一的标准。这样，我们的网页页面在不同浏览器下显示的效果就是一样的了。
头部区域
头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的logo。
<header></header>
菜单导航区域
菜单导航条包含了一些链接，可以引导用户浏览其他页面。
<nav></nav>
内容区域
内容区域一般有三种形式：
1列：一般用于移动端。
2列：一般用于平板设备。
3列：一般用于pc桌面设备。
<section></section>
底部区域
位于页面的最底部。
<footer></footer>
媒体查询
媒体查询可以检验很多事情：
viewport(视窗)的宽度与高度;
设备的宽度与高度;
朝向(智能手机横屏/竖屏);
分辨率。
媒体查询语法
媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回true或 false.
多媒体类型
值 描述
All 用于所有多媒体类型设备。
Print 用于打印机
Screen 用于电脑屏幕、平板、智能手机等。
Speech 用于屏幕阅读器。
响应式布局
响应式布局比较有代表性的前端UI框架如Foundation、Bootstrap、E1ement ur 等。
移动设备优先
为了确保适当的绘制和触屏缩放，需要在<head>中添加viewport元数据标签:
<meta name="viewport" content="width=device-width，initial-scale=1.o"
栅格布局
使用@media查询，你可以针对不同的媒体类型定义不同的样式。
超小屏幕（手机，小于768px) ;
小屏幕（平板电脑，大于等于768px)
中等屏幕(桌面显示器，大于等于992px) :
大屏幕(大桌面显示器，大于等于1200px) :
Table布局
两种方式能实现table布局：
1.使用table元素及相关元素进行布局。
2.使用与表格相关的display属性值来模拟表格进行布局。
Flex布局
布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
Flex布局是什么
Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
设置Flex布局后，子元素的float、clear、和vertical-align都会失效。
容器的属性
以下 6 个属性设置在容器上：
flex-direction：决定主轴的方向。
flex-wrap：如果一条轴线排不下，如何换行。
flex-flow：flex-direction 属性和 flex-wrap 属性的简写属性。
justify-content：定义项目在主轴上的对齐方式。
align-items：定义项目在交叉轴上如何对齐。
align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
flex-direction属性
flex-direction属性决定主轴的方向（即项目的排列方向）。
flex-wrap属性
默认情况下，项目都排在一条线（又称轴线）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
它可能取三个值：
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。
flex-flow
flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap。
574
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
