CSS基础知识
4.CSS基础
【要点:CSS的基本概念；CSS的语法结构；CSS的样式属性；盒子模型】
4.1 CSS基础
CSS（Cascading Style Sheet)层叠样式表、级联样式表。是纯文本的，文件扩展名.css。CSS是一种描述性的文本，用于增强或控制网页的样式，并允许将样式信息与网页内容分离。HTML是标识页面结构的标记语言。随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能，使HTML变得越来越杂乱，页面也越来越臃肿。CSS应运而生。CSS已经为大多数浏览器所支持。
1、CSS的历史
1994年，哈坤·利提出最初建议。一个样式可以继承。层叠的方式能够灵活加入自己的设计。
1996年底，初稿完成，12月，CSS规范的第一个版本出版。
1998年5月出版CSS规范的第二版。
2、CSS的特点
CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它，可以实现修改一个小的样式来更新与之相关的所有页面元素。
1）丰富的样式定义
提供了丰富的文档样式外观，以及设置文本和背景属性的能力，允许为任何元素创建边框、元素边框与其他元素间的距离、元素边框与元素内容间的距离，允许随意改变文本的显示与修饰方式，以及其他页面效果。
2）易于使用和修改
可将样式定义在HTML元素的style属性中，或文档的head部分，或声明在一个专门的CSS文件中，供页面引用。
3)多页面应用
单独存放在CSS文件中的样式，可以用于多个页面中。实现多个页面风格的统一。
4)层叠
层叠就是对一个元素多次设置同一个样式，将使用最后一次设置的属性值。
后来定义的样式将对前面的样式设置进行重写。最终看到的效果，是最后设置的样式效果。
5）页面压缩
HTML文档中大量或重复的元素文字样式，会产生大量的HTML标签，使页面文件的大小增加。将样式的声明单独放到CSS样式表中，可大大地减小页面的体积，使加载页面的时间大大减少。
3、CSS的优势
1）Web页面样式与结构分离
2）页面下载时间更快
3）省开发和维护成本
4）令人满意的版面样式控制
5）轻松创建与编辑
6）兼顾打印和Web页面设计
7）较好地控制元素在Web页面中的位置
8）有利于搜索引擎的搜索
4.2 使用CSS
4.2.1 语法结构
1、CSS的语法结构由选择符、样式属性、样式值三部分组成。
基本语法：
选择符 {
样式属性：样式值；
样式属性：样式值；
……
}
选择符(selector):指出这组样式编码所要针对的对象，可以是一个HTML标签，也可以是定义了特定class或id的标签。浏览器将对CSS选择符进行严格解析，每一组样式均会被应用到对应的对象上。
属性(property):是CSS样式控制的核心，CSS提供了丰富的样式属性，如颜色、大小、定位和浮动方式等。
值(value):是指属性的值，有两种形式，一种是指定范围的值，如float属性，只可使用left、right和none三种值。另一种为数值，如width能够使用0-9999px，或者其他单位来指定。
如：body{ background-color: black }
示例1：
body {
font-size:12px;
color:green;
}
示例2：
h1 {
color:green;
}
示例3：
h1 {
text-align:center;
padding-top:70px;
color:#805231;
font-family:"黑体";
font-weight:bold;
}
2、CSS属性值value的单位
CSS中的属性值必须给一个准备的单位。除0值外，其他值都必须紧跟单位，不要在数值与单位之间加空格。
在写CSS的时候最常用的长度单位是px(像素)，经常看到的还有em，pt等等，其实CSS中的长度单位一共有8个，分别是px，em，pt，ex，pc，in，mm，cm。
1）px：像素(Pixel),相对于设备的长度单位，像素是相对于显示器屏幕分辨率而言的。如，windows所使用的分辨率一般是96像素/英寸。而MAC所使用的分辨率一般是72像素/英寸。
2）em：相对长度单位。相对于当前对象内文本的字体尺寸。如当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
3）pt：点(Point)，绝对长度单位。
4）ex：相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
5）pc：派卡(Pica)，绝对长度单位。相当于我国新四号铅字的尺寸。
6）in：英寸(Inch)，绝对长度单位。
7）mm：毫米(Millimeter)，绝对长度单位。
8）cm：厘米(Centimeter)，绝对长度单位。
其中：1in = 2.54cm = 25.4 mm = 72pt = 6pc ;
容器的大小经常用px做单位;
字体大小(font-size)很多人用px做单位，其实用px做字体单位唯一的致命缺点就是在IE下无法用浏览器字体缩放的功能。但是，现在用px做字体单位在IE下无法用浏览器字体缩放的功能的缺点已经不再是那么重要了。新版本IE7，IE8都已经支持整个网页的缩放功能。
百分比单位
百分比是一个特殊的长度单位，它也是一个相对长度单位，一般指定元素本身相对于父级元素的大小。
img {
width:50%;
height:70%
}
3、颜色表示法
#rrggbb
#rgb
rgb(r,g,b) 0-255
rgb(r%, g%, b%) 0-100
4.2.2 在网页中添加CSS的方法
1、内嵌样式表
将样式定义代码作为属性直接定义在HTML元素中。
特点：直观、方便。与HTML页面结构强耦合，使得样式表与页面结构无法分离，不利于网页的维护。
如：<font style="font-size:12px; color:#f00">要显示的内容</font>
对应于传统的方法：<font size＝"12px" color="#f00">要显示的内容</font>
如：<table style="color:red; margin-right:200px">……</table>
2、内部样式表
将CSS样式声明放在HTML页面代码的head元素中，样式表由style元素进行存放。
如：
<head>
<style type="text/css">
div {
border:solid 1px #c00;
}
</style>
</head>
如：
<head>
<style type="text/css">
body {
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
</style>
</head>
style元素并不限制个数。
3、链接外部样式表
将CSS样式声明的代码单独存放在扩展名为.css的文件中，然后在页面中通过link元素将该文件链接到页面中。
<head>
<link rel="stylesheet" type="text/css" href="test.css"/>
</head>
rel属性表示指定链接到样式表，type表示样式表类型，href指定样式表所在的位置。
这时，一个样式表可以应用于多个页面。当改变这个样式表文件时，所有页面的样式都随之改变。不仅可以减少工作量，且有利于以后的修改、编辑，浏览时也可避免重复下载代码。
4、导入外部样式表
同链接外部样式表类似，都是将样式表单独存放，然后在页面中引入该样式表文件。导入外部样式表将外部样式表在style元素中使用@import语句导入页面中。
<head>
<style type="text/css">
@import "test.css";
</style>
</head>
link元素属于HTML级，在解析网页时加载link标签所链接的源文件。
@import属于CSS级，在解析网页时不会顾及这个元素的内容，执行时才去导入所需外部样式表，此时会异步请求CSS文件。
以上4种方式，可以在一个网页中混用。在显示网页时，先检查有没有内嵌样式表，有就优先执行；没有时，再看有没有内部样式表，再看外部样式表。
4.3 定义选择符
选择符决定了样式将应用于哪些元素。简单的选择符可以对给定类型的所有元素进行格式化，复杂的选择符可以根据元素的class或id、上下文、状态等应用格式化规则。
4.3.1 按照名称选择元素
按HTML标签名进行选择，如：
<style type=”text/css”>
p { font-size:16px; color:red; }
</style>
指定类型的所有元素（这里是标记p）都将被格式化。
◎4-1按标签名定义选择符.html
4.3.2按id名和class名进行选择
如果已经在页面元素中标识了id或class属性，那么就可以在选择器定义中使用，从而对被标识的元素进行格式化。
<style type="text/css">
#idname{样式属性：属性值；样式属性：属性值；......}
.classname{样式属性：属性值；样式属性：属性值；......}
</style>
或者
<style type="text/css">
HTML标签.classname1{样式属性：属性值；样式属性：属性值；......}
HTML标签.classname2{样式属性：属性值；样式属性：属性值；......}
</style>
说明：可以单独使用classname和idname选择器，也可以与其他选择器标准一起使用。如，“.news{color:red;}”会影响所有标记中定义的class="news"类的元素，而“h1.news{color:red;}”只影响属性中定义了class="news"类的h1元素。
◎4-2按类与ID定义选择符.html
4.3.3 按上下文进行选择
在CSS中，可以根据元素的祖先元素、父元素或同胞元素来定位它们。祖先元素就是包含所当前关心元素（希望样式影响的元素）的任何元素，父元素就是直接包含当前所关心元素的元素。
基本语法：
祖先元素 [祖先元素…] 显示元素{属性名:属性值;…}
说明：祖先元素是希望样式化的元素的祖先元素的名称，上面程序中是“#divdemo”；如果还需要继续指定后续的祖先元素，则元素名中加空格；最后是最终希望格式化影响的元素名，也可以是id或class名，如：
#divdemo #p1 { font-size:26px; color:#FF0066; }
#divdemo .p1 { font-size:26px; color:#FF0066; }
◎4-3按上下文定义选择符.html
4.3.4 指定元素组
多个元素使用同样的样式规则，可以组合使用选择器。如：
h1,h2,div{color:#FF0066;}
这里规定了标记h1、h2和div的color都是同样的颜色。组合选择其中的元素名中间要用“,”隔开。
4.4 CSS语法基础
网页设计中常用的CSS属性
文字或元素的颜色 color 背景颜色 background-color
背景图像 background-image 字体 font-family
文字大小 font-size 列表样式 list
鼠标样式 cursor 边框样式 border
内补白 padding 外边距 margin
4.4.1 字体属性
1、字体（font-family）
基本语法：font-family：”字体1”， ”字体1”， ”字体1”，…
说明：相当于HTML标签中的font-face属性。如果在font-family属性中定义了不止一种字体，则浏览器会按由前向后的顺序选用字体。也就是说，当浏览器不支持第一种字体时，会采用第二种字体，以此类推。如果浏览器不支持定义的所有字体，则会采用默认字体。同时注意，必须用双引号引住任何包含空格的字体名。
例：font-family：”方正姚体”， ”宋体”， ”幼圆”；
◎4-4font-family.html
2、字号（font-size）
基本语法：font-size：字号大小；
说明：font-size取值范围如下：绝对大小xx-small、x-small、small、medium、large、x-large、xx-large；相对大小smaller、larger；长度值或百分比。
例：font-size：16px；
◎4-5font-size绝对大小.html
◎4-6font-size相对大小.html
3、字体风格（font-style）
基本语法：font-style：字体风格；
说明：font-style取值包含：normal(正常值)、italic(斜体)、oblique(偏斜体)。
例：font-style：oblique；
◎4-7font-style.html
4、加粗字体（font-weight）
基本语法：font-weight：字体粗细值；
说明：font-weight取值包含：normal、bold、bolder、lighter、number。Number的取值为100-900，正常字体相当于400，粗体相当于700。
例：font-weight：bolder；
◎4-8font-weight.html
5、变体属性（font-variant）
基本语法：font-variant：属性值；
说明：取值包含normal或small-caps(英文显示为小型的大写字母字体)。
例：font-variant：small-caps；
◎4-9font- variant.html
6、文字修饰（text-decoration）
基本语法：text- decoration：属性值；
说明：取值包含none(默认值)、underline(添加下划线)、overline(添加上划线)、line-through(添加删除线)、blink(闪烁文字效果)。
例：text-decoration：underline；
◎4-10font-decoration.html
◎4-11综合字体属性.html
4.4.2 段落属性
属性说明属性说明
word-spacing 单词间隔 letter-spacing 字母间隔
text-transform 大小写转换 line-height 文本行高
text-align 水平对齐 vertical-align 垂直对齐
text-indent 文本缩进 white-space： 文本空格
◎4-12text-indent.html
◎4-13letter-spacing.html
◎4-14line-height.html
◎4-15line-height.html
◎4-16text-transform.html
4.4.3 背景和颜色属性
属性说明属性说明
background-color 背景颜色 background-image:url(xxx) 背景图像
background -repeat 背景重复方式 background-position 背景位置
background -attachment 背景附件
基本语法：
1、背景颜色属性
background-color : 颜色值；
|
颜色 |
英文写法 |
颜色 |
英文写法 |
颜色 |
英文写法 |
颜色 |
英文写法 |
|
黑 |
black |
红 |
red |
紫 |
purple |
青绿 |
lime |
|
白 |
white |
绿 |
green |
橄榄绿 |
olive |
茶色 |
maroon |
|
灰 |
gray |
蓝 |
blue |
深蓝 |
navy |
墨绿 |
teal |
|
银灰 |
silver |
黄 |
yellow |
水蓝 |
aqua |
紫红 |
fuchsia |
◎4-17background-color.html
2、背景图片属性
background-image : url(xxx)|none；
xxx为背景图像文件路径
none表示不加载图像
◎4-18background-image.html
3、背景附件属性
background–attachment：scroll|fixed|inherit
背景附件属性用来设置背景图片是否随着滚动条的移到一起移动。
scroll (默认值)背景图像会随着页面其余部分的滚动而移动
fixed 背景图片固定在页面上不动，不随着滚动条的移动而移动。
inherit 从父元素继承该属性的设置值
◎4-19background-attachment.html
4、背景图片重复属性，用来设置背景图片的重复显示方式。
background-repeat : repeat|repeat-x|repeat-y|no-repeat；
repeat 背景图片在水平和垂直方向上平铺
repeat-x 背景图片在水平方向平铺
repeat-y 背景图片在垂直方向平铺
no-repeat 背景图片不平铺
◎4-20background-repeat.html
5、背景图片位置属性
在网页当中插入背景图片时，插入位置是位于网页的左上角，可通过background-position属性来改变图片的插入位置。
background-position：x y
x y代表插入位置的百分比、长度或关键字，取值如下：
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos 像素为单位
如果只规定了一个x，则y的取值为center或50%
默认值是0% 0%。
◎4-21background-position.html
例：background-color：#333333;
background-image:url(bg.gif);
background-repeat:repeat-y;
background-attachment:fixed;
background-position:center center;
通常也可以简单地设置背景为background:颜色 图像 重复;
如：background : #ff0000 url(smily.gif) repeat-x;
4.4.4美化网页与超链接的设置
1、设置网页链接属性
CSS允许按照超链接的状态来设置网页链接文字的效果。
|
语法 |
说 明 |
|
a:link |
未链接时超链接文字的样式 |
|
a:visited |
已链接过的超链接文字的样式 |
|
a:active |
当鼠标单击超链接后，超链接文字所显示的样式 |
|
a:hover |
当鼠标移到超链接文字上方时，超链接文字所显示的样式 |
|
a: |
在此属性内设置样式时，上述4种属性将同时引用此值 |
◎4-22网页链接属性.html
2、设置滚动条属性
滚动条的区域划分
|
语法 |
说 明 |
|
scrollbar-face-color |
设置A区域的颜色 |
|
scrollbar-shadow-color |
设置A区域的阴影颜色 |
|
scrollbar-highlight-color |
设置A区域的边框颜色 |
|
scrollbar-3dlight-color |
设置A区域的3D光影 |
|
scrollbar-darkshadow-color |
设置A区域的3D阴影 |
|
scrollbar-track-color |
设置B区域滚动条轨道的颜色 |
|
scrollbar-arrow-color |
设置A区域内小三角形的颜色 |
◎4-23滚动条属性.html
3、设置光标属性
|
属性值 |
说明 |
属性值 |
说明 |
|
auto |
默认值 |
w-resize |
向左改变大小(west) |
|
wait |
等待/沙漏 |
ne-resize |
向右上改变大小(north east) |
|
help |
帮助 |
nw-resize |
向左上改变大小(north west) |
|
no-drop |
无法释放 |
se-resize |
向右下改变大小(south east) |
|
text |
文字/编辑 |
sw-resize |
向左下改变大小(south west) |
|
move |
可移动对象 |
not-allowed |
禁止 |
|
n-resize |
向上改变大小(north) |
Progress |
处理中 |
|
s-resize |
向下改变大小(south) |
Default |
系统默认 |
|
e-resize |
向右改变大小(east) |
url(‘光标文件地址’) |
用户自定义 |
◎4-24光标属性.html
4.5 盒子模型
4.5.1 盒子模型
CCS中，将样式应用在每一个元素上，都以一个假想的盒子模型来看待。简单地说，就是将每一个元素都当作一个长方形的盒子，盒子里面的内容到盒子边框之间的距离为填充(padding)，盒子本身有边框(border)，盒子边框外和其他盒子之间的间距是边界(margin)。盒子中的元素是内容(content)。
padding、border和margin都分为“上、右、下、左”四个方向，既可以分别定义，也可以统一定义。当使用CSS定义盒子的width和height时，定义的并不是盒子的总区域（包含content、padding、border和margin），实际上定义的是内容区域(content)的width和height。为了计算盒子所占的实际区域，必须加上padding、border和margin。
实际宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界
实际宽度=左边界margin-left+左边框border-left+左填充padding-left+内容宽度width+右填充padding-right+右边框border-right+右边界margin-right
实际高度=上边界+上边框+上填充+内容高度+下填充+下边框+下边界
实际高度=上边界margin-top+上边框border-top+上填充padding-top+内容高度height+下填充padding-bottom+下边框border-bottom +下边界margin-bottom
4.5.2设置边界margin
基本语法：margin：长度单位｜百分比｜auto
◎4-25 margin.html
4.5.3设置边框border
1、边框样式属性border-style
基本语法：border-style：样式值
border-top-style：样式值
border-right-style：样式值
border-bottom-style：样式值
border-left-style：样式值
说明：border-style是一个复合属性，它的值有4种设置方法，其他4个都是单个边框的样式属性，只能取一个值。
设置1个值，表示4条边框的样式均使用同一个值；
设置2个值，表示上下边框使用第一个值，左右边框使用第二个值；
设置3个值，表示上边框使用第一个值，左右边框使用第二个值，下边框使用第三个值；
设置4个值，表示上、右、下、左边框依次使用四个值。
|
属性值 |
说明 |
属性值 |
说明 |
|
none |
默认值，不显示边框 |
groove |
凹型线 |
|
dotted |
点线 |
ridge |
凸型线 |
|
dashed |
虚线 |
inset |
嵌入式 |
|
solid |
实线 |
outset |
嵌出式 |
|
double |
双直线 |
|
|
◎4-26 border-style.html
2、边框宽度属性border-width
基本语法：border-width：宽度值|thin|medium|thick
border-top-width：宽度值|thin|medium|thick
border-right-width：宽度值|thin|medium|thick
border-bottom-width：宽度值|thin|medium|thick
border-left-width：宽度值|thin|medium|thick
说明：thin、medium、thick分别表示细、中等、粗。
border-width设置方法和border-style一样，它的值也有4种设置方法，其他4个都是单个边框的样式属性，只能取一个值。
◎4-27 border-width.html
3、边框颜色属性border-color
基本语法：border-color：颜色值|RGB值
border-top- color：颜色值|RGB值
border-right- color：颜色值|RGB值
border-bottom- color：颜色值|RGB值
border-left- color：颜色值|RGB值
◎4-28 border-color.html
4、边框属性的综合设置
基本语法：border：边框宽度|边框样式|边框颜色
border-top：边框宽度|边框样式|边框颜色
border-right：边框宽度|边框样式|边框颜色
border-bottom：边框宽度|边框样式|边框颜色
border-left：边框宽度|边框样式|边框颜色
说明：每个属性都是一个复合属性，都可以同时设置边框的宽度、样式和颜色，每个属性值中间用空格隔开。Border可以同时设置4条边框的属性，其他只能设置单边框的属性。
◎4-29 border.html
4.5.4设置填充padding
基本语法：padding：长度|百分比
padding-top：长度|百分比
padding-right：长度|百分比
padding-bottom：长度|百分比
padding-left：长度|百分比
说明：长度值要加单位，百分比是相对于上级元素宽度的，不允许用负数。
◎4-30 padding.html
4.6 列表样式
4.6.1 列表样式list-style-type
list-style-type属性可用于设置列表的符号或编号，通常会搭配<ol>或<ul>标签使用。
基本语法：list-style-type：属性值
|
属性值 |
说明 |
属性值 |
说明 |
|
disc |
黑圆点 |
lower-roman |
小写罗马数字 |
|
circle |
空心圆 |
upper-roman |
大写罗马数字 |
|
square |
黑方块 |
lower-alpha |
小写英文字母 |
|
decimal |
数字 |
upper-alpha |
大写英文字母 |
|
None |
不显示符号或编号 |
|
|
◎4-31 list-style-type.html
4.6.2 图像列表list-style-image
list-style-image属性可把列表符号设置为图片。
基本语法：list-style-image：url|none
说明：url是指定要加载的图片的路径；none是指不使用图片式列表符号。
◎4-32 list-style-image.html
4.6.3 列表符号的缩进list-style-position
list-style-position属性设置每个列表项目的符号是否缩进。
基本语法：list-style-position：inside|outside
说明：inside表示符号要缩进，outside表示符号不缩进。
◎4-33 list-style-position.html
第5章 DIV+CSS布局定位基础
【要点:元素的定位方式；DIV+CSS布局的常见类型与方法】
5.1 div标签与span标签
5.1.1 div概述
过去常用语<table>标签进行定位，但是这种方法的工作量很大，增加了大量的额外代码，并使后期的修改与维护很困难。CSS的出现，使得网页布局有了新方法。利用CSS属性，可以精确地设置元素的位置，还能将定位的元素叠放在一起。当使用CSS布局时，主要把它用在div标签上。<div>和</div>之间相当于一个容器，可以放置段落、表格、图片等等各种HTML元素。
div是用来为HTML文档内大块的内容提供结构和背景的元素。div的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性同div标签的属性或使用CSS来控制。
基本语法：
<div style=”position:xxx; left:xxx; top:xxx; width:xxx; height:xxx; background-color:#xxxxxx; float:xxx; clear:xxx; z-index:xxx”>…</div>
说明：position属性，用于定义div的定位方式；
left和top属性，用于定义div的位置，还有right和bottom两个属性；
width和height属性，用于定义div的宽度和高度；
float属性，用于定义div的浮动位置；
clear属性，用于设置是否允许在某个元素的周围有浮动元素，它和浮动属性是一对相对立的属性，浮动属性用来设置某个元素的浮动位置，而清除属性则要去掉某个位置的浮动元素；
z-index属性，用于设置区域的上下层关系，让区域显示更多层次的效果，相当于三维空间的z坐标，z-index越大，区域在堆中的位置越高。
◎5-1 div.html
◎5-2 div.html
5.1.2 div与span的区别
span与div的区别在于，div是一个块级元素，可以包含段落、标题、表格，甚至章节、摘要、备注等。而span是行级元素，它的前后不会换行，它没有结构的意义，纯粹是应用样式，当其它行内元素都不适合时，可以使用span。
div对象是一个大的块状内容，如一大段文本、一个导航区域、一个页脚区域等显示为块状的内容。而span的用途是对行内元素进行结构编码以方便样式设计，如需要对一段文本中，需要改变其中一段文本的颜色，可以将这一小部分文本使用span对象进行样式设计，不会改变这一整段文本的显示方式。
◎5-3 span.html
◎5-4 div-span.html
◎5-5 div-span
5.1.3 表格布局与CSS布局的区别
div+CSS布局比表格布局节省页面代码，代码结构清晰明了，开发速度快，布局更清爽。
CSS的优势：
缩减页面代码量，提高浏览速度；
网页结构清晰，易被搜索引擎搜索到；
缩短修改和维护的时间；
样式控制能力与排版能力强；
易于编写；
可将表现与内容分离。
表格布局带来的问题：
格式数据混入内容中，使文件无谓增大；
修改与维护极为耗时；
保持整个网站的视觉一致性很难；
降低了对残疾人、手机及PDA终端用户的浏览亲和力。
◎5-6 表格布局.html
◎5-7 CSS布局.html
5.2 盒子的浮动与定位
CSS为浮动和定位提供了一些属性，利用这些属性可以完成列式布局。定位的思想是允许定义元素相对于正常位置应该出现的位置，或相对于父元素、另一个元素及浏览器窗口本身的的位置。浮动属性在元素定位时非常重要，不但可以对整个版式进行规划，也可以对一些基本元素进行排列。
5.2.1 浮动
在标准流中，一个块级元素在水平方向上会自动伸展，直到包含它的元素的边界，而在竖直方向上和其他元素依次排列，不能并排。使用浮动方式后，块级元素的表现会有所不同。
基本语法：
float : none|left|right;
说明：none是默认值，表示对象不浮动；
left表示对象浮在左边；
right表示对象浮在右边；
CSS允许任何元素浮动，不论是图像、段落、列表，不论先前元素是什么状态，浮动后都成为块级元素。
浮动有一系列控制它的规则：
浮动元素的外边缘不会超过其父元素的内边缘；
浮动元素不会互相重叠；
浮动元素不会上下浮动。
如果float取值为none或没有设置浮动时，不会发生任何浮动，块元素独占一行，紧随其后的块元素将在新行中显示。
◎5-8 没有设置浮动属性的div.html
◎5-9 一个设为左浮动，一个不设置浮动的div.html
◎5-10 两个都设为左浮动的div.html
◎5-11 两个都设为右浮动的div.html
◎5-12 浮动属性应用.html
5.2.2 定位
定位允许用户精确定位元素出现的相对位置，可以相对于它通常出现的位置、其上级元素、另一个元素，以及浏览器窗口本身。每个显示的元素都可以用定位的方法来描述。
基本语法：position：static|absolute|fixed|relative
说明：static表示采用默认值，无定位，遵循HTML定位规则；relative表示采用相对定位，对象不可层叠，依据left、fight、top、bottom等属性设置在正常文档流中的偏移位置。absolute表示采用绝对定位，将对象从文档流中拖出，通过width、height、left、fight、top、bottom等属性进行绝对定位，而其层叠通过z-index属性定义；fixed表示固定定位，使元素固定在屏幕某个位置，其包含块是可视区域本身，它不随滚动条而滚动。
1、absolute
在几种定位方法中使用最广泛，能精确地将元素放置在想要的位置上。同一个位置上有几个元素时，只会显示最上面的元素，z-index属性对应一个垂直于屏幕向上的方向，z-index越大，元素越靠上。
◎5-13 absolute.html
2、fixed
固定定位和绝对定位非常类似，不过固定定位的容器不会随着滚动条的拖动而变化位置。在几种定位方法中使用最广泛，能精确地将元素放置在想要的位置上。同一个位置上有几个元素时，只会显示最上面的元素，z-index属性对应一个垂直于屏幕向上的方向，z-index越大，元素越靠上。
◎5-14 fixed.html
3、relative
相对定位和其他定位相似，也是独立出来浮在上面。相对定位的top、bottom、left、right属性参照对象是其父容器的4条边，而不是浏览器窗口。相对定位的容器浮上来后，其所占的位置仍然保留，后面的无定位容器不会挤上来。
◎5-15 relative.html
5.2.3 z-index空间位置
z-index是设置对象的层叠顺序的样式。此样式只对position属性为relative或absolute的对象有效。
基本语法：z-index：auto|数字
说明：auto遵从其父对象的定位。数字必须是无单位的整数值，可以取负值。z-index值较大的元素将叠加在值较小的元素之上。对于未指定此属的定位对象，z-index值为正数的对象会在其之上，而值为负数的对象在其之下。
◎5-16 z-index.html
5.2.4 清除属性clear
clear属性规定了元素的哪一侧不允许包含其他浮动元素。
基本语法：clear：none|both|left|right
说明：none默认值，允许两边都可以有浮动对象；both两边都不允许有浮动对象；left不允许左边有浮动对象；right不允许右边有浮动对象。
◎5-17 clear.html
5.3 CSS布局理念
CSS排版是一种很新的理念。首先，要将页面使用div整体划分为几个板块，然后对各个板块进行CSS定位，最后在各个板块中添加相应的内容。
5.3.1 将页面用div分块
在进行CSS页面布局时，首先要有一个整体的规划，包括整个页面分成哪几个模块，各个模板之间的父子关系等。以简单的框架为例，页面由banner、content(主体内容)、links(菜单导航)和footer(脚注)几个部分组成，各部分分别用自己的id来标识。
<div id=”container”>container
<div id=”banner”>banner</div>
<div id=”content”>content</div>
<div id=”links”>links</div>
<div id=”footer”>footer</div>
</div>
◎5-18 将页面用div分块.html
5.3.2 设计各块的位置
考虑整体的页面布局类型，单栏、双栏、三栏。
5.3.3 用CSS定位
对各个板块进行定位，实现对页面的整体规划，然后再往各个板块中添加内容。
◎5-19用CSS定位.html
5.4 常见的布局类型
5.4.1 使用CSS定位单行单列固定宽度
◎5-20单行单列固定宽度.html
5.4.2 一列自适应
自适应布局是网页设计中常见和一种布局形式，自适应的布局能够根据浏览器窗口的大小，自动改变其宽度或高度值，是一种非常灵活的布局形式，对不同分辨率的显示器都能提供最好的显示效果。自适应布局需要将宽度由固定值改为百分比。
◎5-21一列自适应.html
5.4.3 两列固定宽度
两列固定宽度的布局用到两个div，为它们设置宽度，并采用浮动方式，一左一右在水平方向排列。
◎5-22两列固定宽度.html
5.4.4 两列宽度自适应
布局用到两个div，为它们设置百分比宽度，并采用浮动方式，一左一右在水平方向排列。
◎5-23两列宽度自适应.html
5.4.5三列浮动中间宽度自适应
布局用到三个div，为左右两列设置固定宽度，并采用绝对定位方式。
◎5-24三列浮动中间宽度自适应.html
