CSS快速入门

素颜马尾好姑娘i 2023-01-09 15:44 120阅读 0赞

### CSS快速入门 ###

CSS（Cascading Style Sheets 层叠样式表）。CSS不能单独使用，必须与HTML或XML一起协同工作，为HTML或XML起装饰作用。层叠指多个样式可以作用在同一个html的元素上，同时生效。

CSS最重要的目标是将文件的内容与它的显示分隔开来。在CSS出现前，几乎所有的HTML文件内都包含文件显示的信息，比如字体的颜色、背景应该是怎样的、如何排列、边缘、连线等等都必须一一在HTML文件内列出，有时重复列出。CSS使作者可以将这些信息中的大部分隔离出来，简化HTML文件，这些信息被放在一个辅助的，用CSS语言写的文件中。HTML文件中只包含结构和内容的信息，CSS文件中只包含样式的信息。

【HTML负责确定网页中有哪些内容，CSS确定以何种外观(大小、粗细、颜色、对齐和位置)展现这些元素。CSS可以用于设定页面布局、设定页面元素样式、设定适用于所有网页的全局样式。CSS可以零散地直接添加在要应用样式的网页元素上，也可以集中化内置于网页、链接式引入网页以及导入式引入网页。】

**CSS基本规则语法**

style-rule ::=

selectors-list \{

properties-list

其中：

selectors-list ::=

selector\[:pseudo-class\] \[::pseudo-element\]

\[, selectors-list\]

properties-list ::=

\[property : value\] \[; properties-list\]

通俗地说

CSS由多组“规则”组成。每个规则由“选择器”（selector）、“属性”（property）和“值”（value）组成：

选择器（Selector）：多个选择器可以半角逗号（,）隔开，用于指出网页中要应用样式规则的元素。

属性（property）：CSS1、CSS2、CSS3规定了许多的属性，目的在控制选择器的样式。

值（value）：指属性接受的设置值，多个关键字时大都以空格隔开。

英文花括号“｛｝”中的内容就是声明，它由一个属性和一个值组成，属性和值之间用半角冒号（:）隔开，属性和值合称为“特性”。多个特性间用“;”隔开，最后用“\{ \}”括起来。

设置网页中所有<p>和</p>标签范围内的文字的字体大小为20px，字体颜色为红色，并加粗的CSS代码：

p\{

font-size:20px;

color:red;

font-weight:bold;

**如何观看其效果？**可将其嵌入下面的代码中：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>CSS_Test1</title>
    <style>
    body{
            background-color:#d0e4fe;
    }
    h1{
            color:orange;
            text-align:center;
    }
    /* [CSS注释] 设置段落字体大小为20px，字体颜色为红色，并加粗 */
    p{  
            font-size:20px;
            color:red;
            font-weight:bold;
    }
    </style>
    </head>
    
    <body>
    
    <h1>CSS 使用示例</h1>
    <p>这是一个段落，字体大小为20px，字体颜色为红色，并加粗，看到效果了吗。</p>
    
    </body>
    </html>

说明，在这个例子中有三个选择器：body、h1和p。

保存文件名：HTML之CSS\_Test1.html，保存路径D:\\HTML5\_CSS示例，用浏览器打开**运行显示效果如下图**：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70][]

**CSS注释**

CSS注释语法为：

/\* 注释内容 \*/

说明：以“斜杠+星号”开始，“星号+斜杠”结束，需要注意是注释字符均为英文半角小写。CSS中的注释通常用于解释样式规则声明的用途。它将帮助您和其他人理解您在编辑样式表时如何处理样式规则。浏览器不显示注释。

**在HTML中CSS引入方式**

有4种：行内样式、内嵌样式、链接样式和导入样式。

1）行内样式

行内样式是最简单、最直接的一种CSS引入方式，它通过设置HTML标签的style属性来实现样式的应用，具体的写法如下：

<p style = "color:\#F00;font-size:20px;">段落中的文字</p>

从上面的示例代码中可以看出，添加行内样式的做法是在HTML标签中添加style=""，引号中放入想设置的样式代码。但这样的做法有很多缺点，如违背网页设计结构与表现分离的原则、网页文件太大、不利于搜索引擎抓取网页内容、网页后期维护不方便等。因此，在设计网页时不推荐使用行内样式。

完整代码如下：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>CSS_TestA</title>
    </head>
    <body>
    <h1>CSS 使用示例：行内样式</h1>
    <p style = "color:#F00;font-size:20px;">段落中的文字</p>
    </body>
    </html>

保存文件名：HTML之CSS\_TestA.html，保存路径D:\\HTML5\_CSS示例**（提示新手**，保存文件名、路径，可根据你的情况而定**）**，用浏览器打开运行显示效果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 1][]

2）内嵌样式

内嵌样式的做法是将CSS代码写在网页代码中，并且用<style>和</style>进行声明，具体写法如下：

