CSS3 – 样式查询表

长度单位

视口百份比 vw (viewport width)

vw 是 CSS3 提出的一种新的长度单位，该长度单位会基于浏览器视囗宽度大小作为百份比

举例：

div{
   /* 宽度会占用浏览器页面总宽度大小的 50% */
    width: 50vw;
}

视口百份比 vh (viewport height)

vw 是 CSS3 提出的一种新的长度单位，该长度单位会基于浏览器视囗高度大小作为百份比

div{
   /* 高度会占用浏览器页面总高度大小的 50% */
    height: 50vh;
}

最大百份比 vmax

在浏览器视口中，取宽度和高度进行对比，谁的值大，就以谁作为基准算百份比

div{
    /* 如果浏览器视口的宽比高大，那么 vmax 就以宽作为基准算50% */
    height: 50vmax;
}

最小百份比 vmin

在浏览器视口中，取宽度和高度进行对比，谁的值小，就以谁作为基准算百份比

div{
    /* 如果浏览器视口的宽比高小，那么 vmin 就以宽作为基准算50% */
    height: 50vmin;
}

盒子模型

盒子计算模式 box-sizing

在以往CSS2中，盒子模型所设置的 width 和 height 设置的都是表示【内容区】的宽和高，而在CSS3 中引入了一种盒子大小的计算模式。

1.box-sizing: content-box (内容盒子)

默认值，也就是说，我们为盒子设置的一切大小，都是以【内容区】为主，如果在盒子中增加【padding内边距】、【border边框】等元素是，其宽度是需要另算的。

2.box-sizing: border-box (边框盒子)

当设置 box-sizing: border-box 时，则告诉浏览器，当前设置的一切大小，都包含了【内边距】、【边框】、【内容区】三个的总和，当【内边距】、【边框】有宽度时，将会压缩【内容区】的空间大小，实现总体大小不变。

自由设定盒子大小 resize

resize 允许用户自由的调整盒子的大小。

举例：

div{
    resize: none | both | horizontal | vertical
}

属性值说明：

盒子阴影 box-shadow

使用 box-shadow 属性为盒子添加阴影。

语法：

box-shadow: h-shadow v-shadow blur spread color inset;

属性值含义：

示例：

/* 写两个值，含义：水平位置、垂直位置 */ 
box-shadow: 10px 10px;

/* 写三个值，含义：水平位置、垂直位置、颜色 */ 
box-shadow: 10px 10px red;

/* 写三个值，含义：水平位置、垂直位置、模糊值 */
box-shadow: 10px 10px 10px;

/* 写四个值，含义：水平位置、垂直位置、模糊值、颜色 */
box-shadow: 10px 10px 10px red;

/* 写五个值，含义：水平位置、垂直位置、模糊值、外延值、颜色 */
box-shadow: 10px 10px 10px 10px blue;

/* 写六个值，含义：水平位置、垂直位置、模糊值、外延值、颜色、内阴影 */
box-shadow: 10px 10px 20px 3px blue inset;

不透明度 opacity

opacity 属性能为整个元素添加透明效果， 值是 0 到 1 之间的小数， 0 是完全透明， 1 表示完全不透明。

opacity 与 rgba 的区别？

opacity 是一个属性，设置的是整个元素（包括元素里的内容）的不透明度。

rgba 是颜色的设置方式，用于设置颜色，它的透明度，仅仅是调整颜色的透明度。

背景

背景图原点 background-origin

说明：设置背景图的时候，背景图的原点从那里开始。

1. padding-box ：从padding 区域开始显示背景图像。—— 默认值

background-origin: padding-box

2. border-box ： 从border 区域开始显示背景图像。

background-origin: border-box

3. content-box ： 从content 区域开始显示背景图像。

background-origin: content-box

背景剪裁 background-clip

作用：设置背景图的向外裁剪的区域。

1. border-box ： 从border 区域开始向外裁剪背景。 —— 默认值

background-clip: border-box

2. padding-box ： 从padding 区域开始向外裁剪背景。

background-clip: padding-box

