CSS3常用分列与flex弹性布局

        一、分栏（多列）

                1.column-count 规定元素应该被分隔的列数。

                   column-count：number|auto

                2.column-gap 规定列之间的间隔

                   column-gap：length|normal

                3.column-rule 设置所有column-rule-* 属性的简写属性。

                   column-rule-style：设置线型

                      属性值：none 默认；hidden 定义隐藏规则；dotted 点；dashed 虚线； double 双线； groove  3d沟槽效果；ridge 3d脊状效果；inset 3d左上角阴影效果 ；outset 3d右下角阴影效果；

                        注意:3d效果在分栏中当实线处理

                        column-width：设置线宽；

                        column-color：设置颜色；

                        复合写法：column-rule：width style color

                4.column-width 规定列的宽度

                        column-width：length|auto

                5.columns：是column-width和column-count的简写方式 规定设置column-width和column-count的简写属性

         二、flex弹性布局

                CSS3弹性布局（flexible box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备元素拥有恰当的行为的布局方式。

                目的是提供一种更加有效的方式来对一个容器中的子元素进行排列，对齐和分配空白空间。

                主要通过display实现。

                常用属性：

                        1.flex-direction（应用于父元素）

                           flex-direction 指定子元素在父元素容器中的位置。

                                语法：

                                        flex-direction：row|row-reserve|column|column-reserve

                                        参数：

                                                row：横向从左到右，默认值

                                                row-reserve：反转横向排列，最后一项在最前面

                                                column：纵向排列

                                                column-reserve：反转纵向排列，从后往前排，最后一项排在最                                                 上面。                       

                                2.justify-content（应用于父元素）

                                   justify-content

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

                                        参数：

                                                flex-start：紧凑方式左对齐

                                                flex-end：紧凑方式右对齐

                                                center：紧凑方式居中对齐

                                                *space-between：除了第一个和最后一个子元素外，其他元素等分                                                    空白区域。

                                                *space-round：所有子元素等分空白区域

                                3.align-tiems（应用于父元素）

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

                                                参数：flex-start：延纵轴顶端对齐（默认值）

                                                        flex-end：延纵轴底端对齐

                                                        center：延纵轴垂直居中对齐

                                                        baseline：延纵轴基线对齐

                                                        stretch：纵向拉伸对齐

                                 4.flex-grow（应用于子元素）

                                子元素的放大比例，默认值为0，即如果存在剩余空间，也不放大。

                                flex-grow：number；

                                

                                 5.flex

                                        用于指定弹性子元素如何分配空间。

                                        参数：

                                                auto：等价于1 1 auto

                                                initial：等价于0 1 auto

                                                none： 0  0 auto

                                                inherit：从父元素继承

                                tips：

                                flex可以带1-3个参数

                                1）带一个参数

                                        a)无单位，这个数值会被当做flex-grow（放大的值，即占比大）的值

                                        b)带单位，这个数值会被当做flex-basis值（基本宽度值）

                                        c）auto（自动宽度）|initial（初始宽度）|none（无）

                                 2）带两个参数

                                        第一个参数必须是无单位的数值，他会被当做flex-grow的值

                                        第二个参数：

                                                a）无单位，这个数值会被视为flex-shrink（放大的值）

                                                b）带单位，这个数值会被当做flex-basis（基本宽度的值）

                                                c）auto(自动宽度)|initial（初始宽度）|none（无）

                                3）带三个参数

                                        第一个参数必须是无单位的数值，他会被当做flex-grow的值

                                        第二个参数必须是无单位的数值，他会被当做flex-shrink的值

                                        第三个参数必须是一个有效的宽度值（带单位），他会被当做flex-basis                                         的值

                            

        三、响应式布局

                1.响应式布局概念

                        Responsive Design ：实现在不同屏幕分辨率的终端上浏览网页的不同展示方式。

                        通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

                2.响应式布局和自适应布局的区别

                        响应式布局只开发一套代码，通过检测视口的分辨率，针对不同客户端在客户端做代码处理，来展示不同的布局和内容；

                        自适应布局需要开发多套界面，通过检视窗口的分辨率来判断访问的设备是pc还是移动端，从而请求服务层，返回不同的页面。

                        响应式布局等同于流动网格布局，而自适应等同于使用固定割点来进行布局。

                        自适应布局给出了更多的设计空间，只用考虑几种不同的状态就可以：而响应式布局要考虑上百种不同的状态虽然差异较小但也要考虑。

                        总而言之，响应式布局比自适应布局要简洁。

                3.响应式布局开发实现方法

                        1）媒体查询

                        2）百分比查询

                        3）rem布局（相对于根节点（元素）html中的字号布局）

                        4）视口单位布局（vw/vh）

                4.响应式设计步骤

                        1）设置meta标签

                        2）通过媒体查询来设置样式

                        3）设置多种视图的宽度

                                a）宽度需要使用百分比/rem等

                                b）处理图片缩放

                                c）其他属性处理：如pre/ifram/video等，都要缩放其窗口大小，table，建议

不要增加padding属性，低分辨率下要使用内容居中操作

         四、媒体查询（一般由框架实现）

                步骤：

                        1）设置meta标签

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

                2）设置IE渲染方式默认为最高版本
                <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"><!-- 这是设置ie渲染方式 -->
                <!-- 以上代码表示如果浏览器有chrome插件，将以chrome提供的V8引擎渲染页面；如果没有，将以IE的最高版本渲染页面。 -->

                3）引入兼容的JS文件
            <!-- [if it IE 9] -->
            <script src="https://oss.maxcdn.cm/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.cm/libs/respond.js//respond.min.js"></script>
            <!-- 因为IE8及以下版本既不支持html5也不支持CSS3 Media，所以我们需要加载JS文件来处理这个兼容。 -->
            <!-- 上面的代码是一个注释语句，也就是说，IE9及以上版本不会执行这个代码 -->
            <!-- endif -->

               4)进入css3提供的媒体查询(根据不同的屏幕分辨率会显示不同的内容)
                   a）引入外部css文件时使用
                <link rel="stylesheet" href="screen480.css" media="screen and (max-width:480px)" /><!-- 最大不超过480px -->
                <link rel="stylesheet" href="screen800.css" media="screen and (min-width:480px) and (max-width:800px)" /><!-- 介于480和8                    00之间 -->
                <link rel="stylesheet" href="screengt800.css" media="screen and (min-width:800px)"/><!-- 最小是800px -->
                
                设备：
                    all：所有设备
                    screen：PC端显示器
                    print：打印机或打印预览图
                    handheld：便携设备
                    TV：电视
                    speech：音频合成器
                    braille：盲人（点触）设备
                    embossed:盲人打印机
                    projection：投影设备
                    tty：固定密度字母栅格设备

 注：此link链接中的css样式可以由自己设置，实例里的仅仅是将body背景改成了不同的颜色

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

 媒体查询实现pc端和移动端不同的分辨率公用一套代码有不同的显示的效果实例。

        1.实现pc端的样式效果

         2.实现移动端效果

---

主体代码