p\{

color:\#F00;

font-size:20px;

a\{text-decoration:line-through;\}

</style>

使用内嵌样式的缺点也很明显，CSS代码写在网页中会使网页文件变大，后期维护也不方便。

具体示例可参见最前面的例子。

3）链接样式

链接样式将CSS代码写在单独的文件中，然后在<head>与</head>之间通过<link>标签引入该文件，从而实现样式的应用。具体写法如下：

</head>

CSS样式的引入是通过<link>标签实现的。该标签的属性href用于指明欲引入的CSS文件的路径；属性type规定被链接文档的MIME类型，这里指明是CSS代码；属性rel规定当前文档与被链接文档之间的关系，目前只有“stylesheet”值得到了所有浏览器的支持，指明被链接的文档是一个样式表。

链接样式实现了负责页面框架的HTML代码与负责页面表现的CSS代码的分离，使网页的前期制作和后期维护变得十分方便，所以建议读者多采用链接样式。

要点：a. 定义css资源文件。 b. 在head标签内，定义link标签，引入外部的资源文件。

完整代码如下：

(1）CSS文件代码如下：

/\* 将段落显示为黄底红字粗体 \*/

p\{

color:red; background:yellow; font-weight:bold;

提示，此例中CSS文件，内容简单，但足够示意了，现实中可以比较复杂。

保存文件名：ABC.css，保存路径D:\\HTML5\_CSS示例。

（2）网页文件代码如下：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>CSS_TestB</title>
    <head> <link href = "ABC.css" rel = "stylesheet" type = "text/css">
    </head>
    <body>
    <h1>CSS 使用示例：链接样式</h1>
    <p> 这个段落将被显示为黄底红字粗体。</p>
    </body>
    </html>

保存文件名：HTML之CSS\_TestB.html，保存路径D:\\HTML5\_CSS示例，**注意**HTML之CSS\_TestB.html和ABC.css路径关系，用浏览器打开运行显示效果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 2][]

4）导入样式

导入样式采用@import将CSS样式文件导入网页文件中，在HTML初始化时，被导入的样式文件中的CSS代码会成为文件的一部分，类似第二种内嵌样式。导入样式的具体写法如下：

<head>

@import url("css/test03.css");

</style>

</head>

样式的导入是通过关键字@import实现的，url()指明样式文件的相对地址。

由于导入样式的原理是将CSS样式文件的内容导入网页中，导入样式与内嵌样式一样会使网页文件变大，后期维护也不方便，因此不建议使用导入样式。

完整代码如下：

(1)CSS文件ABC.css，内容将上例

(2) ）网页文件代码如下：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>CSS_TestC</title>
    <style type = "text/css"> 
            @import url("ABC.css"); 
    </style>
    </head>
    <body>
    <h1>CSS 使用示例：导入样式</h1>
    <p> 这个段落将被显示为黄底红字粗体。</p>
    </body>
    </html>

保存文件名：HTML之CSS\_TestC.html，保存路径D:\\HTML5\_CSS示例，用浏览器打开运行显示效果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 3][]

**选择器**

要使用CSS对HTML页面中的元素实现一对一、一对多或者多对一的控制，就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。通过CSS选择器可以精确地筛选出想要控制的HTML元素。

每一条CSS样式定义由两部分组成，形式如下：

选择器\{

样式;

选择器指明了\{\}中的“样式”的作用对象，也就是作用于网页中的哪些元素。

常用的CSS选择器有标签选择器、类选择器、ID选择器、后代选择器和子选择器、分组选择器、伪类选择器、通用选择器等。

要针对没有标签定义范围进行样式设置时，可利用HTML的<div>与<span>标签。<div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器，当与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。<span> 元素是内联元素，可用作文本的容器，当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

**常用的CSS选择器的使用**

标签选择器

标签选择器其实就是HTML代码中的标签。一个完整的HTML页面由很多不同的标签组成，而标签选择器则决定哪些标签采用相应的CSS样式。如前面的例子中<p>标签。下例给网页中所有图片加红色边框：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>CSS_Test2</title>
    <style>
    img{
           border-width:3px; 
           border-style:solid; 
           border-color:#F00;
    }
    </style>
    </head>
    <body>
    <h2>网页中所有图片加红色边框</h2>
    <table>
        <tr>
            <td>
                <a><img src="imgs/tu1.jpg" width="210" height="160" ></a>
            </td>
            <td>
                <a><img src="imgs/tu2.jpg" width="210" height="160" ></a>
            </td>
        </tr>
    </table>
    </body>
    </html>

保存文件名：HTML之CSS\_Test2.html，保存路径D:\\HTML5\_CSS示例（路径根据你的实际而定），且此路径中建立imgs文件夹，其中有两张图片tu1.jpg和tu2.jpg

用浏览器打开运行显示效果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 4][]

☆类选择器（class selector）

类选择器以一种独立于文档元素的方式来指定样式。

该选择器可以单独使用，也可以与其他元素结合使用。

类选择器的命名**以“.”开头**，可以包含字符\[a-zA-Z0-9\]、连字号（-）和下画线（\_），不能以数字或一个连字号后跟数字开头。如：.important \{color:red;\}

类选择器可以结合元素选择器来使用——选择器后跟类选择器。如：p.important \{color:red;\}

下面给出示例代码：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>CSS_Test3</title>
    <style> 
    .user
    {    font-size: 30px;
        background-color:red;
    }
    .login
    {    font-size: 20px;
        background-color:blue;
    }
    </style>
    </head>
    <body>
        <div class='user'>你好。这是一个 DIV 元素。</div>
        <p class="login">这是一个p元素。</p>
        <p>这是一个p元素。</p>
    </body>
    </body>
    </html>

保存文件名：HTML之CSS\_Test3.html，保存路径D:\\HTML5\_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

用浏览器打开运行显示效果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 5][]

☆ID选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 **"\#" 开头**来定义。如：\#red \{color:red;\}

下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>CSS_Test4</title>
    <style> 
     #red {color:red;}
     #green {color:green;}
    </style>
    </head>
    <body>
       <p id="red">这个段落是红色。</p>
        <p id="green">这个段落是绿色。</p>
    </body>
    </body>
    </html>

保存文件名：HTML之CSS\_Test4.html，保存路径D:\\HTML5\_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 6][]

