CSS3布局

1、多列（分栏）
column-count 规定元素应该被分隔的列数（栏数）

column-count:number | auto

column-gap 规定列之间的间隔

column-gap:length | normal;

column-rule 设置栏间分隔线

column-rule-style：设置线型
	属性值：none 没有分割线
			hidden 隐藏线
			dotted 点线
			solid 实线
			double 双线
			groove 3d沟槽效果
			ridge 3d脊状效果
			inset 3d左上阴影效果
			outset 3d右下阴影效果
column-rule-width：设置线宽
column-rule-color：设置分隔线颜色
复合写法：column-rule:线宽 线型 颜色			

column-width 规定列的宽度

column-width:length | auto

colums 规定设置 column-width 和 column-count 的简写属性

columns:width count

2、flex布局
flexbox弹性布局，可以适应不同屏幕大小以及设备
目的：提供一种更加要有效的方式对一个容器中的子元素进行排列、对齐和分配空白空间

flex-direction 指定弹性子元素在父容器中的位置。此属性作用于父容器

flex-direction：
	属性值：
			row 横向排列，从左到右排列
			row-reverse 翻转横向排列，从右往左排列
			column 纵向排列
			column-reverse 翻转纵向排列，从后往前排，最后一排在最上面

justify-content 把弹性项沿着弹性容器的主轴线对齐

justify-content：
	属性值：
		flex-start 紧凑方式左对齐
		flex-end 紧凑方式右对齐
		cenetr 紧凑方式居中对齐
		space-between 除了第1个和最后1个子元素外，其他子元素等分空白区域
		space-around 所有子元素等分空白区域

align-items 子元素在纵轴方向上的对齐方式，此属性作用于父容器

align-items：
	属性：
		flex-start 沿纵轴顶端对齐
		flex-end 沿纵轴底端对齐
		center 沿纵轴垂直居中对齐
		baseline 沿纵轴基线对齐
		stretch 纵向拉伸对齐

flex-grow 子元素的放大比例，默认0，即如果存在剩余空间，也不放大。此属性作用于子元素

flex-flow：number

flex用于指定子元素如何分配空间

flex：
	属性值：
			auto 等价于 1 1 auto
			initial 等价于 0 1 auto
			none 等价于 0 0 auto
			inherit 从父元素继承
flex可以带1-3个参数
	带一个参数
		无单位，会被当作flex-grow的值 有单位，会被当做flex-basis的值
		auto（自动宽度）| initial（初始宽度） | none（无）
	带两个参数
		第一个参数必须无单位，被当作flex-grow的值
		第二个参数无单位，被当作flex-shrink（收缩比率）的值
		第二个参数有单位，被当作flex-basis（基本宽度）的值
	带三个参数
		第一个参数必须无单位，被当作flex-grow的值
		第二个参数必须无单位，被当作flex-shrink（收缩比率）的值
		第三个参数必须是一个有效的宽度值（带单位），被当作flex-basis（基本宽度）的值

3、响应式布局
（1）在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验

（2）响应式布局和自适应布局的区别：
响应式布局之开发一套代码，通过检测视口分辨率，针对不同客户端做代码处理，来展示不同的布局和内容
自适应需要开发多套界面，通过检测视口的分辨率，来判断当前访问是PC端、平板、手机等，从而请求服务层，返回不同的页面
响应式布局等同于流动网格布局，自适应等同于使用固定分割点来进行布局。
自适应布局给出了更多的设计空间，只需要考虑几种不同的状态就可以了；而响应式布局需要考虑上百种不同的状态，而然有些状态差异较小，但也要考虑。

（3）响应式开发实现方法
（a）媒体查询
（b）百分比布局
（c）rem布局（相对于HTMl中的字号布局）
（d）视口单位布局(vw/vh)

（4）响应式布局步骤
（a）设置meta标签
（b）通过媒体查询来设置样式
（c）设置多种视图的宽度（i、宽度需要使用百分比/rem/vm&vh，ii、处理图片缩放，iii、其他属性处理，如pre、iframe、vedio都要缩放大小，table建议不要增加padding属性，低分辨率下要使用内容居中操作）

4、媒体查询
步骤：
（1）设置meta标签

  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximun-scale=1.0,user-scale=no">
  以上标签内容只能被移动设备识别
  viewport：视口（移动端）
  width=deivce-width 宽度等于当前设备的宽度
  initial-scale=1.0 初始缩放比例（默认为1.0）
  maximun-scale=1.0 允许用户缩放的最大比例（默认为1.0）
  minimun-scale=1.0 允许用户缩放的最小比例（默认为1.0）
  user-scalable=no 用户是否可以手动缩放（默认为no）

（2）设置IE渲染方式默认为最高版本

<meta http-equiv="x-ua-compatible" content="IE=Edge,chrome=1">
以上代码表示如果浏览器有chrome插件，将以chrome提供的V8引擎渲染页面；如果没有，将以IE的最高版本渲染页面。

（3）引入兼容的JS文件

  <!--[if lt IE 9]
    <script src="httpss://oss.maxcdn.cm/libs/html5shiv/3,7,0/html5shiv.js"></script>
    <script src="httpss://oss.maxcdn.cm/libs/responed.js/3,7,0/html5shiv.js"></script>
      [endif]-->
      
因为IE8及以下版本不支持html5，也不支持css3 media，所以需要加载js文件来处理这个兼容
以上代码是一个注释语句，IE9以上的版本不会编译这几行代码

（4）进入css3提供的媒体查询
（a）引入外部css文件

 <link rel="stylesheet" href="screen480.css" media="screen and (max-width:480px)">
 屏宽为480以下时加载此css文件
 <link rel="stylesheet" href="screen 800.css" media="screen and (min-width:480px) and (max-width:800px)">
 屏宽为480-800时，加载此css文件
 此方法实际开发中最好不要用
 设备：
 	all 所有设备
 	screen PC端显示器
 	print 打印机或打印预览图
 	handheld 便携设备
 	tv 电视机
 	speech 音频合成器
 	braille 盲人点触设备
 	embossed 盲人打印机
 	projection 投影设备
 	tty 固定密度字母栅格设备
 	only 用来排除不支持媒体查询的浏览器或设备

（b）在style标签中用@media定义

@media screen and (max-width: 480px) {
    .menu{
        display: none;
    }  
   屏幕宽度小于480时，采用下面的样式

5、web字体
开发中引入外部字体

    @font-face {
      font-family: 字体名;
      src: url("字体文件") format("字体文件格式以处理浏览器兼容");
    }
可以同时引入多个字体文件，字体一样，文件拓展名不一样，目的是为了处理浏览器兼容

6、iconfont图标字体
由阿里巴巴提供的一种图标字体
官网：iconfont.cn