3. content-box ： 从content 区域开始向外裁剪背景。

background-clip: content-box

4. text ：背景图只呈现在文字上。

background-clip: text

注意：

1.目前为测试阶段，因此需要增加对应浏览器核心标识才能生效

2.需要把文字颜色调为透明才会生效。

背景图片排版 background-size

background-size 是可以让背景图片以不同方式进行排版，当一个盒子中的大小与背景图片中的大小不一致时，可以有多种方式对背景图片进行排版。

参数一：用长度值指定背景图片大小，不允许负值。

background-size: 300px 200px;

作用：强制使背景图片分辩率大小为 300px * 200px

参数二：用百分比指定背景图片大小，不允许负值。

background-size:  100% 100%

作用： 强制使背景图片缩放大小为 100%

参数三：auto 图片大小排版

background-size:  auto;

作用：默认值

参数四：contain

background-size:  contain;

作用：将背景图片等比缩放，使背景图片的宽或高，与容器的宽或高相等，再将完整背景图片包含在容器内，但要注意：可能会造成容器里部分区域没有背景图片。

参数五：cover

background-size:  cover;

作用：将背景图片等比缩放，直到完全覆盖容器，图片会尽可能全的显示在元素上，但要

注意：背景图片有可能显示不完整。—— 相对比较好的选择

background 复合属性

语法：

background: 背景颜色 背景url 是否重复 位置 / 大小 原点 裁剪方式

举例：

/* 背景色：红色、背景图片：url(...) 不重复 原点偏移 背景图大小 背景图原点开始位置 使用内容区裁剪 */
background: red url(...) no-repeat 10px 10px / 100px 100px padding-box content-box

效果：

多背景图

background 可以支持多个背景图，多个背景图使用【,】号区分，可独立设置每一个背景图的属性

示例：

background: url('../images/bg-lt.png') no-repeat left top,
           url('../images/bg-rt.png') no-repeat right top,
           url('../images/bg-lb.png') no-repeat left bottom,
           url('../images/bg-rb.png') no-repeat right bottom;

效果：

边框

边框圆角 border-redius

作用：在 CSS3 中，使用border-radius 属性可以将盒子变为圆角。

基本用法：

/* (上下左右) */
border-redius: 10px;

/* (上左下右）（上右下左) */
border-redius: 10px 10px;

/* (上左）（上右下左）（下右) */
border-redius: 10px 10px 10px;

/* (上左)（上右）（下右）（下左） */
border-redius: 10px 10px 10px 10px;

/* 设置盒子四个角的圆角为10px */
border-redius: 10px;

/* 设置盒子四个角的圆角为盒子大小的10% */
border-redius: 10%;

分开设置每个角的圆角

分开设置的复合属性：

border-raidus: 左上角x 右上角x 右下角x 左下角x / 左上y 右上y 右下y 左下y

边框外轮廓 outline

CSS3 提供了一种不占用空间的类似边框的样式，可以把它看作是盒子向外散发的光边。

基本语法：

outline: 线条宽度 线条类型 线条颜色;

子属性：

outline-width ：外轮廓的宽度。

outline-color ：外轮廓的颜色。

outline-style ：外轮廓的风格。

• none ： 无轮廓
• dotted ： 点状轮廓
• dashed ： 虚线轮廓
• solid ： 实线轮廓
• double ： 双线轮廓

outline-offset 设置外轮廓与边框的距离，正负值都可以设置。

文本

文本阴影 text-shadow

在 CSS3 中，我们可以使用 text-shadow 属性给文本添加阴影。

语法：

text-shadow: h-shadow v-shadow blur color;

注意：text-shadow:none 表示没有阴影。

文本换行模式 white-space

在DIV中，当文本内容发生换行时，对于文本内容中如何显示，CSS3中，我们可以使用 white-space 属性设置文本换行方式。

语法：

white-space: normal | pre | pre-wrap | pre-line | nowrap

属性说明：

本属性可与【文本溢出】结合使用。

文本溢出 text-overflow

