H5知识点大总结勾起你的欲望

 

第 25 章CSS3 过渡效果

 

 

学习要点：1.过渡简介

 

2.transition-property

 

3.transition-duration

 

4.transition-timing-function

 

5.transition-delay

 

6.简写和版本

 

本章主要探讨 HTML5 中CSS3 的过渡效果，通过这个功能可以不借助JavaScript 来实现简单的用户交互功能。

 

一．过渡简介

 

过渡效果一般是通过一些简单的 CSS 动作触发平滑过渡功能，比如：:hover、:focus、:active、:checked等。CSS3 提供了 transition 属性来实现这个过渡功能，主要属性如下表：

 

属性

说明

 

 

transition-property

指定过渡或动态模拟的 CSS 属性

 

 

transition-duration

指定完成过渡所需的时间

 

 

transition-timing-function

指定过渡的函数

 

 

transition-delay

指定过渡开始出现的延迟时间

 

 

transition

简写形式，按照上门四个属性值连写

 

 

 

我们先创建一个没有过渡效果的元素，然后通过:hover 来触发它。在没有任何过渡效果的触发，会立即生硬的执行触发。

 

//设置元素样式 div {

 

width: 200px; height: 200px;

 

background-color: white; border:1px solid green;

 

}

 

//鼠标悬停后背景变黑，文字变白 div:hover {

 

background-color: black; color: white;

 

margin-left: 50px;

 

}

 

二．transition-property

 

首先，设置过渡的第一个属性就是指定过渡的属性。同样，你需要指定你要过渡某个元素的两套样式用于用户和页面的交互。那么就使用transition-property 属性，详细属性值如下表：

 

属性值

说明

 

 

none

没有指定任何样式

 

 

all

默认值，指定元素所支持 transition-property 属性

的样式

 

 

 

指定样式

指定支持 transition-property 的样式

 

 

 

从上门的列表中来看，一般来说，none 用于本身有过渡样式从而取消。而all，则是支持所有 transition-property 样式，还有一种是指定transition-property 中的某些样式。那么transition-proerty 支持的样式有哪些？如下表所示：

 

样式名称

样式类型

 

 

background-color

color(颜色)

 

 

background-image

only gradients(渐变)

 

 

background-position

percentage, length(百分比，长度值)

 

 

border-bottom-color

color

 

 

border-bottom-width

length

 

 

border-color

color

 

 

border-left-color

color

 

 

border-left-width

length

 

 

border-right-color

color

 

 

border-right-width

length

 

 

border-spacing

length

 

 

border-top-color

color

 

 

border-top-width

length

 

 

border-width

length

 

 

bottom

length, percentage

 

 

color

color

 

 

crop

rectangle

 

 

font-size

length, percentage

 

 

font-weight

number

 

 

grid-*

various

 

 

height

length, percentage

 

 

left

length, percentage

 

 

letter-spacing

length

 

 

line-height

number, length, percentage

 

 

margin-bottom

length

 

 

margin-left

length

 

 

margin-right

length

 

 

margin-top

length

 

 

max-height

length, percentage

 

 

max-width

length, percentage

 

 

min-height

length, percentage

 

 

min-width

length, percentage

 

 

opacity

number

 

 

outline-color

color

 

 

outline-offset

integer

 

 

outline-width

length

 

 

padding-bottom

length

 

 

padding-left

length

 

 

padding-right

length

 

 

padding-top

length

 

 

right

length, percentage

 

 

text-indent

length, percentage

 

 

text-shadow

shadow

 

 

top

length, percentage

 

 

vertical-align

keywords, length, percentage

 

 

visibility

visibility

 

 

width

length, percentage

 

 

word-spacing

length, percentage

 

 

z-index

integer

 

 

zoom

number

 

 

 

//设置背景和文字颜色采用过渡效果 transition-property: background-color, color, margin-left;

 

三．transition-duration

 

如果单纯设置过渡的样式，还不能够立刻实现效果。必须加上过渡所需的时间，因为默认情况下过渡时间为0。

//设置过渡时间为 1秒钟，如果是半秒钟可以设置为.5s

 