☆组合选择器

CSS里现在共有4种组合选择符（Combinators）：

<table> 
 <tbody> 
  <tr> 
   <td style="border-color:#a2a9b1;"> <p style="margin-left:0cm;"><strong>符号</strong></p> </td> 
   <td style="border-color:#a2a9b1;"> <p style="margin-left:0cm;"><strong><span style="color:#000000;">说明</span></strong></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#a2a9b1;"> <p style="margin-left:0cm;"><span style="color:#000000;">A &gt; B</span></p> </td> 
   <td> <p style="margin-left:0cm;"><span style="color:#000000;">子代选择器，选择A下一层的元素B</span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#a2a9b1;"> <p style="margin-left:0cm;"><span style="color:#000000;">A ~ B</span></p> </td> 
   <td> <p style="margin-left:0cm;"><span style="color:#000000;">兄弟选择器，选择与A同层的元素B</span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#a2a9b1;"> <p style="margin-left:0cm;"><span style="color:#000000;">A + B</span></p> </td> 
   <td> <p style="margin-left:0cm;"><span style="color:#000000;">相邻兄弟选择器，选择与A相邻的元素B（不能被任何元素相隔）</span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#a2a9b1;"> <p style="margin-left:0cm;"><span style="color:#000000;">A B</span></p> </td> 
   <td> <p style="margin-left:0cm;"><span style="color:#000000;">后代选择器，包含选择符</span></p> </td> 
  </tr> 
 </tbody> 
</table>

后代选择器和子选择器  
当HTML元素发生嵌套时，内层的元素就成为外层元素的后代。如元素B嵌套在元素A内部，B就是A的后代。定义后代选择器时，外层的元素写在前面，内层的元素写在后面，中间用空格分隔。后代选择器会影响到它的各级后代，没有层级限制。代码示例如下：  
div p\{color: red;\}  
后代选择器用空格作为连接符号。

子选择器是一种特殊的后代选择器，用来选择特定元素的直接子元素，只会影响它的第一层子元素，其他孙辈元素或更深层次的元素不会受影响。定义子选择器时，外层的元素写在前面，子元素写在后面，中间用大于号相连。代码示例如下：  
div>p\{color:red;\}  
子元素选择器用>作为连接符号。  
上述CSS代码只会使div下的第一层p元素中的文本变为红色，也就是只会选中特定的儿子标签。  
子元素选择器不仅可以使用标签的名称，而且可以使用其他的选择器，如：  
div>\#red  
div>.left。

下面通过示例来讲解子选择器与后代选择器的区别

先来看一下后代选择器div p的效果，源码如下：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>CSS_Test5</title>
    <style> 
    div p{
        background-color:yellow;
    }
    </style>
    </head>
    <body>
    <div>
        <p>子元素选择器</p>
        <span><p>后代选择器</p></span>
    </div>
    </body>
    </body>
    </html>

保存文件名：HTML之CSS\_Test5.html，保存路径D:\\HTML5\_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 7][]

再来看一下子选择器div p的效果，源码如下：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>CSS_Test6</title>
    <style> 
    div>p{
        background-color:yellow;
    }
    </style>
    </head>
    <body>
    <div>
        <p>子元素选择器</p>
        <span><p>后代选择器</p></span>
    </div>
    </body>
    </body>
    </html>

保存文件名：HTML之CSS\_Test6.html，保存路径D:\\HTML5\_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 8][]

☆分组选择器  
当多个对象定义了相同的样式时，就可以把它们分成一组，这样能够简化代码。分组选择器使用逗号把同组内的不同对象分隔，示例代码如下：  
h1,h2,h3,p\{  
    line-height:22px;  
\}  
上述分组选择器的目的是，定义所有级别的标题和段落的行高为22px。其中，line-height用于定义一行文字的高度。

完整的示例源码如下：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>CSS_Test7</title>
    <style> 
    h1,h2,h3,p{
            line-height:22px;
    }
    </style>
    </head>
    <body>
    <h1>这是h1级别标题</h1>
    <h2>这是h2级别标题</h2>
    <h3>这是h3级别标题</h3>
    <p>这是个段落</p>
    </body>
    </body>
    </html>

保存文件名：HTML之CSS\_Test7.html，保存路径D:\\HTML5\_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 9][]

☆通用选择器

通用选择器的作用就像通配符，它能匹配所有可用元素，一般用来对页面上的所有元素应用样式。所有浏览器都支持通用选择器。通用选择器由一个星号（\*）表示，示例代码如下：

\*\{

margin: 0;

padding: 0;

上述代码表示的是，将所有元素的margin（边距）和padding（填充）都设置为0。这个操作常常用来去除一些HTML标签的自带格式。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 10][]

通用选择器是用来选择所有元素的，当然也可以选择某个元素下的所有元素，示例代码如下：

.demo \*\{border:1px solid blue;\}

完整的示例源码如下：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>CSS_Test8</title>
    <style> 
    * {
            margin: 100;
            padding: 0;
            color:red;
        }
    </style>
    </head>
    <body>
            <h2>这是h2级别标题</h2>
            <h3>这是h3级别标题</h3>
            <p>这是段落1</p>
            <p>这是段落2</p>
    </body>
    </body>
    </html>

保存文件名：HTML之CSS\_Test8.html，保存路径D:\\HTML5\_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 11][]

注意：不建议\*在生产环境中使用通用选择器，因为此选择器会匹配页面上的每个元素，这会对浏览器造成不必要的压力——会极大的消耗资源，应该把具体的标签名都列出来，像这样body,div,ul,li,a,\{padding:0; margin:0;\}。