在 CSS3 中，我们可以使用 text-overflow 属性设置文本内容溢出时的呈现模式。

语法：

text-overflow: clip | ellipsis

属性说明：

注意：要使得 text-overflow 属性生效，块容器必须显式定义 overflow 为非 visible值， white-space 为 nowrap 值。

文本线修饰 text-decoration

CSS3 升级了text-decoration 属性，让其变成了复合属性。

语法：

text-decoration: text-decoration-line || text-decoration-style || text-decorationcolor

子属性说明：

text-decoration-line 设置文本装饰线的位置

• none ： 指定文字无装饰 （默认值）
• underline ： 指定文字的装饰是下划线
• overline ： 指定文字的装饰是上划线
• line-through ： 指定文字的装饰是贯穿线

text-decoration-style 文本装饰线条的形状

• solid ： 实线 （默认）
• double ： 双线
• dotted ： 点状线条
• dashed ： 虚线
• wavy ： 波浪线

text-decoration-color 文本装饰线条的颜色

文本描边 text-stroke

text-stroke 是 CSS3 提供的用于描边文本的样式，目前文本描边功能能仅 webkit 内核浏览器支持。

语法：

-webkit-text-stroke: -webkit-text-stroke-width -webkit-text-stroke-color

子属性说明：

-webkit-text-stroke-width ：设置文字描边的宽度，写长度值。

-webkit-text-stroke-color ：设置文字描边的颜色，写颜色值。

-webkit-text-stroke ：复合属性，设置文字描边宽度和颜色。

渐变 linear-gradient

CSS3 中新提出了一种背景模式，linear-gradient 线性渐变模式，它可以使盒子背景呈现线性渐变颜色。

linear-gradient 不是一个主属性，是一个用于计算 background-image 属性的子属性值

语法：

background-image: linear-gradient(...);

使用方法：

1.使用默认（从上到下）渐变颜色

background-image: linear-gradient(red,yellow,green);

2.使用方向关键词设置线性渐变的方向

background-image: linear-gradient(to top,red,yellow,green);
background-image: linear-gradient(to right top,red,yellow,green);

3.使用角度设置线性渐变的方向

background-image: linear-gradient(30deg,red,yellow,green);

4.调整渐变的开始结束位置

background-image: linear-gradient(red 50px,yellow 100px ,green 150px);

注意：在使用调整位置功能的渐变时，同时可以使用渐变方向的功能。

径向渐变 radial-gradient

radial-gradient 不是一个主属性，是一个用于计算 background-image 属性的子属性值

语法：

background-image: radial-gradient(...)

使用说明:

1.多个颜色之间的渐变， 默认从圆心四散。（注意：不一定是正圆，要看容器本身宽高比）

background-image: radial-gradient(red,yellow,green);

2.调整渐变圆的圆心位置

background-image: radial-gradient(at right top,red,yellow,green);

3.使用像素值调整渐变圆的圆心位置。

background-image: radial-gradient(at 100px 50px,red,yellow,green);

4.强制调整渐变形状为正圆

background-image: radial-gradient(circle,red,yellow,green);

5.调整径向渐变形状的半径

background-image: radial-gradient(100px,red,yellow,green);
background-image: radial-gradient(50px 100px,red,yellow,green);

6.调整开始渐变的位置

background-image: radial-gradient(red 50px,yellow 100px,green 150px);

7.综合使用

通过使用多个属性结合得出的效果

/*
1.设置圆半径为 x:100px y 50px
2.设置圆心位置在 x:150px y 150px
3.设置渐变色与渐变色所到达的位置
红：第50px半径
黄：第100px半径
绿：第150px半径
*/
background-image: radial-gradient(100px 50px at 150px 150px,red 50px,yellow 100px,green 150px);

重复渐变 repeating-*-gradient

重复渐变可以支持线性渐变（repeating-linear-gradient）和径向渐变（repeating-radial-gradient）

线性重复渐变 repeating-linear-gradient

使用说明：

参数与线性渐变相同

background-image: repeating-linear-gradient(red 50px,yellow 100px ,green 150px);