transition-duration: 1s;

 

四．transition-timing-function

 

当过渡效果运行时，比如产生缓动效果。默认情况下的缓动是：元素样式从初始状态过渡到终止状态时速度由快到慢，逐渐变慢，即ease。也是默认值，其他几种缓动方式如下表所示：

 

属性值

 

说明

 

 

 

默认值，元素样式从初始状态过渡到终止状态时速度由

ease

快到慢，逐渐变慢。等同于贝塞尔曲线(0.25, 0.1,

 

0.25,

1.0)

 

 

linear

元素样式从初始状态过渡到终止状态速度是恒速。等同

于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)

 

 

元素样式从初始状态过渡到终止状态时，速度越来越

ease-in

快，呈一种加速状态。等同于贝塞尔曲线(0.42, 0,

 

1.0,

1.0)

 

 

 

元素样式从初始状态过渡到终止状态时，速度越来越

ease-out

慢，呈一种减速状态。等同于贝塞尔曲线(0, 0, 0.58,

 

1.0)

 

 

 

ease-in-out

元素样式从初始状态过渡到终止状态时，先加速，再减

速。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

 

 

//恒定速度

 

transition-timing-function: linear;

 

以上五种都是设定好的属性值，我们也可以自定义这个缓动。使用 cubic-bezier() 属性值，里面传递四个参数p0,p1,p2,p3，值在0~1 之间。

//自定义缓动

 

transition-timing-function: cubic-bezier(0.25, 0.67, 0.11, 0.55);

 

 

至于具体这些数值干什么的，怎么才可以精确得到相关的信息，这个要了解计算机图形学中的三次贝塞尔曲线的相关知识，类似与photoshop 中的曲线调色。这里我们忽略。

 

还有一种不是平滑过渡，是跳跃式过渡，属性值为：steps(n,type)。第一个值是一个数值，表示跳跃几次。第二个值是start 或者 end，可选值。表示开始时跳跃，还是结束时跳跃。

 

//跳跃 10次至结束

 

transition-timing-function: steps(10,end);

 

五．transition-delay

 

这个属性可以设置一个过渡延迟效果，就是效果在设置的延迟时间后再执行。使用transition-delay 属性值。如果有多个样式效果，可以设置多个延迟时间，以空格隔开。

 

//设置延迟效果

 

transition-delay: 0s, 1s, 0s;

 

六．简写和版本

 

我可以直接使用 transition 来简写，有两种形式的简写。第一种是，每个样式单独声明；第二种是不去考虑样式，即使用all 全部声明。

//单独声明

 

transition: background-color 1s ease 0s, color 1s ease 0s, margin-left 1s ease 0s;

 

//如果每个样式都是统一的，直接使用 all

 

transition: all 1s ease 0s;

 

为了兼容旧版本，需要加上相应的浏览器前缀，版本信息如下表：

 

 

Opera

Firefox

Chrome

Safari

IE

 

 

 

 

 

 

支持需带前缀

15 ~ 22

5 ~ 15

4 ~ 25

3.1 ~ 6

无

 

 

 

 

 

 

支持不带前缀

23+

16+

26+

6.1+

10.0+

 

 

 

 

 

 

 

//兼容完整版

 

-webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; -ms-transition: all 1s ease 0s; transition: all 1s ease 0s;

 

 

 

第 26 章CSS3 动画效果

 

 

学习要点：1.动画简介2.属性详解3.简写和版本

 

 

本章主要探讨 HTML5 中CSS3 的动画效果，可以通过类似Flash 那样的关键帧模式控制运行。

 

一．动画简介

 

CSS3 提供了类似 Flash关键帧控制的动画效果，通过 animation属性实现。那么之前的 transition 属性只能通过指定属性的初始状态和结束状态来实现动画效果，有一定的局限性。

 

animation 实现动画效果主要由两个部分组成：1.通过类似 Flash动画中的关键帧声明一个动画；2.在 animation属性中调用关键帧声明的动画。

 

CSS3 提供的 animation是一个复合属性，它包含了很多子属性。如下表所示：

 

属性