☆伪类选择器（Pseudo-classes）

伪类选择器可以让同一个HTML标签在不同状态下会显示出不同的样式，伪类用冒号来表示，代码示例如下：

a:hover\{color:\#F00; text-decoration:none;\}

上述代码实现了当鼠标悬停在链接文字上时，链接文字显示为红色、无下画线。

伪类选择器大多时候用在超链接文字的效果设定上，超链接有4种状态，对应<a>标签的4种伪类，如下表所示：

<table style="width:396.55pt;"> 
 <tbody> 
  <tr> 
   <td style="border-color:#dddddd;width:91.75pt;"> <p style="margin-left:0cm;"><strong>伪类选择器</strong></p> </td> 
   <td style="border-color:#dddddd;width:184.3pt;"> <p style="margin-left:0cm;"><strong><span style="color:#000000;">作用</span></strong></p> </td> 
   <td style="border-color:#dddddd;width:120.5pt;"> <p style="margin-left:0cm;"><strong><span style="color:#000000;">应用对象</span></strong></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#dddddd;width:91.75pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">:hover</span></p> </td> 
   <td style="width:184.3pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">定义标记在鼠标悬停(划过)时的样式</span></p> </td> 
   <td style="width:120.5pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">所有显示标记</span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#dddddd;width:91.75pt;"> <p style="margin-left:0cm;">:link</p> </td> 
   <td style="width:184.3pt;"> <p style="margin-left:0cm;">定义标记在超链接状态下的样式</p> </td> 
   <td style="width:120.5pt;"> <p style="margin-left:0cm;">a标签</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#dddddd;width:91.75pt;"> <p style="margin-left:0cm;">:visited</p> </td> 
   <td style="width:184.3pt;"> <p style="margin-left:0cm;">定义标记被访问过后的样式</p> </td> 
   <td style="width:120.5pt;"> <p style="margin-left:0cm;">a标签</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#dddddd;width:91.75pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">:active</span></p> </td> 
   <td style="width:184.3pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">定义标记在选定时刻下的样式</span></p> </td> 
   <td style="width:120.5pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">a</span><span style="color:#000000;">标签</span></p> </td> 
  </tr> 
 </tbody> 
</table>

注意：①在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

②在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

③伪类的名称不区分大小写。

下面给出例子

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title> CSS_Test9</title> 
    <style>
            a:link {color:#000000;}      /* 未访问链接*/
            a:visited {color:#00FF00;}  /* 已访问链接 */
            a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
            a:active {color:#0000FF;}  /* 鼠标点击时 */
    </style>
    </head>
    <body>
        <p><b><a href=" https://www.baidu.com/" target="_blank">这是一个链接</a></b></p>
        <p><b>提示：</b>鼠标指向上面链接时将变色。</p>
    </body>
    </html>

保存文件名：HTML之CSS\_Test9.html，保存路径D:\\HTML5\_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 12][]

除了<a>标签的4种伪类，还有UI元素的“:enabled”“:disabled”“:checked”状态伪类，这些主要针对HTML中的Form元素操作。除此之外，还有CSS3中的:nth选择器，可以更精确地选择某个元素并指定样式。:nth选择器的常见伪类如下表所示：

<table style="width:410.6pt;"> 
 <tbody> 
  <tr> 
   <td style="width:134pt;"> <p style="margin-left:0cm;"><strong>伪类</strong></p> </td> 
   <td style="width:276.6pt;"> <p style="margin-left:0cm;"><strong><span style="color:#000000;">状态</span></strong></p> </td> 
  </tr> 
  <tr> 
   <td style="width:134pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">:first-child</span></p> </td> 
   <td style="width:276.6pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">选择某个元素的第一个子元素</span></p> </td> 
  </tr> 
  <tr> 
   <td style="width:134pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">:last-child</span></p> </td> 
   <td style="width:276.6pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">选择某个元素的最后一个子元素</span></p> </td> 
  </tr> 
  <tr> 
   <td style="width:134pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">:nth-child()</span></p> </td> 
   <td style="width:276.6pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">选择某个元素的一个或多个特定的子元素</span></p> </td> 
  </tr> 
  <tr> 
   <td style="width:134pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">:nth-last-child()</span></p> </td> 
   <td style="width:276.6pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">选择某个元素的一个或多个特定的子元素，</span></p> <p style="margin-left:0cm;"><span style="color:#000000;">从这个元素的最后一个子元素开始算</span></p> </td> 
  </tr> 
 </tbody> 
</table>

下面给出例子

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title> CSS_Test10</title> 
    <style>
    p:first-child
    {
            color:blue;
    } 
    </style>
    </head>
    <body>
        <p>这是段落1。</p>
        <p>这是段落2。</p>
    </body>
    </html>

保存文件名：HTML之CSS\_Test10.html，保存路径D:\\HTML5\_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 13][]

下面给出一个较为综合的例子

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title> CSS_Test11</title> 
    <style>
            a:link {color:#000000;}      /* 未访问链接*/
            a:visited {color:#00FF00;}  /* 已访问链接 */
            a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
            a:active {color:#0000FF;}  /* 鼠标点击时 */
            ul{ list-style-type:none; }
            ul li{ background-color:#EEE; padding:5px; width:150px;}
            ul li:hover{ background-color:#CCC;}
    </style>
    </head>
    <body>
    <p><b><a href=" https://www.baidu.com/" target="_blank">这是一个链接</a></b></p>
    <ul>
            <li>列表文字1</li>
            <li>列表文字2</li>
            <li>列表文字3</li>
            <li>列表文字4</li>
            <li>列表文字5</li>
    </ul>
    </body>
    </html>

保存文件名：HTML之CSS\_Test11.html，保存路径D:\\HTML5\_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 14][]

☆属性选择器

对带有指定属性的 HTML 元素设置样式。属性选择器可以根据元素的属性及属性值来选择元素。

把包含标题（title）属性的元素变为红色代码

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title> CSS_Test12</title> 
    <style>
        [title]
        {
            color:red;
        }
    </style>
    </head>
    <body>
        <p title>这是段落A</p>
        <p>这是段落B</p>
    </body>
    </html>

保存文件名：HTML之CSS\_Test12.html，保存路径D:\\HTML5\_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 15][]

属性选择器允许用户自定义属性名称，属性选择器共有7种。

<table> 
 <tbody> 
  <tr> 
   <td style="border-color:#a2a9b1;"> <p style="margin-left:0cm;"><strong>代码</strong></p> </td> 
   <td style="border-color:#a2a9b1;"> <p style="margin-left:0cm;"><strong><span style="color:#000000;">说明</span></strong></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#a2a9b1;"> <p style="margin-left:0cm;"><span style="color:#000000;">[attribute]</span></p> </td> 
   <td> <p style="margin-left:0cm;"><span style="color:#000000;">元素有attribute的属性。</span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#a2a9b1;"> <p style="margin-left:0cm;"><span style="color:#000000;">[attribute="value"]</span></p> </td> 
   <td> <p style="margin-left:0cm;"><span style="color:#000000;">属性attribute里是value</span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#a2a9b1;"> <p style="margin-left:0cm;"><span style="color:#000000;">[attribute~="value"]</span></p> </td> 
   <td> <p style="margin-left:0cm;"><span style="color:#000000;">属性attribute里使用空白分开的字符串里其中一个是value</span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#a2a9b1;"> <p style="margin-left:0cm;"><span style="color:#000000;">[attribute|="value"]</span></p> </td> 
   <td> <p style="margin-left:0cm;"><span style="color:#000000;">属性attribute里是value或者以value-开头的字符串</span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#a2a9b1;"> <p style="margin-left:0cm;"><span style="color:#000000;">[attribute^="value"]</span></p> </td> 
   <td> <p style="margin-left:0cm;"><span style="color:#000000;">属性attribute里最前的是value</span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#a2a9b1;"> <p style="margin-left:0cm;"><span style="color:#000000;">[attribute$="value"]</span></p> </td> 
   <td> <p style="margin-left:0cm;"><span style="color:#000000;">属性attribute里最后的是value</span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#a2a9b1;"> <p style="margin-left:0cm;"><span style="color:#000000;">[attribute*="value"]</span></p> </td> 
   <td> <p style="margin-left:0cm;"><span style="color:#000000;">属性attribute里有value出现过至少一次</span></p> </td> 
  </tr> 
 </tbody> 
</table>

盒子模型（Box Modle）可以用来对元素进行布局，包括内边距(padding)、边框(border)、外边距(margin)，和实际内容(content)这几个部分。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。掌握盒子模型，将使CSS网页排版变得简单。

W3C盒子模型(标准盒模型)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 16][]

说明：

1.标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。

width和height用于设定盒子模型中内容（content）的宽度和高度，常用单位是像素（px）和百分比（%）。

px用于指定具体的宽和高

%则用于设定该元素宽度在父容器中所占的比例。

在没有指定width和height的情况下，元素默认占据父容器的所有宽度，高度则由元素中的内容决定。

2.标准盒模型下盒子的大小 = content + border + padding + margin

margin是指其他元素与本元素的边框之间的距离，分为上边距、右边距、下边距和左边距。在设置外边距时可以设置各属性，分别设置上、右、下、左4个方向的外边距，示例代码如下：

div\{margin-top:5px; margin-right:15px; margin-bottom:8px; margin-left: 10px;\}

在设置外边距时也可以直接写综合属性，给margin设置多个值。若写了4个值，则意思是按顺时针方向设置外边距，即分别设置上、右、下、左外边距的值；若只写3个值，则设置顺序为上、左右、下外边距；若只写了两个值，则设置顺序为上下、左右外边距。示例代码如下：

div\{margin:5px 15px 8px 10px;\}         /\* 上、右、下、左 \*/

div\{margin:5px 15px 8px;\}          /\* 上、左右、下 \*/

div\{margin:5px 15px;\}         /\* 上下、左右 \*/

padding是本元素内容与本元素边框之间的距离，分为上内边距、右内边距、下内边距和左内边距。与margin一样，在设置内边距时可以设置各属性，也可以直接写综合属性，示例代码如下：

div\{padding-top:5px; padding-right:15px; padding-bottom:8px; padding- left:10px;\}

div\{padding:5px 15px 8px 10px;\} /\* 上、右、下、左 \*/

div\{padding:5px 15px 8px;\}        /\* 上、左右、下 \*/

div\{padding:5px 15px;\}       /\* 上下、左右 \*/

border是围绕元素内容和内边距的一条或多条线。CSS允许规定元素边框的样式、宽度和颜色。

CSS控制的边框属性包括：

（1）border-width：设置边框宽度，常用值为1px、2px等。

（2）border-style：设置边框样式，常用值有solid（实线）、dashed（虚线）、dotted（点线）、double（双线）、groove（3D凹槽边框）、ridge（3D垄状边框）、inset（3D inset边框）、outset（3D outset边框）、none（无边框）等。

（3）border-color：设置边框颜色，常用值有red、green、blue等，也可以用\#000000、\#F00或rgb(100,100,100)设置。

在常见的用法中，习惯将边框的3个属性一起声明，下面的示例代码就是将div的4个边框设置为2px的红色实线，具体如下：

div\{border:2px solid \#F00;\}

也可以分别设置4个边框，示例代码如下：

div\{

border-left:2px solid \#F00;               /\* 左边框：2像素，实线，红色 \*/

border-top:2px dashed \#0000FF;             /\* 上边框：2像素，虚线，蓝色 \*/

border-right:4px dotted \#00FF00;            /\* 右边框：4像素，点线，绿色 \*/

border-bottom:2px double \#000000;       /\* 下边框：2像素，双线，红色 \*/

当然，必要的时候还是可以单独设置某个边框的属性。下面的代码是将div的所有边框设置成2px的灰色双线，将p的底边框设置成3px的红色点线，代码如下：

div\{

border-width:2px;

border-style:double;

border-color:\#999;\}

p\{

border-bottom-width:3px;

border-bottom-color:\#F00;

border-bottom:dashed;\}

因默认的呈现方式不同，HTML的标签元素可以分为三类：

块级元素（block）

内联元素（inline）

内联块级元素（inline-block）。

这种分类是针对元素所占的空间来划分的：

块级元素可以用CSS代码设定宽和高，块级元素默认独占一行；

宽和高的设定却对内联元素无效，与内容有关；

内联元素却可以和其他元素同处一行。

1.块级元素

在HTML标签元素中，<div>、<p>、<h1>…<h6>、<form>、<ul>、<li>、<ol>、<dl>、<table>、<address>、<blockquote>都是块级元素，它们具有如下特点：

（1）每个块级元素都独占一行，其后的元素也另起一行；

（2）元素的高度、宽度、行高及边距都可以设置；

（3）在宽度未设置的情况下，元素宽度是它父容器的100%，即和父元素的宽度一致。在设置宽度后，元素才具有指定的宽度。

块级元素支持内边距padding、外边距margin、宽度width、高度height、浮动float、溢出overflow等属性，默认情况下的样式是：\{width:100%; height:auto; overflow:hidden;\}

2.内联元素

在HTML标签元素中，<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<cite>、<code>、<var>是典型的内联元素。内联元素的特点如下：

（1）可以和其他元素在同一行上显示；

（2）元素的高度、宽度、行高、顶部边距和底部边距不可设置；

（3）元素的宽度就是它包含的文字或图片的宽度，不可改变。

内联元素支持内边距padding、左外边距margin-left、右外边距margin-right等属性，可以通过代码display:block转换为块级元素，当然块级元素也可以通过代码display:inline转换为内联元素。

3.内联块级元素

内联块级元素同时具备内联元素、块级元素的特点，<img>、<input>就是典型的内联块级元素，它们具有如下特点：

（1）可以和其他元素在同一行上；

（2）元素的高度、宽度、行高、顶部边距和底部边距都可设置。

内联块级元素也支持padding、margin、width、height、float、overflow等属性。

下例子中对div标签设置了边距等信息，代码如下：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title> CSS_Test20</title> 
    <style>
        div{
    	width: 100px;
    	height: 100px;
    	border: 1px solid red;
    	padding: 20px;
    	margin: 30px;
        }
    </style>
    </head>
    <body>
        <div>这是DIV block A</div>
        <div>这是DIV block B</div>
    </body>
    </html>

保存文件名：HTML之CSS\_Test20.html，保存路径D:\\HTML5\_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 17][]

按F12键，显示效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 18][]

padding的区域有背景颜色，可以设置背景颜色background-color将填充所有border以内的区域，参见下面代码：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title> CSS_Test21</title> 
    <style>
        ul{
    	width: 100px;
    	height: 100px;
    	border: 1px solid red;
    	padding: 20px;
    	margin: 30px;
                     background-color:pink;
        }
    </style>
    </head>
    <body>
    <ul>
            <li>列表文字1</li>
            <li>列表文字2</li>
            <li>列表文字3</li>
            <li>列表文字4</li>
            <li>列表文字5</li>
    </ul>
    </body>
    </html>

保存文件名：HTML之CSS\_Test21.html，保存路径D:\\HTML5\_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 19][]

padding有四个方向

padding是4个方向的，所以我们能够分别描述4个方向的padding。

方法有两种，第一种写小属性；第二种写综合属性，用空格隔开。

☆小属性的写法：

padding-top: 30px;

padding-right: 20px;

padding-bottom: 40px;

padding-left: 100px;

☆综合属性的写法：(上、右、下、左)（顺时针方向，用空格隔开。margin的道理也是一样的）

padding:30px 20px 40px 100px;

如果写了四个值，则顺序为：上 右 下 左。

如果只写了三个值，则顺序为：上 右 下。左和右一样。

如果只写了两个值，则顺序为：上 右。左和右一样，上和下一样。

border就是边框。边框有三个要素：像素（粗细border-width）、线型（order-style）、颜色（border-color）。换句话说，一个border属性，是由三个小属性像素（粗细）、线型、颜色综合而成的。

下面给出一个示例代码：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title> CSS_Test21</title> 
    <style>
        div{
                width:200px;
                height:200px;
                border-width:10px 20px;  
                border-style:solid dashed dotted;   
                border-color:red; green blue yellow;   
        }
    </style>
    </head>
    <body>
        <div>
        </div>
    </body>
    </html>

保存文件名：HTML之CSS\_Test22.html，保存路径D:\\HTML5\_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 20][]

**CSS布局模型**

CSS布局模型建立在盒子模型的基础上，包含3种基本的布局模型，即流动模型（Flow）、浮动模型（Float）、层模型（Layer）。

1、流动模型（Flow）

流动（Flow）模型是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

流动布局模型具有2个比较典型的特征：

第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。（每一个便签都显示着自己本来默认的那个宽高）

第二点，在流动模型下，行内元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）

在流动模型下，在默认状态下，块状元素的宽度都为100%，示例代码如下

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title> CSS_Test30</title> 
    <style>
    #box1{
        width:300px;
        height:100px;
    }
    div,p{
        border:1px solid red;
    }
    </style>
    </head>
    <body>
          <h3>A </h3>
          <div>由于没有设置宽度，宽度默认显示为100%</div>
          <h3> B</h3>
          <div id="box1">设置了width:300px，height:200px;</div>
          <h3>C</h3>
          <p>雪梅·其二  卢梅坡〔宋代〕有梅无雪不精神，有雪无诗俗了人。日暮诗成天又雪，与梅并作十分春。</p>
    </body>
    </html>

保存文件名：HTML之CSS\_Test30.html，保存路径D:\\HTML5\_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 21][]

在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示，下面示例页面代码中内联元素标签a、span、em、strong都是内联元素：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title> CSS_Test31</title> 
    <style>
    </style>
    </head>
    <body>
        <a href="https://www.baidu.com/">百度一下</a>
        <span>强调</span> <em>重点</em>
        <strong>强调</strong>
    </body>
    </html>

保存文件名：HTML之CSS\_Test31.html，保存路径D:\\HTML5\_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 22][]

