CSS3-简单介绍

02-CSS3

1CSS3简介

如同人类的的进化一样，CSS3是CSS2的“进化版本，在CSS2基础上，增强或新增了许多特性弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。

1.1CSS3的现状

1、浏览器支持程度差，需要添加私有前缀

2、移动端支持优于PC端

3、不断改进中

4、应用相对广泛

-webkit-border-radius radius半径

根据不同的内核，一些私有属性的css前缀不一样

Gecko内核

WebKit内核

Css前缀为"-moz-"

css前缀为"-webkit-"  火狐浏览器

Comodo Drangon(科摩多龙),苹果，搜狗高速浏览器3，快快浏览器，枫树浏览器，云游浏览器，360极速浏览器，世界之窗极速版，SRWare lron，猎豹浏览器，RockMelt，QQ浏览器Presto内核Trident内核css前缀为"-0-"css前缀为"-ms-Opera(欧朋),NDSBrowser

IE，360极速浏览器，猎豹安全浏览器，傲游浏览器，百度浏览器，世界之窗浏览器,2345浏览器,腾讯T,淘宝浏览器,采编读浏览器，搜狗高速浏览器，阿云浏览器，瑞星安全浏览器，Slim Browser，GreenBrowser、爱帆浏览器，115浏览器，155浏览器,114浏览器，N氧化碳浏览器,糖果浏览器,彩虹浏览器，瑞影浏览器，勇者无疆浏览器,闪游浏览器,蚂蚁浏览 器,飞腾浏览器，速达浏览器,佐罗浏览器，海豚浏览器(iPhone/iPad/Android)，UC浏览器Trident内核css前缀为"-khtml-":苹果浏览器之前的版本，后改为WebKit内核“因不同浏览器，版本原因，内核数量不一样，所以以上内核说明浏览器会出现多次,详见百度

百科中浏览器内核一文。

1.2 如何对待

1、坚持渐进增强原则

2、考虑用户群体

3、遵照产品的方案

4、听Boss的

2准备工作

2.1统一环境

由于CSS3兼容性问题的普遍存在，为了避免因兼容性带来的干扰，我们约定统一的环境，以保证学习的效率，在最后会单独说明兼容性的问题。

1、Chrome浏览器version46+ 2、Firefox浏览器firefox 42+

2.2如何使用手册

学会使用工具，可以让我们事半功倍

[]表示全部可选项 padding

||表示或者

|表示多选一

?表示0个或者1个

*表示0个或者多个

{}表示范围

学会查看手册，培养自主学习能力。

3 基础知识

3.1选择器

CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容

3.1.1属性选择器

其特点是通过属性来选择元素，具体有以下5种形

式

表示存在attr属性即可

1、E[attr]

div[class]

表示属性值完全等于va1;

2、E[attr=val]

div[class=mydemo]

1表示的属性值里包含Va]字

符并且在“任意”位置

div[class\*=mydemo]

4、E[attr^=val]表示的属性值里包含val字

符并且在“开始”位置;

div[class^=mydemo]

5、E[attr$=val]表示的属性值里包含val字

符并且在“结束”位置;

div[class$=demos]

3.1.2伪类选择器

除了以前学过的:link、:active、:visited、:hover，CSS3又新增了其它的伪类选择器

1、以某元素相对于其父元素或兄弟元素的位置来获取

无素的结构伪类

重点理解通过E来确定元素的父元素

E:first-child第一个子元素

E:last-child最后一个子元素

E:nth-child(n)第n个子元素，计算方法是E元素的全部兄

弟元素;