说明

 

 

 

用来指定一个关键帧动画的名称，这个动画

animation-name

名必须对应一个@keyframes 规则。CSS 加

载时会应用 animation-name 指定的动画，

 

 

从而执行动画。

 

 

animation-duration

用来设置动画播放所需的时间

 

 

animation-timing-function

用来设置动画的播放方式

 

 

animation-delay

用来指定动画的延迟时间

 

 

animation-iteration-count

用来指定动画播放的循环次数

 

 

animation-direction

用来指定动画的播放方向

 

 

animation-play-state

用来控制动画的播放状态

 

 

animation-fill-mode

用来设置动画的时间外属性

 

 

animation

以上的简写形式

 

 

 

除了这 9 个属性之外，动画效果还有一个重要的属性，就是关键帧属性：@keyframes。它的作用是声明一个动画，然后在animation 调用关键帧声明的动画。

 

//基本格式，“name”可自定义

 

@keyframes name {

 

/*...*/

 

}

 

二．属性详解

 

在讲解动画属性之前，先创建一个基本的样式。

 

//一个 div元素

 

<div>我是 HTML5</div>

 

//设置 CSSdiv {

width: 200px; height: 200px;

 

background-color: white; border: 1px solid green;

 

}

 

1.@keyframes

 

//创建动画的第一步，先声明一个动画关键帧。

 

@keyframes myani { 0% {

 

background-color: white; margin-left:0px;

 

}

 

50% {

 

background-color: black; margin-left:100px;

 

}

 

100% {

 

background-color: white; margin-left:0px;

 

}

 

}

 

//或者重复的，可以并列写在一起

 

@keyframes myani { 0%, 100% {

 

background-color: white; margin-left:0px;

 

}

 

50% {

 

background-color: black; margin-left:100px;

 

}

 

}

 

2.animation-name

 

//调用@keyframes动画 animation-name: myani;

 

属性值

说明

 

 

none

默认值，没有指定任何动画

 

 

INDEX

是由@keyframes 指定创建的动画名称

 

 

 

 

 

3.animation-duration

 

//设置动画播放的时间

 

animation-duration: 1s;

 

当然，以上通过关键帧的方式，这里插入了三个关键帧。0%设置了白色和左偏移为0，和初始状态一致，表明从这个地方开始动画。50%设置了黑色，左偏移100px。而 100%则是最后一个设置，又回到了白色和左偏移为0。整个动画就一目了然了。

而对于关键帧的用法，大部分用百分比比较容易控制，当然，还有其他一些控制方法。

 

//从什么状态过渡到什么状态

 

@keyframes myani {

 

from {

 

background-color: white; margin-left:0px;

 

}

 

to {

 

background-color: black; margin-left:100px;

 

}

 

}

 

4.animation-timing-function

 

//设置缓动

 

animation-timing-function: ease-in;

 

属性值

 

说明

 

 

 

默认值，元素样式从初始状态过渡到终止状态时速度由

ease

快到慢，逐渐变慢。等同于贝塞尔曲线(0.25, 0.1,

 

0.25,

1.0)

 

 

linear

元素样式从初始状态过渡到终止状态速度是恒速。等同

于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)

 

 

元素样式从初始状态过渡到终止状态时，速度越来越

ease-in

快，呈一种加速状态。等同于贝塞尔曲线(0.42, 0,

 

1.0,

1.0)

 

 

 

元素样式从初始状态过渡到终止状态时，速度越来越

ease-out

慢，呈一种减速状态。等同于贝塞尔曲线(0, 0, 0.58,

 

1.0)

 

 

 

ease-in-out

元素样式从初始状态过渡到终止状态时，先加速，再减

速。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

 

cubic-bezier

自定义三次贝塞尔曲线

 

 

 

 

5.animation-delay

 

//设置延迟时间

 

animation-delay: 1s;

 

6.animation-iteration-count

 

//设置循环次数

 

animation-iteration-count: infinite;

 

属性值

说明

 

 

次数

默认值为 1

 

 

infinite

表示无限次循环

 

 

 

7.animation-direction

 

//设置缓动方向交替

 

animation-direction: alternate;

 

 

属性值

说明

 

normal默认值，每次播放向前

 

alternate一次向前，一次向后，一次向前，一次向后这样交替

 

 

8.animation-play-state

 

//设置停止播放动画 animation-play-state: paused;

 

9.animation-fill-mode

 

//设置结束后不在返回 animation-fill-mode: forwards;

 

属性值

说明

 

 

none

默认值，表示按预期进行和结束

 

 

forwards

动画结束后继续应用最后关键帧位置，即不返回

 

 

backforwards

动画结束后迅速应用起始关键帧位置，即返回

 

 

both

根据情况产生 forwards 或backforwards 的效果

 

 

 

//both 需要结合，次数和播放方向 animation-iteration-count: 4; animation-direction: alternate;

 

六．简写和版本

 

//简写形式完整版

 

animation: myani 1s ease 2 alternate 0s both;

 

为了兼容旧版本，需要加上相应的浏览器前缀，版本信息如下表：

 

 

Opera

Firefox

Chrome

Safari

IE

 

 

 

 

 

 

支持需带前缀

15 ~ 29

5 ~ 15

4 ~ 42

4 ~ 8

无

 

 

 

 

 

 

支持不带前缀

无

16+

43+

无

10.0+

 

 

 

 

 

 

 

//兼容完整版，Opera在这个属性上加入 webkit，所以没有-o--webkit-animation: myani 1s ease 2 alternate 0s both; -moz-animation: myani 1s ease 2 alternate 0s both; -ms-animation: myani 1s ease 2 alternate 0s both; transition: all 1s ease 0s;

 

//@keyframes 也需要加上前缀 @-webkit-keyframes myani {...} @-moz-keyframes myani {...} @-o-keyframes myani {...} @-ms-keyframes myani {...} keyframes myani {...}

 

 

 

第 27 章CSS 传统布局[上]

 

 

学习要点：1.布局模型2.表格布局3.浮动布局

 

本章主要探讨 HTML5 中CSS 早期所使用的传统布局，很多情况下，这些布局方式还是非常有用的。

 

一．布局模型

 

在早期没有平板和智能手机等移动设备大行其道的时期，Web 页面的设计主要是面向PC 端电脑分辨率展开的。这种分辨率比例比较单一，基本上只要满足最低分辨率设计即可。一般来说有4:3、16:10、16:9 这样的主要分辨率。那么，从这种比例上来看，长度总是大于宽度的。从最低分辨率1024 * 768 设计即可。为了使浏览器底部不出现滚动条，需要减去适当的宽度，比如减去28，最终固定长度设置为996 即可。当然，也有一些网站在近两年讲最低分辨率设置为1280 减去滚动条宽度，因为大显示器逐步主流。

 

除了刚才所说的固定长度的布局，还有一种是流体布局，就是布局的长度为百分比，比如100%。不管你是什么分辨率，它都能全屏显示，当然，局限性也特别大，只适合一些单一页面，复杂的页面，会随着不同浏览器产生各种阅读障碍。

 

我们创建一个三行两列模型。并采用表格布局和浮动布局，构建固定和流体布局的方式，模型图如下：

 

二．表格布局

 

表格布局，就是通过设定固定的单元格，去除表格边框和填充实现的布局。当然这个布局非常不建议使用，只是教学了解。表格应该用它最为语义的地方，就是二维表的数据显示。

 

1.固定布局

 

//HTML 部分

 

<table border="0"> <tr>

 

<td colspan="2" class="header">header</td> </tr>

 

<tr>

 

<td class="aside">aside</td>

 

<td class="section">section</td> </tr>

 

<tr>

 

<td colspan="2" class="footer">footer</td> </tr>

 

</table>

 

//CSS 部分 body {

 

margin:0;

 

}

 

table {

 

margin:0 auto; width: 960px; border-spacing: 0;

 

}

 

.header {

 

height: 120px; background-color: olive;

 

}

 

.aside {

 

width: 200px; height: 500px;

 

background-color: purple;

 

}

 

.section { width: 760px;

 

height: 500px; background-color: maroon;

 

}

 