2、浮动模型 (Float)

因为块级元素独占一行的特性，在默认情况下是无法将两个块级元素并排显示的，但可以用CSS设置元素的float属性，让元素浮动起来，这样就可以达到并排显示的目的。设置向左浮动的示例代码如下：

div\{float:left;\}

属性float的值有left、right、none和inherit，分别表示向左浮动、向右浮动、不浮动和从父元素继承float属性的值。

需要注意的是，设置浮动的同时一定要先设置块级元素的宽度，而且几个浮动元素的宽度之和必须小于父容器的宽度，否则就会造成部分元素被挤到下一行显示。

任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。也可以为不同的div设置不同的浮动方式来布局。

如下代码可以实现两个 div 元素一行显示：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title> CSS_Test32</title> 
    <style>
    div{
        width:200px;
        height:200px;
        border:2px red solid; float:left;
    }
    </style>
    </head>
    <body>
         <div id="div1">这是第一块</div>
         <div id="div2">这是第二块</div>
    </body>
    </html>

保存文件名：HTML之CSS\_Test32.html，保存路径D:\\HTML5\_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 23][]

你也可以同时设置两个元素右浮动一行显示：

div\{

width:200px;

height:200px;

border:2px red solid;

float:right;

完整代码如下：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title> CSS_Test33</title> 
    <style>
    div{
        width:200px;
        height:200px;
        border:2px red solid;    
        float:right;
    }
    </style>
    </head>
    <body>
         <div id="div1">这是第一块</div>
         <div id="div2">这是第二块</div>
    </body>
    </html>

保存文件名：HTML之CSS\_Test33.html，保存路径D:\\HTML5\_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

用浏览器打开运行显示效果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 24][]