div>ul>li:nth-child(3){

color: deeppink;

第三个元素

E:nth-last-child(n)同E:nth-child(n)相似，只是倒着计

算:

div>ul>li:last-child(2){

color: deeppink;

n遵循线性变化，其取值0、1、2、3、4、… 但是当

n<=0时，选取无效

选中所有的奇数的1i

li:nth-child(2n-1){

color: red

选中所有的7 的倍数的li

li:nth-child(7n){

color: red;

选中前面五个

li:nth-child(-1n+5){

color: red;

选中后面五个

li:nth-last-child(-1n+5){

color: red;

}

所有的偶数

li:nth-child(even){

color:red

所有的奇数

li:nth-child(odd){

color :blue

n可是多种形式:nth-child(2n)、nth-child(2n+1)、nth-

child(-1n+5)等;

E:empty选中没有任何子节点的E元素;(使用不是非常广泛)

没有任何的子元素，包括空格,

2、目标伪类

E:target 结合锚点进行使用，处于当前锚点的元素会被选中;

<li><a href="#title1">CSS(层叠样式表)</a></li>

<h2 id="title1">CSS(层叠样式表)</h2>

h2:target{

color:red;

3.1.3 伪元素选择器

重点:E::before 、E:.after

是一个行内元素，需要转换成块元素

E:after、E:before在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、E:before会被自动识别为E..after、E::before，按伪元素来对待，这样做的目的是

用来做兼容处理

E:after、E:before后面的练习中会反复用到，目前只需要有个大致了解

E:.first-letter文本的第一个字母或字(如中文、日文韩文等);

案例:首字下沉

E:.first-line 文本第一行;文本第一行高亮.

E..selection 可改变选中文本的样式;

":与"…”区别在于区分伪类和伪元素

关于before和after

CSS2中 E:before或者E:after，是属于伪类的，并且没有伪元素的概念

CSS3中 提出伪元素的概念 E::before和E::after，并且归属到了伪元素当中，伪类里就不再存在E:before或者E:after伪类;

3.2 颜色

一种新的颜色的表示方式

rgba(255,0,0,0.1)

RGBA是代表Red(红色)Green(绿色)Blue(蓝色)

和 Alpha的色彩空间。虽然它有的时候被描述为一个颜色空间

新增了RGBA、HSLA模式，其中的A表示透明度通道，即可以设置颜色值的透明度，相较opacity，它们不具有继承性，即不会影响子元素的透明度

Red 、Green 、Blue 、AlphaRPRGBAHue 、Saturation 、Lightness 、AlphaRPHSLA

R、G、B 取值范围0~255H色调取值范围0~360，0/360表示红色、120表示绿

色、240表示蓝色

S 饱和度取值范围0%~100%

A透明度 取值范围0~1

关于透明度:

background-color:hsla(0,23%,56%,1)

1、opacity只能针对整个盒子设置透明度，子盒子

及内容会继承父盒子的透明度;

2、transparent不可调节透明度，始终完全透明

RGBA、HSLA可应用于所有使用颜色的地方

案例:

1:opacity 设置透明度，只能针对整个盒子设置

透明度

2:子盒子会继承父盒子的透明度

.out{

width: 200px;

height: 200px;

background: green;

border:1px solid

darkgreen;

margin:40px auto;

opacity:0.3;

2

子盒子也出现透明

out .inner{

width: 100px;

height: 100px;

background-color:yellow;

2:background-color:transparent;完全透明，不可调节透明度.

3:使用rgba 来控制颜色，相对opacity，不具有继承性,

3.3 文本 (shadow阴影)

text-shadow，可分别设置偏移量、模糊度、颜色(可设

透明度)。

使用方式

text-shadow:h-shadow v-shadow blurcolor;

1、水平偏移量 正值向右 负值向左

2、垂直偏移量 正值向下 负值向上,

3、模糊度是不能为负值 ,

代码演示

/* 3px 水平偏移量。 正值向右

负值向左

/* 5px 水垂直偏移量。正值向下 负值

向上*/

/* 5px 模糊度

模糊度不能为负值 值

越大越模糊*/

/* #ccc 设置对象阴影的颜色

可以有多个影子.*/

ul>li{

margin:20px

font-size 24px

ul>li:nth-child(1){

text-shadow:5px5px 2pX

#CCC

ul>li:nth-child(2){

text-shadow:-5px-5pX

2pX

ul>li:nth-child(3){

text-shadow:5px5px2px

-5px

-5px 2px#

案例1∶浮雕文字

<style>
        div {
            background-color: #666666;
        }
        
        p {
            text-align: center;
            font-size: 100px;
            font-weight: 1000px;
            color: #666666;
        }
        
        .a {
            text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
        }
        
        .t {
            text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
        }
    </style>
</head>

<body>
    <div>
        <p class="a">苍茫的天涯是我的爱</p>
        <p class="t">连绵的青山脚下花正开</p>
    </div>
</body>

3.4盒模型

CSS3中可以通过box-sizing来指定盒模型，即可指定为

content-box、border-box，这样我们计算盒子大小的方

式就发生了改变

box-sizing有两个值:content-box border-box

可以分成两种情况

content-box:对象的实际宽度等于设置的width值和

border 、padding之和

border-box:对象的实际宽度就等于设置的width值

即使定义有border和padding也不会改变对象的实际宽

度，即(Element width=width)

我们把这种方式叫做盒模型

兼容性比较好

3.5 边框

其中边框圆角、边框阴影属性，应用十分广泛，兼

容性也相对较好，具有符合渐进增强原则的特征

我们需要重点掌握。

3.5.1边框圆角

每个角可以设置两个值，x值，y值

border-radius

1.边框圆角

2:正方形

.border-radiusf

width:200px

height:200px

margin:100px auto

background-color

green;

/*border-radius:100px

100px 100px 100px/100px 100px 100pX

100px;*/

/*border-radius:50px

100px 50px ;*/

/*四个角都是100px*/

100px;*/

/*表示1，3是100px 2，4是

50px*/

/*border-radius:100pX

50px;*/

/*表示1是100px2，4是50pX

3是80px*/

border-radius:100px}

3:椭圆

圆角处理时，脑中要形成圆、圆心、横轴、纵轴的

概念，正圆是椭圆的一种特殊情况。如下图

可分别设置长、短半径，以“/”进行分隔，遵循

“1,2,3,4”规则，“/”前面的1~4个用来设置

横轴半径(分别对应横轴1、2、3、4位置)，

“/”后面1~4个参数用来设置纵轴半径(分别对应

纵轴1、2、3、4位置)

.border-radius{

width:100px

height:200px

margin:100px auto

background-color

green;

/*border-radius:50pX

50px 50px 50px/100px 100px 100px

100px;*/

/*border-radius:50px

·大/

/*border-radius:50px

50px 50px 50px/50px 50px 50px

50px;*/

/*border-radius

50px/100px;*/

}

box-shadow 与text/shadow用法差不多

使用方式:

box-shadow:h-shadow v-shadow blur

spread color inset;

1、水平偏移量 正值向右 负值向左

2、垂直偏移量 正值向下 负值向上;

box-shadow: 5px 5px 27px red, -5px -5px 27px green;

3、模糊度是不能为负值;

4、inset可以设置内阴影，

.item:last-child

box-shadow:inset 5px5px27pX

red,inset -5px -5px 27px green;

设置边框阴影不会改变盒子的大小，即不会影响其兄弟

元素的布局。

可以设置多重边框阴影，实现更好的效果，增强立体

感 。

3.5.3 边框图片

border-image

url("images/border.png")27/20pX

round

border-image 设置边框的背景图片

border-image-source:url("")设置边框

图片的地址

//裁剪图片，如何去裁切图片，浏览器会自动去

裁剪图片

border-image-slice:27,27,27,27

//指定边框的宽度

border-image-width:20px

//边框平铺的样式 stretch 拉升

round 会自动调整缩放比例

repeat(重复)

border-image-repeat:stretch;

设置的图片将会被“切割”成九宫格形式，然后进

行设置。如下图

2

切割”完成后生成虚拟的9块图形，然后按对应

位置设置背景，

其中四个角位置、形状保持不变，中心位置水平垂

直两个方向平铺。如下图

1、round和repeat之间的区别

round会自动调整尺寸，完整显示边框图片

repeat 单纯平铺多余部分，会被“裁切”而不能完整显示。

3.5.4案例 用css 实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #f7f7f7;
        }
        
        .box {
            width: 600px;
            height: 460px;
            margin: 100px auto;
            background-color: #fff;
        }
        
        .android {
            width: 350px;
            margin: 0 auto;
            padding-top: 30px;
        }
        
        .head {
            width: 220px;
            height: 100px;
            background-color: yellowgreen;
            margin: 0 auto;
            border-radius: 50% 50% 0 0;
            position: relative;
        }
        
        .head::after,
        .head::before {
            content: "";
            display: inline-block;
            width: 20px;
            height: 20px;
            background-color: #fff;
            border-radius: 50%;
            position: absolute;
            top: 30px;
        }
        
        .head::after {
            left: 50px;
        }
        
        .head::before {
            right: 50px;
        }
        /* 身体 */
        
        .body {
            width: 220px;
            height: 170px;
            margin: 0 auto;
            background-color: yellowgreen;
            border-radius: 0 0 20px 20px;
            margin-top: 10px;
            position: relative;
        }
        /* 腿 */
        
        .body::after,
        .body::before {
            content: "";
            display: inline-block;
            width: 50px;
            height: 80px;
            background-color: yellowgreen;
            position: absolute;
            bottom: -80px;
            margin: 0 auto;
            border-radius: 0 0 25px 25px;
        }
        
        .body::after {
            right: 40px;
        }
        
        .body::before {
            left: 40px;
        }
        /* 胳膊 */
        
        .leg {
            width: 350px;
            height: 150px;
            position: relative;
        }
        
        .leg::after,
        .leg::before {
            content: "";
            display: inline-block;
            width: 50px;
            height: 150px;
            background-color: yellowgreen;
            border-radius: 25px;
            position: absolute;
            bottom: 161px;
        }
        
        .leg::after {
            left: 0;
        }
        
        .leg::before {
            right: 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="android">
            <div class="head"></div>
            <div class="body"></div>
            <div class="leg"></div>
        </div>
    </div>
</body>

</html>

3.6渐变

渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。

可分为线性渐变、径向渐变

3.6.1线性渐变(gradient 变化)

linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果。

上图是从黄色渐变到绿色

background:linear-gradient(

To right 表示方同(left,top,right,left,也可以使用度

数)

Yellow,渐变起始颜色

Green 渐变终止颜色

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 600px;
            height: 100px;
            margin: 30px auto;
            border: 1px solid;
        }
        
        div:nth-child(1) {
            background: linear-gradient(yellow, green);
        }
        /* to+方向  表示渐变方向*/
        /* 第一个颜色表示渐变起始颜色 */
        /* 第二个表示渐变结束颜色 */
        /* 颜色可以写多个 */
        
        div:nth-child(2) {
            background: linear-gradient(to right, yellow, green);
        }
        
        div:nth-child(3) {
            background: linear-gradient(45deg, yellow, green);
        }
        
        div:nth-child(4) {
            background: linear-gradient(45deg, yellow 0%, blue 60%, green 100%);
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

</html>

1、必要的元素a、方向b、起始颜色c、终止色2、关于方向如下图

3.6.2 径向渐变(radial 径向)radial-gradient径同渐变指从一个中心点开始沿着四周产生渐变效果

background:radial-gradient(150px at centeryellowgreen

围绕中心点做渐变，半径是150px，从黄颜色到绿

1、必要的元素:

a、辐射范围即圆半径(半径越大，渐变效果越大b、中心点 即圆的中心(中心点的位置是以盒子自身)

NM

background ::radial-gradient(150pxat left centeryellowgreen

以左上角为圆的中心点

background: radial-gradient(

150px at 0px 0px

yellow

green

渐变起始色

渐变终止色

2、关于中心点:中心位置参照的是盒子的左上角3、关于辐射范围:其半径可以不等，即可以是椭圆

width:300px

height: 300px

margin:100px auto

background:radial-gradien

250px

at 0px 0pX

yellow

green

:150pX

border-radius

}

3.7背景

背景在CSS3中也得到很大程度的增强，比如背景

寸、背景裁切区域、背景定位参照点、多重背景

background-size:width,height 可以设置背景图片的

及高度

1、background-size设置背景图片的尺寸

background-size:600px,auto;

自动是适应盒子的宽度

background-size:100%auto;当宽度发生改变F

会有内容溢出。

常规用法，通过百分百，和像素来调整背景的

background-size: auto 100%;

cover会自动调整缩放比例，保证图片始终填充满

域，如有溢出部分则会被隐藏。

整个背景图片完整显示在背景区域

contain会自动调整缩放比例，保证图片始终完整

背景区域。

也可以使用长度单位或百分比

height:400px

2

margin:

50px auto

border:1px solid #ccc

background-image

url("./images/2.jpg");

background-repeat:no-repeat

/*可以调整背景图片的尺寸，但是宽度不能自动

7 /*background-size:600px auto;*/

/*设置成百分比，可以用来调整尺寸*/

/*background-size: 100% auto;*/

/*自动缩放比例,保证图片始终填充整个区域,如

部分,则被隐藏*/

background-size:

contain'

案例:全屏背景自动适应

2、background-origin(原点，起点)设置背景定位民

所谓的背景原点就是调整背景位置的一个参照点

调整背景图片定位的参照原点

border-box以边框做为参考原点;

padding-box以内边距做为参考原点

-box以内容x做为参考点

3、background-clip设置背景区域clip(裁切)

border-box裁切边框以内为背景区域

padding-box裁切内边距以内为背景区域

content-box裁切内容区做为背景区域

4、以逗号分隔可以设置多背景，可用于自适应后

流芳百世，

永垂不朽

ContenL-00X

3、background-clip设置背景区域clip(裁切)

border-box裁切边框以内为背景区域

padding-box裁切内边距以内为背景区域

content-box裁切内容区做为背景区域

4、以逗号分隔可以设置多背景，可用于自适应后

背景图片尺寸在实际开发中应用十分广泛。

3.8 过渡(transition)

Transitionparam1 param2

param1

要过渡的属性

过渡的时间

param2

过渡是CSS3中具有颠覆性的特征之一，可以实现元素不

同状态间的平滑过渡(补间动画)，经常用来制作动画

效果 。

补间动画:自动完成从起始状态到终止状态的的过渡

不用管中间的状态

帧动画:扑克牌切换.通过一帧一帧的画面按照固定顺序

和速度播放。如电影胶片

特点:当前元素只要有“属性”发生变化时，可以

平滑的进行过渡。

transition{

width: 200px;

height: 200px;

margin:50px auto,

background-color

green;

transition:width

3s,height 1s,background-color 3s;

.transition:hover{

width: 500px;

height: 300px;

background-color:

yellow;

 }

transition-property设置过渡属性

transition-duration设置过渡时间

transition-timing-function设置过渡速度 用来控制速度

linear(匀速)

ease-in(加速)

transition-delay设置过渡延时超过时间后执行动画

以上四属性重在理解

案例:气泡

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 417px;
            height: 100px;
            border-radius: 25px;
            background: url(./images/paopao.png)no-repeat, url(./images/paopao.png)no-repeat right bottom skyblue;
            margin: 100px auto;
            transition: all 1s;
        }
        
        div:hover {
            background-position: left bottom, right top;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

案例2∶火箭移动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 100%;
            background-color: #d4e422;
        }
        
        html {
            height: 100%;
        }
        
        img {
            position: absolute;
            top: 600px;
            left: 0px;
            height: 120px;
            /* 倾斜并移出屏幕 */
            transform: translate(-81px, 100px) rotate(45deg);
            transition: all 1s;
        }
        
        body:hover img {
            transform: translate(500px, -500px) rotate(45deg)
        }
    </style>
</head>

<body>
    <img src="./images/rocket.png" alt="">
</body>

</html>

3.9 2d转换

转换是CSS3中具有颠覆性的特征之一，可以实现元素的

位移、旋转、变形、缩放，甚至支持矩阵方式，配合即

将学习的过渡和动画知识，可以取代大量之前只能靠

Flash才可以实现的效果。在css3当中，通过

transform(变形)来实现2d或者3d转换,其中2d有，缩

放，移动，旋转。

1)缩放scale(x,y)可以对元素进行水平和垂直方向的缩

scalef

NM

width:200px

200px

height:

margin:100px auto

background-color

green;

transition:all 1s

lineari

scale:hover{

/*在css3当中使用transform

来实现2d,3d转换，转换的方式有四种

缩放，移动,旋转,倾斜

transform

scale(1.5,1.5);

2)移动 translate(x,y)可以改变元素的位置，x、y可

为负值;

x在水平方向移动。

y在垂直方向移动

translate{

width:200px

height:200px

background-color

green;

transition:all 1s

linear

translate:hover{

/*水平移动,或者垂直移动,相

对于自身

transform

translate(200px0)

3)旋转rotate(deg)可以对元素进行旋转，正值为顺

时针，负值为逆时针;

rotate{

width:200px;

height: 200px

margin:60px auto

background-color

green;

transition:all 1s

rotate:hoverf

/*transform:

rotate(45deg);顺时针旋转*/

transform:

rotate(-90deg);/*逆时针旋转*/

3.103d发

rotateX(30deg)

统着x旋转30deg

rotateY(30deg)统着y旋转30deg

rotateZ(30deg)统着z旋转30deg

translateX(30px)沿着x轴移动30pX

沿着y轴移动30pX

translatey(30px)

translatez(30px)

沿着Z轴移动30px(

必须给父盒子加透视)

3.11 透视:

加给变换元素的父盒子，设置的是用户眼睛和

屏幕的距离;

只是视见工的主现，不是止具的3d

perspective:1000px,

3.12 transform-style:preserve-3d;

加给变换元素的父盒子，让子盒子存在三维空

间中，保持3d效果

flat:默认值(让子盒子被扁平化)

3.13 backface-visibility:hidden;背面不可见

skew(30deg,30deg);

2d变换-倾斜

css3中获取自定义属性的值

content:attr(data-text);

3.14动画:

定义

 div {
            width: 200px;
            height: 200px;
            background-color: greenyellow;
            /* 动画名称 动画时间 执行次数（infinite 无限次）     执行方向(alternate 反向) 
             执行曲线（steps(5)）  延时执行  结束后状态forwards（保持结束状态）*/
            /* animation: move 2s infinite alternate steps(5) 1s; */
            animation: move 2s infinite alternate steps(5) 1s;
        }
        /* @keyframes 动画名{
            form{

            }
            to{

            }
        } */
        
        @keyframes move {
            /* form{
transform: translateX(0px)rotate(0);
            }
            to{
              transform: translateX(500px)rotateX(500deg);  
            } */
            0% {
                transform: translateX(0px)translateY(0px);
                background-color: yellowgreen;
                border-radius: 25px;
            }
            25% {
                transform: translateX(500px)translateY(0px);
            }
            50% {
                transform: translateX(0x)translateY(500px);
                border-radius: 50px;
            }
            75% {
                transform: translateX(500px)translateY(500px);
                border-radius: 75px;
            }
            100% {
                transform: translateX(0px)translateY(0px);
                border-radius: 100px;
                background-color: red;
            }
        }
    </style>

     .box {
            width: 1024px;
            margin: 0 auto;
            line-height: 1.5;
            /*shuzhe3列  */
            /* -webkit-column-count: 3; */
            /* 分割线 */
            -webkit-column-rule: 1px solid red;
            /*  -webkit-column-gap: 列间距 */
            -webkit-column-gap: 60px;
            /* -webkit-column-width:有这个不能用 -webkit-column-count: 3;*/
            -webkit-column-width: 200px;
        }
        
        h4 {
            /* 跨列居中   用的不多 */
            -webkit-column-span: all;
            text-align: center;
        }

3.15 伸缩布局

CSS3在布局方面做了非常大的改进，使得我们对块级元

素的布局排列变得十分灵活，适应性非常强，其强大的

伸缩性，在响应式开中可以发挥极大的作用。

如下图，学习新的概念

主轴:Flex容器的主轴主要用来配置Flex项目，默认是

水平方向

侧轴:与主轴垂直的轴称作侧轴，默认是垂直方向的

方向:默认主轴从左向右，侧轴默认从上到下

主轴和侧轴并不是固定不变的，通过flex-direction可以

主轴终点

1、必要元素

a、指定一个盒子为伸缩盒子 display:flex

迅黑尼性本调救此合的子二丰的在已六式例加f

direction

c、明确主侧轴及方向

d、可互换主侧轴，也可改变方向

2、各属性详解

a、flex-direction调整主轴方同(默认为水平方向)

该属性通过定义flex容器的主轴方向来决定felx子项在

flex容器中的位置

row 水平方向

row-reverse 反转

column垂直方同

column-reverse 反转列

b、justify-content设置或检索弹性盒子元素在主轴(横

轴)方向上的对齐方式。

flex-start、起点对齐

flex-end 、终点对齐

center 中间对齐

space-around 、环绕

space-between 两端对齐

c、flex控制子项目的缩放比例

不指定flex属性，则不参与分配

d、align-items设置或检索弹性盒子元素在主轴(纵轴)

方向上的对齐方式。

flex-start、起点对齐

flex-end 、终点对齐

center 中间对齐

stretch:拉伸;

要明确找出主轴、方向，各属性对

此知识点重在理解，

应的属性值可参考示例源码

应用场景1: