移动端前言

一、CSS3新增样式

分栏的列数：

语法：column-count: 4;

分栏的宽度：

语法：column-width: 200px;

分栏的宽度和列数的缩写：

columns: width 5;

注意：缩写时先写宽度，再写列数，宽度和列数之间用空格隔开即可。

分栏与分栏之间的距离：

语法：column-gap: 40px;

案例：

                column-count: 4;
				column-width: 200px;
				/* columns: 200px 5; */
                /* 先写宽度，再写列数 */

效果图：

分栏线的宽度：

语法：column-width: 2px;

分栏线的样式：

语法：column-style:solid;

分栏线的颜色：

语法：column-color: #ada;

分栏线的简写：

columns: 3px solid red;

效果图：

 二、媒体查询

形式：

@media 类型 and 条件{...}

类型的种类有多种，在这里我给大家讲解一种：screen 用于电脑屏幕，平板电脑，智能手机等。

条件就是我们设定的值；

案例：

@media screen and (max-width:500px){
            .box{
                width: 200px;
                height: 200px;
                background-color: #a0d;
            }
        }
@media screen and (min-width:200px) {
            .box{
                width: 150px;
                height: 150px;
                background-color: #dac;
            }
        }

上方针对有屏幕的设备，并且width的值小于或等于500px时，box的属性值才会改变。

媒体查询可以同时使用，但要遵循相关的规则：

像上方的条件是max，倘若width大的放后面小的就会被盖着，从而要大往小写；

如若是条件是min，则要从小往大写，从大往小写的话会覆盖其他效果；

三、单位

单位我们之前学了几种：px、em、%等等；今天我们介绍一下rem。

px        绝对单位        我们设置的大小

em        相对单位        受当前字号大小(父元素)的影响

rem        相对单位        r: root   受根HTML标签里的字号的影响

单位与媒体查询的结合：

css：
@media screen and (max-width:1200px) {
            html{
                font-size: 600px;
            }
        }
        @media screen and (max-width:800px) {
            html{
                font-size: 400px;
            }
        }
        .box{
            width: 1rem;
            height: 1rem;
            background-color: #00d;
        }
html：
<div class="box">
       
    </div>

大家可以复制一下代码运行一下，注意盒子大小的变化以及媒体查询的顺序！

四、盒子模型

盒子模型有两种：标准盒子模型和IE盒子模型（怪异盒子模型）；

标准盒子模型我们都很熟悉，标准盒子模型的大小就是width+padding+border；

而IE盒子模型的大小就是设定的大小，设置padding和border属性值之后盒子的大小不变，内容框变小。

案例：

css：
.box{
				width: 200px;
				height: 200px;
				padding: 10px;
				border: 5px solid #9da;
				background-color: #32CD32;
				/* box-sizing: content-box; */
				/* 默认内容盒，标准盒 */
				box-sizing: border-box;
				/* 怪异盒子 盒子的大小就是设定的大小*/
				
			}
			/* 标准盒模型
			width，height，是内容content区域的大小
			盒子大小= width+padding+border */
html：
<div class="box"></div>

注意观察盒子的大小，我们可以利用IE盒子模型更加方便的设置一些属性！