第5章〓CSS高级样式设计
51filter
滤镜
5．1filter滤镜
CSS3中的filter滤镜属性可以改变图片等元素的可视效果。使用方法： 直接给需要设置的图片添加filter属性。各种filter的功能描述如表51所示。
filter属性语法：
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
滤镜的许多属性值通常使用百分比表示,如75%;也可以使用小数来表示,如0．75。
表51各种filter的功能描述
filter描述
none默认值，没有效果
blur(px)给图像设置高斯模糊。“radius”一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊； 如果没有设定值，则默认是0； 这个参数可设置CSS长度值，但不接受百分比值
brightness(%)给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0，图像会全黑； 值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是100%
contrast(%)调整图像的对比度。值是0时，图像会全黑； 值是100%时，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是100%
dropshadow(
hshadow
vshadow
blur
spread color)给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出遮罩图的偏移版本。函数接受<shadow>(在CSS3背景中定义)类型的值，除了inset关键字是不允许的。该函数与已有的boxshadow属性很相似； 不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。
<shadow>参数如下：
<offsetx>、<offsety> (必需)，设置阴影偏移量的两个length值。<offsetx> 设定水平方向距离，负值会使阴影出现在元素左边。<offsety>设定垂直方向距离，负值会使阴影出现在元素上方。如果两个值都是0, 则阴影出现在元素正后面。如果设置了<blurradius> 和/或 <spreadradius>，会有模糊效果。
续表
filter描述
dropshadow
(hshadow
vshadow
blur
spread color)
<blurradius>(可选)
这是第三个length值，值越大，越模糊，则阴影会变得更大更淡。不允许为负值，若未设定，默认是0(则阴影的边界很锐利)。
<spreadradius>(可选)
这是第四个length值，正值会使阴影扩张和变大，负值会使阴影缩小，若未设定，默认是0(阴影会与元素一样大小)。
注意: WebKit以及一些其他浏览器不支持第四个长度，即使加了也不会渲染。
<color>(可选)
若未设定，颜色值基于浏览器。在Gecko(Firefox), Presto(Opera)和Trident(Internet Explorer)中，会应用color属性的值。另外, 如果颜色值省略，WebKit中阴影是透明的
grayscale(%)将图像转换为灰度图像。其值定义转换的比例。值为100%，则完全转为灰度图像； 值为0，图像无变化； 值为0~100%，则是效果的线性乘子。若未设置，值默认是0
huerotate(deg)给图像应用色相旋转。angle一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，但若超过360deg的值相当于又绕一圈
invert(%)反转输入图像。值定义转换的比例，100%是完全反转，0则图像无变化。值为0~100%，则是效果的线性乘子。若值未设置，默认是0
opacity(%)转换图像的透明程度。值定义转换的比例，0%是完全透明，100%则图像无变化。值为0~100%，则是效果的线性乘子，也相当于图像样本乘以数量。若值未设置，默认是100%。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速
saturate(%)转换图像饱和度。值定义转换的比例，0是完全不饱和，100%则图像无变化。其他值则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。若值未设置，默认是100%
sepia(%)将图像转换为深褐色。定义转换的比例，100%为完全是深褐色的，0为图像无变化。0~100%则是效果的线性乘子。若未设置，默认是0
url()URL函数接受一个XML文件，该文件设置了一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。
例如： filter: url(svgurl#elementid)
【例51】滤镜样式实例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drop Caps with CSS</title>
<style>
.blur {
/*图片使用高斯模糊效果*/
-webkit-filter: blur(5.5px);
/* Chrome, Safari, Opera */
filter: blur(5.5px);
}
.grayscale {
/*将图像转换为灰度图像*/
-webkit-filter: grayscale(100%);
/* Chrome, Safari, Opera */
filter: grayscale(100%);
}
.brightness {
/*使图片变亮*/
-webkit-filter: brightness(200%);
/* Chrome, Safari, Opera */
filter: brightness(200%);
}
.contrast {
/*调整图像的对比度*/
-webkit-filter: contrast(300%);
/* Chrome, Safari, Opera */
filter: contrast(300%);
}
.drop-shadow {
/*给图像设置一个阴影效果*/
-webkit-filter: drop-shadow(180px 180px 10px #10beb6);
/* Chrome, Safari, Opera */
filter: drop-shadow(-180px 180px 10px red);
}
.hue-rotate {
/*给图像应用色相旋转*/
-webkit-filter: hue-rotate(225deg);
/* Chrome, Safari, Opera */
filter: hue-rotate(225deg);
}
.invert {
/*反转输入图像*/
-webkit-filter: invert(100%);
/* Chrome, Safari, Opera */
filter: invert(100%);
}
.opacity {
/*转换图像的透明程度*/
-webkit-filter: opacity(30%);
/* Chrome, Safari, Opera */
filter: opacity(30%);
}
.saturate {
/*转换图像饱和度*/
-webkit-filter: saturate(800%);
/* Chrome, Safari, Opera */
filter: saturate(800%);
}
.sepia {
/*将图像转换为深褐色*/
-webkit-filter: sepia(100%);
/* Chrome, Safari, Opera */
filter: sepia(100%);
}
.many {
/*综合多种*/
-webkit-filter: contrast(200%) brightness(150%);
/* Chrome, Safari, Opera */
filter: contrast(200%) brightness(150%);
}
</style>
</head>
<body>
<label for="raw">raw</label>
<img src="fig1.jpg" id="raw" />
<label for="blur">blur</label>
<img src="fig1.jpg" id="blur" class="blur" />
<br>
<label for="grayscale">grayscale</label>
<img src="fig1.jpg" id="grayscale" class="grayscale" />
<label for="brightness">brightness</label>
<img src="fig1.jpg" id="brightness" class="brightness" />
<br>
<label for="contrast">contrast</label>
<img src="fig1.jpg" id="contrast" class="contrast" />
<label for="drop-shadow">drop-shadow</label>
<img src="fig1.jpg" id="drop-shadow" class="drop-shadow" />
<br>
<label for="hue-rotate">hue-rotate</label>
<img src="fig1.jpg" id="hue-rotate" class="hue-rotate" />
<label for="invert">invert</label>
<img src="fig1.jpg" id="invert" class="invert" />
<br>
<label for="opacity">opacity</label>
<img src="fig1.jpg" id="opacity" class="opacity" />
<label for="saturate">saturate</label>
<img src="fig1.jpg" id="saturate" class="saturate" />
<br>
<label for="sepia">sepia</label>
<img src="fig1.jpg" id="sepia" class="sepia" />
<label for="many">many</label>
<img src="fig1.jpg" id="many" class="many" />
</body>
</html>
程序运行效果如图51所示。
图51第1幅为原图其余分别为blur、grayscale、brightness、contrast、dropshadow、
huerotate、invert、opacity、saturate、sepia和混合滤镜处理后的效果图
52transi
tion过渡
5．2CSS3的变形
CSS3的变形能实现移动、旋转、缩放和倾斜等。
5．2．1translate平移
transform的translate()方法用来实现元素的平移效果。
transform: translateX(x); /*沿X轴方向平移*/
transform: translateY(y); /*沿Y轴方向平移*/
transform: translate(x, y); /*沿X轴和Y轴方向同时平移*/
有3种平移： translateX()、translateY()、translate()。参数x表示元素在X轴方向上的移动距离，参数y表示元素在Y轴方向上的移动距离，两者的单位可以为px、em和百分比等。
【例52】transform:translate平移实例。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
/*设置原始元素样式*/
#before{
width:200px;
height:200px;
border:2px dashed rgb(128, 128, 128);
}
/*设置当前元素样式*/
#after{
width:200px;
height:200px;
color:white;
background-color: rgb(30, 250, 129);
opacity: 0.6;
transform:translateX(20px);
}
</style>
</head>
<body>
<div id="before">原来
图52元素平移效果
<div id="after">平移</div>
</div>
</body>
</html>
程序运行效果如图52所示。
在实际开发中，单纯对某个元素定义平移是没有太多意义的，变形效果一般都是结合CSS3动画一起使用。
5．2．2scale缩放
在CSS3中可以使用transform属性的scale()方法来实现元素的缩放效果。
【语法】
transform: scaleX(x); /*沿X轴方向缩放*/
transform: scaleY(y); /*沿Y轴方向缩放*/
transform: scale(x, y); /*沿X轴和Y轴方向同时缩放*/
跟translate()方法类似，缩放也有3种情况： scaleX()、scaleY()、scale()。参数x表示元素在X轴方向的缩放倍数，参数y表示元素在Y轴方向的缩放倍数。
【例53】transform: scale元素缩放实例。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
/*设置原始元素样式*/
#origin {
position:absolute;
top:30px;
left:20%;
width:200px;
height:200px;
border:2px solid red;
}
/*设置当前元素样式*/
#current {
width:200px;
height:200px;
color:rgb(255, 255, 255);
background-color: rgb(30, 170, 250);
opacity: 0.4;
transform:scaleX(1.5);
}
</style>
</head>
图53元素缩放效果
<body>
<div id="origin">原来
<div id="current">缩放</div>
</div>
</body>
</html>
程序运行效果如图53所示。
5．2．3rotate旋转
使用transform属性的rotate()方法来实现元素的旋转效果。
【语法】
transform: rotate(angle);
参数angle表示元素相对于中心原点旋转的度数(deg)。如果度数为正，则表示顺时针旋转； 如果度数为负，则表示逆时针旋转。如果没有写单位，如transform:rotate(50)不会变化。
【例54】transform:rotate()的元素旋转实例。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
/*设置原始元素样式*/
#origin{ position:absolute;
top:30px;
left:20%;
width:200px;
height:200px;
border:2px solid red;
}
/*设置当前元素样式*/
#current{
width:200px;
height:200px;
color:rgb(255, 255, 255);
background-color: rgb(30, 170, 250);
opacity: 0.4;
transform:rotate(50deg);
}
图54元素旋转效果
</style>
</head>
<body>
<div id="origin">原来
<div id="current">旋转</div>
</div>
</body>
</html>
程序运行效果如图54所示。
5．2．4skew斜拉
transform的skew()方法能实现元素的倾斜效果。
语法：
transform: skewX(x); /*沿X轴方向倾斜*/
transform: skewY(y); /*沿Y轴方向倾斜*/
transform: skew(x, y); /*沿X轴和Y轴方向同时倾斜*/
倾斜也有3种情况： skewX()、skewY()、skew()。参数x表示元素在X轴方向的倾斜度数，单位为deg。如果度数为正，则表示元素沿X轴方向逆时针倾斜； 如果度数为负，则表示元素沿X轴方向顺时针倾斜。
参数y表示元素在Y轴方向的倾斜度数，单位为deg。如果度数为正，则表示元素沿Y轴方向顺时针倾斜； 如果度数为负，则表示元素沿Y轴方向逆时针倾斜。
【例55】transform:skew()的元素斜拉实例。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
/*设置原始元素样式*/
.origin{ position:absolute;
top:30px; left:20px;
width:200px;
height:200px;
border:2px solid red;
}
/*设置当前元素样式*/
.skewX{
position:absolute;
top:300px; left:20px;
width:200px;
height:200px;
color:rgb(14, 13, 13);
background-color: rgb(217, 250, 30);
opacity: 0.4;
transform:skewX(30deg);
}
.skewY{
position:absolute;
top:300px; left:320px;
width:200px;
height:200px;
color:rgb(10, 10, 10);
background-color: rgb(30, 250, 239);
opacity: 0.4;
transform:skewY(40deg);
}
.skewXY{
position:absolute;
top:300px; left:620px;
width:200px;
height:200px;
color:rgb(20, 18, 18);
background-color: rgb(250, 30, 48);
opacity: 0.4;
transform:skew(50deg,50deg);
}
</style>
</head>
<body>
<div class="origin">原来</div>
<div class="skewX">skewX </div>
<div class="skewY">skewY</div>
<div class="skewXY">skewXY</div>
</body>
</html>
程序运行效果如图55所示。
图55元素斜拉效果
53anima
tion
5．3transition过渡
transition将元素的某一个属性从“一个值”在指定的时间内平滑地过渡到“另一个值”，从而实现动画效果，例如，渐渐显示、渐渐隐藏、动画快慢。
【语法】
transition: transition-property transition-duration transition-timing-funciton transition-delay;
其中，transitionproperty:none|all|property。
none： 没有属性会获得过渡效果。
all： 所有属性都将获得过渡效果。
property： 定义应用过渡效果的CSS属性名称列表，也就是transition属性可以同时定义两组或两组以上的过渡效果，组与组之间用逗号分隔。具有过渡的CSS属性主要有以下几种。
颜色： color,backgroundcolor,borderbottomcolor,bordertopcolor, borderleftcolor, borderrightcolor, outlinecolor等属性。
宽度： width,maxwidth,bordertopwidth,borderbottomwidth,borderleftwidth,borderrightwidth，minwidth等属性。
高度： height,maxheight,lineheight等属性。
位置: right,left,bottom,top,backgroundposition等属性。
边框： padding,paddingleft,paddingright,paddingtop,paddingbottom,margin,marginleft,marginright,margintop,marginbottom等属性。
大小： fontsize,fontweight,boderspacing,letterspacing,textindent等属性。
透明度： opacity,visibility,textshadow等属性。
transitionduration属性需要始终设置，否则时长为0，就不会产生过渡效果。
transitiondelay: time;在过渡效果开始前等待时间，单位为s或ms。
transitiontimingfunction属性用来描述这个中间值是怎样计算的。通过这个函数建立一条加速度曲线，因此在整个transition变化过程中，变化速度可以不断改变。常见的函数如下。
transition-timing-function: ease /*规定慢速开始，然后变快，然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))*/
transition-timing-function: ease-in /* 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))*/
transition-timing-function: ease-out/* 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))*/
transition-timing-function: ease-in-out/*规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))*/
transition-timing-function: linear/*规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))*/
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1)
/*cubicbezier(n,n,n,n)在cubicbezier 函数中定义自己的值。可能的值是0~1的数值*/。例如：
transition-timing-function: step-start
transition-timing-function: step-end
transition-timing-function: steps(4, end)
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1)
cubicbezier() 函数定义了一个贝塞尔曲线(Cubic Bezier)。贝塞尔曲线由四个点P0，P1，P2和P3定义。cubicbezier参数范围如图56所示，P0和P3是曲线的起点和终点。P0是(0,0)并且表示初始时间和初始状态，P3是(1,1)并且表示最终时间和最终状态。P0默认值(0,0)，P1动态取值(x1,y1)，P2动态取值(x2, y2)，P3默认值(1, 1)， 如图57所示。需要关注的是P1和P2两点的取值，X轴的取值范围是0~1，当取值超出范围时 cubicbezier 将失效； Y 轴的取值没有规定，当然也无须过大。
图56贝塞尔曲线参数范围
图57贝塞尔曲线
最直接的理解是，将以一条直线放在范围只有 1的坐标轴中，并从中间拿出两个点来拉扯(X 轴的取值区间是［0,1］，Y 轴任意)，最后形成的曲线就是动画的速度曲线。
【例56】transition的元素属性过渡实例。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>过渡，动画效果</title>
<style>
div
{ width:100px;
height:100px;
background-image:url(images/fall.jpg);
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
transition-property: width height;
transition-duration: 8s;
}
div:hover
{
width:1200px;
height:1000px;
}
</style>
图58过渡的初始状态
</head>
<body>
<p><b>注意:</b>该属性不兼容IE9以及更早版本的浏览器。</p>
<div></div>
<p>鼠标移动在块上查看动画效果。</p>
</body>
</html>
程序运行效果如图58和图59所示。
图59过渡过程的中间状态
5．4animation动画
动画属性可以逐渐地从一个值变化到另一个值，如尺寸大小、数量、百分比和颜色。CSS 属性是可以有动画效果的，这意味着它们可以用于动画和过渡。
5．4．1animation 简介
transition过渡是通过初始和结束两个状态之间的平滑过渡实现动画的。animation则是通过关键帧@keyframes来实现更为复杂的动画效果。
对于transition属性来说，它只能将元素的某一个属性从一个属性值过渡到另一个属性值，只能实现一次性的动画效果。而对于animation属性来说，它可以将元素的某一个属性从第1个属性值过渡到第2个属性值，然后还可以继续过渡到第3个属性值，以此类推，可以实现连续性的动画效果。
animation也是一个复合属性，包括8个子属性，主要使用前6个子属性。
【语法】
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-play-state animation-fill-mode;
其中，以下几个属性与transition过渡的属性类似。
animationduration属性取值是一个时间，单位为s，可以是小数。
animationtimingfunction属性取值共有5种，这个跟CSS3过渡的transitiontimingfunction是一样的。
animationdelay属性用来定义动画的延迟时间，单位为s，可以为小数，其中默认值为0s。当没有定义animationdelay时，动画就没有延迟时间。例如，animationdelay:2s;表示当页面打开后，动画需要延迟2秒才会开始执行。
animationiterationcount属性取值有两种： 一种是“正整数”，另外一种是“infinite”。当取值是n(正整数)时，表示动画播放n次； 当取值为infinite时，表示动画播放无数次，也就是循环播放。
5．4．2animationname动画名称@keyframes
关键帧的语法是以@keyframes开头，后面紧跟着动画名称animationname。from等同于0，to等同于100%。百分比跟随的花括号里面的代码，代表此时对应的样式。keyframes属性如表52所示。
【语法】
@keyframes animationname {
keyframes-selector {
css-styles;
}
}
表52keyframes的属性
值属性描述
animationname必需，定义动画的名称
keyframesselector必需，动画时长的百分比。合法的值： 0~100%，from(与0%相同)，to(与100%相同)
cssstyles必需，一个或多个合法的CSS 样式属性
例如，颜色变化帧：
@keyframes mycolor {
0{background-color:red;}
30%{background-color:blue;}
60%{background-color:yellow;}
100%{background-color:green;}
}
animationname调用的动画名需要和@keyframes规则定义的动画名完全一致(区分大小写)，如果不一致将不会产生任何动画效果。
【例57】animation的动画实例。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 实现动画</title>
<style>
div{
background-image: url("fig1.png");
width:300px;
height: 300px;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}
@keyframes mymove{
from {left:0px;}
30%{left:30px;}
60%{left:90px;}
to {left:200px;}
}
</style>
</head>
<body>
<div>动起来</div>
</body>
</html>
上面的动画通过animation： mymove 5s infinite语句实现，其中，mymove为动画名称，5s为持续时间，infinite为动画次数不限制。具体效果为： 前30%的时间从0移动到30个像素，30%~60%的时间为30~90像素，60%~100%的时间为90~200个像素，因此移动变化的速度不一样。程序运行效果如图510和图511所示。
图510前30%的某帧
图51130%~60%的某帧
【例58】animation同时有两个属性变换的动画实例。
<!DOCTYPEhtml>
<html>
<head>
<title>Animation同时改变多个属性的变化</title>
<style>
div{
width:150px;
height:50px;
background:#4cff00;
border:3pxsolid#000000;
position:absolute;
left:200px;
top:300px;
}
/*定义一个关键帧*/
@keyframes xiaolei {
0 { background-color:#4cff00;
transform: scale(0);
}
40% {
background-color:#f00;
transform: scale(1.5);
}
70% {
background-color:#ffd800;
transform: scale(2.5);
}
100% {
transform: scale(3.5);
background-color:#4cff00;
}
}
div:hover{
animation-name:xiaolei;
animation-duration:8s;
animation-timing-function: ease-in;
}
</style>
</head>
<body>
<div>鼠标悬停，开始动画</div>
</body>
</html>
初始状态如图512所示， 动画过程有缩放，同时颜色也在变化，如图513所示。
图512动画的初始状态
图513动画的变化过程状态
5．4．3animationdirection和animationplaystate
animationdirection属性，检索或设置对象动画在循环中是否按照方向运动，常见的播放方向取值见表53。
表53animationdirection的取值
属性值描述
normal正方向运动
reverse反方向运动
alternate动画先正方向运动再反方向运动，并持续交替运行
alternatereverse动画先反方向运动再正方向运动，并持续交替运行
initial默认值
inherit继承父元素的属性值
animationplaystate属性用来定义动画的播放状态。有两个取值： running为播放(默认值)，paused为暂停。
【例59】animation的播放方向和暂停播放实例。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
@keyframes mytranslate{
0{}
50%{transform:translateX(160px);}
100%{}
}
#ball{
width:40px;
height:40px;
border-radius:20px;
background-color:red;
animation-name:mytranslate;
animation-timing-function:linear;
animation-duration:2s;
animation-iteration-count:infinite;
}
#container {
display:inline-block;
width:200px;
border:1px solid silver;
}
</style>
<script>
window.onload = function(){
var oBall = document.getElementById("ball");
var oBtnPause = document.getElementById("btn_pause");
var oBtnRun = document.getElementById("btn_run");
//暂停
oBtnPause.onclick = function(){
oBall.style.animationPlayState = "paused";
};
//播放
oBtnRun.onclick = function(){
oBall.style.animationPlayState = "running";
};
}
</script>
</head>
<body>
<div id="container">
<div id="ball"></div>
</div>
<div>
<input id="btn_pause" type="button" value="暂停" />
<input id="btn_run" type="button" value="播放" />
</div>
图514动画播放状态
</body>
</html>
红球在矩形框内来回移动，单击“暂停”按钮，小球则停止移动； 单击“播放”按钮，小球继续移动，效果如图514所示。
5．5CSS页面布局
5．5．1display属性
根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值,最常用的显示方式有block,inline, inlineblock。常见元素的默认显示方式如表54所示，但是可以通过指定其显示方式进行修改。
表54常见CSS元素的默认显示方式
显示方式默 认 元 素
行内
a，abbr， acronym， b， bdo，big， br，cite， code， dfn， em， font，i，img， input，kbd， label，q， s， samp， select，small， span, strike， strong，sub，sup， textarea，tt，u ,var
块级
header, article, aside,figure,canvas,video,audio,footer，address， blockquote， dir， div， dl，fieldset， form， h1， h2， h3，h4，h5，h6， hr， isindex，menu， noframes，noscript， ol，p，pre， table，ul
可变元素
applet，button， del， iframe， ins， map， object，script
其中code元素是计算机代码，在引用源码时使用，dfn元素为定义字段，kbd元素为定义键盘文本，samp元素为定义范例的计算机代码，tt元素为电传文本，dir元素为目录列表，isindex元素为输入提示，menu为菜单列表。noframes元素为frames的可选内容，对于不支持frame的浏览器显示此区块内容。noscript是可选的脚本内容，对于不支持script的浏览器显示此内容。
（1） 块级元素(block)： 独占一行，对宽高的属性值生效； 如果不给定宽度，块级元素就默认为浏览器的宽度，即100%宽。
【例510】block块级元素样式实例。
<!DOCTYPE html>
<HTML>
<head>
<style type="text/CSS">
div {
border-width: 4px;
border-color: red;
border-style: double;
}
#ID1 {
background-color:rebeccapurple;
color:#FFF;
height: 200px;
width: 200px;
}
#ID2 {
font: normal 14px/1.5 Verdana, sans-serif;
height: 200px;
width: 200px;
background-color: rosybrown;
}
</style>
</head>
<body>
<div>
<div id="ID1">ID1</div>
<div id="ID2">ID2</div>
box1
</div>
</body>
</HTML>
程序运行效果如图515所示。
图515块级元素的显示方式
（2） 行内元素(inline)： 也就是内联，可以多个标签存在一行，完全靠内容撑开宽高，任何的属性调高度都无效。因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。
【例511】inline显示方式实例。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS display:inline实现DIV并排</title>
<style>
.bbb1,.bbb2,.bbb3,.bbb4{
border-width: 2px ;
border-color: red;
border-style: solid;
width: 200px;
height: 200px;
display:inline}
/* 4个CSS简写：共用display:inline样式 */
</style>
</head>
<body>
<div class="bbb1">我在bbb1内</div>
<div class="bbb2">我在bbb2内</div>
<div class="bbb3">我在bbb3内</div>
<div class="bbb4">我在bbb4内</div>
</body>
</html>
运行结果如图516所示。
图516行内元素显示效果
(3) 行内块元素(inlineblock)： 结合行内元素和块级元素的优点，既可以设置长宽，可以让padding和margin生效，又可以和其他行内元素并排。
【例512】inlineblock样式实例。
<!DOCTYPE html>
<HTML>
<head>
<style type="text/CSS">
div {
border-width: 4px;
border-color: red;
border-style: double;
}
#ID1 {
background-color:rebeccapurple;
color:#FFF;
display: inline-block;
height: 200px;
width: 200px;
}
#ID2 {
font: normal 14px/1.5 Verdana, sans-serif;
height: 200px;
width: 200px;
background-color: rosybrown;
display: inline-block;
}
</style>
</head>
<body>
<div>
<div id="ID1">ID1</div>
<div id="ID2">ID2</div>
box1
</div>
</body>
</HTML>
程序运行效果如图517所示。
图517inlineblock行内块元素显示效果
观察图517可以发现，使用inlineblock 布局两个元素之间会有一个空白间隙。因为现在使用的是inlineblock元素，为了方便理解，可以将 inlineblock元素看成两个文字，文字与文字之间不可能是连在一起的，肯定是有间隙的。既然知道了是文字的问题，那就将父元素 container的字体大小设置为 0，可是这个时候会发现 left和right 这两个单词也没有了，这是因为 left和right元素继承了父级元素的字体大小，这时候只需要分别设置 left和right元素的字体大小即可。
【例513】inlineblock样式消除间隙实例。
<!DOCTYPE html>
<HTML>
<head>
<style>
<!--@import "inline-block1.css";-->
</style>
</head>
<body>
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</HTML>
inline-block1.css的内容为
.container {
width: 800px;
height: 200px;
font-size: 0; /* 新增 */
}
.left {
font-size: 14px; /* 新增 */
background-color: red;
display: inline-block;
width: 200px;
height: 200px;
}
.right {
font-size: 14px; /* 新增 */
background-color: blue;
display: inline-block;
width: 600px;
height: 200px;
}
程序运行效果如图518所示。
图518inlineblock样式消除间隙效果
5．5．2盒子模型
盒子模型是HTML和CSS中最核心的内容，结合浮动、定位等技术实现布局。CSS中所有页面元素都包含在一个矩形框内，这个矩形框就称为盒子。盒子描述了元素及属性在页面布局中所占空间大小，因此盒子可以影响其他元素的位置及大小。掌握盒子模型需要从两个方面理解： 一是理解单个盒子的内部结构，二是理解多个盒子之间的关系。
盒子模型用于设置元素的边界(margin)、边界补白(padding)、边框(border)等属性值，使用这一属性的大多是块元素。W3C组织建议把所有网页上的对象都放在一个盒子(box)中，设计师可以通过创建定义来控制这个盒子的属性，这些对象包括段落、列表、标题、图片以及层。盒子模型主要定义四个区域： 内容 (content)、边框距或空白、边界和边距。内容是盒子模型中必需的部分，可以是文字、图片等元素。padding也称页边距或补白，用来设置内容和边框之间的距离。border可以设置内容边框线的粗细、颜色和样式等。margin是外边距，用来设置内容与内容之间的距离。margin， padding，content，border之间的层次、关系和相互影响的盒子模型如图519所示。
图519方框盒子模型
margin： 包括margintop, marginright, marginbottom, marginleft, 控制块级元素之间的距离, 它们是透明不可见的。对于上右下左margin值均为40px, 因此代码为:
margin-top: 40px;margin-right: 40px;margin-bottom: 40px;margin-left: 40px;
根据上、右、下、左的顺时针规则, 简写为margin: 40px 40px 40px 40px;。为便于记忆,请参考如图520所示的顺序书写。
图520margin四个位置的书写顺序
当上下、左右margin值分别一致时, 可简写为: margin: 40px 50px;。
40px代表上下margin值, 50px代表左右margin值。
当上下左右margin值均一致时, 可简写为: margin: 40px;。
当上下margin值不一致，而左右margin值均一致时,可简写为:margin: 40px 50px 20px;。
40px，20px代表上下margin值, 50px代表左右margin值。
如果只提供一个数，将用于全部的四条边； 如果提供两个数，第一个用于上下，第二个用于左右； 如果提供三个数，第一个用于上，第二个用于左右，第三个用于下； 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
margin 不会在绝对元素上折叠。假设有一个marginbottom值为20px的段落。在段落后面是一个具有30px的margintop的图片。那么段落和图片之间的空间不会是50px(20px+30px)而是30px(30px> 20px)。这就是所谓的margincollapse，两个margin会合并(折叠)成一个margin。
绝对定位元素不会像那样进行margin的折叠，这会使它们跟预期的不一样。
【例514】margin的样式示例。
<!DOCTYPE html>
<HTML>
<head>
<style type="text/CSS">
#ID1 {
background-color: #333;
color:#FFF;
margin:10px;
}
#ID2 {
font: normal 14px/1.5 Verdana, sans-serif;
margin:30px;
border: 1px solid #F00;
}
</style>
</head>
<body>
<div id="ID1">
Hello,world
<h1 id="ID2">Margins of ID1 and ID2 collapse vertically.<br />
元素ID1与ID2的margins在垂直方向折叠.</h1>
</div>
</body>
</HTML>
运行程序，结果如图521所示。
图521margin样式结果
padding:包括paddingtop、paddingright、paddingbottom、paddingleft，控制块级元素内部content与border之间的距离。简写请参考margin属性的写法，如
body {padding: 36px;} //对象四边的补丁边距均为36px
body { padding: 36px 24px; } //上下两边补丁边距为36px，左右两边补丁边距为24px
body {padding: 36px 24px 18px; } //上下两边的补丁边距分别为36px、18px，左右两边的补丁边
距均为24px
body {padding: 36px 24px 18px 12px; } //上、右、下、左补丁边距分别为36px、24px、18px、12px
border:可以按顺序设置如下属性： borderwidth,borderstyle, bordercolor。如果不设置其中的某个值，也不会出问题，如border:solid #ff0000; 也是允许的。
（1） borderwidth简写属性为元素的所有边框设置宽度，或者单独地为各边框设置宽度。只有当边框样式不是none 时才起作用。如果边框样式是none，边框宽度实际上会重置为 0。不允许指定负长度值。可能的borderwidth取值及其对应的描述如下。
thin： 定义细的边框。
medium： 默认值，定义中等的边框。
thick： 定义粗的边框。
length： 允许自定义边框的宽度。
（2） borderstyle属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。只有当这个值不是none 时边框才可能出现。可能的borderstyle取值及其对应的描述如下。
none： 定义无边框。
hidden： 与none相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted： 定义点状边框。在大多数浏览器中呈现为实线。
dashed： 定义虚线。在大多数浏览器中呈现为虚线。
solid： 定义实线。
double： 定义双线。双线的宽度等于borderwidth的值。
groove： 定义3D凹槽边框。其效果取决于bordercolor的值。
ridge： 定义3D垄状边框。其效果取决于bordercolor的值。
inset： 定义3D inset边框。其效果取决于bordercolor的值。
outset： 定义3D outset 边框。其效果取决于bordercolor的值。
最不可预测的边框样式是double。它定义为两条线的宽度再加上这两条线之间的空间等于borderwidth 值。
（3） bordercolor 属性设置四条边框的颜色。此属性可设置1~4种颜色。bordercolor 属性是一个简写属性，可设置一个元素的所有边框中可见部分的颜色，或者为 4个边分别设置不同的颜色。简写请参考margin属性的写法，例如：
border-color:red green blue pink;
表示上边框是红色，右边框是绿色，下边框是蓝色，左边框是粉色。
border-color:red green blue;
表示上边框是红色，右边框和左边框是绿色，下边框是蓝色。
border-color:dotted red green;
表示上边框和下边框是红色，右边框和左边框是绿色。
border-color:red;
表示所有 4个边框都是红色。
可能的bordercolor取值及其对应的描述如下。
color_name： 规定颜色值为颜色名称的边框颜色，如red。
hex_number： 规定颜色值为十六进制值的边框颜色，如#ff0000。
rgb_number： 规定颜色值为 rgb代码的边框颜色，如rgb(255,0,0)。
transparent： 默认值。边框颜色为透明。
【例515】padding和border样式实例。
<!DOCTYPE html>
<HTML>
<head>
<style type="text/CSS">
#ID1 {
background-color: #333;
color:#FFF;
margin:10px;
padding:15px;
}
#ID2 {
font: normal 14px/1.5 Verdana, sans-serif;
margin:30px;
padding:15px;
border-width: 2px ;
border-style:groove;
border-color: red blue green;
}
</style>
</head>
<body>
<div id="ID1">要站在统筹中华民族伟大复兴战略全局和世界百年未有之大变局的高度，统筹国内国际两个大局、发展安全两件大事，</div>
<h1 id="ID2">充分发挥海量数据和丰富应用场景优势，促进数字技术与实体经济深度融合，<br/>赋能传统产业转型升级，催生新产业新业态新模式，不断做强做优做大我国数字经济。</h1>
</body>
</HTML>
运行程序，结果如图522所示。
图522padding和border样式结果
【例516】计算盒子模型元素的总宽度。
<!DOCTYPE html>
<HTML>
<head>
<style type="text/CSS">
div {
background-color: #333;
color:#FFF;
margin:10px;
padding:15px;
border-width: 20px;
width: 200px;
}
</style>
</head>
<body>
图523盒子模型的宽度
<div>要站在统筹中华民族伟大复兴战略全局和世界百年未有之大变局的高度，统筹国内国际两个大局、发展安全两件大事。</div>
<div>我的总宽度为多少？</div>
</body>
</HTML>
运行程序，结果如图523所示，总宽度为200px(宽)+10px×2(左右margin)+15px×2(左右padding)+20px×2(左右边框)=290px。
5．5．3标准文档流
标准文档流，指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。前面内容发生了变化，后面的内容位置也会随着发生变化。HTML就是一种标准文档流文件。HTML中的标准文档流的特点通过两种方式体现： 微观现象和元素等级。
微观现象有： 空白折叠现象(不管有几个空格都会展示一个空格)； 文字类的元素如果排在一行会出现一种高低不齐、底边对齐效果； 自动换行，元素内一行内容写满元素的width 时会自动进行换行。
【例517】微观现象实例。
<!DOCTYPE html>
<HTML>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<section>
<span>有</span><span>无</span>
</section>
<section>
<span>生</span><span>成</span>
</section>
<section>
<span>有</span>
<span>无</span>
</section>
</body>
</HTML>
一个空格一个回车和多个空格多个回车都会折叠成一个空格显示在页面上，折叠的空格是当前父元素的文字字体大小。
在标准流中大部分元素是区分等级的，习惯上将元素划分为几种常见的加载级别： 块级元素、行内元素、行内块元素等。
标准流中的元素有自己默认的浏览器加载模式，但是加载模式不是一成不变的，后期可以通过 display 属性更改一个标签的显示模式。
display属性更改的显示模式并没有改变标准流本质性质，页面还是只能从上往下加载，存在空白折叠现象等微观性质。要想实现更多的界面布局效果需要脱离标准流的限制。标签元素脱离标准流的方法包括： 浮动、绝对定位、固定定位。
5．5．4浮动float样式
在传统的印刷布局中，文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”。在网页设计中，应用了CSS的浮动float属性的页面元素就像在印刷布局里面的被文字包围的图片一样。
【语法】
{float : none | left |right}
参数值：
none: 对象不浮动。
left: 对象浮在左边，文字下沉。
right: 对象浮在右边。
【例518】float样式实例。
<!DOCTYPE html>
<HTML>
<head>
<Meta http-equiv="Content-type" content="text/HTML; charset=UTF-8" />
<link rel="stylesheet" type="text/CSS" href="main.CSS" />
<title>CSS FLOAT</title>
<style type="text/CSS">
.top {
width:500px; /*div框的宽度*/
background:#f1f1f1; /*div框的背景色*/
}
.img {
float:left; /*图片向左浮动*/
margin-right:10px; /*图片右侧与文字的边距*/
margin-bottom:5px; /*图片下部与文字的边距*/
width: 200px;
height: 150px;
border:thin dotted red;
}
</style>
</head>
<body>
<!--环绕的图片及文字,图片的CSS类为 img-->
<h1>滕王阁序</h1>
<img src="tengwangge.jpg" alt="文字环绕" class="img" />
<div class="top"> 豫章故郡,洪都新府。星分翼轸,地接衡庐。襟三江而带五湖,控蛮荆而引瓯越。物华天宝,龙光射牛斗之墟;人杰地灵,徐孺下陈蕃之榻。雄州雾列,俊采星驰。台隍枕夷夏之交,宾主尽东南之美。都督阎公之雅望,棨戟遥临;宇文新州之懿范,襜帷暂驻。十旬休假,胜友如云;千里逢迎,高朋满座。腾蛟起凤,孟学士之词宗;紫电青霜,王将军之武库。家君作宰,路出名区;童子何知,躬逢胜饯。
</div>
</body>
</HTML>
运行程序，结果如图524所示。
图524float样式结果
不能在同一个属性当中同时应用定位属性和浮动。因为对使用什么样的定位方案来说两者的指令是相冲突的。如果两个属性添加到相同的元素上，CSS会选择后面的属性。
5．5．5元素定位
定位模式规定了一个盒子在总体的布局上应该处于什么位置以及对周围的盒子会有什么影响。定位模式包括常规文档流、浮动和position定位的元素。
【语法】
HTML标签 { position: absolute | relative | fixed | static }
static是position 默认的属性值。任何应用了position:static的元素都处于常规文档流中。它处于什么位置以及它如何影响周边的元素都是由盒子模型所决定的。一个static定位的元素会忽略所有 top，right，bottom，left 以及 zindex 属性所声明的值。不能通过zindex进行层次分级。
【例519】static位置样式实例。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>position</title>
<style>
* {
padding: 0;
margin: 0;
}
.static {
position: static;
top: 10px;
left: 10px;
width: 100px;
height: 200px;
background: yellow;
}
</style>
</head>
<body>
<div class="static"></div>
</body>
</html>
运行程序，结果如图525所示。
absolute，绝对定位的元素会从常规文档流中脱离。对于包围它的元素而言，它会将该绝对定位元素视为不存在，也就是说，其在正常流中的原有位置不再存在。可以通过top,right,bottom和left四个属性来设置绝对定位元素的位置。但通常只会设置它们其中的两个： top 或者 bottom，以及left或者right。它们的默认值都为auto。
假设初始位置如图526所示，Box1占据left和top为(0,0)的位置，下面的Box2为static。
图525static位置样式结果
图526Box1和Box2的初始位置
如果Box1的样式设置如下：
#box1{
position: absolute ;
top:20px;
left:20px;
}
Box1会往右和往下分别平移20px，则原来的位置将会被下面的Box2占据，变化后的位置如图527所示。
对于absolute定位的层总是相对其最近的定义为absolute 或relative的父元素，也就是非static的父元素，而这个父元素不一定是其直接父层。如图528所示，absolute的div首先查看父元素div3,如果div3为static，则查div2。如果div2为非static,则相对div2向右平移20px,向下平移20px。
图527Box1和Box2变换后的位置
图528absolute的相对定位
生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。如果不设置left,top,right以及bottom，会在父元素的适当位置显示。
【例520】没有设置上下左右位置的固定样式实例。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>position</title>
<style>
.relative {
width: 300px;
height: 300px;
border: 1px solid;
position: relative;
left: 100px;
top: 100px;
}
.absolute {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="relative">
outer
<div class="absolute"></div>
</div>
</body>
</html>
图529没有设置上下左右位置样式效果
运行程序，结果如图529所示。
设置了left 将以父元素的左边界为基准，向右偏移，垂直方向和之前相同。设置了right 将以父元素的右边界为基准，向左偏移，垂直方向和之前相同。设置了top 将以父元素的上边界为基准，向下偏移，水平方向和之前相同。设置了bottom，将以父元素的下边界为基准，向上偏移，水平方向和之前相同。
【例521】设置偏移位置的样式实例。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>position</title>
<style>
.relative {
width: 300px;
height: 300px;
border: 1px solid;
position: relative;
left: 100px;
top: 100px;
}
.absolute1, .absolute2, .absolute3, .absolute4, .absolute5 {
position: absolute;
width: 100px;
height: 100px;
border: 2px solid red;
}
.absolute2 {
left: 60px;
border-color: green;
}
.absolute3 {
right: 10px;
border-color: yellow;
}
.absolute4 {
top: 30px;
border-color: pink;
}
.absolute5 {
bottom: 10px;
border-color: blue;
}
</style>
</head>
<body>
<div class="relative">
<div class="absolute1">box1</div>
<div class="absolute2">box2</div>
<div class="absolute3">box3</div>
<div class="absolute4">box4</div>
<div class="absolute5">box5</div>
</div>
</body>
</html>
运行程序，结果如图530所示。
relative方式:以标准流的排版方式为基础，相对定位的元素根据top、right、bottom和left四个属性相对标准流位置决定自己的位置。相对定位元素离开了正常文档流，但仍然影响着围绕着它的元素，也就是说，在文档中原来的位置还在。那些元素表现得就好像这个相对定位元素仍然在正常文档流当中。假设初始位置如图531所示，Box1占据left和top为(0,0)的位置，下面的Box2为static。
图530absolute 位置样式效果
图531relative属性元素的初始位置
设置Box1的样式：
#box1{
width:170px;
height:190px;
position: relative;
top:20px;
left:20px
}
Box1发生了平移后，静态属性的Box2没有占领Box1的位置，如图532所示。
relative定位的层总是相对其直接父元素，无论其父元素是什么定位方式，如图533所示，relative的div是相对其直接父元素div3定位top和left。
图532相对位置的原始位置依然有影响
图533relative属性定位
生成相对定位的元素，相对于其标准流正常位置进行定位。相对元素正常应该在的位置移动，元素所占的空间位置不变，但是显示的位置发生偏移。left是向右偏移，right是向左偏移，top向下偏移，bottom向上偏移。
【例522】设置relative的样式实例。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>position</title>
<style>
* {
padding: 0;
margin: 0;
}
.div {
width: 100px;
height: 100px;
border: 1px solid;
float: left;
}
.relative1 {
position: relative;
left: 10px;
top: 10px;
border-color: red;
}
.relative2 {
position: relative;
right: 10px;
bottom: 10px;
border-color: green;
}
</style>
</head>
<body>
<div class="div">box1</div>
<div class="div relative1">box2</div>
<div class="div">box3</div>
<div class="div relative2">box4</div>
</body>
</html>
程序运行效果如图534所示。一般父元素设计为relative，子元素为absolute，则子元素可以随父元素一起移动。
图534relative位置样式效果
fixed，相对于浏览器窗口进行定位。元素的位置通过top, right, bottom和left属性进行规定。只和浏览器窗口有关，与父元素、文档流都无关。固定定位的行为类似于绝对定位，但也有一些不同的地方。第一个不同点，固定定位总是相对于浏览器窗口来进行定位的，并且通过top, right, bottom和left 属性来决定其位置，它抛弃了它的父元素。第二个不同点是继承性，固定定位的元素是固定的。它们并不随着页面的滚动而移动。常见的案例是，左边和右边都是广告，中间为内容，广告设置为fixed，则无论中间的内容如何变化，广告区域都不会变化，如图535所示。
图535fixed 样式效果
【例523】设置fixed的样式实例。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>position</title>
<style>
* {
padding: 0;
margin: 0;
}
.fixed-outer {
position: fixed;
top: 20px;
left: 20px;
width: 50px;
height: 50px;
background: yellow;
border: groove red;
}
.fixed-inner {
position: fixed;
top: 40px;
left: 40px;
width: 50px;
height: 50px;
background: red;
}
</style>
</head>
<body>
<div class="fixed-outer"> outer box
<div class="fixed-inner"> inner box</div>
图536fixed位置样式效果
</div>
</body>
</html>
运行效果如图536所示。
综上，4种位置关系的定位参照物、原来的位置和新位置的关系总结如表55所示。
表55position定位的关系总结
方式定位参照物 新位置原 来 位 置
static标准文档流 top, right, bottom和left无效—
absolute非static的父元素top, right, bottom和left不保留
relative直接父元素 top, right, bottom和left保留
fixed浏览器窗口top, right, bottom和left—
5．5．6zindex空间中定位元素
三维空间中定位元素的属性是zindex，打破了二维平面的约束，具有宽度和高度。zindex 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。该属性设置一个定位元素沿Z轴的位置，Z轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
【例524】zindex样式实例。
<!DOCTYPE html>
<HTML>
<head>
<style type="text/CSS">
img{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>
<body>
<h1 style="color:red">This is a heading</h1>
<img src="images/c.jpg" />
<p style="color:red">由于图像的 z-index 是 -1,因此它在文本的后面出现.</p>
</body>
</HTML>
程序运行效果如图537所示。
由图538可知，zindex高的位于zindex低的上面并朝页面的上方运动。与此相反，一个低的zindex在高的zindex的下面并朝页面下方运动。所有元素的默认的zindex值都为0，并且可以对zindex使用负值。
图537zindex样式效果
图538zindex的上下层关系
假如只是开发简单的弹窗效果，懂得通过zindex来调整元素间的层叠关系就够了。但要将多个弹窗间的层叠关系给处理好，那么充分理解zindex背后的原理及兼容性问题就是必要的知识储备了。常接触到的zindex只是分层显示中的一个属性，而理解zindex背后的原理实质上就是要理解分层显示原理。
5．5．7inlineblock布局和浮动布局对比
inlineblock布局和浮动布局效果类似，但也有区别。如果把inlineblock布局修改为浮动布局，即display: inlineblock 替换为float: left，发现float就会使得元素脱离文本流，且还有父元素高度坍塌的效果。
【例525】inlineblock布局修改为浮动布局实例。
<!DOCTYPE html>
<HTML>
<head>
<style type="text/CSS">
div {
border-width: 4px;
border-color: red;
border-style: double;
}
#ID1 {
background-color:rebeccapurple;
color:#FFF;
float :left;
height: 200px;
width: 200px;
}
#ID2 {
font: normal 14px/1.5 Verdana, sans-serif;
height: 200px;
width: 200px;
background-color: rosybrown;
float :left;
}
</style>
</head>
<body>
<div>
<div id="ID1">ID1</div>
<div id="ID2">ID2</div>
box1
</div>
</body>
</HTML>
程序运行效果如图539所示。
图539inlineblock布局修改为浮动布局的效果
为了克服坍塌问题，需要闭合浮动，对父元素box1设置overflow:hidden。
【例526】浮动闭合实例。
<!DOCTYPE html>
<HTML>
<head>
<style type="text/CSS">
div {
border-width: 4px;
border-color: red;
border-style: double;
overflow: hidden;
}
#ID1 {
background-color:rebeccapurple;
color:#FFF;
float :left;
height: 200px;
width: 200px;
}
#ID2 {
font: normal 14px/1.5 Verdana, sans-serif;
height: 200px;
width: 200px;
background-color: rosybrown;
float :left;
}
</style>
</head>
<body>
<div>
<div id="ID1">ID1</div>
<div id="ID2">ID2</div>
box1
</div>
</body>
</HTML>
程序运行效果如图540所示。
图540闭合浮动的效果
可见消除了坍塌问题，对比inlineblock显示方式，消除了缝隙，与设置了字体大小为0的效果一样。浮动布局不太好的地方： 参差不齐的现象，即使添加了verticalalign:bottom也不起作用，也是顶部对齐。
【例527】多个元素的浮动布局对齐实例。
<!DOCTYPE html>
<HTML>
<head>
<style type="text/CSS">
div {
border-width: 4px;
border-color: red;
border-style: double;
overflow: hidden;
float :left;
}
#ID1 {
background-color:rebeccapurple;
color:#FFF;
height: 100px;
width: 200px;
}
#ID2 {
font: normal 14px/1.5 Verdana, sans-serif;
height: 150px;
width: 200px;
background-color: rosybrown;
}
#ID3 {
background-color:rebeccapurple;
color:#FFF;
height: 200px;
width: 200px;
}
#ID4 {
font: normal 14px/1.5 Verdana, sans-serif;
height: 250px;
width: 200px;
background-color: rosybrown;
}
</style>
</head>
<body>
<div>
<div id="ID1">ID1</div>
<div id="ID2">ID2</div>
<div id="ID3">ID3</div>
<div id="ID4">ID4</div>
box1
</div>
</body>
</HTML>
程序运行效果如图541所示。
图541浮动布局的参差不齐效果
对于inlineblock显示方式默认的情况下也是顶部对齐，效果如图542所示。
图542inlineblock的默认顶部对齐效果
但可以通过设置verticalalign在顶部、底部或基线对齐。
【例528】多个元素的浮动布局+verticalalign的对齐实例。
<!DOCTYPE html>
<HTML>
<head>
<style type="text/CSS">
div {
border-width: 4px;
border-color: red;
border-style: double;
vertical-align:bottom;
}
#ID1 {
background-color:rebeccapurple;
color:#FFF;
height: 100px;
width: 200px;
display: inline-block;
}
#ID2 {
font: normal 14px/1.5 Verdana, sans-serif;
height: 150px;
width: 200px;
background-color: rosybrown;
display: inline-block;
}
#ID3 {
background-color:rebeccapurple;
color:#FFF;
height: 200px;
width: 200px;
display: inline-block;
}
#ID4 {
font: normal 14px/1.5 Verdana, sans-serif;
height: 260px;
width: 200px;
background-color: rosybrown;
display: inline-block;
}
</style>
</head>
<body>
<div>
<div id="ID1">ID1</div>
<div id="ID2">ID2</div>
<div id="ID3">ID3</div>
<div id="ID4">ID4</div> box1
</div>
</body>
</HTML>
程序运行效果如图543所示。
图543inlineblock+verticalalign的底部对齐效果
综上可见，浮动布局主要用于文字环绕，而水平排列最好使用inlineblock。
5．6基于中国风的Web样式设计——文化和技术的融合
中国风设计不仅是指某个元素，它应该是一个整体，需要有自己的特色，无论设计手法如何变化，只要作品呈现出来，都会有广泛认同的中国风格设计特点。中国风格的网页样式应该是一种建立在中国文化和东方生活方式基础上的，并适应全球经济发展趋势的、有着自身独特魅力和性格的作品。
“中国风”设计的兴起最初并非起源于中国。16世纪在欧洲产生了一种东方情调的装饰艺术风格，被称为“中国风格”或“中国风”，主要表现在装饰艺术领域，以中国人物或中国动植物、风景为题材，在色彩配置、构图形式上，也部分地借鉴了东方艺术的特色。“中国风”设计虽然血统混杂，不中不西，却具有独特的艺术魅力，它应当是设计师对民族文化理解后的一种自然情感的流露。
1998年，美国动画大片《花木兰》在全球轰动，是美国制作团队第一次将中国元素传遍世界。
2008年上映的美国动作喜剧动画电影《功夫熊猫》再次风靡全球，尖端的科技和超凡的想象力把中国元素演绎得出神入化，以中国功夫为主题，以中国古代为背景，其景观、布景、服装以至食物均充满中国元素。
荣膺第55届戛纳电影节“最佳导演奖”的韩国电影《醉画仙》，其官方网站的界面设计东方特色浓郁，利用Web动画技术把中国传统的水墨画技法体现得淋漓尽致，观者似乎不是在浏览一个网站，而是在欣赏一位水墨大师肆意挥毫，兔起鹘落间笔走龙蛇、墨分五色，或浓或淡、或焦或渴、或干裂秋风、或润含春雨，那种心灵上的震撼与共鸣是难以言表的。
创造了一种忆江南的浓浓的中国情调，体现了江南独特的魅力，整个过程由开始的动画入手，给人一种推开一扇沉重的历史大门，然后看里面的情节变化，沧桑风雨，整个网站没有任何现代的东西，全部是中国古文化的结晶，悠悠百年，尽在其中。
中国古籍在装帧设计上形式多样活泼，洋溢着鲜明的中国民族气派，蕴涵了意念的空灵美、淡雅的色彩美、严整的秩序美等中国传统美学精神。
案例网站的界面设计采用了独具东方情调的艺术风格和传统的文化符号，根据网站的内容，采用了独具东方情调的艺术风格和传统的文化符号，以古典的中国画、书法、古建筑物等中国图形元素为主，既有工笔的精雕细刻，又有写意的随性挥洒，或丝丝细线，刚劲而秀妍，层层重彩，色和而调鲜。在视觉呈现上匠心独运，寻求古典与现代最佳的契合点，令观者身心俱醉，流连忘返，使浏览者感受到中国传统文化的独特魅力。
Web网页设计应用了大量的高科技方法，增强了交互性，表现形式与表现力远胜于传统艺术形式，能够使审美主体产生更大的沉浸感与愉悦感，但不能形成“唯技术至上”的思维定式。Web样式设计除了技术之外，通过对优秀网站作品的观摩与学习，更多的是对传统文化的渗透与熏陶，探讨中国元素在网站 UI 设计中的应用。
习题
1. 通过实例，比较亮度brightness和对比度contrast滤镜的区别。
2. 通过实例，比较透明程度opacity和饱和度saturate滤镜的区别。
3. 通过实例，比较移动、旋转、缩放和倾斜的区别和联系。
4. 通过实例，比较transition 过渡和animation动画的区别和联系。
5. 通过实例，比较block,inline, inlineblock的区别和联系。
6. 通过实例，比较盒子模型的边界(margin)、边界补白(padding)、边框(border)的区别和联系。
7. 比较标准文档流、inlineblock和浮动float样式的关系。
8. 通过实例，比较absolute、relative、fixed和static四种元素定位方式的区别和联系。
9. 分析一个经典的具有中国风特色的网站样式设计。