也可以设置两个元素一左一右一行显示：

div\{

width:200px;

height:200px;

border:2px red solid;

\#div1\{float:left;\}

\#div2\{float:right;\}

完整代码如下：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title> CSS_Test34</title> 
    <style>
    div{
        width:200px;
        height:200px;
        border:2px red solid;
    }
    #div1{float:left;}
    #div2{float:right;}
    </style>
    </head>
    <body>
         <div id="div1">这是第一块</div>
         <div id="div2">这是第二块</div>
    </body>
    </html>

保存文件名：HTML之CSS\_Test34.html，保存路径D:\\HTML5\_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 25][]

3、层（Layer）模型

CSS（Cascading Style Sheets、层叠样式表）用来设定你网页上的元素是如何展示的。Cascading Style Sheets Positioning（CSS-P）是CSS的一个扩展，它可用来控制任何东西在网页上或是说在窗口中的位置。position（位置、放置方式）决定DIV tag（标签）是如何放置的。

div 标签（<div>…</div>） 标签定义 HTML 文档中的分隔（division）或部分（section）。此标签常用于组合块级（block-level）元素，以便通过样式表来对这些元素进行格式化——通过CSS样式为其赋予不同的表现效果（外观）。

层布局模型能实现在网页中对HTML元素进行精确定位，CSS定义了一组定位属性（position）来支持层布局模型。在网页设计领域，一般只在网页的局部使用层布局，如浮动广告、下拉菜单、图片轮换效果等。