.footer {

 

height: 120px;

 

background-color: gray;

 

}

 

2.流体布局

 

表格的固定布局改成流体布局非常简单，只需要设置table 为 100%即可。

 

//修改 tabletable {

 

width: 100%;

 

}

 

三．浮动布局

 

浮动布局主要采用 float 和clear 两个属性来构建。

 

1.固定布局

 

//HTML 部分 <header>

 

header </header>

 

<aside> aside

 

</aside>

 

<section> section

 

</section>

 

<footer> footer

 

</footer>

 

//CSS 部分 body {

 

width: 960px; margin: 0 auto; color: white;

 

}

 

header {

 

height: 120px; background-color: olive;

 

}

 

aside {

 

width: 200px; height: 500px;

 

background-color: purple; float: left;

 

}

 

section {

 

width: 760px; height: 500px;

 

background-color: maroon; float:right;

 

}

 

footer {

 

height: 120px; background-color: gray; clear:both;

 

}

 

2.流体布局

 

流体布局只要更改 body 元素的限定长度为auto 或 100%。然后左右两列分别设置 20% 和 80%即可。

//CSS 部分 body {

 

width: auto;

 

}

 

aside {

 

width: 20%;

 

}

 

section { width: 80%;

 

}

 

 

 

第 27 章CSS 传统布局[下]

 

 

学习要点：1.定位布局

 

2.box-sizing

 

3.resize

 

 

 

本章主要探讨 HTML5 中CSS 早期所使用的传统布局，很多情况下，这些布局方式还是非常有用的。

 

一．定位布局

 

在使用定位布局前，我们先了解一下定位属性的用法。CSS2 提供了position 属性来实现元素的绝对定位和相对定位。

 

属性

说明

 

 

static

默认值，无定位。

 

 

absolute

绝对定位，使用 top、right、bottom、left

进行位移。

 

 

 

relative

相对定位，使用 top、right、bottom、left

进行位移。

 

 

 

fixed

以窗口参考定位，使用 top、right、bottom、

left 进行位移。

 

 

//绝对定位，脱离文档流，以窗口文档左上角 0,0为起点

 

header {

 

position: absolute;

 

top: 100px;

 

left: 100px;

 

}

 

 

所谓脱离文档流的意思，就是本身这个元素在文档流是占位的。如果脱离了，就不占有文档的位置，好像浮在了空中一般，有了层次感。

 

由于绝对定位脱离了文档流，出现层次概念。那么每个元素到底在那一层，会不会冲突覆盖。这时通过 z-index 属性来判定它们的层次关系。

 

属性

说明

 

auto默认层次

 

数字设置层次，数字越大，层次越高

 

//设置在 100层上 header {

 

z-index: 100;

 

}

 

//以窗口参考定位，脱离文档流，会随着滚动条滚动而滚动 header {

 

position: fixed; top: 100px; left: 100px;

 

}

 

//相对定位，不脱离文档流，占位偏移 header {

 

position: relative; top: 100px;

 

left: 100px;

 

}

 

这三种分别都在各自的情况下使用，均比较常用。但还有一种情况，就是：1.既要脱离文档流（这样元素之间不会相互冲突）；2.以父元素，比如body 或其他父元素为参考点（这样可以实现区域性绝对定位）；3.还必须是绝对定位。

 

//第一步，将需要设置参考点的父元素设置为相对，且不设置坐标

 

body {

 

position: relative;

 

}

 

//第二步，如果父元素设置了参考点，子元素的绝对定位将以它为基准 header {

 

position: absolute; top: 0px;

 

left: 0px;

 

}

 

1.固定布局

 

//CSS 部分 body {

 

width: 960px; margin: 0 auto; position: relative;

 

}

 

header {

 

width: 960px; height: 120px;

 

background-color: olive; position: absolute;

 

top: 0; left: 0;

 

}

 

aside {

 

width: 200px; height: 500px;

 

background-color: purple; position: absolute;

 

top: 120px; left: 0;

 

}

 

