CSS基础
目录
4. 固定/滚动背景图像background-attachment
一、CSS样式表
CSS有三种使用方式，根据声明位置的不同分为内敛样式表、内部样式表、外部样式表。
1.1 内联样式表
内联样式表又称为行内样式表，通过使用style属性为各种HTML元素标签添加样式，其作用范围只在指定的HTML元素内部。
基本语法格式如下：
<元素名 style="属性名称:属性值">如果有多个属性需要同时添加，可用分号隔开，显示如下：
<元素名 style="属性名称1:属性值1;属性名称2:属性值2;...;属性名称N:属性值N">部分常用CSS属性和参考值：
eg：内联样式表的用法示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS内联样式表</title>
</head>
<body>
<h3 style="color:red">CSS内联样式表</h3>
<hr style="border:3px dashed blue">
<p style="font-size:40px;background-color: yellow">
这是一段测试文字。
</p>
</body>
</html>
内联样式表仅适用于改变少量元素的样式，不易于批量使用和维护。
1.2 内部样式表
内部样式表通常位于<head>和</head>标签内部，通过使用<style>和</style>标签标记各类样式规则，其作用范围为当前整个文档。
语法格式如下：
<style>
选择器{属性名称1:属性值1;属性名称2:属性值2;...;属性名称N:属性值N}
</style>这里的选择器可用于指定样式的元素标签。
其中最后一个属性值后面是否添加分号为可选内容。
eg：内部样式表的用法示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内部样式表的用法示例</title>
<style>
h3{
color:yellow
}
p{
background-color: yellow;
color: blue1;
width: 300px;
height: 50px;
}
</style>
</head>
<body>
<h3>CSS内部样式表</h3>
<p>
内部样式表可以批量改变元素样式
</p>
<hr/>
<h3>CSS内部样式表</h3>
<p>
内部样式表可以批量改变元素样式
</p>
<hr/>
<h3>CSS内部样式表</h3>
<p>
内部样式表可以批量改变元素样式
</p>
</body>
</html>
内部样式表克服了内联样式表重复定义的弊端，同一种样式声明可以批量被各种元素使用，有利于样式的后期维护和拓展。
1.3 外部样式表
外部样式表为独立的CSS文件，其后缀名为.css或.CSS，在网页文档的首部<head>和</head> 标签之间使用<link>标签对其进行引用即可作用于当前整个文档。
对于独立CSS文件的引用语法格式如下：
<link rel="stylesheet" href="样式文件URL">例如，引用本地css文件夹中的test.css文件：
<link rel="stylesheet" href="css/text.css">外部CSS文件中的内容无需使用<style></style>标签进行标记，其格式和内部样式表<style>标签内部的内容格式完全一样。
eg:外部样式表的用法示例
在本地的CSS文件夹中新建一个名称为my.css的样式表文件，将样式要求写在该CSS文件中，并在HTML文档中对其进行引用。
外部样式表CSS文件完整代码如下：
h3{color:orange}
p{background-color:gray;color:white;width: 300px;height: 50px;
}HTML5文档代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS外部样式表</title>
<!--引用外部my.css样式表文件-->
<link rel="stylesheet" href="CSS/my.css">
</head>
<body>
<h3>CSS外部样式表</h3>
<p>
使用了外部样式表规定元素样式
</p>
</body>
</html>同一个网页文档可以引用多个外部样式表。
1.4 样式表层叠优先级
内联样式表、内部样式表、外部样式表可以在同一个网页文档中被引用，它们会被层叠在一起形成一个统一的虚拟样式表。如果有样式条件冲突，CSS会选择优先级别高的样式条件渲染在网页上。三种样式表的优先级别排序如下：
元素是以就近原则显示离其最近的样式规则。
如果三种样式表均不存在，则网页文档会显示当前浏览器的默认效果。
二、CSS选择器
介绍常用的CSS选择器：元素选择器、ID选择器、类选择器、属性选择器
2.1 元素选择器
在CSS中最常见的选择器就是元素选择器，即采用HTML文档中的元素名称进行样式规定。元素选择器又称类型选择器，可以用于匹配HTML文档中某一个元素类型的所有元素。
上述各例题均使用的元素选择器。
2.2 ID选择器
ID选择器使用指定的id名称匹配元素。如果需要为特定的某个元素进行样式设置，可以为其添加一个自定义的id名称，然后根据id名称进行匹配。ID选择器和元素选择器语法结构类似，但是在声明时需要在id名称前面加#号。其语法规则如下：
#id名称{属性名称1:属性值1;属性名称2:属性值2;...;属性名称N:属性值N}eg：ID选择器的简单应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ID选择器的简单应用</title>
<style>
#test{
background-color: cyan;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<h3>ID选择器的简单应用</h3>
<p>
该段落没有定义id名称
</p>
<p id="test">
该段落自定义了id名称为test
</p>
</body>
</html>
ID选择器的匹配方式，一般适用于为指定的某个HTML元素专门设置CSS样式效果。
2.3 类选择器
类选择器可以将不同的元素定义为公共的样式。类选择器在声明是需要在前面加一个“ . ”号，为了和指定的元素关联使用，需要自定义一个class名称。其语法规则如下：
.class名称{属性名称1:属性值1;属性名称2:属性值2;...;属性名称N:属性值N}eg：类选择器的简单应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类选择器的简单应用</title>
</head>
<body>
<style>
.red{
color: red;
}
.blue{
color: blue;
}
</style>
</body>
<h3 class="red">类选择器的简单应用</h3>
<hr/>
<p class="blue">
该段落字体将设置为蓝色。
</p>
<hr/>
<p class="red">
该段落字体将设置为红色。
</p>
</html>
2.4 属性选择器
属性选择器允许基于元素所拥有的属性进行匹配。其语法规则如下：
元素名称[元素属性]{属性名称1:属性值1;属性名称2:属性值2;...;属性名称N:属性值N}如果不确定属性值的完整内容，可以使用[attribute~=value]的格式查找元素，表示在属性值中包含value关键词。例如：
a[href~="baidu"]{
coloe:red;
}
//表示将所有href属性值中包含baidu字样的超链接设置为红色字体样式。还可以使用[attribute | =value]的格式查找元素，表示以单词value开头的属性值。例如：
img[alt | ="fiower"]{
border:1px solid red;
}
//表示将所有alt属性值以flower字样开头的图像元素设置1像素的红色实心边框效果。eg：属性选择器的简单应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性选择器的简单应用</title>
<style>
img[alt = "panda"]{
border:20px solid red;
}
</style>
</head>
<body>
<h3>属性选择器的简单应用</h3>
<hr/>
<h4>为设置有alt属性的图像元素设置边框效果</h4>
<img src="xiongmao.jpeg" alt="panda"/>
<img src="xiongmao.jpeg"/>
</body>
</html>
三、语法规则
3.1 注释语句
在内部样式表和外部样式表文件中均可以使用/*注释内容*/的形式为CSS进行注释，注释内容不会被显示出来。该注释支持单行注释和多行注释。
3.2 @charset
该语法在外部样式表文件内使用，用于指定当前样式表使用的字符编码。例如：
@charset"utf-8";该语句表示外部样式表文件使用了UTF-8的编码格式，一般写在外部样式表文件的第一行，并且需要加上分号结束。
3.3 !important
!important用于标记CSS样式的使用优先级，其语法规则如下：
选择器{样式规则!important;}例如：
p{
background-color:red !important;
background-color:bule;
}
//表示优先使用background-color:red语句四、CSS取值与单位
4.1 数字
数字取值有三种取值形式，如下表所示:
4.2 长度
长度取值<length>，表示方法为数值接长度单位。可用于描述文本、图像或其他元素的尺寸。
长度取值的单位可分为相对长度单位和绝对长度单位。相对单位的长度不是固定的。绝对长度单位的取值是固定的。
长度单位，如下表所示：
4.3 角度
角度取值<angle>可用于描述元素变形时旋转的角度。
角度单位，如下表所示：
4.4 时间
时间取值<time>可用于描述时间长度。
时间单位，如下表所示：
-
4.5 文本
文本取值类型，如下表所示：
4.6 颜色
CSS颜色可以用于设置HTML元素的背景颜色、边框颜色、字体颜色等。
1. RGB颜色模式
RGB色彩模式规定了红、绿、蓝三种光的亮度值均用整数表示，其范围是[0,255]，共有256级，其中0为最暗，255为最亮。
2. 常见颜色表示方式
CSS中常用的颜色表示方式有：
- 使用RGB颜色的方法。rgb（0,0,0）表示黑色，rgb（255,255,255）表示白色。
- RGB的十六进制表示法。#000000表示黑色，#FFFFFF表示白色。
- 直接使用英文单词名称。red表示红色，blue表示蓝色。
1）RGB颜色
所有浏览器都支持RGB颜色表示法，使用RGB色彩模式表示颜色值的格式如下：
rgb[红色通道值，绿色通道值，蓝色通道值]以上三个参数的取值范围可以是整数或者百分比的形式。
2）十六进制颜色
所有浏览器都支持RGB颜色的十六进制表示法，就是把原先的十进制的RGB取值转换成了十六进制，其格式如下：
#RRGGBB以井号（#）开头，后跟六位数，每两位代表一种颜色通道值，分别是RR（红色）、GG（绿色）、BB（蓝色）的十六进制取值。其中最小值的是0，最大值是FF。
十六进制码中的字母大小写均可。
当每种颜色通道上的两个字符相同时，每个通道的十六进制取值只占y
3）颜色名
一些常用的颜色可以使用相应的英文单词表示。
CSS颜色规定的17种标准色，如下表所示：
eg：CSS颜色的简单应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS颜色的简单应用</title>
<style>
/*设置字体颜色为红色*/
.red{
color:#FF0000
}
/*设置字体颜色为蓝色*/
.blue{
color:rgb(0,0,255)
}
/*设置字体颜色为橙色*/
.orange{
color:orange
}
</style>
</head>
<body>
<h3>CSS颜色的简单应用</h3>
<hr/>
<p class="red">
该段落字体设置为红色
</p>
<br/>
<p class="blue">
该段落字体设置为蓝色
</p>
<br/>
<p class="orange">
该段落字体设置为橘色
</p>
</body>
</html>
五、CSS常用样式
5.1 CSS背景
CSS背景与颜色属性，如下表所示：
1. 背景颜色background-color
CSS中的背景颜色background-color属性用于为所有HTML元素指定背景颜色。例如：
p{background-color:gray}
/*将段落元素的背景颜色设置为灰色*/如需更改整个网页的背景颜色，则对<body>元素应用background-color属性。例如;
body{background-color:cyan}
/*将整个网页的背景颜色设置为青色*/background-color属性的默认值是透明的，没有特别规定HTML元素背景颜色，那么该元素就是透明的，以便使其覆盖的元素可见。
eg：CSS属性background-color的简单应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS属性background-color的简单应用</title>
<style>
body{
background-color: silver; /*将整个网页的背景颜色设置为银色*/
}
h1{
background-color: red; /*将整个网页的背景颜色设置为红色*/
}
h2{
background-color: orange; /*将整个网页的背景颜色设置为橙色*/
}
h3{
background-color: yellow; /*将整个网页的背景颜色设置为黄色*/
}
h4{
background-color: green; /*将整个网页的背景颜色设置为绿色*/
}
h5{
background-color: blue; /*将整个网页的背景颜色设置为蓝色*/
}
h6{
background-color: purple; /*将整个网页的背景颜色设置为紫色*/
}
p{
background-color: cyan; /*将整个网页的背景颜色设置为青色*/
}
</style>
</head>
<body>
<h1>CSS属性background-color的应用</h1>
<h2>CSS属性background-color的应用</h2>
<h3>CSS属性background-color的应用</h3>
<h4>CSS属性background-color的应用</h4>
<h5>CSS属性background-color的应用</h5>
<h6>CSS属性background-color的应用</h6>
<p>CSS属性background-color的应用</p>
</body>
</html>
2. 背景图像background-image
CSS中的background-image属性用于为元素设置背景图像。例如：
p{background-image:url(flower.jpg)}
/*表示flower.jpg图片与HTML文档在同一个目录中*/如果引用本地其他文件夹中的图片，给出对应的文件夹路径即可。例如：
p{background-image:url(image/flower.jpg)}
/*表示flower.jpg图片在本地的image文件夹中，并且image文件夹与HTML文档存放于同一个目录中*/如需更改整个网页的背景图像，则对<body>元素应用background-image属性。例如：
body{background-image:url(image/flower.jpg)}eg:CSS属性background-image的简单应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS属性background-image的简单应用</title>
<style>
body{
background-image: url(sky.jpeg);
}
p{
background-image: url(xiongmao.jpeg);
width:210px;
height: 250px;
}
</style>
</head>
<body>
<h3>CSS属性background-image的应用</h3>
<hr/>
<p>这是一个段落</p>
</body>
</html>
3. 背景图像平铺方式background-repeat
CSS中的background-repeat属性用于设置背景图像的平铺方式。如果不设置该属性，则默认背景图像会在水平和垂直方向上同时被重复平铺。
CSS属性background-repeat取值，表如下所示：
eg：CSS属性background-repeat的简单应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS属性background-repeat的简单应用</title>
<style>
body{
background-image: url(sky.jpeg);
background-repeat: no-repeat; /*不平铺，只显示原图*/
}
</style>
</head>
<body>
<h3>CSS属性background-repeat的应用</h3>
</body>
</html>
4. 固定/滚动背景图像background-attachment
CSS中的background-attachment属性用于设置背景图像是固定在屏幕上还是随着页面滚动。
CSS属性background-attachment取值，如下表所示：
eg：CSS属性background-attachment的简单应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS属性background-attachment的应用</title>
<style>
body{
background-image: url(xiongmao.jpeg);
background-repeat: no-repeat; /*背景图像不平铺*/
background-attachment: scroll; /*背景图像随页面滚动*/
}
</style>
</head>
<body>
<h3>CSS属性background-attachment的应用</h3>
<hr/>
<p>
这是段落元素,用于测试背景图片是否跟随页面滚动。
</p>
<p>
这是段落元素,用于测试背景图片是否跟随页面滚动。
</p>
<p>
这是段落元素,用于测试背景图片是否跟随页面滚动。
</p>
<p>
这是段落元素,用于测试背景图片是否跟随页面滚动。
</p>
<p>
这是段落元素,用于测试背景图片是否跟随页面滚动。
</p>
<p>
这是段落元素,用于测试背景图片是否跟随页面滚动。
</p>
<p>
这是段落元素,用于测试背景图片是否跟随页面滚动。
</p>
<p>
这是段落元素,用于测试背景图片是否跟随页面滚动。
</p>
<p>
这是段落元素,用于测试背景图片是否跟随页面滚动。
</p>
</body>
</html>
5. 定位背景图像background-position
默认情况下，背景图像会放置在元素的左上角。CSS中的background-position属性用于设置背景图像的位置，可以根据属性值的组合将图像放置到指定位置上。该属性允许使用两个属性值组合的形式对背景图像进行定位。其基本格式如下：
background-position:水平方向 垂直方向水平和垂直方向的属性值均可以使用关键字、长度值或者百分比的形式表示。
1）关键词定位
在background-position属性值中可以使用的关键词，如下表所示：
使用关键词组合的方式定位图像，需要从表示水平方向和垂直方向的关键词中个选一个组合使用。例如：background-position:left top 表示背景图像在元素左上角位置。
关键词指示的方向非常明显，并且关键词的组合可以不分先后顺序。
关键词center既可以表示水平居中也可以表示垂直居中，组合使用时取决于另一个关键词是水平还是垂直方向，center则用于补充对立方向。
关键词定位的方式也可以简写为单个关键词的形式，这种情况会默认另一个省略的关键词为center。
2）长度值定位
长度值定位方法是以元素内边距区域左上角的点作为原点，然后解释背景图像左上角的点对原点的偏移量。例如：background-position:100px;50px 指的是背景图像左上角的点距离元素左上角向右100像素同时向下50像素的位置。
3）百分比定位
百分比数值定位方式更为复杂，是将HTML元素与其背景图像在指定的点上重合对齐，而指定的点是用百分比的方式进行解释的。
例如：background-position:0% 0% 指的是背景图像左上角的点放置在HTML元素左上角原点上。background-position:66% 33% 指的是HTML元素与背景图像水平方向2/3的位置和垂直方向1/3的位置的点对齐。
一般来说，使用百分比定位方式都是用两个参数值组合定位的，第一个参数表示水平方向的位置；第二个参数值表示垂直方向的位置。如果简写为一个参数值，则只表示水平方向的位置，省略的垂直方向位置默认为50%。
eg：CSS属性background-position的综合应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS属性background-position的应用</title>
<style>
div{
width: 660px;
}
p{
width: 200px;
height: 200px;
background-color: silver;
background-image: url(sky.jpeg);
background-repeat: no-repeat;
float: left;
margin: 10px;
text-align: center;
}
#p1_1{
background-position:left top
}
#p1_2{
background-position:top
}
#p1_3{
background-position:right top
}
#p2_1{
background-position:0%
}
#p2_2{
background-position:50%
}
#p2_3{
background-position:100%
}
#p3_1{
background-position:0px 100px
}
#p3_2{
background-position:50px 100px
}
#p3_3{
background-position:100px 100px
}
</style>
</head>
<body>
<h3>CSS属性background-position的应用</h3>
<hr/>
<div>
<p id="p1_1">left</p>
<p id="p1_2">top</p>
<p id="p1_3">right top</p>
<p id="p2_1">0%</p>
<p id="p2_2">50%</p>
<p id="p2_3">100%</p>
<p id="p3_1">0px 100px</p>
<p id="p3_2">50px 100px</p>
<p id="p3_3">100px 100px</p>
</div>
</body>
</html>
几种特殊的百分比数值可以与关键词定位法等价使用，如下表所示：
6. 背景简写background
CSS中的background属性可以用于概括其他五种背景属性，将相关属性值汇总写在一行。当需要为同一元素声明多项背景属性时，可以使用background属性进行简写。声明顺序如下：
[background-color][background-image][background-repeat][background-attachment][background-position]属性值之间用空格隔开，如果其中某个属性没有规定可以省略不写。
P{
background-color：silver;
background-image：url(sky.jpeg);
background-repeat:no-repeat;
}
/*等价于*/
p{
background：silver url(sky.jpeg) no-repeat
}5.2 CSS框模型
CSS框模型又称为盒状模型，用于描述HTML元素形成的矩形盒子。每个HTML元素斗鱼元素内容、内边距、外边距。CSS框模型的结构，如下图所示：
默认情况下，元素的内边距、边框和外边距均为0。
在CSS中元素的宽度和高度属性指的是元素内容的区域。增加外边距或边框的宽度不会影响元素的宽度和高度属性值，但是元素占用的总空间会增大。
1. 内边距padding
1）设置各边内边距
在CSS中，可以使用padding属性设置HTML元素的内边距。内边距不影响当前元素与其他元素之间的距离，它只能用于增加元素内容与元素边框之间的距离。
padding属性值可以使长度值或者百分比值，但是不可以是负数。
例如：为所有的段落元素<p>设置各边均为20像素的内边距：
P{padding:20px}使用百分比值表示是该元素的上一级父元素宽度的百分比。例如：
<div style="width:100px">
<p style="padding:20%">这是一个段落</p>
</div>
/*使用内联样式表，表示段落元素<p>设置了内边距为父元素宽度的20%。
该段落元素<p>的父元素为块级元素<div>,因此段落元素<p>各边的内边距均为是<div>元素宽度的20%，即20像素。*/padding属性也可以是元素的各边分别设置内边距。例如：
p{padding:10px 20px 0 20%}
/*此时规定的属性值按照上右下左的顺时针顺序为各边的内边距进行样式定义。
表示上边内边距为10像素；右边内边距为20像素；下边内边距为0；左边内边距为其父元素宽度的20%*/2）单边内边距
如果只需要为HTML元素的某一边设置内边距，可以使用padding属性的四种单边内边距属性，如下表所示：
eg：CSS属性padding的应用
- 使用padding属性加单个属性值的形式为各边同时设置相同的内边距。
- 使用padding属性加两个属性值的形式分别为上下边和左右边设置不同的内边距。
- 使用padding属性设置单边的内边距。
<!--测试段落元素<p>使用内边距属性padding的不同效果-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS属性padding的应用</title>
<style>
p{
width: 200px;
margin: 10px;
background-color: orange;
}
.style01{
padding: 20px
}
.style02{
padding:10px 50px
}
.style03{
padding-left: 50px;
}
</style>
</head>
<body>
<h3>CSS属性padding的应用</h3>
<hr/>
<p class>
该段落没有使用内边距,默认值为0
</p>
<p class="style01">
该段落元素的各边内边距均为20像素
</p>
<p class="style02">
该段落元素的上下边内边距均为10像素、左右边内边距均为50像素
</p>
<p class="style03">
该段落元素的左边内边距为50像素
</p>
</body>
</html>
<!--段落元素p设置统一样式:宽度200像素,背景色为橙色以及外边距为10像素-->
<!--使用类选择器为段落元素设置不同的padding属性值-->
注意：如果为元素填充背景颜色或背景图像，则其显示范围是边框以内的区域，包括元素实际内容和内边距。
2. 边框border
使用CSS边框的相关属性可以为HTML元素创建不同的宽度、样式和颜色的边框。和CSS边框有关的属性，如下表所示：
1）边框宽度border-width
CSS中的border-width属性用于定义THML元素边框的宽度。该属性取值如下表所示：
注：border-width属性必须和边框样式border-style属性一起使用方可看出效果。
eg：CSS属性border-width的简单应用
<!--实验CSS属性border-width不同取值的显示效果-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>CSS属性border-width的简单应用</title>
<style>
p{
width: 200px;
height: 50px;
border: solid;
}
.thin{
border-width: thin;
}
.medium{
border-width: medium;
}
.thick{
border-width: thick;
}
.one{
border-width: 1px;
}
.ten{
border-width: 10px;
}
</style>
</head>
<body>
<h3>CSS属性border-width的简单应用</h3>
<hr/>
<p class="one">
边框宽度为1像素
</p>
<p class="thin">
边框宽度为thin
</p>
<p class="medium">
边框宽度为medium
</p>
<p class="thick">
边框宽度为thick
</p>
<p class="ten">
边框宽度为10像素
</p>
</body>
</html>
2）边框样式border-style
CSS中的border-style属性用于定义HTML元素边框的样式。该属性的取值如下表所示：
border-style属性也可以单独为元素的各边设置边框样式。规定的属性值按照上右下左的顺时针为各边的边框进行样式定义。例如：
p{border-style:solid dashed dotted double}
/*上边框为实现，右边框为虚线，下边框为点状线，左边框为双线*/如果简写为三个属性值的样式，则左右边框共用中间的属性值。例如：
p{border-style:solid dashed double}
/*表示上边框为实线，左右边框为虚线，下边框为双线*/如果简写为两个属性值的样式，则上下边框共用第一个属性值，左右边框共用第二个属性值。例如：
p{border-style:solid dashed}
/*表示上下边框均为实线，左右边框均为虚线*/eg：CSS属性border-style的简单应用
<!--实验CSS属性border-style不同取值的显示效果-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS属性border-style的简单应用</title>
<style>
p{
width: 200px;
height: 30px;
border-width: 5px;
}
#p01{
border-style: none;
}
#p02{
border-style: dotted;
}
#p03{
border-style: dashed;
}
#p04{
border-style: solid;
}
#p05{
border-style: double;
}
#p06{
border-style: groove;
}
#p07{
border-style: ridge;
}
#p08{
border-style: inset;
}
#p09{
border-style: outset;
}
</style>
</head>
<body>
<h3>CSS属性border-style的应用</h3>
<hr/>
<p id="p01">无边框效果</p>
<p id="p02">点状边框效果</p>
<p id="p03">虚线边框效果</p>
<p id="p04">实线边框效果</p>
<p id="p05">双线边框效果</p>
<p id="p06">3D凹槽边框效果</p>
<p id="p07">3D脊状边框效果</p>
<p id="p08">3D内嵌边框效果</p>
<p id="p09">3D外凸边框效果</p>
</body>
</html>
3）边框颜色border-color
CSS中的border-color属性用于定义HTML元素边框的颜色。
eg：CSS属性border-color的简单应用
<!--实验CSS属性border-color不同取值的显示效果-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS属性border-color的简单应用</title>
<style>
p{
width: 200px;
height: 30px;
border-width: 10px;
border-style: solid;
}
#p01{
border-color: red;
}
#p02{
border-color: green;
}
#p03{
border-color: blue;
}
</style>
</head>
<body>
<h3>CSS属性border-color的应用</h3>
<hr/>
<p id="p01">
红色边框效果
</p>
<p id="p02">
绿色边框效果
</p>
<p id="p03">
蓝色边框效果
</p>
</body>
</html>
4）边框简写border
CSS中的border属性可以用于概括其他三种边框属性，将相关属性值汇总写在同一行。当需要为同一个元素声明多项边框属性时可以使用border属性进行简写。属性值无规定顺序，彼此之间用空格隔开，如果其中某个属性没有规定可以省略不写。例如：
p{
border-width:1px;
border-style:solid;
border-color:red;
}
/*等价于*/
p{border:1px solid red}3. 外边距
1）设置各边外边距
在CSS中，可以使用margin属性设置HTML元素的外边距。元素的外边距也可以被理解为元素内容周围的填充物。
margin属性值可以是长度值或百分比，包括可以使用负数。例如：
h1{margin:10px}
/*所有标题元素<h1>设置各边均为10像素的外边距*/使用百分比值表示当前元素上级父元素的宽度百分比。例如：
<div style="width:300px">
<p style="margin:10%">这是一个段落</p>
</div>
/*使用内联样式表为段落<p>设置外边距为父元素宽度的10%*/
/*该段落元素<p>的父元素为<div>,因此段落元素<p>各边的外边距均为是<div>元素宽度的10%，即30像素*/margin属性也可以为元素的各边分别设置外边距。规定的属性值按照上右下左的顺时针顺序为各边的外边距进行样式定义。例如：
p{margin:0 10% 20px 30px}
/*表示上边外边距为0像素，右边外边距为其父元素的10%，下边外边距为20像素，左边外边距为30像素*/简写为三个属性值的样式，则左右边外边距共用中间的属性值。例如：
p{margin:10px 0 30px}
/*表示上边外边距为10像素，左右边外边距为0，下边外边距为30像素*/简写为两个属性值的样式，则上下边外边距共用第一个属性值，左右边外边距共用第二个属性值。例如：
p{margin:20px 30px}
/*表示上下边外边距为20像素，左右边外边距为30像素*/2）单边外边距
如果只需要为HTML元素的某一个边设置外边距，可以使用margin属性的单边外边距属性，如下表所示：
例如：
p{margin-left:10px}
/*设置段落元素<p>的左边外边距为10像素*/eg：CSS属性margin的应用
- 使用margin属性加单个属性值的形式为各边同时设置相同的外边距。
- 使用margin属性加两个属性值的形式分别为上下边和左右边设置不同的外边距。
- 使用margin属性设置单边的外边距。
<!--测试<div>元素使用外边距属性margin的不同效果-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS属性margin的应用</title>
<style>
.box{
border:1px solid;
width: 300px;
margin: 10px;
}
.yellow{
background-color: yellow;
}
.style01{
margin: 20px
}
.style02{
margin: 10px 50px
}
.style03{
margin-left: 100px
}
</style>
</head>
<body>
<h3>CSS属性margin的应用</h3>
<hr/>
<div class="box">
<div class="yellow">
该段落没有使用外边距,默认值为0
</div>
</div>
<div class="box">
<div class="style01 yellow">
该段落元素的各边外边距均为20像素
</div>
</div>
<div class="box">
<div class="style02 yellow">
该段落元素的上下边外边距均为10像素,左右边外边距均为50像素
</div>
</div>
<div class="box">
<div class="style03 yellow">
该段落元素左边外边距为100像素
</div>
</div>
</body>
</html>
3）外边距合并
外边距合并又称外边距叠加，指的是如果两个元素的垂直外边距相连接会发生重叠合并，其高度是合并前这两个外边距中的较大值。
外边距合并主要指的就是上下外边距的合并，存在三种可能：
- 当元素B出现在元素A下面时，元素A的下边距与元素B的上边距发生重叠合并。
- 当元素B包含在元素A内部时，如果元素B的上/下内边距均为0，也会发生上/下外边距合并现象。
- 当空元素没有边框和内边距时，上下外边距也会发生合并。
注意：只有普通块级元素的垂直外边距才会发生合并。
5.3 CSS文本
对网页文本内容进行修饰。
CSS文本属性，如下表所示：
1. 文本缩进text-indent
CSS中的text-indent属性用于为段落文本设置首行缩进效果。
例如，为段落元素<p>设置20像素的首行缩进：
p{text-indent:20px}eg:CSS属性text-indent的简单应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS属性text-indent的应用</title>
<style>
p{
text-indent: 2em;
border: 1px solid;
width: 200px;
padding: 10px;
}
</style>
</head>
<body>
<h3>CSS属性text-indent的应用</h3>
<hr/>
<p>
这是一个用于测试首行缩进效果的元素段落,当前缩进了两个字符的距离
</p>
</body>
2. 文本对齐text-align
CSS中的text-align属性用于为文本设置对齐效果。
CSS属性text-align取值，如下表所示：
其中justify的取值在多数浏览器上显示会存在问题，因为CSS本身没有规定如何将文字向两端拉伸，拉伸的依据是各类浏览器本身的规则。为了各类浏览器的兼容效果，应慎用其属性值。
eg:CSS属性text-align的简单应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS属性text-align的应用</title>
<style>
div{
border: 1px solid;
width: 300px;
padding: 10px;
}
.center{text-align: center;} /*文本居中对齐*/
.left{text-align:left;} /*文本左对齐*/
.right{text-align: right;} /*文本右对齐*/
</style>
</head>
<body>
<h3>CSS属性text-align的应用</h3>
<hr/>
<div>
<p class="center">
文字居中对齐
</p>
<p class="left">
文字左对齐
</p>
<p class="right">
文字右对齐
</p>
</div>
</body>
</html>
3. 文本装饰text-decoration
CSS中的text-decoration属性用于为文本添加装饰效果。
CSS属性text-decoration取值，如下表所示：
eg：CSS属性text-decoration的简单应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS属性text-decoration的应用</title>
<style>
.underline{text-decoration: underline;} /*下画线*/
.line-through{text-decoration: line-through;} /*删除线*/
.overline{text-decoration: overline;} /*上画线*/
</style>
</head>
<body>
<h3>CSS属性text-decoration的应用</h3>
<hr/>
<p class="underline">
为文字添加下画线
</p>
<p class="line-through">
为文字添加删除线
</p>
<p class="overline">
为文字添加上画线
</p>
</body>
</html>
一般来说，默认情况下就是text-decoration属性值为none的状态，无需特别声明。但是none属性值适用于去掉超链接文本内容的下画线。
4. 文本转换text-transform
CSS中的text-transform属性用于设置文本的大小写。
CSS属性text-transform取值，如下表所示：
eg：CSS属性text-transform的简单应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS属性text-transform的应用</title>
<style>
.uppercase{text-transform: uppercase;} /*全大写*/
.lowercase{text-transform: lowercase;} /*全小写*/
.capitalize{text-transform: capitalize;} /*单词首字母大写*/
</style>
</head>
<body>
<h3>CSS属性text-transform的应用</h3>
<hr/>
<p class="uppercase">
hello HTML
</p>
<p class="lowercase">
HEOOL HTML
</p>
<p class="capitalize">
hello HTML
</p>
</body>
</html>
5. 字符间距letter-spacing
CSS中的letter-spacing属性用于设置文本中字符的间距，其属性值为长度值。
例如，将标题元素<h1>设置为字间距为10像素的宽度：
h1{letter-spacing:10px}eg:CSS属性letter-spacing的简单应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS属性letter-spacing的应用</title>
<style>
.style01{
letter-spacing: 1em;
}
.style02{
letter-spacing: 2em;
}
.style03{
letter-spacing: -5px;
}
</style>
</head>
<body>
<h3>CSS属性letter-spacing的应用</h3>
<hr/>
<p class="style01">
文字间距为1em
</p>
<p class="style02">
文字间距为2em
</p>
<p class="style03">
文字间距为-5px
</p>
</body>
</html>
letter-spacing的属性值允许是负数，但是需要适度，否则字符就会全部堆积在一起无法识别。
5.4 CSS字体
对字体进行样式设置。
CSS字体属性，如下表所示：
1. 字体系列font-family
在CSS中，将字体分为两类：一类是特定字体系列；另一类是通用字体系列。特定字体系列指的是拥有具体名称的某一类字体；通用字体系列指的是具有相同外观特征的字体系列。
除了常见的各种特定字体外，CSS规定了五种通用字体系列：
- Serif字体
- Sans-serif字体
- Monospace字体
- Cursive字体
- Fantasy字体
注：如果字体名称由多个单词组成中间有空格，属性值必须加上引号；如果字体名称为单个单词，引号可省略不写。
eg：CSS属性font-family的简单应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS属性font-family的应用</title>
<style>
.style01{
font-family: "AR DELANEY"; /*显示描边*/
}
.style02{
font-family: "French Script MT"; /*花体字*/
}
.style03{
font-family: "微软雅黑 Light"; /*黑体字*/
}
</style>
</head>
<body>
<h3>CSS属性font-family的应用</h3>
<hr/>
<p class="style01">
AR DELANEY
</p>
<p class="style02">
French Script MT
</p>
<p class="style03">
微软雅黑 Light
</p>
</body>
</html>
2. 字体风格font-style
CSS中的font-style属性可以用于设置字体风格是否为斜体字。
CSS属性font-style取值表，如下所示：
eg：CSS属性font-style的简单应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS属性font-style的应用</title>
<style>
.style01{font-style: normal;}
.style02{font-style: italic;}
.style03{font-style: oblique;}
</style>
</head>
<body>
<h3>CSS属性font-style的应用</h3>
<hr/>
<p class="style01">
正常字体
</p>
<p class="style02">
斜体字
</p>
<p class="style03">
倾斜字体
</p>
</body>
</html>
3. 字体变化font-variant
CSS中的font-variant属性可以用于设置字体变化。
CSS属性font-variant取值，如下表所示：
如果当前页面的指定字体不支持small-caps这种形式，则显示为正常大小字号的大写字母。
eg：CSS属性font-variant的简单应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS属性font-variant的应用</title>
<style>
.style01{font-variant: normal}
.style02{font-variant: small-caps} /*全大写，但是比正常大写字母小一号*/
</style>
</head>
<body>
<h3>CSS属性font-variant的应用</h3>
<hr/>
<p class="style01">
Normal
</p>
<p class="style02">
Small Caps
</p>
<p class="style02">
small caps
</p>
</body>
</html>
4. 字体粗细font-weight
CSS中的font-weight属性用于控制字体的粗细程度。
CSS属性font-weight取值，如下表所示：
eg：CSS属性font-weight的简单应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS属性font-weight的应用</title>
<style>
.style01{font-weight: normal}
.style02{font-weight: bold}
.style03{font-weight: 100}
.style04{font-weight: 400}
.style05{font-weight: 900}
</style>
</head>
<body>
<h3>CSS属性font-weight的应用</h3>
<hr/>
<p class="style01">
段落测试(正常字体)
</p>
<p class="style02">
段落测试(粗体字)
</p>
<p class="style03">
段落测试(100)
</p>
<p class="style04">
段落测试(400)
</p>
<p class="style05">
段落测试(900)
</p>
</body>
</html>
注：浏览器在100~400的显示效果相似，500~900的显示效果相似。
5. 字体大小font-size
CSS中font-size属性用于设置字体大小。font-size的属性值为长度，可以使用绝对单位或相对单位。绝对单位使用的是固定尺寸，不允许用户在浏览器中更改文本大小，采用了物理度量单位；相对单位是相对于周围的参照元素进行设置大小，允许用户在浏览器中更改字体大小。
常用字体大小设置是使用px、em、百分比（%）来显示字体尺寸。
- px——像素，1px指的是屏幕上显示的一个小点，是绝对单位。
- em——当前元素的默认字体尺寸，是相对单位。浏览器默认字体大小是16px，因此1em=16px。
- %——相对于父元素的比例，是相对单位。
eg：CSS属性font-size的简单应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS属性font-size的应用</title>
<style>
.style01{font-size: 16px}
.style02{font-size: 1em}
.style03{font-size: 32px}
.style04{font-size: 2em}
</style>
</head>
<body>
<h3>CSS属性font-size的应用</h3>
<hr/>
<p class="style01">
测试段落,字体大小为16像素
</p>
<p class="style02">
测试段落,字体大小为1em
</p>
<p class="style03">
测试段落,字体大小为32像素
</p>
<p class="style04">
测试段落,字体大小为2em
</p>
</body>
</html>
6. 字体简写font
CSS中的font属性可以用于概括其他五种字体属性，将相关属性值汇总写在同一行。当需要为同一个元素声明多项字体属性时，可以使用font属性进行简写。声明顺序如下：
[font-style][font-variant][font-weight][font-size][font-family]属性值之间用空格隔开，如果其中某个属性没有规定可以省略不写。例如：
p{
font-style:italic;
font-weight:bold;
font-size:20px;
}
/*等价于*/
p{font:italic bold 20px}5.5 CSS超链接
HTML中的超链接元素<a>和其他元素类似，有一些通用CSS属性可以设置，比如字体颜色，字体大小、背景颜色等。除此之外，超链接元素<a>还可以根据其所处的不同状态分别设置CSS样式。
超链接的四种状态，如下表所示：
为超链接设置不同状态的CSS样式时必须遵循两条规则：
- a:hover的声明必须在a:link和a:visited之后；
- a:active的声明必须在a:hover之后。
否则声明有可能失效。
eg：超链接不同状态的简单CSS应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS属性超链接应用</title>
<style>
a:link,a:visited{
display: block; /*块级元素*/
text-decoration: none; /*取消下划线*/
color: white; /*字体为白色*/
font-weight: bold; /*字体加粗*/
font-size: 25px; /*字体大小为25px*/
background-color: #7BF; /*设置背景颜色*/
width: 200px; /*宽度200像素*/
height: 30xp; /*高度30像素*/
text-align: center; /*文本居中显示*/
line-height: 30px; /*行高30像素*/
}
a:hover,a:active{
background-color: #0074E8;/*设置背景颜色*/
}
</style>
</head>
<body>
<h3>CSS属性超链接应用</h3>
<hr/>
<a href="https://www.baidu.com/">百度</a>
</body>
</html>
本例设置text-decoration属性值为none，取消了原本超链接原有的下划线样式，并在鼠标悬浮和点击状态中设置了元素背景颜色的加深，从而实现动态效果。
为使超链接元素形成仿按钮风格，为其定义display属性为block，使之成为块级元素，从而可以为其设置尺寸。
5.6 CSS列表
CSS列表属性，如下表所示：
1. 样式类型list-style-type
CSS中的list-style-type属性可以用于设置列表的标志样式。
CSS属性list-style-type常见取值，如下表所示：
注意：部分列表样式在IE浏览器中不被支持，建议使用Chrome或者其他浏览器进行预览。
2. 样式图片list-style-image
CSS中的list-style-image属性可以用于设置列表的标志图标，标志图标可以是来源于本地或者网络的图像文件。
如果已使用list-style-image属性声明了列表的标志图标，则不能同时使用list-style-type属性声明列表的标志类型，否则后者将无显示效果。
eg：CSS属性list-style-image的简单应用
使用自定义图片制作列表的标志图标。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS属性list-style-image的应用</title>
<style>
.arrow{
list-style-image: url(图标.png);
}
</style>
</head>
<body>
<h3>CSS属性list-style-image的应用</h3>
<hr/>
<ul class="arrow">
<li>选项一</li>
<li>选项二</li>
<li>选项三</li>
</ul>
</body>
</html>
3. 样式位置list-style-position
CSS中的list-style-position属于用于定义列表标志的位置。
CSS中的list-style-position属性值，如下表所示：
eg：CSS属性list-style-position的简单应用
使用列表元素<ul>对比list-style-position属性值为outside和inside的显示区别。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS属性list-style-position的应用</title>
<style>
ul{
width:500px;
border: 1px solid;
}
.outside{
list-style-position: outside;
}
.inside{
list-style-position: inside;
}
</style>
</head>
<body>
<h3>CSS属性list-style-position的应用</h3>
<hr/>
<ul class="outside">
<li>
本示例的list-style-position属性值为outside
</li>
<li>
本示例的list-style-position属性值为outside
</li>
<li>
本示例的list-style-position属性值为outside
</li>
</ul>
<ul class="inside">
<li>
本示例的list-style-position属性值为inside
</li>
<li>
本示例的list-style-position属性值为inside
</li>
<li>
本示例的list-style-position属性值为inside
</li>
</ul>
</body>
</html>
4. 样式简写list-style
CSS中的list-style属性可以用于概括其他三种字体属性，将相关属性值汇写在同一行。当需要为同一个列表元素声明多项列表属性时可以使用list-style属性进行简写。声明顺序如下：
[list-style-type] [list-style-position] [list-style-image]属性值之间用空格隔开，如果其中某个属性没有规定可以省略不写。
ul{
list-style-type:circle;
list-style-position:outside
}
/*等价于*/
ul{list-style:circle outside}5.7 CSS表格
对网页上的表格进行修饰。
CSS表格相关属性如下表所示：
除以上五种属性设置外，在CSS中一些通用属性设置同样也可以用于表格元素。例如，字体颜色（color）、背景（background）、文本对齐（text-align）、边框（border）、内边距（padding）、宽度（width）、高度（height）等。
1. 折叠边框border-collapse
在默认情况下，表格的边框如果设置为实践，则会显示为双层线条的样式效果。
CSS中的border-collapse属性用于设置是否将表格的双层边框折叠为单一线条边框。
CSS属性border-collapse属性值，如下表所示：
eg：CSS属性border-collapse的简单应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS属性border-collapse的应用</title>
<style>
.separate{
border-collapse: separate;
}
.collapse{
border-collapse: collapse;
}
</style>
</head>
<body>
<h3>CSS属性border-collapse的应用</h3>
<hr/>
<table border="1" class="separate">
<caption>
双线边框效果
</caption>
<tr>
<td>年份</td>
<td>第一季度</td>
<td>第二季度</td>
<td>第三季度</td>
</tr>
<tr><td>2014</td><td>100</td><td>200</td><td>300</td></tr>
<tr><td>2015</td><td>150</td><td>250</td><td>350</td></tr>
<tr><td>2016</td><td>200</td><td>300</td><td>400</td></tr>
</table>
<br>
<table border="1" class="collapse">
<caption>
折叠边框效果
</caption>
<tr>
<td>年份</td>
<td>第一季度</td>
<td>第二季度</td>
<td>第三季度</td>
</tr>
<tr><td>2014</td><td>100</td><td>200</td><td>300</td></tr>
<tr><td>2015</td><td>150</td><td>250</td><td>350</td></tr>
<tr><td>2016</td><td>200</td><td>300</td><td>400</td></tr>
</table>
</body>
</html>
2. 边框距离border-spacing
CSS中的border-collapse属性用于定义表格中双线边框的分割距离。
CSS属性border-spacing属性值，如下表所示：
注意：order-spacing属性只在表格能显示边框并且边框的border-collapse属性值为默认值spacing时生效，否则该属性将被忽略。
注：由于表格的默认效果就是分割边框（border-collapse属性值为separate），因此无需特别声明。只需要为表格元素添加属性border=“1”，以便形成宽度为1像素的实线边框。
3. 标题位置caption-side
CSS中的caption-side属性用于定义表格中标题的位置。
CSS属性caption-side属性值：
eg：CSS属性caption-side的简单应用
4. 空单元格empty-cells
CSS中的empty-cells属于用于定义表格中空单元格边框和背景的显示方式。
CSS属性empty-cells属性值：
eg： CSS属性empty-cells的简单应用
注：由于表格的默认效果就是分割边框（border-collapse属性值为separate），因此无需特别声明。只需要为表格元素添加属性“border=1”，以便形成宽度为1像素的实线边框。
5. 表格布局table-layout
CSS中的table-layout属于用于规定表格的布局方式，包括固定表格布局和根据内容调整布局。
CSS属性table-layout属性值：
六、CSS定位
CSS定位可以将HTML元素放在页面上指定位置的任意地方。CSS定位的原理是把页面左上角的点定义为坐标为（0,0）的原点，然后以像素为单位将整个网页构建一个坐标系统。其中x轴越往右数字越大，y轴越往下数字越大。
6.1 绝对定位
绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素，基于绝对定位的元素不占空间。
使用绝对定位需要将HTML元素的position属性值设置为absolute（绝对的），并使用四种关于方位的属性关键词left、right、top、bottom中的部分内容设置元素的位置。一般来说，从水平和垂直方向各选一个关键词即可。
例如，需要将段落元素<p>放置在距离页面顶端150像素、左边100像素的位置：
p{
position:absolute;
top:150px;
left:100px;
}eg:CSS绝对定位的应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS绝对定位的应用</title>
<style>
p{
position: absolute;
width:120px;
height: 200px;
top: 100px;
left: 0px;
background-color: #C8EDFF;
}
div{
position: absolute;
width: 300px;
height: 350px;
top: 80px;
left: 180px;
border: 1px solid;
}
</style>
</head>
<body>
<h3>CSS绝对定位的应用</h3>
<hr/>
<p>该段落是相对于页面定位的,距离页面的顶端100像素,距离左边0像素</p>
<div>
我是相对于页面定位的div元素,距离顶端80像素,距离左边180像素
<p>
该段落是相对于父元素div定位的,距离div元素的顶端100像素,距离div元素的左边0像素
</p>
</div>
</body>
</html> 
6.2 相对定位
相对定位于绝对定位的区别在于它的参照点不是左上角的原点，而是该元素本身原先的起点的位置。并且即使该元素偏移到了新的位置，也仍然从原点的起始点处占据空间。
使用相对定位需要将HTML元素的position属性值设置为relative（相对的），并同样使用四种关于方位的属性关键词left、right、top、bottom中的部分内容设置元素的位置。一般来说，从水平和垂直方向各选一个关键词即可。
例如，需要将段落元素<p>放置在距离元素初始位置顶端150像素、左边100像素的位置：
p{
position:relative;
top:150px;
left:100px;
}eg:CSS相对定位的应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS相对定位的应用</title>
<style>
div{
width:200px;
height:280px;
border:1px solid;
margin-left:50px;
}
p{
width:150px;
height:80px;
background-color:#C8EDFF;
}
.left{
position:relative;
left:-50px;
}
.right{
position:relative;
left:130px;
}
</style>
</head>
<body>
<h3>CSS相对定位的应用</h3>
<hr/>
<div>
<p>
正常状态的段落
</p>
<p class="left">
相对自己正常的位置向左偏移了50像素
</p>
<p class="right">
相对自己正常的位置向右偏移了130像素
</p>
</div>
</body>
</html>
6.3 层叠效果
在CSS中，还可以定义多个元素在一起叠放的层次。使用属性z-index可以为元素规定层次顺序，其属性值为整数，并且该数值越大将叠放在越靠上的位置。
eg：CSS层叠效果的应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS层叠效果的应用</title>
<style>
div{
width: 182px;
height: 253px;
position: absolute;
}
#ten{
background: url(sky.jpeg) no-repeat;
z-index: 1;
left: 50px;
top:100px;
}
#J{
background: url(J.jpg) no-repeat;
z-index: 2;
left: 150px;
top:100px;
}
#Q{
background: url(Q.jpeg) no-repeat;
z-index: 3;
left: 300px;
top: 100px;
}
#K{
background: url(K.jpeg) no-repeat;
z-index: 4;
left: 450px;
top:100px;
}
#A{
background: url(A.jpeg) no-repeat;
z-index: 5;
left: 600px;
top:100px;
}
</style>
</head>
<body>
<h3>CSS层叠效果的应用</h3>
<hr/>
<div id="ten"></div>
<div id="J"></div>
<div id="Q"></div>
<div id="K"></div>
<div id="A"></div>
</body>
</html>
6.4 浮动
1. 浮动效果float
在CSS中float属性可以用于令元素向左或向右浮动。以往常用于文字环绕图像效果，实际上任何元素都可以应用浮动效果。
CSS属性float属性值如下表所示：
在对元素声明浮动效果之后，该浮动元素会自动生成一个块级框，因此需要明确指定浮动元素的宽度，否则会被默认不占空间。元素在进行浮动时会朝着指定的方向一直移动，直到碰到页面的边缘或者上一个浮动框的边缘才会停下来。
一行之内的宽度如果放不下浮动元素，则该元素会向下移动直到有足够的空间为止再向着指定的方向进行移动。
浮动可用于实现文字环绕图片的效果。
eg：CSS浮动的简单应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS浮动的简单应用</title>
<style>
div{
float: left;
width: 700px;
}
p{
line-height: 30px;
text-indent: 2em;
}
</style>
</head>
<body>
<h3>CSS浮动的应用</h3>
<hr/>
<div>
<img src="热气球.jpg" alt="热气球"/>
</div>
<p>
18世纪,法国造纸商孟格菲兄弟在欧洲发明了热气球。他们受碎纸屑在火炉中不断升起的启发,用纸袋把热气聚集起来做实验,使纸袋能够随着气流不断上升。1783年6月4日,孟格菲兄弟在里昂安诺内广场做公开表演,一个圆周为110英尺的模拟气球升起,飘然飞行了1.5英里。同年9月19日,在巴黎凡尔赛宫前,孟格菲兄弟为国王、王后、宫廷大臣及13万巴黎市民进行了热气球的升空表演。同年11月21日下午,孟格菲兄弟又在巴黎穆埃特堡进行了世界上第一次热气球载人空中飞行,飞行了25分钟,飞越半个巴黎之后降落在意大利广场附近。这次飞行比莱特兄弟的飞机飞行早了整整120年。在充气气球方面,法国的罗伯特兄弟是最先乘充满氢气的气球飞上天空的。
</p>
</body>
</html>
浮动也可以用于将多个元素排成一行，实现单行分列的效果。
eg：CSS浮动的简单应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS浮动的简单应用</title>
<style>
div{
width:200px;
height: 400px;
float: left;
}
#ten{
background: url(sky.jpeg) no-repeat
}
#J{
background: url(J.jpg) no-repeat
}
#Q{
background: url(Q.jpeg) no-repeat
}
#K{
background: url(K.jpeg) no-repeat
}
#A{
background: url(A.jpeg) no-repeat
}
</style>
</head>
<body>
<h3>CSS浮动的应用</h3>
<hr/>
<div id="ten"></div>
<div id="J"></div>
<div id="Q"></div>
<div id="K"></div>
<div id="A"></div>
</body>
</html>
使用了float属性后，<div>元素会自动向左进行浮动，直到元素的左边外边缘碰到了页面顶端或前一个浮动框的边框时才会停止。
注意：如果浏览器页面缩放尺寸，则有可能造成宽度过窄容纳不下全部的元素，这会导致其他<div>元素自动向下移动直到拥有足够的空间才能继续显示。
2. 清理浮动clear
CSS中的clear属性可以用于清理浮动效果，它可以规定元素的哪一侧不允许出现浮动元素。
CSS属性的clear属性值如下表所示：
例如：常用clear:both来清除之前的浮动效果：
p{
clear:both;
}此时该元素不会随着之前的元素进行错误的浮动。
283
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