当设置了渐变的开始与结束坐标时，其多出来的空白位置将会被重复渐变填充。

如 red 50px 中可知，我们的0~49px 是渐变空白，如不使用重复渐变，则0~49px 都为纯红色

green 150px 中可知，我们的 151px~盒子大小 是渐变空白，如不使用重复渐变，则151px~盒子大小都为纯绿色

则在渐变空射处，使用重复渐变会把空白位置填充新的渐变。

径向重复渐变（repeating-radial-gradient）

使用说明：

参数与径向渐变相同

background-image: repeating-radial-gradient(red 50px,yellow 100px,green 150px);

当设置了渐变的开始与结束坐标时，其多出来的空白位置将会被重复渐变填充。

如 red 50px 中可知，我们的0~49px 是渐变空白，如不使用重复渐变，则0~49px 都为纯红色

green 150px 中可知，我们的 151px~盒子大小 是渐变空白，如不使用重复渐变，则151px~盒子大小都为纯绿色

则在渐变空射处，使用重复渐变会把空白位置填充新的渐变。

字体

Web字体

可以通过@font-face 指定字体的具体地址，浏览器会自动下载该字体，这样就不依赖用户电脑上的字体了。

语法（简写方式）

@font-face {
    font-family: "情书字体";
    src: url('./方正手迹.ttf');
}

语法（高兼容性写法）

@font-face {
    font-family: "atguigu";
    font-display: swap;
    src: url('webfont.eot'); /* IE9 */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('webfont.woff2') format('woff2'),
    url('webfont.woff') format('woff'), /* chrome、firefox */
    url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari,Android*/
    url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}

定制字体

中文的字体文件很大，使用完整的字体文件不现实，通常针对某几个文字进行单独定制。

可使用阿里Web 字体定制工具： https://www.iconfont.cn/webfont

2D变换（transform）

2D位移 translate

作用：2D 位移可以改变元素的位置，只能用在块元素上

语法：

transform: translateX(x位移量)
transform: translateY(y位移量)
transform: translate(x位移量, y位移量)
transform: translateX(x位移量) translateY(y位移量)

属性值说明：

.box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

2D缩放 scale

2D 缩放是指：让元素放大或缩小，2D 缩放只能用在块元素上

语法：

/* 倍数是指基于该元素大小的倍数，可以为负数，负数时则表示元素被反向显示 */
transform: scaleX(倍数);
transform: scaleY(倍数);
transform: scale(倍数);

注意：

1. scale 的值，是支持写负数的，但几乎不用，因为容易让人产生误解。

2. 借助缩放，可实现小于12px 的文字。

2D旋转 rotate

2D 旋转是指：让元素在二维平面内，顺时针旋转或逆时针旋转，只能用在块元素上

语法：

transform: rotateZ(角度deg)
transform: rotate(角度deg)

变换原点

元素变换时，默认的原点是元素的中心，使用transform-origin 可以设置变换的原点。

修改变换原点对位移没有影响， 对旋转和缩放会产生影响。

如果提供两个值，第一个用于横坐标，第二个用于纵坐标。

如果只提供一个，若是像素值，表示横坐标，纵坐标取50% ；若是关键词，则另一个坐标取50%

多重变换

transform 中可以接入多个变换，包括 平移translate, 缩放 scale, 旋转 rotate.

transform: translate scale rotate

需要注意的是，rotate 旋转后会改变其坐标系，平移后会改变旋转中心，因此使用多重变指时，应把 rotate 放在最后变换。

transform: translate(100px,100px) scale(0.5) rotate(30deg)

2D扭曲 skew

2D 扭曲是指：让元素在二维平面内被“拉扯”，进而“走形”

语法：

transform: skewX(角度deg)
transform: slewY(角度deg)
transform: slew(x角度deg, y角度deg)

3D变换

前置知识：设置景深

对于浏览器元素的3D变换而言，除了具有X和Y坐标以外，将多出了一个Z坐标，而Z坐标则是垂直于屏屏指向人眼的方向。