可以通过设置属性position来使用层布局，该属性的值有static、relative、absolute、fixed和inherit。

static表示无特殊定位，元素遵循正常文档流；

inherit表示从父元素继承属性值。

下面重点介绍相对定位（relative）、绝对定位（absolute）、固定定位（fixed）三种定位方式。

绝对定位

如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。

如果不存在这样的包含块（就是它前面的div并没有设置定位的属性），则相对于body元素，即**相对于浏览器窗口**。

被设置了绝对定位的元素，在文档流中是不占据空间的，如果某元素设置了绝对定位，那么它在文档流中的位置会被删除；

我们可以通过 z-index 来设置它们的堆叠顺序 。

绝对定位使元素脱离文档流，因此不占据空间 ，普通文档流中元素的布局就当绝对定位的元素不存在时一样，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素。

浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧，文字内容会围绕在浮动元素周围。它只是改变了文档流的显示，而没有脱离文档流，理解了这一点，就很容易弄明白什么时候用定位，什么时候用浮动了。

下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。

div\{

width:200px;

height:200px;

border:2px red solid;

position:absolute;

left:100px;

top:50px;

完整代码如下：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title> CSS_Test35</title> 
    <style>
    div{
        width:200px;
        height:200px;
        border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
    }
    </style>
    </head>
    <body>
    <div>这是绝对定位测试</div>
         <p>……………………………………………………………………………………………………………………………………………………………………………………。</p>
         <p>……………………………………………………………………………………………………………………………………………………………………………………。</p>
         <p>……………………………………………………………………………………………………………………………………………………………………………………。</p> 
    </body>
    </html>

</html>保存文件名：HTML之CSS\_Test35.html，保存路径D:\\HTML5\_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 26][]

如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

**相对于以前的位置**移动，偏移前的位置保留不动。在使用相对定位时，就算元素被偏移了，但是他仍然占据着它没偏移前的空间。

如下代码实现相对于以前位置向下移动50px，向右移动100px;

div\{

width:200px;

height:200px;

border:2px red solid;

position:relative;

left:100px;

top:50px;

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 27][]

完整代码如下：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title> CSS_Test35</title> 
    <style>
    div{
        width:200px;
        height:200px;
        border:2px red solid;
        position:relative;
        left:100px;
        top:50px;
    }
    </style>
    </head>
    <body>
    <div>这是相对定位测试</div>
         <p>……………………………………………………………………………………………………………………………………………………………………………………。</p>
         <p>……………………………………………………………………………………………………………………………………………………………………………………。</p>
         <p>……………………………………………………………………………………………………………………………………………………………………………………。</p>
    </body>
    </html>

保存文件名：HTML之CSS\_Test36.html，保存路径D:\\HTML5\_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 28][]

固定定位

fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是**视图**（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化。除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这点与background-attachment:fixed;属性功能相同。

以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。

div\{

width:200px;

height:200px;

border:2px red solid;

position:fixed;

left:100px;

top:50px;

完整代码如下：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title> CSS_Test37</title> 
    <style>
    div{
        width:200px;
        height:200px;
        border:2px red solid;
        position:fixed;
        left:100px;
        top:50px;
    }
    </style>
    </head>
    <body>
    <div>这是固定定位测试</div>
         <p>……………………………………………………………………………………………………………………………………………………………………………………。</p>
         <p>……………………………………………………………………………………………………………………………………………………………………………………。</p>
         <p>……………………………………………………………………………………………………………………………………………………………………………………。</p>
    </body>
    </html>

保存文件名：HTML之CSS\_Test37.html，保存路径D:\\HTML5\_CSS示例（路径根据你的实际而定），用浏览器打开运行显示效果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 29][]

当拖动滚动条时位置固定不变。

使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，可不可以相对于其它元素进行定位呢？当然可以。使用position:relative来帮忙，但是必须遵守下面规范：

1、参照定位的元素必须是相对定位元素的前辈元素：

<div id="box2">相对参照元素进行定位</div>

</div>

从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。

2、参照定位的元素必须加入position:relative;

\#box1\{

width:200px;

height:200px;

position:relative;

3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

\#box2\{

position:absolute;

top:20px;

left:30px;

这样box2就可以相对于父元素box1定位了。

进一步学习资料：CSS 教程 - w3school 在线教程 [https://www.w3school.com.cn/css/index.asp][https_www.w3school.com.cn_css_index.asp]

**附录**

[https://developer.mozilla.org/zh-CN/docs/Web/CSS][https_developer.mozilla.org_zh-CN_docs_Web_CSS]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70]: /images/20221119/43295e5710cd45048ba359fbbcf6d6a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 1]: /images/20221119/74e858028f41439a8d8fd14c9fb832e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 2]: /images/20221119/64b6664189ff4449a7c7615a469068e3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210123082805381.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210123101521122.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210123113441401.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20210123113546205.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20210124101435339.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20210124101555784.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20210124101631985.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20210125092934561.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20210125091609196.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20210125091708281.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20210125091805676.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/20210125091857986.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 15]: https://img-blog.csdnimg.cn/20210125102550613.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 16]: https://img-blog.csdnimg.cn/20210125110737666.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 17]: https://img-blog.csdnimg.cn/20210125153740928.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 18]: https://img-blog.csdnimg.cn/2021012515374182.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 19]: https://img-blog.csdnimg.cn/20210125153831455.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 20]: https://img-blog.csdnimg.cn/20210125153910378.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 21]: https://img-blog.csdnimg.cn/20210125173104984.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 22]: https://img-blog.csdnimg.cn/20210125173148793.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 23]: https://img-blog.csdnimg.cn/20210125173245572.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 24]: https://img-blog.csdnimg.cn/20210125173550872.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 25]: https://img-blog.csdnimg.cn/20210125173655609.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 26]: https://img-blog.csdnimg.cn/20210126095614664.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 27]: https://img-blog.csdnimg.cn/20210126095700715.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 28]: https://img-blog.csdnimg.cn/20210126095749985.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 29]: https://img-blog.csdnimg.cn/20210126095851941.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[https_www.w3school.com.cn_css_index.asp]: https://www.w3school.com.cn/css/index.asp
[https_developer.mozilla.org_zh-CN_docs_Web_CSS]: https://developer.mozilla.org/zh-CN/docs/Web/CSS