section {

 

width: 760px; height: 500px;

 

background-color: maroon; position: absolute;

 

top: 120px; /*left: 200px;*/ right: 0;

 

}

 

footer {

 

width: 960px; height: 120px;

 

background-color: gray; position: absolute; top: 620px;

 

}

 

 

在上面，基本都用了定位来进行固定布局。但细心的可以发现，其实只有右侧需要实行绝对定位，其他就按照普通的摆放即可。对于设计成流体布局，只要将长度设置成百分比即可。

 

二．box-sizing

 

在盒模型那个章节，我们了解到元素盒子如果加入了内边距 padding 和边框 border 后，它的总长度会增加。那么如果这个元素用于非常精确的布局时，我们就需要进行计算增减。这其实是比较烦人的操作，尤其是动态设置页面布局的时候。

 

CSS3 提供了一个属性 box-sizing，这个属性可以定义元素盒子的解析方式，从而可

 

以选择避免掉布局元素盒子增加内边距和边框的长度增减问题。

 

 

属性

 

 

 

说明

 

 

 

 

 

 

 

 

 

 

 

 

content-box

 

默认值，border 和padding 设置后用于元素的总

 

 

长度。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

border-box

 

border 和 padding设置后不用于元素的总长度。

 

 

 

 

 

 

 

 

 

//设置 border-box让 border 和 padding 不在额外增加元素大小

 

 

aside {

 

 

 

 

 

 

 

width: 200px;

 

 

 

 

 

 

 

height: 500px;

 

 

 

 

 

 

 

background-color: purple;

 

 

 

 

padding: 10px;

 

 

 

 

 

 

 

border: 5px solid red;

 

 

 

 

 

box-sizing: border-box;

 

 

 

 

 

float: left;

 

 

 

 

 

 

}

 

 

 

 

 

 

 

 

box-sizing 是 CSS3推出的，各个厂商在实现时设置了私有前缀。

 

 

 

 

 

 

 

 

 

 

 

 

Opera

Firefox

Chrome

Safari

IE

 

 

 

 

 

 

 

 

 

支持需带前缀

 

无

2 ~ 28

4 ~ 9

3.1 ~ 5

8.0+

 

 

 

 

 

 

 

 

 

支持不带前缀

 

10.1+

29+

10+

6+

9.0+

 

 

 

 

 

 

 

 

 

 

//完整形式

 

-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;

 

三．resize

 

CSS3 提供了一个 resize属性，来更改元素尺寸大小。

 

属性

说明

 

 

none

默认值，不允许用户调整元素大小。

 

 

both

用户可以调节元素的宽度和高度。

 

 

horizontal

用户可以调节元素的宽度。

 

 

vertical

用户可以调节元素的高度。

 

 

 

一般普通元素，默认值是不允许的。但如果是表单类的 textarea 元素，默认是允许的。而普通元素需要设置overflow:auto，配合resize 才会出现可拖拽的图形。

 

//允许修改

 

aside {

 

resize: both;

 

overflow:auto;

 

}

 

 

 

第 28 章CSS3 多列布局

 

 

学习要点：1.早期多列问题2.属性及版本3.属性解释

 

本章主要探讨 HTML5 中CSS3 提供的多列布局，通过多列布局我们方便的创建流体的多列布局。

 

一．早期多列问题

 

我们有时想布局成报纸、杂志那样的多列方式（至少两列，一般三列以上），但早期CSS 提供的布局方式都有着极大的限制。如果是固体布局，那么使用浮动或定位布局都可以完成。但对于流体的多列，比如三列以上，那只能使用浮动布局进行，而它又有极大的限制。因为它是区块性的，对于动态的内容无法伸缩自适应，基本无能力。

 

//五段内容，分为三列

 

<div>

 

<p>我是第一段内容....省略的部分复制大量文本</p>

 

<p>我是第二段内容....省略的部分复制大量文本</p>

 

<p>我是第三段内容....省略的部分复制大量文本</p>

 

<p>我是第四段内容....省略的部分复制大量文本</p>

 

<p>我是第五段内容....省略的部分复制大量文本</p>

 

</div>

 

//带标题的五段内容，分为三列

 