我们可以把元素的3D坐标Z轴到元素的距离看作是一种深度，深度越小，说明我们的屏幕离元素的距离越小，当元素发生3D变换时，所产生的【远小近大】的效果就明显，透视效果越明显，看来更加立体。

使用perspective 设置景深

perspective: 500px

• none ： 不指定透视 ——（默认值）
• 长度值 ： 指定观察者距离z=0 平面的距离，不允许负值。

前置知识：开启3D空间模式

浏览器需要开启3D空间模式，才能对元素产生3D透视效果。

transform-style 开启3D 空间

transform-style: preserve-3d

• flat ： 让子元素位于此元素的二维平面内（ 2D 空间）—— 默认值
• preserve-3d ： 让子元素位于此元素的三维空间内（ 3D 空间）

前置知识：透视点位置

所谓透视点位置，就是观察者位置；默认的透视点在元素的中心。

perspective-origin 设置观察者位置

透视点位置设置为 400px 时的情况

透视点位置 Y 设置为 300px 的情况

/* 相对坐标轴往右偏移400px， 往下偏移300px（相当于人蹲下300像素，然后向右移动400像素看元素）
*/
perspective-origin: 400px 300px;

3D位移

3D 位移是在2D 位移的基础上，可以让元素沿z 轴位移

语法：

transform: translateZ( px )
transform: translate3d(x, y, z)

3D旋转

3D 旋转是在2D 旋转的基础上，可以让元素沿x 轴和y 轴旋转

语法：

transform: rotateX( deg )
transform: rotateY( deg )
transform: rotate3d( x, y, z, deg)

3D 缩放

3D 缩放是在 2D 缩放的基础上，可以让元素沿 z 轴缩放

语法：

transform: scaleZ( 倍数 )
transform: scale3d( x倍数, y倍数, z倍数 )

属性值说明：

注意：scale3d的Z轴并不是指元素的【厚】度进行缩放，因为本身元素是2D图形，没有【厚度】可言，因此，Z轴代表的是元素靠近【透视点位置】的数量，可以换算成，当【透视点位置】为 500px 时，scaleZ为4时，则元素将向Z轴往前移动，停留在位置 500px / 4 = 125px 的位置上。

3D多重变换

多个变换，可以同时使用一个transform 来编写。

/* 
1.元素向前移100px
2.元素靠近 3 倍
3.元素以y轴仰视顺时针转40度
 */
transform: translateZ(100px) scaleZ(3) rotateY(40deg);

背部可见性 backface-visibility

使用backface-visibility 指定元素背面，在面向用户时是否可见

• visible ： 指定元素背面可见，允许显示正面的镜像。—— 默认值
• hidden ： 指定元素背面不可见

过渡

过渡可以在不使用 Flash 动画，不使用 JavaScript 的情况下，让元素从一种样式，平滑过渡为另一种样式。

子属性说明：

transition-property 设置需要过渡的属性

作用：定义哪个属性需要过渡，只有在该属性中定义的属性（比如宽、高、颜色等）才会以有过渡效果。

语法：

/* 可以设置多个需要过渡的属性值，或设置为 all 则所有能过渡的值都被设置为过渡 */
transition-property: 属性值1, 属性值2, ... , | all

常用值：

1. none ：不过渡任何属性。

2. all ：过渡所有能过渡的属性。

3. 具体某个属性名，例如： width 、heigth ，若有多个以逗号分隔

transition-duration 设置过渡持续时间

作用：设置过渡的持续时间，即：一个状态过渡到另外一个状态耗时多久。

语法：

/* 可以设置多个需要过渡的持续时间值，或设置为 一个值时 则所有能过渡的值都被设置为相同的过渡时间 */
transition-property: 属性值1持续时间, 属性值2持续时间, ... , | 所有值持续时间

常用值：

•  0 ：没有任何过渡时间 —— 默认值。
•  s 或ms ：秒或毫秒。
• 列表：
• 如果想让所有属性都持续一个时间，那就写一个值。
• 如果想让每个属性持续不同的时间那就写一个时间的列表。

transition-delay 设置延迟时间

作用：指定开始过渡的延迟时间，单位： s 或ms

语法：

transition-delay: 1s;

transition-timing-function 设置过渡过程运动曲线

作用：设置过渡的类型

语法：

transition-timing-function: prop

常用值说明：

• ease ： 平滑过渡 慢 → 快 → 慢 —— 默认值
• linear ： 线性过渡
• ease-in ： 慢 → 快
• ease-out ： 快 → 慢
• ease-in-out ： 慢 → 快 → 慢
• step-start ： 等同于 steps(1, start)
• step-end ： 等同于 steps(1, end)
• steps( integer,?) ： 接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start 或end ，指定每一步的值发生变化的时间点。第二个参数默认值为end 。
• cubic-bezie ( number, number, number, number)： 特定的贝塞尔曲线类型。

复合属性 transition

语法：

/* 持续时间 过渡属性 延迟时间 运动曲线 */
transition: transition-duration transition-property transition-delay transition-timing-function

如果设置了一个时间，表示duration ；如果设置了两个时间，第一是duration ，第二个是delay ；其他值没有顺序要求。

transition:1s all .5s linear;

动画

设置关键帧

CSS3提供一种通过设置关键帧实现动画的样式，可以使用 @keyframes 动画名 定义动画运动关键帧。

/*写法一*/
@keyframes 动画名 {
    from {
        /*property1:value1*/
        /*property2:value2*/
    }
    to {
        /*property1:value1*/
    }
}

/* 写法二 */
@keyframes 动画名 {
    0% {
        /*property1:value1*/
    }
    20% {
        /*property1:value1*/
    }
    40% {
        /*property1:value1*/
    }
    60% {
        /*property1:value1*/
    }
    80% {
        /*property1:value1*/
    }
    100% {
        /*property1:value1*/
    }
}

给元素应用动画

animation-name

作用：给元素指定具体的动画（具体的关键帧）

举例：

/* gpLeft 为自定义动画名，匹配  @keyframes 动画名 */
animation-name: goLeft

animation-duration

设置动画所需时间

举例：

/* 动画持续时间为3秒 */
animation-duration: 3s

animation-delay

设置动画延迟

/* 动画延迟0.5秒后开始 */
animation-delay:  .5s

实例：

.box {
    /* 指定动画 */
    animation-name: testKey;
    /* 设置动画所需时间 */
    animation-duration: 5s;
    /* 设置动画延迟 */
    animation-delay: 0.5s;
}

animation-timing-function 设置动画流动曲线

属性值：

1. ease ： 平滑动画 —— 默认值
2. linear ： 线性过渡
3. ease-in ： 慢 → 快
4. ease-out ： 快 → 慢
5. ease-in-out ： 慢 → 快 → 慢
6. step-start ： 等同于 steps(1, start)
7. step-end ： 等同于 steps(1, end)
8. steps( integer,?) ： 接受两个参数的步进函数。第一个参数必须为正整数，指定
函数的步数。第二个参数取值可以是start 或end ，指定每一步的值发生变化的时间
点。第二个参数默认值为end 。
9. cubic-bezie ( number, number, number, number)： 特定的贝塞尔曲线类型。

举例：

animation-timing-function: ease

animation-iteration-count 指定播放次数

属性值：

1. number ：动画循环次数
2. infinite ： 无限循环

举例：

/* 设置动画播放4次后停止 */
animation-iteration-count: 4

/* 设置动画无限循环播放 */
animation-iteration-count: infinite

animation-direction 指定动画方向

属性值：

1. normal ： 正常方向 (默认)
2. reverse ： 反方向运行
3. alternate ： 动画先正常运行再反方向运行，并持续交替运行
4. alternate-reverse ： 动画先反运行再正方向运行，并持续交替运行

举例：

/* 动画来回交替播放，即 from - to - from */
animation-direction: alternate;

animation-fill-mode 动画停止时的状态

说明：当动画停止播放时，最后一帧应该停留在开始帧还是停留在最后一帧。

属性值：

1. forwards ： 停留在动画最后一帧
2. backwards ： 将停在动画的第一帧

举例：

/* 动画播放完成后直接停留在最后帧 */
animation-fill-mode: forwards;

animation-play-state 动画的播放状态

属性值：

1. running ： 运动 (默认)
2. paused ： 暂停

举例：

animation-play-state: paused;

动画复合属性

animation 是动画的复合属性，它的使用顺序如下：

1.animation-name 动画名
2.animation-duration 持续时间
3.animation-delay 延迟播放时间
4.animation-timing-function 运动曲线
5.animation-iteration-count 播放次数
6.animation-direction 动画方向
7.animation-fill-mode 动画停止状态
8.animation-play-state 播放状态

举例：

/*
1.播放动画名为 goLeft
2.持续时间为3秒
3.延迟0.5秒执行
4.使用均速运动
5.执行2次播放
6.先相反运行回来再交替运行
7.2次播放完成后，停在终点帧
8.设置播放状态
*/
animation: goLeft 3s 0.5s linear 2 alternate-reverse forwards running;

注意：animation-play-state 一般单独使用。

多列布局

作用：专门用于类似于新闻报纸类形的布局样式。

语法：

.box {
  /* 设置三列 */
  column-count: 3
}

当用属性说明：

column-count ：指定列数，值是数字。
column-width ：指定列宽，值是长度，会计算以这样的长度能得出几列文本。
columns ：同时指定列宽和列数，复合属性；值没有数量和顺序要求。
column-gap ：设置列边距，即列与列之间的距离，值是长度。
column-rule-style ：设置列与列之间边框的风格，值与 border-style 一致。
column-rule-width ：设置列与列之间边框的宽度，值是长度。
column-rule-color ：设置列与列之间边框的颜色。
coumn-rule ：设置列边框，复合属性。
column-span 指定是否跨列；值: none 、all 。

媒体查询

媒体查询指的是通过CSS配置，改变浏览器发生某些操作时的样式变化，如浏览器的视口宽高或浏览器发生打印操作时的样式变化。

基本操作

通过CSS 关键词定义浏览器媒体操作

@media xxx {
}

1.如当浏览器发生打印预览操作时，可以使用以下代码控制打印预览的最终效果：

/* 当发生打印预览时，打印预览中的背景图将被去掉，但页面中的样式不变 */
@media print {
  background: none
}

2.如当浏览器发生改变时，可以设置浏览器到达指定大小后所改变的样式

/* 当浏览器的视口宽度刚好达到 800px 时将改变的样式 */
@media (width:800px) {
  ...
}

/* 当浏览器的视口宽度小于 800px 时将改变的样式 */
@media (max-width:800px) {
  ...
}

/* 当浏览器的视口宽度大于 800px 时将改变的样式 */
@media (min-width:800px) {
  ...
}

详情可查看下一节【媒体特性】

媒体类型

在CSS4中，已废弃大部分媒体查询类型，详情看下表

媒体特性

运算符

媒体特性中可以通过运算符进行叠加计算

语法：

/* 判断视口长度在 700 到 800 之间 */
@media (min-width:700) and (max-width:800) {
  ...
}

/* 判断视口长度在 小于 700 和 大于800 之间 */
@media (max-width:700) and (min-width:800) {
  ...
}

/* 判断视口长度在 小于 700 或 大于800 之间 */
@media (max-width:700) or (min-width:800) {
  ...
}

/* 判断视口长度不在 小于 700 或 大于800 之间 */
@media not (max-width:700) or (min-width:800) {
  ...
}

/* 判断视口长度一定在 小于 700 或 大于800 之间 */
@media only (max-width:700) or (min-width:800) {
  ...
}

属性值说明：

and : 并且的意思，即同时需要满足前后两个条件样式才生效

or : 或者的意思，也可以使用【,】来代替，即左右条件其中一个满足样式也生效

not : 否定的意思，即不满足条件样式才生效

only : 肯定的意思，即一定满足条件样式才生效，设置only的目的是为了防止IE类似部分支持的浏览器误判的问题，如下：

