第十一章 使用CSS样式表
11.8 定位属性
使用定位属性可以控制元素的位置，包括相对定位和绝对定位两种方式。相对定位指允许元素在相对于文档布局的原始位置上进行偏移，而绝对定位是指允许元素与原始文档布局分离且任意定位。
11.8.1 定位方式 position
使用定位方式属性可以控制浏览器如何定位HTML元素
语法：position:static | absolute | fixed | relative
说明：
可能的值
| 值 | 描述 |
|---|---|
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
11.8.2 元素位置 top、right、bottom、left
元素位置属性与定位方式共同设置元素的具体位置
语法：top: auto | 长度值 | 百分比
right: auto | 长度值 | 百分比
bottom: auto | 长度值 | 百分比
left: auto | 长度值 | 百分比
说明：auto表示采用默认值；长度值包含数字和单位，也可以使用百分比来设置
eg:
<html>
<head>
<meta charset="UTF-8">
<title>边框样式 border-style</title>
<style type="text/css">
.d{
font-size: 12px;
position: absolute;
top: 26px;
right: 23px;
}
</style>
</head>
<body>
<center><img src="images/3.jpeg" width="140" height="150"></center>
<div class="d">
三月，醉一场青春的流年。慢步在三月的春光里，走走停停，看花开嫣然，看春雨绵绵，感受春风拂面，春天，就是青春的流年。青春，是人生中最美的风景。青春，是一场花开的遇见；青春，是一场痛并快乐着的旅行；
青春，是一场轰轰烈烈的比赛；青春，是一场鲜衣奴马的争荣岁月；青春，是一场风花雪月的光阴。
青春往事，多么甜蜜；青春岁月，多么靓丽；青春流年，如火如荼。青春里，我们向着梦想前进。跌倒过，伤心过，快乐过，痛苦过，孤独过，彷徨过，迷茫过。总是，在悠悠的岁月中徘徊；总是，在如春的生命中成长；
总是，在季节的交替中感悟人生四季的美妙与韵律；总是，在多愁善感中体悟青春的美好与无奈。
</div>
</body>
</html>
运行结果：
11.8.3 层叠顺序 z-index
使用层叠顺序可以设置层的先后顺序和覆盖关系。默认情况下，z-index值为1，表示该层位于最底层。
语法：z-index: auto | 数字
说明：auto遵循其父对象的定位；数字必须是无单位的整数值，可以取负值
eg:
<html>
<head>
<meta charset="UTF-8">
<title>层叠顺序 z-index</title>
<style type="text/css">
.d{
position: absolute;
top: 25px;
right: 20px;
left: 25px;
bottom: 20px;
z-index: 2;
}
.d1{
font-size: 12px;
position: absolute;
top: 30px;
right: 20px;
left: 10px;
bottom: 25px;
z-index: 1;
}
</style>
</head>
<body>
<center><img src="images/3.jpeg" width="140" height="150" class="d"></center>
<div class="d1">
三月，醉一场青春的流年。慢步在三月的春光里，走走停停，看花开嫣然，看春雨绵绵，感受春风拂面，春天，就是青春的流年。青春，是人生中最美的风景。青春，是一场花开的遇见；青春，是一场痛并快乐着的旅行；
青春，是一场轰轰烈烈的比赛；青春，是一场鲜衣奴马的争荣岁月；青春，是一场风花雪月的光阴。
青春往事，多么甜蜜；青春岁月，多么靓丽；青春流年，如火如荼。青春里，我们向着梦想前进。跌倒过，伤心过，快乐过，痛苦过，孤独过，彷徨过，迷茫过。总是，在悠悠的岁月中徘徊；总是，在如春的生命中成长；
总是，在季节的交替中感悟人生四季的美妙与韵律；总是，在多愁善感中体悟青春的美好与无奈。
</div>
</body>
</html>
<!--绝对定位 即使下面写成center也没有用-->
图像z-index层叠顺序比文字大（2>1） 所以图像显示在文字前面，覆盖了文字
运行结果：
11.8.4 浮动属性 float
使用浮动属性float可以设置文字在某个元素的周围，它能应用于所有元素
语法：float: none | left | right
可能的值
| 值 | 描述 |
|---|---|
| left | 元素向左浮动。 |
| right | 元素向右浮动。 |
| none | 默认值。元素不浮动，并会显示在其在文本中出现的位置。 |
| inherit | 规定应该从父元素继承 float 属性的值。 |
eg:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>浮动属性float</title>
<style type="text/css">
.d{
font-size: 15px;
font-family: "楷体"，“黑体”，“隶书”，“宋体”
}
img{
float:left;
}
</style>
</head>
<body>
<img src="images/3.jpeg" width="140" height="150">
<div class="d">
三月，醉一场青春的流年。慢步在三月的春光里，走走停停，看花开嫣然，看春雨绵绵，感受春风拂面，春天，就是青春的流年。青春，是人生中最美的风景。青春，是一场花开的遇见；青春，是一场痛并快乐着的旅行；
青春，是一场轰轰烈烈的比赛；青春，是一场鲜衣奴马的争荣岁月；青春，是一场风花雪月的光阴。
青春往事，多么甜蜜；青春岁月，多么靓丽；青春流年，如火如荼。青春里，我们向着梦想前进。跌倒过，伤心过，快乐过，痛苦过，孤独过，彷徨过，迷茫过。总是，在悠悠的岁月中徘徊；总是，在如春的生命中成长；
总是，在季节的交替中感悟人生四季的美妙与韵律；总是，在多愁善感中体悟青春的美好与无奈。
</div>
</body>
</html>
运行结果：
11.8.5 清除属性 clear
清除属性用于指定一个元素是否允许有其他元素漂浮在它的周围
语法：clear: none | left | right | both
说明：
可能的值
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧。 |
| inherit | 规定应该从父元素继承 clear 属性的值。 |
eg:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>清除属性 clear</title>
<style type="text/css">
.d{
font-size: 15px;
clear:left
}
img{
float:left
}
</style>
</head>
<body>
<img src="images/3.jpeg" width="140" height="150">
<p class="d">
三月，醉一场青春的流年。慢步在三月的春光里，走走停停，看花开嫣然，看春雨绵绵，感受春风拂面，春天，就是青春的流年。青春，是人生中最美的风景。青春，是一场花开的遇见；青春，是一场痛并快乐着的旅行；
青春，是一场轰轰烈烈的比赛；青春，是一场鲜衣奴马的争荣岁月；青春，是一场风花雪月的光阴。
青春往事，多么甜蜜；青春岁月，多么靓丽；青春流年，如火如荼。青春里，我们向着梦想前进。跌倒过，伤心过，快乐过，痛苦过，孤独过，彷徨过，迷茫过。总是，在悠悠的岁月中徘徊；总是，在如春的生命中成长；
总是，在季节的交替中感悟人生四季的美妙与韵律；总是，在多愁善感中体悟青春的美好与无奈。
</p>
</body>
</html>虽然img float：left允许右边有浮动文字，但文字clear:left 不允许左边有浮动元素，最终文字显示在下方
运行结果：
11.8.6 可视区域 clip
使用clip可以限定只显示裁剪出的区域，裁剪出的区域为矩形。只要设置两个点即可，一个是矩形左上角的顶点，由top和left两项设置完成，另一个是右下角的顶点，由bottom和right两项设置完成
语法：clip: auto|rect (数字)
说明：
可能的值
| 值 | 描述 |
|---|---|
| shape | 设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left) |
| auto | 默认值。不应用任何剪裁。 |
| inherit | 规定应该从父元素继承 clip 属性的值。 |
rect（数字）表示它依据上右下左的顺序提供自对象左上角（0,0）坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不裁切
eg:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>可视区域 clip</title>
<style type="text/css">
.q{
position: absolute;
left: 7px;
top: 50px;
z-index: 1;
}
.q1{
position: absolute;
left: 100px;
top: 30px;
right: 20px;
z-index: 2;
font-size：20px;
clip:rect(auto,6cm,64px,auto);
}
</style>
</head>
<body>
<img src="images/3.jpeg" width="140" height="150" class="q">
<p class="q1">
三月，醉一场青春的流年。慢步在三月的春光里，走走停停，看花开嫣然，看春雨绵绵，感受春风拂面，春天，就是青春的流年。青春，是人生中最美的风景。青春，是一场花开的遇见；青春，是一场痛并快乐着的旅行；
青春，是一场轰轰烈烈的比赛；青春，是一场鲜衣奴马的争荣岁月；青春，是一场风花雪月的光阴。
青春往事，多么甜蜜；青春岁月，多么靓丽；青春流年，如火如荼。青春里，我们向着梦想前进。跌倒过，伤心过，快乐过，痛苦过，孤独过，彷徨过，迷茫过。总是，在悠悠的岁月中徘徊；总是，在如春的生命中成长；
总是，在季节的交替中感悟人生四季的美妙与韵律；总是，在多愁善感中体悟青春的美好与无奈。
</p>
</body>
</html>
文字部分被clip裁剪了，只能看到被裁剪出来的部分
运行结果：
11.8.7 层的高度和宽度 height、width
语法：width: auto|长度值
height:auto|长度值
说明：auto表示自动设置长度 ，一般以层包含的内容为准，如果要设置确切的长度，需要设置数值和单位
eg:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>设定大小</title>
<style type="text/css">
.q{
position: absolute;
left: 7px;
top: 50px;
z-index: 1;
}
.q1{
position: absolute;
left: 100px;
top: 30px;
right: 20px;
z-index: 2;
font-size：20px;
width: 450px;
height:50px;
}
</style>
</head>
<body>
<img src="images/3.jpeg" width="140" height="150" class="q">
<p class="q1">
三月，醉一场青春的流年。慢步在三月的春光里，走走停停，看花开嫣然，看春雨绵绵，感受春风拂面，春天，就是青春的流年。青春，是人生中最美的风景。青春，是一场花开的遇见；青春，是一场痛并快乐着的旅行；
青春，是一场轰轰烈烈的比赛；青春，是一场鲜衣奴马的争荣岁月；青春，是一场风花雪月的光阴。
青春往事，多么甜蜜；青春岁月，多么靓丽；青春流年，如火如荼。青春里，我们向着梦想前进。跌倒过，伤心过，快乐过，痛苦过，孤独过，彷徨过，迷茫过。总是，在悠悠的岁月中徘徊；总是，在如春的生命中成长；
总是，在季节的交替中感悟人生四季的美妙与韵律；总是，在多愁善感中体悟青春的美好与无奈。
</p>
</body>
</html>
一个标签显示的内容为一层，不仅可以设置某一层的级别、位置还可以设置改层的形状范围
运行结果：
11.8.8 超出范围 overflow
overflow属性用于设置当层内的内容超出层所能容纳的范围时的显示方式
语法：
可能的值
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
写代码时千万注意冒号：:小的才是英文的!!!!
eg:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>设定大小</title>
<style type="text/css">
.q{
position: absolute;
font-size:13px;
overflow:scroll;
width: 300px;
top: 16px;
left: 165px;
height: 70px;
}
</style>
</head>
<body>
<img src="images/3.jpeg" width="230" height="150" >
<div class="q">
三月，醉一场青春的流年。慢步在三月的春光里，走走停停，看花开嫣然，看春雨绵绵，感受春风拂面，春天，就是青春的流年。青春，是人生中最美的风景。青春，是一场花开的遇见；青春，是一场痛并快乐着的旅行；
青春，是一场轰轰烈烈的比赛；青春，是一场鲜衣奴马的争荣岁月；青春，是一场风花雪月的光阴。
青春往事，多么甜蜜；青春岁月，多么靓丽；青春流年，如火如荼。青春里，我们向着梦想前进。跌倒过，伤心过，快乐过，痛苦过，孤独过，彷徨过，迷茫过。总是，在悠悠的岁月中徘徊；总是，在如春的生命中成长；
总是，在季节的交替中感悟人生四季的美妙与韵律；总是，在多愁善感中体悟青春的美好与无奈。
三月，醉一场青春的流年。慢步在三月的春光里，走走停停，看花开嫣然，看春雨绵绵，感受春风拂面，春天，就是青春的流年。青春，是人生中最美的风景。青春，是一场花开的遇见；青春，是一场痛并快乐着的旅行；
青春，是一场轰轰烈烈的比赛；青春，是一场鲜衣奴马的争荣岁月；青春，是一场风花雪月的光阴。
青春往事，多么甜蜜；青春岁月，多么靓丽；青春流年，如火如荼。青春里，我们向着梦想前进。跌倒过，伤心过，快乐过，痛苦过，孤独过，彷徨过，迷茫过。总是，在悠悠的岁月中徘徊；总是，在如春的生命中成长；
总是，在季节的交替中感悟人生四季的美妙与韵律；总是，在多愁善感中体悟青春的美好与无奈。
</div>
</body>
</html>
运行结果：
11.8.9 可见属性 visibility
visibility属性是针对嵌套层的设置，嵌套层是插入在其他层中的层，分为嵌套的层和被嵌套的层
语法：visibility: inherit | visible | hidden
说明：
可能的值
| 值 | 描述 |
|---|---|
| visible | 默认值。元素是可见的。 |
| hidden | 元素是不可见的。 |
| collapse | 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。 |
| inherit | 规定应该从父元素继承 visibility 属性的值。 |
eg:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>可见属性</title>
<style type="text/css">
.q{
position: absolute;
left: 7px;
top: 50px;
z-index: 1;
}
.q1{
position: absolute;
z-index: 2;
font-size:13px;
overflow:scroll;
width: 350px;
top: 80px;
left: 30px;
right: 20px;
visibility: hidden;
}
img{
visibility: inherit;
}
</style>
</head>
<body>
<img src="images/3.jpeg" width="230" height="150" class="q">
<div class="q1">
三月，醉一场青春的流年。慢步在三月的春光里，走走停停，看花开嫣然，看春雨绵绵，感受春风拂面，春天，就是青春的流年。青春，是人生中最美的风景。青春，是一场花开的遇见；青春，是一场痛并快乐着的旅行；
青春，是一场轰轰烈烈的比赛；青春，是一场鲜衣奴马的争荣岁月；青春，是一场风花雪月的光阴。
青春往事，多么甜蜜；青春岁月，多么靓丽；青春流年，如火如荼。青春里，我们向着梦想前进。跌倒过，伤心过，快乐过，痛苦过，孤独过，彷徨过，迷茫过。总是，在悠悠的岁月中徘徊；总是，在如春的生命中成长；
总是，在季节的交替中感悟人生四季的美妙与韵律；总是，在多愁善感中体悟青春的美好与无奈。
三月，醉一场青春的流年。慢步在三月的春光里，走走停停，看花开嫣然，看春雨绵绵，感受春风拂面，春天，就是青春的流年。青春，是人生中最美的风景。青春，是一场花开的遇见；青春，是一场痛并快乐着的旅行；
青春，是一场轰轰烈烈的比赛；青春，是一场鲜衣奴马的争荣岁月；青春，是一场风花雪月的光阴。
青春往事，多么甜蜜；青春岁月，多么靓丽；青春流年，如火如荼。青春里，我们向着梦想前进。跌倒过，伤心过，快乐过，痛苦过，孤独过，彷徨过，迷茫过。总是，在悠悠的岁月中徘徊；总是，在如春的生命中成长；
总是，在季节的交替中感悟人生四季的美妙与韵律；总是，在多愁善感中体悟青春的美好与无奈。
</div>
</body>
</html>
运行结果：
文字属性visibility:hidden隐藏了，看不见
11.9 列表属性
使用列表属性可以设置列表项的样式，包括符号、缩进等。
11.9.1 列表符号 list-style-type
设置列表项所使用的符号类型。
语法：list-style-type:值
说明：