<div> <h4>第一段标题</h4>

<p>我是第一段内容....省略的部分复制大量文本</p> <h4>第二段标题</h4> <p>我是第二段内容....省略的部分复制大量文本</p> <h4>第三段标题</h4> <p>我是第三段内容....省略的部分复制大量文本</p> <h4>第四段标题</h4> <p>我是第四段内容....省略的部分复制大量文本</p> <h4>第五段标题</h4> <p>我是第五段内容....省略的部分复制大量文本</p>

 

</div>

 

上门两组内容，如果想用浮动和定位实现流体三列，基本不可能。并且实际应用中，需

 

求可能多变，要更改成四列或者五列呢？所以，CSS3 提供了多列布局属性columns 来实现这个动态变换的功能。

 

二．属性及版本

 

CSS3 提供了 columns多列布局属性等 7 个属性集合，具体如下：

 

属性

说明

 

 

columns

集成 column-width 和column-count 两个属性

 

 

column-width

定义每列列宽度

 

 

column-count

定义分分列列数

 

 

column-gap

定义列间距

 

 

column-rule

定义列边框

 

 

column-span

定义多列布局中子元素跨列效果，firefox 不支持

 

 

column-fill

控制每列的列高效果，主流浏览器不支持

 

 

 

由于 column 属性集尚未纳入标准，大多数浏览器必须使用厂商前缀才能访问，好在主流的浏览器都可以很好的支持了。下面是主流浏览器的支持和前缀情况。

 

 

Opera

Firefox

Chrome

Safari

IE

 

 

 

 

 

 

支持需带前缀

11.5 ~ 29

2 ~ 40

4 ~ 45

3.1 ~ 8

无

 

 

 

 

 

 

支持不带前缀

无

无

无

无

10.0+

 

 

 

 

 

 

 

通过上面的表格，我们可以了解到，要想让最新的浏览器全部实现效果，都必须使用前

 

缀。

 

//完整形式

 

-webkit-columns: 150px 4;

 

-moz-columns: 150px 4;

 

columns: border-box;

 

三．属性解释

 

为了方便演示，我们在 Firefox 火狐浏览器测试，只用-moz-前缀演示。

 

1.columns

 

columns 是一个复合属性，包含 columns-width和 columns-count这两种简写。意

 

为同时设置分列列数和分列宽度。//分成四列，每列宽度自适应

-moz-columns: auto 4;

 

2.column-width

 

column-width 属性，用于设置每列的宽度。//设置列宽

 

-moz-column-width: 200px;

 

这里设置了 200px，有点最小宽度的意思。当浏览器缩放到小于200 大小时，将变成1 列显示。而如果是 auto，则一直保持四列。

 

属性值

说明

 

auto默认值，自适应。

 

长度值设置列宽。

 

 

3.column-count

 

column-count 属性，用于设置多少列。

 

//设置列数

 

-moz-column-count: 4;

 

属性值

说明

 

 

auto

默认值，表示就 1 列。

 

 

数值

设置列数。

 

 

 

4.column-gap

 

column-gap 属性，用于设置列间距

 

//设置列间距

 

-moz-column-gap: 100px;

 

属性值

说明

 

 

auto

默认值，表示就 1 列。

 

 

数值

设置列数。

 

 

 

5.column-rule

 

column-rule 属性，设置每列中间的分割线//设置列边线

 

-moz-column-rule: 2px dashed gray;

 

属性

说明

 

 

column-rule

<宽度> <样式> <颜色>的边框简写形式。

 

 

column-rule-width

单独设置边框宽度。

 

 

column-rule-style

单独设置边框的样式。

 

 

column-rule-color

单独设置边框的颜色。

 

 

 

列边线不会影响到布局，它会根据布局的缩放自我调整是否显示。如果我们把页面缩放到只能显示一列时，它自动消失了。

 

6.column-span

 

column-span 属性，设置跨列大标题。

 

//跨列标题，由于火狐尚未支持，固使用 webkit

 

-webkit-column-span: all;

 

 

属性值

说明

 

none默认值，表示不跨列。

 

all表示跨列。