/* IE能识别 screen 但不能识别 (min-width:700) */
@media screen and (min-width:700) {
  ...
}

IE会支持识别 @media screen 但不支持识别 and (min-width:700),这就导致了IE错误判断，添加 only 是为了让IE不支持 only 时，对 @media screen and (min-width:700) 样式失效避免误判。

常用阈值

对于需要做响应式网页而言，屏幕的宽度直接影响响应式网页的样式变动，不同宽度的视口屏幕会展示不同的样式

我们一般会把屏幕宽度划分为四个级别，因此们可以对四个不同的屏幕大小作出不同的样式配置：

/* 超小屏幕 */
@media screen and (max-width:768px){
    h1 {
        background-color: orange;
    }
}

/* 中等屏幕 */
@media screen and (min-width:768px) and (max-width:992px){
    h1 {
        background-color: green;
    }
}

/* 大屏幕 */
@media screen and (min-width:992px) and (max-width:1200px){
    h1 {
        background-color: deepskyblue;
    }
}

/* 超大屏幕 */
@media screen and (min-width:1200px){
    h1 {
        backgroundcolor: purple;
    }
}

通过把每个不同屏幕的样式写到不同的css中调用：

<link rel="stylesheet"  href="small.css">
<link rel="stylesheet"  href="middle.css">
<link rel="stylesheet"  href="large.css">
<link rel="stylesheet"  href="huge.css">

也可以在css文件中不设置 @media 媒体关键字，在 <link> 标签上定义 meida 属性：

/* 超小屏幕 */
h1 {
    background-color: orange;
}

/* 中等屏幕 */
h1 {
    background-color: green;
}

/* 大屏幕 */
h1 {
    background-color: deepskyblue;
}

/* 超大屏幕 */
h1 {
    backgroundcolor: purple;
}

在引入css文件中设置 media 属性即可。

<link rel="stylesheet" media="screen and (max-width:768px)" href="small.css">
<link rel="stylesheet" media="screen and (min-width:768px) and (max-width:992px)" href="middle.css">
<link rel="stylesheet" media="screen and (min-width:992px) and (max-width:1200px)" href="large.css">
<link rel="stylesheet" media="screen and (min-width:1200px)" href="huge.css">

BFC

BFC 是CSS3中的隐藏属性，当元素是特定元素，或该元素具有特定属性时，BFC便会开启.

开启BFC的条件

• 根元素，即<html>标签
• 浮动元素，即设置了 float:left | right 的元素
• 绝对定位、固定定位的元素，即设置 position: absolute 或 position: fixed 的元素
• 行内块元素，即设置了 display: inline-block 的元素
• 表格单元格： table 、thead 、tbody 、tfoot 、th 、td 、tr 、caption
• overflow 的值不为 visible 的块元素，即如 overflow: hidden | scroll 等属性的元素
• 伸缩项目，注意，不是伸缩容器，而是作为伸缩容器的子元素，所以即是父元素设置了 display: flex 的
• 多列容器，即设置了 column-count 属性的元素
• column-span 为 all 的元素（即使该元素没有包裹在多列容器中）
• display 的值，即设置为 flow-root 的元素，它本身就是为了设置BFC的display属性值

开启BFC后的效果

1. 元素开启BFC 后，其子元素不会再产生margin 塌陷问题。

前后子元素在父元素中设置外边距，不会让父元素吃掉子元素的外边距功能，而是子元素在父元素里发生外边距。

2. 元素开启BFC 后，自己不会被其他浮动元素所覆盖。

当元素设置浮动后，其它不浮动的元素会向上占领浮动的元素从而发生浮动元素覆盖不浮动的元素，开启BFC后，不浮动的元素会自动排列在浮动元素后面。

3. 元素开启BFC 后，就算其子元素浮动，元素自身高度也不会塌陷。

当所有子元素都发生浮动后，父元素在不设置高度的情况下高度会发生塌陷，但当父元素开启BFC后，解决浮动元素撑开父元素的高度的问题。