zoukankan html css js c++ java

CSS

一、概述

CSS(Casading Style Sheet)，层叠样式表

所谓层叠，可以将整个网页想象成一层一层的结构，层次高的会覆盖层次低的。css为网页的各个层次设置样式。

CSS3包含大量功能，将CSS3分为多个模块。在模块定义还不太稳定的阶段，浏览器会采用厂商前缀实现某个特征。

-webkit-

Apple Webkit团队，兼容Android, Safari, Chrome, BlackBerry等；

-moz-

Mozilla，兼容Firefox等;

-ms-

Microsoft基金会，兼容IE;

-o-

兼容Opera, Opera Mini, Opera Mobile;

1.1 盒模型

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Getting_started/Boxes

• CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里。
• 为什么要想象成盒子呢？因为如果把所有的元素都想象成盒子，那么我们对网页的布局就相当于是摆放盒子。
• 我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。

当你的浏览器展现一个元素时，这个元素会占据一定的空间。这个空间由四部分组成：由里向外content,padding,border,margin.

中间是元素呈现内容的区域。这个区域的外面是内边距。再外面是边框。最外面的是外边距，外边距将该元素与其它元素分开。

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

盒模型是有两种标准的，一个是标准模型，一个是IE模型。盒模型的宽高只是内容（content）的宽高，而在IE模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。

内容区
• 内容区指的是盒子中放置内容的区域，也就是元素中的文本内容，子元素都是存在于内容区中的。
• 如果没有为元素设置内边距和边框，则内容区大小默认和盒子大小是一致的。
• 通过width和height两个属性可以设置内容区的大小。
• width和height属性只适用于块元素。

内边距
• 顾名思义，内边距指的就是元素内容区与边框以内的空间。
• 默认情况下width和height不包含padding的大小。
• 使用padding属性来设置元素的内边距。
• 例如：
– padding:10px 20px 30px 40px
– 这样会设置元素的上、右、下、左四个方向的内边距。

• padding:10px 20px 30px;
– 分别指定上、左右、下四个方向的内边距
• padding:10px 20px;
– 分别指定上下、左右四个方向的内边距
• padding:10px;
– 同时指定上左右下四个方向的内边距
• 同时在css中还提供了padding-top、padding-right、padding-right、padding-bottom分别用来指定四个方向的内边距。

边框
• 可以在元素周围创建边框，边框是元素可见框的最外部。
• 可以使用border属性来设置盒子的边框：
– border:1px red solid;
– 上边的样式分别指定了边框的宽度、颜色和样式。
• 也可以使用border-top/left/right/bottom分别指定上右下左四个方向的边框。
• 和padding一样，默认width和height并包括边框的宽度。

边框可以设置多种样式：
– none（没有边框）
– dotted（点线）
– dashed（虚线）
– solid（实线）
– double（双线）
– groove（槽线）
– ridge（脊线）
– inset（凹边）
– outset（凸边）

外边距
• 外边距是元素边框与周围元素相距的空间。
• 使用margin属性可以设置外边距。
• 用法和padding类似，同样也提供了四个方向的margin-top/right/bottom/left。
• 当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等，所以这行代码margin:0 auto可以使元素居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box1 {
            /*边框的宽度、样式、颜色三必须同时设置，否则不显示*/
            /*实际上只设置样式也可能显示，因为大部分浏览器宽度和颜色都有默认值，而样式是none*/
            border-bottom-width: 5px;
            /*指定四个值，则分别设置上右下左顺时针方向设置*/
            border-width: 10px 20px 30px 40px;
            /*三个值，上 左右 下*/
            border-width: 10px 20px 30px;
            /*两个值，则上下 左右*/
            border-width: 10px 20px;
            /*简写样式，同时设置宽度、样式、颜色，没有顺序要求*/
            /*可以分别设置border-width、border-color、border-style*/
            border: 20px solid red;
            border-left: 20px solid red;

            /*内边距*/
            /*内容区与边框之间的距离*/
            /*元素背景会影响到内边距和内容区*/
            /*padding四个值和边框一样，也可以三个值，两个值*/
            padding: 10px 2px 5px 8px;
            padding-left: 30px;
            padding-top: 100px;

            /*外边距*/
            /*盒子与其他盒子间的距离*/
            /*不会影响盒子可见框的大小，但会影响到盒子的位置*/
            /*由于页面种元素都是靠左上摆放的，所以当设置上和左外边距时，会导致盒子自身的位置发生改变*/
            /*设置右和下，会改变其他盒子的位置*/
            /*外边距设置负值，向反方向移动*/
            /*可以设置为auto，一般只设置给水平方向的margin*/
            /*如果只指定，左外边距或右外边距的margin为auto则会将外边距设置为最大*/
            /*垂直方向外边距设置为auto，则外边距默认就是0*/
            /*如果left和right同时设置为auto，则会将两侧的外边距设置为同样的值，就可以自动在父元素种居中*/
            /*同样可以使用简写属性，同时设置四个方向*/
            margin-top: 80px;
            margin-left: 24px;
            margin-bottom: 90px;

            /*width 和 height 只是内容区的大小，而非整个盒子的大小*/
            /*盒子的大小由内容区、内边距和边框共同决定*/
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
        }
        /*子元素只会占满父元素的内容区*/
        .box2{
            width: 100%;
            height: 100%;
            background-color: #72cad4;
        }
        .box3{
            width: 100px;
            height: 100px;
            border: 20px solid black;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>

<div class="box1">
    <div class="box2">千山鸟飞绝，万径人踪灭。</div>
</div>

<div class="box3">

</div>
</body>
</html>

垂直外边距会发生重叠

兄弟元素间相邻垂直方向的外边距会取最大值

如果父子元素的垂直外边距相邻，子元素的外边距会传递给父元素

去掉浏览器默认的margin和padding

*{
  margin: 0;
  padding: 0;
}

内联元素不能设置width和height，如span

可以设置水平方向的内边距

可以设置垂直方向的内边距，但是不会影响页面布局

可以设置边框，垂直方向边框不会影响布局

可以支持水平方向外边距，水平外边距不会重叠而是求和，不支持垂直外边距

display
• 我们不能为行内元素设置width、height、margin-top和margin-bottom。
• 我们可以通过修改display来修改元素的性质。
• 可选值：
– block：设置元素为块元素
– inline：设置元素为行内元素
– inline-block：设置元素为行内块元素
– none：隐藏元素（元素将在页面中完全消失）

visibility
• visibility属性主要用于元素是否可见。
• 和display不同，使用visibility隐藏一个元
素，隐藏后其在文档中所占的位置会依然
保持，不会被其他元素覆盖。
• 可选值：
– visible：可见的
– hidden：隐藏的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        a {
            background-color: #a41adc;
            /*内联元素不知宽和高*/
            width: 200px;
            height: 200px;
            /*变成块元素*/
            /*inline 可以将一个元素作为内联元素设置*/
            /*block 将元素设置为块元素显示*/
            /*inline-block 可以使一个元素既有行内元素特点又有块元素特点*/
            font-size: 30px;
            display: block;
        }
        .box{
            display: none;
            /*使用该方式隐藏，不会在页面种显示，并且不占据页面的位置*/
            visibility: hidden; 
            /*默认visible，使用hidden隐藏显示，当依然会占据页面位置*/
        }
    </style>
</head>
<body>
   <div class="box"></div>

    <a href="#">我是一个大大的超链接</a>

<div class="box3">

</div>
</body>
</html>

overflow
• 当相关标签里面的内容超出了样式的宽度和高度是，就会发生一些奇怪的事情，浏览器会让内容溢出盒子。
• 可以通过overflow来控制内容溢出的情况。
• 可选值：
– visible：默认值
– scroll：添加滚动条
– auto：根据需要添加滚动条
– hidden：隐藏超出盒子的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        .box1{
            width: 200px;
            height: 200px;
            background-color: #ee1351;
            /*超出父元素的内容，被称为溢出的内容*/
            /*默认会在父元素外边显示*/
            /*使用overflow设置*/
            overflow: scroll; /*为父元素添加滚动条，无论是否溢出都会添加水平和垂直滚动条*/
           /* overflow: auto; 自动根据需要添加滚动条*/
        }
        .box2{
            width: 100px;
            /*超过父元素高度*/
            height: 500px;
            background-color: #a41adc;

        }
    </style>
</head>
<body>
   <div class="box1">
       <div class="box2"></div>
   </div>


<div class="box3">

</div>
</body>
</html>

margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。

示例：

颜色

内边距总是跟元素的背景色一样，所以当你设置背景色时，你会发现背景色在元素本身和内边距上都生效了。外边距总是透明的。

边框

你可以用边线或者边框来装饰元素。

用 border 属性给元素四周指定统一的边框。在属性值中指定边框的宽度（通常是以显示到屏幕上的像素为单位），样式，还有颜色。

样式包括：

你也可以通过设置样式为 none 或 hidden 来明确地移除边框，或者设置边框颜色为 transparent 来让边框不可见，后者不会改变布局。

如果一次只指定某一个方向的边框，就用属性： border-top， border-right， border-bottom， border-left。你可以用这些属性指定某个方向上的边框，或者不同方向上的不同边框。

外边距和内边距

使用外边距和内边距调整元素的位置，并在其周围创建空间。

用 margin 属性或者 padding 属性分别设置外边距和内边距的宽度。

如果你指定一个宽度，它将会作用于元素四周（上、右、下、左）。

如果你指定两个宽度，第一个宽度会作用于顶部和底部，第二个宽度作用于右边和左边。

你也可以按照顺序指定四个宽度：上、右、下、左。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        #content {
            margin: 100px 200px;
            padding: 0px 100px;
            background-color: yellow;
            border: 1px black solid;
        }
        #content .left{
            float: left;
            margin-bottom: 200px;


            margin-left: 100px;
            margin-right: -150px;

            width: 300px;
            height: 500px;
            background-color: blue;
            border: 10px solid black;
            text-align: center;
            line-height: 500px;
            font-size: 100px;
        }
        #content .middle{
            float: left;

            width: 300px;
            height: 500px;
            margin-left: 100px;
            background-color: pink;
            border: 10px solid black;
            text-align: center;
            line-height: 500px;
            font-size: 100px;
        }
        #content .middleright{
            float: left;

            width: 300px;
            height: 500px;
            margin-left: -900px;
            background-color: purple;
            border: 10px solid black;
            text-align: center;
            line-height: 500px;
            font-size: 100px;
        }
        #content .right{

            margin-left: -100px;
            margin-top: 200px;

            clear: both;
            width: 300px;
            height: 500px;
            background: red;
            border: 10px solid black;
            text-align: center;
            line-height: 500px;
            font-size: 100px;
        }
    </style>
</head>
<body>

<div id="content">
    <div class="left">left</div>
    <div class="middle">middle</div>
    <div class="middleright">mr</div>
    <div class="right">right</div>
</div>

</body>
</html>

1.2 CSS速览

CSS就是选出元素设置其样式，选择元素要用到选择器，设置样式要用到属性。

  <body>
   <!--
       可以将css样式编写到元素的style属性中，这种样式称为内联样式
       只对当前的元素中的内容起作用
       不方便复用
       给谁设置，写在谁的里面
       结果与表现耦合，不方便后期维护
       不推荐使用
    -->
    <p style="color: red;font-size: 20px;">锄禾日当午，汗滴禾下土。</p>
  </body>

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8" />
      <title>CSS</title>
      <!--
          可以将css样式编写到head中的style标签里
          样式编写到style标签中，然后通过css选择器选中指定元素，同时为这些元素设置样式
          选择器{}
      -->
      <style type="text/css">
          p{
              color: red;
              font-size: 40px
          }
      </style>
  </head>
  <body>
    <p>锄禾日当午，汗滴禾下土。</p>
    <p>锄禾日当午，汗滴禾下土。</p>
    <p>锄禾日当午，汗滴禾下土。</p>
    <p>锄禾日当午，汗滴禾下土。</p>
  </body>
</html>

如果其他页面也想使用上面的css

使用外部样式表

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8" />
      <title>CSS</title>
      <!--
          可以将样式表编写到外部的css文件中，然后通过link标签来将外部的css文件引入到当前页面中
          复用
          解耦
          缓存加速
      -->
      <link rel="stylesheet" type="text/css" href="assets/index.css" />
  </head>
  <body>
    <p>锄禾日当午，汗滴禾下土。</p>
    <p>锄禾日当午，汗滴禾下土。</p>
    <p>锄禾日当午，汗滴禾下土。</p>
    <p>锄禾日当午，汗滴禾下土。</p>
  </body>
</html>

css基本语法

注释

/* 我是注释 */

选择器声明块

选择器：选中页面中指定元素，并且将声明块中的样式应用到选择器对应的元素上

声明块紧跟在选择器后边，使用一对()括起来，声明块实际就是一组一组的名值对结构，名和值之间用冒号，称为声明，可有多个声明，分号隔开。

  <body>
    <!--
      块元素和内联元素
      div 块元素，无论内容有多少，独占一行
      p、h1等也都是块元素
      div这个标签没有任何语义，就是一个纯粹的块，不会设置任何默认样式，主要用来为页面布局
      p元素不可以包含任何块元素
    -->
    <div>
        我是div
    </div>
    <div>
        我是div
    </div>

    <p>锄禾日当午，汗滴禾下土。</p>

    <!--
      块元素和内联元素
      span是一个内联元素，即行内元素，只占自身大小的位置，不会独占一行，可以自动换行
      a img iframe 也是内联元素
      span标签没有任何语义，专门选中文字，设置样式
      一般只会用块元素包裹内联元素，而不会内联元素包裹块元素
      a元素可以包含任何元素，除了它本身
    -->
    <span>我是一个span</span>
    <span>我是一个span</span>
  </body>

常用选择器

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8" />
      <title>常用选择器</title>
      <style type="text/css">
          /*为页面中所有p元素，设置字体颜色为红色*/
          /*元素选择器*/
          /*    通过元素选择器，可以选择页面中所有指定元素*/
          /*    语法：标签名 {}*/
          p{
              color: red;
          }

          /*为某个p元素设置字体*/
          /*id选择器，选中唯一的元素*/
          /*语法： #id属性值 {}*/
          #p1{
              font-size: 50px;
          }

          /*类选择器*/
          /*通过class属性值选中一组元素*/
          /*语法：.class属性值{}*/
          .p2{
              color: aqua;
          }
          .hello{
              font-size: 30px;
          }

          /*同时为id为p1的元素，class为p2的元素，h1，设置背景色为黄色*/
          /*选择器分组(并集选择器)，可以同时选中多个选择器对应的元素*/
          /*语法：选择器1,选择器2,选择器n{}*/
          #p1, .p2, h1{
              background: yellow;
          }

          /*通配选择器*/
          /*选中页面中所有的元素*/
          /* 语法：* {} */
          * {
              color: red;
          }

          /*为class为p3的span元素设置一个背景颜色为蓝色*/
          /*交集选择器或复合选择器*/
          /*可以选中同时满足多个选择器的元素*/
          /*语法：选择器1选择器2选择器n{}*/
          /*对于id选中器，不建议使用复合选择器*/
          span.p3{
              color: blue;
          }
      </style>
  </head>
  <body>
    <!--
      可以为元素设置class属性，class属性和id属性类似，当class属性可以重复
      相同class属性值的元素是一组元素
      可以为一个元素设置多个class属性值，多个值之间用空格隔开
    -->
    <p class="p3">锄禾日当午，汗滴禾下土。</p>
    <p id="p1">锄禾日当午，汗滴禾下土。</p>
    <p class="p2 hello">锄禾日当午，汗滴禾下土。</p>
    <p class="p2">锄禾日当午，汗滴禾下土。</p>
    <span class="p3">汗滴禾下土</span>
  </body>
</html>

子元素和后代元素选择器

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8" />
      <title>常用选择器</title>
      <style type="text/css">
        /*为div中的span设置颜色为绿色*/
        /*后代元素选择器*/
        /*选中指定元素的指定后代元素*/
        /*语法：祖先元素 后代元素 {}*/
          #d1 span{
              color: greenyellow;
          }

         /*id为d1的div中的p元素中的span元素*/
          #d1 p span{
              font-size: 50px;
          }

          /*为div的子元素的span设置一个背景颜色为黄色*/
          /*子元素选择器*/
          /*选中指定父元素的指定子元素*/
          /*语法：父元素 > 子元素*/
          div > span {
              background-color: yellow;
          }
      </style>
  </head>
  <body>
    <!--
      元素之间的关系：
          父元素：直接包含子元素的元素 p是span的父元素，而div不是p中span的父元素
          子元素：直接被父元素包含的元素
          祖先元素：直接或间接包含后代元素的元素，父元素也是是祖先元素
          后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
          兄弟元素：拥有相同父元素的元素叫做兄弟元素
    -->
    <div id="d1">
        <span>div中的span</span>
        <p><span>p中span</span></p>
    </div>
    <div>
        <span>div外的span</span>
    </div>

  </body>
</html>

伪类选择器

有四个伪类可以让你根据访问者与该链接的交互方式，将链接设置成4种不同的状态。
• 正常链接
– a:link
• 访问过的链接
– a:visited（只能定义字体颜色）
• 鼠标滑过的链接
– a:hover
• 正在点击的链接
– a:active

其他
• 获取焦点
– :focus
• 指定元素前
– :before
• 指定元素后
– :after
• 选中的元素
– ::selection

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8" />
      <title>常用选择器</title>
      <style type="text/css">

          /*伪类专门用来表示元素的一种的特殊状态，比如：访问过的超链接，比如普通的超链接，比如获取焦点的文本框*/
          /*需要为处在特殊状态的元素设置样式时，使用伪类*/
          a:link{
            color: yellowgreen;
          }

          /*为访问的链接设置颜色为红色*/
          /*浏览器通过历史记录来判断一个链接是否访问过*/
          /*由于涉及到了用户隐私，使用visited只能设置字体颜色，字体大小等设置不了*/
          a:visited{
              color: red;
          }

          /*鼠标移入的状态*/
          a:hover{
              color: blue;
          }

          /*超链接被点击的状态*/
          a:active{
              color: black;
          }

          /*hover和active也可以为其他元素设置,IE6中不支持对超链接以外的元素设置:hover和:active*/
          p:hover{
            background-color: yellow;
          }

          p:active{
            background-color: orange;
          }

          /*文本框获取焦点以后，修改背景颜色为黄色*/
          input:focus{
              background-color: yellow;
          }

          /*为p标签中选中的内容设置样式，可以使用::selection伪类*/
          /*火狐中 ::-moz-selection*/
          p::selection{
              background-color: orange;
          }
          p::-moz-selection{
              background-color: orange;
          }
      </style>
  </head>
  <body>

    <a href="http://www.baidu.com">访问过的链接</a><br/>
    <a href="http://www.baidusss.com">未访问过的链接</a>

    <p>我是旺旺</p>

    <input type="text" />
  </body>
</html>

伪元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*使用伪元素表示元素中的一些特殊位置*/
        /*为p中的第一个字符设置特殊样式*/
        p:first-letter{
            color: red;
            font-size: 20px;
        }
        /*为p中第一行设置背景样式*/
        p:first-line{
            background-color: yellow;
        }
        /*元素最前面位置*/
        /*一般before都需要结合content一起使用，通过content可以向before或after的位置添加一些内容*/
        p:before{
            content: "我会出现在整个段落的最前面";
            color: red;
        }
        p:after{
            content: " 【完结】 ";
            color: red;
        }
    </style>
</head>
<body>
<!--    常规手段用span-->
    <p>你好啊<br/>
        我<span>是</span>是一个p
    </p>
<!--    伪元素-->
    <p> 我是一个p </p>
</body>
</html>

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*我所有具有title属性的p元素，设置背景为黄色*/
        /*属性选择器，根据元素属性或属性值选取指定的元素*/
        /*语法：*/
        /*    [属性名] 选取含有指定属性的元素*/
        p[title]{
            background-color: yellow;
        }
        /*为title属性值为hello的元素设置背景颜色*/
        /*[属性名=属性值]*/
        p[title="hello"]{
            background-color: blue;
        }
        /*为title属性值以ab开头的元素设置背景色*/
        /*[属性名^=属性值]*/
        p[title^="ab"]{
            background-color: #a41adc;
        }
        /*结尾*/
        /*[属性名$=属性值]*/
        p[title$="c"]{
            background-color: #72cad4;
        }
        /*包含*/
        /*[属性名*=属性值]*/
        p[title*="h"]{
            font-size: 80px;
        }
    </style>

</head>
<body>
<!--    title属性，这个属性可以给任何标签指定 鼠标移入，会出现提示文字-->
    <p title="我是title"> 我是一个p </p>
    <p title="hello"> 我是一个p </p>
    <p> 我是一个p </p>
    <p title="abc"> 我是一个p </p>
    <p title="abd"> 我是一个p </p>
    <p title="我是title"> 我是一个p </p>

</body>
</html>

子元素的伪类

• :first-child
– 选择第一个子标签
• :last-child
– 选择最后一个子标签
• :nth-child
– 选择指定位置的子元素
• :first-of-type
• :last-of-type
• :nth-of-type
– 选择指定类型的子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*第一个子元素*/
        p:first-child{
            background-color: red;
        }
        p:last-child{
            background-color: yellow;
        }
        p:nth-child(3){
            background-color: #a41adc;
        }
        /*奇数位置*/
        /*even偶数*/
        p:nth-child(odd){
            background-color: #879eee;
        }
        /*p类型中第一个p元素*/
        p:first-of-type{
            background-color: #ffd351;
        }
    </style>

</head>
<body>
    <span>hello world</span>
<!--    title属性，这个属性可以给任何标签指定 鼠标移入，会出现提示文字-->
    <p title="我是title"> 我是一个p </p>
    <p title="hello"> 我是一个p </p>
    <p> 我是一个p </p>
    <p title="abc"> 我是一个p </p>
    <p title="abd"> 我是一个p </p>
    <p title="我是title"> 我是一个p </p>

</body>
</html>

兄弟元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*为span后的一个p元素设置背景颜色*/
        /*后一个兄弟元素选择器，可以选中一个元素后紧挨着的指定的兄弟元素，不能隔着*/
        /*前一个 + 后一个*/
        span + p{
            background-color: red;
        }
        /*选中后边所有兄弟元素 ~*/
        span ~ p{
            background-color: yellowgreen;
        }
    </style>
    
</head>
<body>
    <span>hello world</span>
<!--    title属性，这个属性可以给任何标签指定 鼠标移入，会出现提示文字-->
    <p title="我是title"> 我是一个p </p>
    <p title="hello"> 我是一个p </p>
    <p> 我是一个p </p>
    <p title="abc"> 我是一个p </p>
    <p title="abd"> 我是一个p </p>
    <p title="我是title"> 我是一个p </p>

</body>
</html>

否定伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*为所有p元素设置背景颜色，除了class值为hello的*/
        /*否定伪类，可以从已选中的元素中剔除某些元素*/
        /*:not(选择器)*/
        p:not(.hello){
            background-color: #a41adc;
        }
    </style>

</head>
<body>
    <span>hello world</span>
<!--    title属性，这个属性可以给任何标签指定 鼠标移入，会出现提示文字-->
    <p title="我是title"> 我是一个p </p>
    <p class="hello"> 我是一个p </p>
    <p> 我是一个p </p>
    <p title="abc"> 我是一个p </p>
    <p title="abd"> 我是一个p </p>
    <p title="我是title"> 我是一个p </p>

</body>
</html>

样式的继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*设置body，后代都会继承*/
        body{
            font-size: 30px;
        }
    </style>

</head>
<body>
    <!--
        css中，祖先元素上的样式可以被后代元素继承，下面span也被设置
        利用继承，给祖先元素设置样式，所有后代元素会自动继承
        但是，并非所有样式都会被子元素继承，比如：背景相关的样式不会被继承，还有变可相关、定位相关
        虽然下面span也会变背景色，但实质上是p的背景色，因为背景色默认是透明的，所以显示了p的背景色
        -->
    <p style="background-color:yellowgreen;font-size: 50px">
        我是一个p
        <span>我是p中span</span>
    </p>

    <span>我是p外的span</span>

</body>
</html>

选择器优先级

在页面中使用CSS选择器选中元素时，经常都是一个元素同时被多个选择器选中。
• 比如：
– body h1
– h1
• 上边的两个选择器都会选择h1元素，如果两个选择器设置的样式不一致那还好不会产生冲突，但是如果两个选择器设置的是同一个样式，这样h1到底要应用那个样式呢？CSS中会默认使用权重较大的样式，权重又是如何计算的呢？

• 不同的选择器有不同的权重值：
– 内联样式：权重是1000
– id选择器：权重是100
– 类、属性、伪类选择器：权重是10
– 元素选择器：权重是1
– 通配符：权重是0
• 计算权重需要将一个样式的全部选择器相加，比如上边的body h1的权重是20，h1的权重是10，所以第一个选择器设置的样式会优先显示

文本标签及样式

和
• em标签用于表示一段内容中的着重点。
• strong标签用于表示一个内容的重要性。
• 这两个标签可以单独使用，也可以一起使
用。

<body>
    <p>
        <strong>警告：任何情况下不要接近僵尸。</strong>
        他们只是<em>看起来</em> 很友好，实际上他们是为了吃你的胳膊！
    </p>
</body>

• 通常em显示为斜体，而strong显示为粗体。

和

• i标签会使文字变成斜体。

• b标签会使文字变成粗体。

• 这两个标签和em和strong类似，但是这两个标签没有语义。

• 所以根据html5标准，当我们只想设置文本特殊显示，而不需要强调内容时就可以使用i和b标签

• small标签表示细则一类的旁注，通常包括免责声明、注意事项、法律限制、版权信息等。
• 浏览器在显示small标签时会显示一个比父
元素小的字号。

<p><small>&copy;小米加步枪.</small>创造奇迹</p>

<cite>
• 使用cite标签可以指明对某内容的引用或参考。例如，戏剧、文章或图书的标题，歌曲、电影、照片或雕塑的名称等。

<p>
    <cite>《七龙珠》</cite>讲的是召唤神龙的故事。
</p>

<blockquote>和<q>
• blockquote和q表示标记引用的文本。
• blockquote用于长引用，q用于短引用。
• 在两个标签中还可以使用cite属性来表示引用的地址。

孟子曾经说过：
<blockquote>天将降大任于是人也...</blockquote>
他说的真对啊！
<p>孔子曾经说过：<q>学而时习之不亦说乎</q></p>

和
• sup和sub用于定义上标和下标。
• 上标主要用于表示类似于103中的3。
• 下标则用于表示类似余H2O中的2

H<sub>2</sub>O

<ins>和<del>
• ins表示插入的内容，显示时通常会加上下划线。
• del表示删除的内容，显示时通常会加上删除线。

我是<ins>大好人</ins> <br/>
你是<del>大坏蛋</del>

<code>和<pre>
• 如果你的内容包含代码示例或文件名，就可以使用code元素。
• pre元素表示的是预格式化文本，可以使用pre包住code来表示一段代码。

<pre>
    <code>
        function fun(){
            alert("hello");
        }
    </code>
</pre>

有序列表
• 使用ol和li来创建一个有序列表。

<ol>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
</ol>

无序列表
• 使用ul和li来创建一个无序列表。

<ul>
  <li>列表1</li>
  <li>列表2</li>
  <li>列表3</li>
</ul>

定义列表
• 使用dl、dd、dt来创建一个定义列表。

<dl>
  <dt>定义项1</dt>
  <dd>定义描述1</dd>
  <dt>定义项2</dt>
  <dd>定义描述2</dd>
  <dt>定义项3</dt>
  <dd>定义描述3</dd>
</dl>

文本格式化

单位

px
– 如果我们将一个图片放大的话，我们会发现一个图片是有一个一个的小色块构成的，这一个小色块就是一个像素，也就是1px，对于不同的显示器来说一个像素的大小是不同的。
百分比
– 也可以使用一个百分数来表示一个大小，百分比是相对于父元素来说的，如果父元素使用的大小是16px，则100%就是16px，200%就是32px。
em
– em和百分比类似，也是相对于父元素说的，1em就相当于100%，2em相当于200%，1.5em相当于150%。

颜色
• 在CSS中可以直接使用颜色的关键字来代表一种颜色。
• 17种颜色
– aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow。
• 还有147种svg颜色，这里就不一一列举了，但是明显即使这些颜色变成double，也不足以描绘我们世界中所有的颜色。

十六进制颜色
• 用的最多的颜色是十六进制符号。一个颜色值，比如：#6600FF实际上包含了三组十六进制的数字。
• 上边的例子中66代表红色的浓度，00代表绿色的浓度，FF代表了蓝色的浓度。最后的颜色是由这些指定浓度的红绿蓝混合而成的。
• 如果每一组数中的两个数字都相同，就可以把十六进制的数字缩短为只有3个字符，如将#6600FF缩短为#60F。

RGB值
• 也可以使用计算机中常用的RGB值来表示颜色。可以使用0~255的数值，也可以使用0%~100%的百分比数。
– RGB(100%,0%,0%)
– RGB(0,255,0)
• 第一个数表示红色的浓度，第二个数表示绿色浓度，第三个数表示蓝色的浓度。

RGBA
• RGBA表示一个颜色和RGB类似，只不过比RGB多了一个A（alpha）来表示透明度，透明度需要一个0-1的值。0表示完全透明，1表示完全不透明。
– RGBA(255,100,5,0.5)

文字大小

font-size用来指定文字的大小。

字体

通过font-family可以指定标签中文字使用的字体。
• 例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p{
            font-family: "KaiTi";
        }
    </style>
</head>
<body>

  <p>千山鸟飞绝，万径人踪灭。</p>

</body>
</html>

– 上边这行代码指定了p标签中使用名为arial作为字体
• 一般来说只有用户计算机中安装了我们指定的字体时，它才会显示，否则这行代码是没有意义的。

• 通过font-family可以同时指定多个字体。
• 例如：

p{font-family:Arial , Helvetica , sans-serif}

如上我实际上指定了三种字体，那么到底使用的是哪个呢？浏览器会优先使用第一个，如果没有找到则使用第二个，以此类推。
• 这里面sans-serif并不是指的具体某一个字体。而是一类字体。

字体分类
• serif（衬线字体）
• sans-serif（非衬线字体）
• monospace （等宽字体）
• cursive （草书字体）
• fantasy （虚幻字体）
• 以上这些分类都是一些大的分类，并没有涉及具体的类型，如果将字体指定为这些格式，浏览器会自己选择指定类型的字体。

斜体和粗体
• font-style用来指定文本的斜体。
– 指定斜体：font-style:italic
– 指定非斜体：font-style:normal
• font-weight用来指定文本的粗体
– 指定粗体：font-weight:bold
– 指定非粗体：font-weight:normal

小型大写字母
• font-variant属性可以将字母类型设置为小型大写。在该样式中，字母看起来像是稍微缩小了尺寸的大写字母。
– font-variant:small-caps

字体属性的简写
• font可以一次性同时设置多个字体的样式。
• 语法：
– font:加粗斜体小型大写大小/行高字体
• 这里前边几个加粗、斜体和小型大写的顺序无所谓，也可以不写，但是大小和字体必须写且必须写到后两个。

行间距
• line-height用于设置行高，行高越大则行间距越大。
• 行间距 = line-height – font-size

大写化
• text-transform样式用于将元素中的字母全都变成大小。
– 大写：text-transform:uppercase
– 小写：text-tansform:lowercase
– 首字母大写：text-transform:capitalize
– 正常：text-transform:none

文本的修饰
• text-decoration属性，用来给文本添加各种修饰。通过它可以为文本的上方、下方或者中间添加线条。
• 可选值：
– underline
– overline
– line-through
– none

字母间距和单词间距
• letter-spacing用来设置字符之间的间距。
• word-spacing用来设置单词之间的间距。
• 这两个属性都可以直接指定一个长度或百分数作为值。正数代表的是增加距离，而负数代表减少距离。

对齐文本
• text-align用于设置文本的对齐方式。
• 可选值：
– left：左对齐
– right：右对齐
– justify：两边对齐
– center：居中对齐

首行缩进
• text-indent用来设置首行缩进。
• 该样式需要指定一个长度，并且只对第一行生效。

文档流

网页是多层的，文档流就是网页的一层，是最底层，表示页面的一个位置。我们创建的元素都默认处在文档流种。

两种方式脱离文档流：

浮动
定位

文档流指的是文档中可现实的对象在排列时所占用的位置。

将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流。

也就是说在文档流中元素默认会紧贴到上一个元素的右边，如果右边不足以放下元素，元素则会另起一行，在新的一行中继续从左至右摆放。

这样一来每一个块元素都会另起一行，那么我们如果想在文档流中进行布局就会变得比较麻烦。

元素在文档流种的特点

块元素

块元素在文档流种会独占一行，块元素会自上向下排列。
块元素在文档流中默认宽度是父元素100%，默认高度是被子元素撑开。

内联元素

内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右。
内联元素的高度和宽度默认都被内容撑开。

当元素的宽度为auto时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度，以适应内边距。

浮动

块元素默认在文档流中垂直排列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        .box1{
            width: 200px;
            height: 200px;
            background-color: #ee1351;

        }
        .box2{
            width: 200px;
            /*超过父元素高度*/
            height: 200px;
            background-color: #a41adc;

        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: #ffd351;
        }
    </style>
</head>
<body>
   <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

div用于网页布局，垂直排列不能满足需要，如何水平排列？

方法一：dispaly: inline-block 不推荐

方法二：脱离文档流

float

none 默认
left 向页面左侧浮动
right 向页面右侧浮动

当一个元素设置浮动以后（非none），元素会立即脱离文档流，下边的元素会立即向上移动。

往左上或右上漂

浮动元素比文档流要高一层

如果float设置了left，下边的元素向上移动的时候可能会被盖住

元素浮动以后，会尽量向页面的左上或右上漂浮，直到遇到父元素的边框或其他浮动元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        .box1{
            width: 200px;
            height: 200px;
            background-color: #ee1351;
            float: right;
        }
        .box2{
            width: 200px;
            /*超过父元素高度*/
            height: 200px;
            background-color: #a41adc;

        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: #ffd351;
        }
    </style>
</head>
<body>
   <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

如果浮动元素上面是一个没有浮动的块元素，则浮动元素不会超过块元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        .box1{
            width: 200px;
            height: 200px;
            background-color: #ee1351;
        }
        .box2{
            width: 200px;
            /*超过父元素高度*/
            height: 200px;
            background-color: #a41adc;
            float: right;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: #ffd351;
        }
    </style>
</head>
<body>
   <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

浮动元素不会超过它上边的兄弟元素，最多一样齐

浮动元素的外边缘不会超过其父元素的内边缘

任何元素一旦浮动，display属性完全失效均可以设置宽高，并且不会独占一行

浮动元素不会盖住文字，文字会自动环绕浮动元素的周围。可设置文字环绕图片的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }

        .box1{
            width: 100px;
            height: 100px;
            background-color: #a41adc;
            float: left;
        }

        .p1{
            height: 200px;
            background-color: yellow;
        }
        img{
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>

   </div>
    <div class="box1">
        <img src="./assets/1.jpg"></div>
    </div>
    <p class="p1">《飞鸟集》是印度诗人泰戈尔创作的诗集，它包括325首清丽的无标题小诗，首次出版于1916年。这些诗的基本题材多为极其常见事物，不外乎小草、落叶、飞鸟、星辰、河流等等。

        由于诗人忠实于自己的思想，具有敏锐洞察自然、社会的能力和一支善于表达心曲的妙笔，这些形似只言片语的小诗就蕴涵了丰富的思想、深奥的哲理，表现出一种清新明快、优美隽永的风格。

        艺术特色：

        泰戈尔在《飞鸟集》中十分注重对自然的描写，一只鸟儿、一朵花、一颗星、一个雨滴、也都具有人性与生命力。他热爱整个大自然。他认为人类情感和自然力之间是有内在联系的，或自然融入人类的感情，或人类的感情融入自然。只有融入自然才能净化自己的生命。

        自然不仅提供了暗示的形象，而且还积极的协助我们抹去人类生活中一切分离的痕迹；情人可能会分离，而这种分离将淹没与在阳光里欢笑的绿草和繁花之下。读了他的作品,便令人觉得宇宙的活动和人生的变化是有意义的，是快乐的，便给人以无穷的勇气。</p>
</body>
</html>

在文档流中，子元素的宽度默认占父元素的全部。当元素设置浮动以后，会完全脱离文档流。脱离文档流后，块元素高度和宽度，都会被内容撑开。

内联元素开启浮动脱离文档流后，会变成块元素，宽和高设置生效

清除浮动常用方式：

结尾处加空div标签 clear:both（或在下一个元素上加clear:both）
浮动元素的父级div 定义 overflow:hidden
浮动元素的父元素定宽高

网页布局

固定布局
自适应布局

高度塌陷

文档流中，父元素默认被子元素撑开

子元素设置浮动，子元素脱离文档流，无法撑起父元素，父元素会出现高度塌陷，父元素下的所有元素都会向上移动

元素都有一个隐含属性，Block Formatting Context，BFC

默认关闭，开启后，元素将会具有如下特性：

父元素垂直外边距不会和子元素重叠
开启BFC的元素不会被浮动元素覆盖
开启BFC的父元素可以包含浮动子元素

开启BFC

设置元素浮动虽然可以撑开父元素，但父元素宽度丢失，下边的元素会上移
设置元素绝对定位
设置元素为inline-block 宽度丢失
将元素的overflow设置为非visible hidden 推荐

导航条

清除浮动

有时不希望浮动影响其他元素

在受影响的元素中设置clear属性

clear属性可以用于清除元素周围的浮动对元素的影响。

• 也就是元素不会因为上方出现了浮动元素而改变位置。

• 可选值：

– left：忽略左侧浮动

– right：忽略右侧浮动

– both：忽略全部浮动，实际清除影响最大的元素的影响

– none：不忽略浮动，默认值

clear: left

解决子元素浮动引起的高度塌陷问题

没浮动，撑起父元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        .box1{
            border: 5px solid black;
            background-color: #a41adc;

        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: #ee1351;
            /*float: left;*/
        }

    </style>
</head>
<body>

    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

浮动，高度塌陷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        .box1{
            border: 5px solid black;
            background-color: #a41adc;

        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: #ee1351;
            float: left;
        }

    </style>
</head>
<body>

    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

添加一个空白div

不受浮动影响则会在box2下面，正好可以撑开父元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        .box1{
            border: 5px solid black;
            background-color: #a41adc;

        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: #ee1351;
            float: left;
        }
        .clear{
            clear: both;
        }
    </style>
</head>
<body>

    <div class="box1">
        <div class="box2"></div>
        <div class="clear"></div>
    </div>
</body>
</html>

这会添加无意义的元素

通过after伪类向元素最后添加一个空白的元素，然后对其清除浮动

和添加空白div进行清除效果一样

几乎没有副作用，最推荐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        .box1{
            border: 5px solid black;
            background-color: #a41adc;

        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: #ee1351;
            float: left;
        }
        .box1:after{
            content: "";
            /*必须转换为块元素*/
            display: block;
            clear: both;
        }
    </style>
</head>
<body>

    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        .box1{
            border: 5px solid black;
            background-color: #a41adc;

        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: #ee1351;
            float: left;
        }
        .clearfix:after{
            content: "";
            /*必须转换为块元素*/
            display: block;
            clear: both;
        }
    </style>
</head>
<body>

    <div class="box1 clearfix">
        <div class="box2"></div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        
        <style type="text/css">
            
            .box1{
                width: 200px;
                height: 200px;
                background-color: red;
            }
            
            .box2{
                width: 200px;
                height: 200px;
                background-color: yellow;
                /*
                 * 定位：
                 *     - 定位指的就是将指定的元素摆放到页面的任意位置
                 *         通过定位可以任意的摆放元素
                 *     - 通过position属性来设置元素的定位
                 *         -可选值：
                 *             static：默认值，元素没有开启定位
                 *             relative：开启元素的相对定位
                 *             absolute：开启元素的绝对定位
                 *             fixed：开启元素的固定定位（也是绝对定位的一种）
                 */
                
                /*
                 * 当元素的position属性设置为relative时，则开启了元素的相对定位
                 *     1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
                 *  2.相对定位是相对于元素在文档流中原来的位置进行定位
                 *     3.相对定位的元素不会脱离文档流
                 *     4.相对定位会使元素提升一个层级
                 *     5.相对定位不会改变元素的性质，块还是块，内联还是内联
                 */
                position: relative;
                
                
                /*
                 * 当开启了元素的定位（position属性值是一个非static的值）时，
                 *     可以通过left right top bottom四个属性来设置元素的偏移量
                 *     left：元素相对于其定位位置的左侧偏移量
                 *     right：元素相对于其定位位置的右侧偏移量
                 *     top：元素相对于其定位位置的上边的偏移量
                 *     bottom：元素相对于其定位位置下边的偏移量
                 * 
                 * 通常偏移量只需要使用两个就可以对一个元素进行定位，
                 *     一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位
                 */
                
                /*left: 100px;
                top: 200px;*/
                
                left: 200px;
                
            }
            
            .box3{
                width: 200px;
                height: 200px;
                background-color: yellowgreen;
                
            }
            
            .s1{
                position: relative;
                width: 200px;
                height: 200px;
                background-color: yellow;
            }
            
        </style>
        
    </head>
    <body>
        
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        
        <span class="s1">我是一个span</span>
        
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <style type="text/css">
            
            .box1{
                width: 200px;
                height: 200px;
                background-color: red;
            }
            .box2{
                width: 200px;
                height: 200px;
                background-color: yellow;
                /*
                 * 当position属性值设置为absolute时，则开启了元素的绝对定位
                 * 
                 * 绝对定位：
                 *     1.开启绝对定位，会使元素脱离文档流
                 *     2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化
                 *     3.绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位）
                 *         如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位
                 *     4.绝对定位会使元素提升一个层级
                 *     5.绝对定位会改变元素的性质，
                 *         内联元素变成块元素，
                 *         块元素的宽度和高度默认都被内容撑开
                 */
                position: absolute;
                
                /*left: 100px;
                top: 100px;*/
                
            }
            .box3{
                width: 300px;
                height: 300px;
                background-color: yellowgreen;
            }
            
            .box4{
                width: 300px;
                height: 300px;
                background-color: orange;
                /*开启box4的相对定位*/
                /*position: relative;*/
            }
            
            .s1{
                width: 100px;
                height: 100px;
                background-color: yellow;
                
                /*开启绝对定位*/
                position: absolute;
            }
            
        </style>
        
    </head>
    <body>
        
        <div class="box1"></div>
        <div class="box5">
            <div class="box4">
                <div class="box2"></div>
            </div>
        </div>
        
        <div class="box3"></div>
        
        <span class="s1">我是一个span</span>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <style type="text/css">
            
            .box1{
                width: 200px;
                height: 200px;
                background-color: red;
            }
            .box2{
                width: 200px;
                height: 200px;
                background-color: yellow;
                /*
                 * 当元素的position属性设置fixed时，则开启了元素的固定定位
                 *     固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样
                 * 不同的是：
                 *         固定定位永远都会相对于浏览器窗口进行定位
                 *         固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动
                 * 
                 * IE6不支持固定定位
                 */
                position: fixed;
                
                left: 0px;
                top: 0px;
                
            }
            .box3{
                width: 200px;
                height: 200px;
                background-color: yellowgreen;
            }
            
        </style>
        
    </head>
    <body style="height: 5000px;">
        
        <div class="box1"></div>
        <div class="box4" style=" 300px; height: 300px; background-color: orange; position: relative;">
            <div class="box2"></div>
        </div>
        
        <div class="box3"></div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <style type="text/css">
            
            .box1{
                width: 200px;
                height: 200px;
                background-color: red;
                position: relative;
                
                z-index: 2;
                
                opacity: 0.5;
                filter: alpha(opacity=50);
            }
            .box2{
                width: 200px;
                height: 200px;
                background-color: yellow;
                /*开启绝对定位*/
                position: absolute;
                /*设置偏移量*/                
                top: 100px;
                left: 100px;
                /*
                 * 如果定位元素的层级是一样，则下边的元素会盖住上边的
                 * 通过z-index属性可以用来设置元素的层级
                 * 可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级
                 *     层级越高，越优先显示
                 * 
                 * 对于没有开启定位的元素不能使用z-index
                 */
                z-index: 25;
                
                opacity: 0.5;
                filter: alpha(opacity=50);
                
            }
            .box3{
                width: 200px;
                height: 200px;
                background-color: yellowgreen;
                /*position: relative;
                z-index: 3;*/
                position: absolute;
                top: 200px;
                left: 200px;
                z-index: 30;
                
                /*
                 * 设置元素的透明背景
                 * opacity可以用来设置元素背景的透明，
                 *     它需要一个0-1之间的值
                 *         0 表示完全透明
                 *         1 表示完全不透明
                 *         0.5 表示半透明
                 */
                opacity: 0.5;
                
                /*
                 * opacity属性在IE8及以下的浏览器中不支持
                 * IE8及以下的浏览器需要使用如下属性代替
                 *     alpha(opacity=透明度)
                 * 透明度，需要一个0-100之间的值
                 *     0 表示完全透明
                 *     100 表示完全不透明
                 *     50 半透明
                 * 
                 * 这种方式支持IE6，但是这种效果在IE Tester中无法测试
                 */
                filter: alpha(opacity=50);
            }
            
            .box4{
                width: 200px;
                height: 200px;
                background-color: orange;
                /*开启相对定位*/
                position: relative;
                /*
                 * 父元素的层级再高，也不会盖住子元素
                 */
                z-index: 20;
                
                top: 500px;
            }
            
            .box5{
                width: 100px;
                height: 100px;
                background-color: skyblue;
                /*开启绝对定位*/
                position: absolute;
                z-index: 10;
            }
            
        </style>
        
    </head>
    <body style="height: 5000px;">
        
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4">
            <div class="box5"></div>
        </div>
    </body>
</html>

background-color

• background-color属性用来为元素设置背景颜色。

• 需要指定一个颜色值，当指定了一个颜色以后，整个元素的可见区域都会使用这个颜色作为背景色。

• 如果不设置背景颜色，元素默认背景颜色为透明，实际上会显示父元素的背景颜色。

background-image

• background-image可以为元素指定背景图片。

• 和background-color类似，这不过这里使用的是一个图片作为背景。

• 需要一个url地址作为参数，url地址需要指向一个外部图片的路径

• 例如：

background-image: url(1.jpg)

background-repeat

• background-repeat用于控制背景图片的重复方式。

• 如果只设置背景图片默认背景图片将会使用平铺的方式，可以通过该属性进行修改。

• 可选值：

– repeat：默认值，图片左右上下平铺

– no-repeat：只显示图片一次，不会平铺

– repeat-x：沿x轴水平平铺一张图片

– repeat-y：沿y轴水平平铺一张图片

background-position

• background-position用来精确控制背景图片在元素中的位置。

• 可以通过三种方式来确定图片在水平方向和垂直方向的起点。

– 关键字：top right bottom left center

– 百分比

– 数值

background-attachment

• background-attachment用来设置背景图片是否随页面滚动。

• 可选值：

– scroll：随页面滚动

– fixed：不随页面滚动

图片资源

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            
            .box1{
                width: 1024px;
                height: 724px;
                margin: 0 auto;
                /*设置背景样式*/
                background-color: #bfa;
                /*
                 * 使用background-image来设置背景图片
                 *     - 语法：background-image:url(相对路径);
                 * 
                 *     - 如果背景图片大于元素，默认会显示图片的左上角
                 *     - 如果背景图片和元素一样大，则会将背景图片全部显示
                 *     - 如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素
                 * 
                 * 可以同时为一个元素指定背景颜色和背景图片，
                 *     这样背景颜色将会作为背景图片的底色
                 *     一般情况下设置背景图片时都会同时指定一个背景颜色
                 */
                background-image:url(img/1.png);
                
                /*
                 * background-repeat用于设置背景图片的重复方式
                 *     可选值：
                 *         repeat，默认值，背景图片会双方向重复（平铺）
                 *         no-repeat ，背景图片不会重复，有多大就显示多大
                 *         repeat-x， 背景图片沿水平方向重复
                 *         repeat-y，背景图片沿垂直方向重复
                 */
                background-repeat: repeat-y;
            }
            
        </style>
        
        <!--<link rel="stylesheet" type="text/css" href="css/style.css"/>-->
    </head>
    <body>
        
        <div class="box1"></div>
        
    </body>
</html>

导航条

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <style type="text/css">
            .box1{
                width: 990px;
                height: 32px;
                background-color: #bfa;
                margin: 50px auto;
                /*
                 * 设置为背景图片
                 */
                background-image: url(img/bg.gif);
                /*
                 * 设置水平方向重复
                 */
                background-repeat: repeat-x;
            }
        </style>
        
    </head>
    <body>
        <div class="box1"></div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        
            *{
                margin: 0;
                padding: 0;
            }
            
            .box1{
                height: 500px;
                margin:  0 auto;
                
                /*
                 * 设置一个背景颜色
                 */
                background-color: #bfa;
                /*
                 * 设置一个背景图片
                 */
                background-image: url(img/4.png);
                /*
                 * 设置一个图片不重复
                 */
                background-repeat: no-repeat;
                /*
                 * 背景图片默认是贴着元素的左上角显示
                 * 通过background-position可以调整背景图片在元素中的位置
                 * 可选值：
                 *         该属性可以使用 top right left bottom center中的两个值
                 *             来指定一个背景图片的位置
                 *             top left 左上
                 *             bottom right 右下
                 *             如果只给出一个值，则第二个值默认是center
                 * 
                 *         也可以直接指定两个偏移量，
                 *             第一个值是水平偏移量
                 *                 - 如果指定的是一个正值，则图片会向右移动指定的像素
                 *                 - 如果指定的是一个负值，则图片会向左移动指定的像素
                 *             第二个是垂直偏移量    
                 *                 - 如果指定的是一个正值，则图片会向下移动指定的像素
                 *                 - 如果指定的是一个负值，则图片会向上移动指定的像素
                 *         
                 */
                /*background-position: -80px -40px;*/
                background-attachment: fixed;
            }
            
            body{
                background-image: url(img/3.png);
                background-repeat: no-repeat;
                
                /*
                 * background-attachment用来设置背景图片是否随页面一起滚动
                 *         可选值：
                 *             scroll，默认值，背景图片随着窗口滚动
                 *             fixed，背景图片会固定在某一位置，不随页面滚动
                 * 
                 * 不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素
                 */
                background-attachment:fixed ;
            }
            
            
        </style>
    </head>
    <body style="height: 5000px;">
        
        <div class="box1"></div>
        
    </body>
</html>

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body {
                background-image: url(img/2.jpg);
                background-repeat: no-repeat;
                background-position: center;
                /*
                 * 当背景图片的background-attachment设置为fixed时，
                 *     背景图片的定位永远相对于浏览器的窗口
                 */
                background-attachment: fixed;
            }
        </style>
    </head>

    <body style="height: 5000px;">

        <p>
            在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
        </p>
        <p>
            在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
        </p>
        <p>
            在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
        </p>
        <p>
            在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
        </p>
        <p>
            在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
        </p>
        <p>
            在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
        </p>
        <p>
            在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
        </p>
        <p>
            在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
        </p>
        <p>
            在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
        </p>
        <p>
            在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
        </p>
        <p>
            在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
        </p>
        <p>
            在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
        </p>
        <p>
            在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
        </p>

    </body>

</html>

按钮练习

图片资源

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        
        /*
         * 做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，
         *     这个闪烁会造成一次不佳的用户体验。
         * 产生问题的原因：
         *     背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求，
         *     但是我们外部资源并不是同时加载，浏览器会在资源被使用才去加载资源
         *     我们这个练习，一上来浏览器只会加载link.png由于hover和active的状态没有马上触发，
         *         所以hover.png和active.png并不是立即加载的
         *     当hover被触发时，浏览器才去加载hover.png
         *     当active被触发时，浏览器才去加载active.png
         *     由于加载图片需要一定的时间，所以在加载和显示过程会有一段时间，背景图片无法显示，导致出现闪烁的情况
         * 
         *     为了解决该问题，可以将三个图片整合为一张图片，这样可以同时将三张图片一起加载，就不会出现闪烁的问题了，
         *     然后在通过background-position来切换要显示的图片的位置，这种技术叫做图片整合技术（CSS-Sprite）
         *     优点：
         *         1 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，
         *             提高访问效率，提高了用户体验。
         *         2 将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户体验
         * 
         * 
         */
            
            .btn:link{
                /*将a转换为块元素*/
                display: block;
                /*设置宽高*/
                width: 93px;
                height: 29px;
                /*设置背景图片*/
                background-image: url(img/btn/btn2.png);
                /*设置背景图片不重复*/
                background-repeat: no-repeat;
                
            }
            
            .btn:hover{
                
                /*
                 * 当是hover状态时，希望图片可以向左移动
                 */
                background-position: -93px 0px;
            }
            
            .btn:active{
                /*
                 * 当是active状态时，希望图片再向左移动
                 */
                background-position: -186px 0px;
                
            }
            
        </style>
    </head>
    <body>
        
        <!-- 创建一个超链接 -->
        <a class="btn" href="#"></a>
        
    </body>
</html>

CSS Sprite

• CSS Sprites是一种网页图片应用处理方式。

• 通过这种方式我们可以将网页中的零星图片集中放到一张大图上。

• 这样一来，一次请求便可以同时加载多张图片，大大提高了图片的加载效率。

雪碧图

<!

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            
            .box1{
                width: 129px;
                height: 45px;
                background-image:url(img/amazon-sprite_.png) ;
            }
            
            .box2{
                width: 42px;
                height: 30px;
                background-image:url(img/amazon-sprite_.png) ;
                /*
                 * 设置偏移量
                 */
                background-position: -58px -338px;
            }
            
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
    </body>
</html>

PS制作雪碧图

background

• background是背景的简写属性，通过这个属性可以一次性设置多个样式，而且样式的顺序没有要求。

• 例如：

background: green url(1.jpg) no-repeat center center fixed;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            
            body{
                height: 5000px;
                /*设置一个背景颜色*/
                /*background-color: #bfa;*/
                /*设置一个背景图片*/
                /*background-image: url(img/3.png);*/
                /*设置背景不重复*/
                /*background-repeat: no-repeat;*/
                /*设置背景图片的位置*/
                /*background-position: center center;*/
                /*设置背景图片不随滚动条滚动*/ 
                /*background-attachment: fixed;*/
                
                background-color: #bfa;
                
                /*
                 * background
                 *     - 通过该属性可以同时设置所有背景相关的样式
                 *     - 没有顺序的要求，谁在前睡在后都行
                 *         也没有数量的要求，不写的样式就使用默认值
                 */
                background: #bfa url(img/3.png) center center no-repeat fixed;
            }
            
        </style>
    </head>
    <body>
    </body>
</html>

表格

用来表示格式化的数据。

HTML中的表格可以很复杂，但是通常情况下我们不需要创建过于复杂的表格。

table、tr、th、td

• 使用table标签创建一个表格。

• tr表示表格中的一行。

• tr中可以编写一个或多个th或td。

• th表示表头。

• td表示表格中的一个单元格。

caption、thead、tbody、tfoot

• caption表示表格的标题。

• thead表示表格的头部。

• tbody表示表格的主体。

• tfoot表示表格的底部。

合并单元格

• 合并单元格指将两个或两个以上的单元格合并为一个单元格。

• 合并单元格可以通过在th或td中设置属性来完成。

• 横向合并

– colspan

• 纵向合并

– rowspan

表格的样式

• 之前学习的很多属性都可以用来设置表格的样式，比如color可以用来设置文本的颜色。padding可以设置内容和表格边框的距离。

• text-align：设置文本的水平对齐。

• vertical-align：设置文本的垂直对齐。

– 可选值：top、baseline、middle、bottom

• border-spacing：边框间距

• border-collapse：合并边框

– collapse：合并边框

– separate：不合并边框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <!-- 
            表格在日常生活中使用的非常的多，比如excel就是专门用来创建表格的工具，
                表格就是用来表示一些格式化的数据的，比如：课程表、银行对账单
            在网页中也可以来创建出不同的表格。    
        -->
        
        <!--
            在HTML中，使用table标签来创建一个表格
        -->
        <table border="1" width="40%" align="center">
            
            <!-- 
                在table标签中使用tr来表示表格中的一行，有几行就有几个tr
            -->
            <tr>
                <!-- 在tr中需要使用td来创建一个单元格，有几个单元格就有几个td -->
                <td>A1</td>
                <td>A2</td>
                <td>A3</td>
                <td>A4</td>
            </tr>
            
            <tr>
                <td>B1</td>
                <td>B2</td>
                <td>B3</td>
                
                <!-- 
                    rowspan用来设置纵向的合并单元格
                -->
                <td rowspan="2">B4</td>
            </tr>
            <tr>
                <td>C1</td>
                <td>C2</td>
                <td>C3</td>
            </tr>
            <tr>
                <td>D1</td>
                <td>D2</td>
                <!-- 
                    colspan横向的合并单元格
                -->
                <td colspan="2">D3</td>
            </tr>
            
        </table>
        
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            
            /*
             * 设置表格的宽度
             */
            table{
                width: 300px;
                /*居中*/
                margin: 0 auto;
                /*边框*/
                /*border:1px solid black;*/
                /*
                 * table和td边框之间默认有一个距离
                 *     通过border-spacing属性可以设置这个距离
                 */
                /*border-spacing:0px ;*/
                
                /*
                 * border-collapse可以用来设置表格的边框合并
                 * 如果设置了边框合并，则border-spacing自动失效
                 */
                border-collapse: collapse;
                /*设置背景样式*/
                /*background-color: #bfa;*/
            }
            
            /*
             * 设置边框
             */
            td , th{
                border: 1px solid black;
            }
            
            /*
             * 设置隔行变色
             */
            tr:nth-child(even){
                background-color: #bfa;
            }
            
            /*
             * 鼠标移入到tr以后，改变颜色
             */
            tr:hover{
                background-color: #ff0;
            }
            
            
        </style>
    </head>
    <body>
        <!--
            table是一个块元素
        -->
        
        <table>
            <tr>
                <!--
                    可以使用th标签来表示表头中的内容，
                        它的用法和td一样，不同的是它会有一些默认效果
                -->
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>住址</th>
            </tr>
            <tr>
                <td>1</td>
                <td>孙悟空</td>
                <td>男</td>
                <td>花果山</td>
            </tr>
            <tr>
                <td>2</td>
                <td>猪八戒</td>
                <td>男</td>
                <td>高老庄</td>
            </tr>
            <tr>
                <td>3</td>
                <td>沙和尚</td>
                <td>男</td>
                <td>流沙河</td>
            </tr>
            <tr>
                <td>4</td>
                <td>唐僧</td>
                <td>男</td>
                <td>女儿国</td>
            </tr>
            <tr>
                <td>1</td>
                <td>孙悟空</td>
                <td>男</td>
                <td>花果山</td>
            </tr>
            <tr>
                <td>2</td>
                <td>猪八戒</td>
                <td>男</td>
                <td>高老庄</td>
            </tr>
            <tr>
                <td>3</td>
                <td>沙和尚</td>
                <td>男</td>
                <td>流沙河</td>
            </tr>
            <tr>
                <td>4</td>
                <td>唐僧</td>
                <td>男</td>
                <td>女儿国</td>
            </tr>
            <tr>
                <td>1</td>
                <td>孙悟空</td>
                <td>男</td>
                <td>花果山</td>
            </tr>
            <tr>
                <td>2</td>
                <td>猪八戒</td>
                <td>男</td>
                <td>高老庄</td>
            </tr>
            <tr>
                <td>3</td>
                <td>沙和尚</td>
                <td>男</td>
                <td>流沙河</td>
            </tr>
            <tr>
                <td>4</td>
                <td>唐僧</td>
                <td>男</td>
                <td>女儿国</td>
            </tr>
            <tr>
                <td>1</td>
                <td>孙悟空</td>
                <td>男</td>
                <td>花果山</td>
            </tr>
            <tr>
                <td>2</td>
                <td>猪八戒</td>
                <td>男</td>
                <td>高老庄</td>
            </tr>
            <tr>
                <td>3</td>
                <td>沙和尚</td>
                <td>男</td>
                <td>流沙河</td>
            </tr>
            <tr>
                <td>4</td>
                <td>唐僧</td>
                <td>男</td>
                <td>女儿国</td>
            </tr>
            <tr>
                <td>1</td>
                <td>孙悟空</td>
                <td>男</td>
                <td>花果山</td>
            </tr>
            <tr>
                <td>2</td>
                <td>猪八戒</td>
                <td>男</td>
                <td>高老庄</td>
            </tr>
            <tr>
                <td>3</td>
                <td>沙和尚</td>
                <td>男</td>
                <td>流沙河</td>
            </tr>
            <tr>
                <td>4</td>
                <td>唐僧</td>
                <td>男</td>
                <td>女儿国</td>
            </tr>
            <tr>
                <td>1</td>
                <td>孙悟空</td>
                <td>男</td>
                <td>花果山</td>
            </tr>
            <tr>
                <td>2</td>
                <td>猪八戒</td>
                <td>男</td>
                <td>高老庄</td>
            </tr>
            <tr>
                <td>3</td>
                <td>沙和尚</td>
                <td>男</td>
                <td>流沙河</td>
            </tr>
            <tr>
                <td>4</td>
                <td>唐僧</td>
                <td>男</td>
                <td>女儿国</td>
            </tr>
        </table>
        
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        
        <table>
            <!-- 
                有一些情况下表格是非常的长的，
                    这时就需要将表格分为三个部分，表头，表格的主体，表格底部
                在HTML中为我们提供了三个标签：
                    thead 表头
                    tbody 表格主体
                    tfoot 表格底部
                    
                这三个标签的作用，就来区分表格的不同的部分，他们都是table的子标签，
                    都需要直接写到table中，tr需要写在这些标签当中
                    
                thead中的内容，永远会显示在表格的头部
                tfoot中的内容，永远都会显示表格的底部
                tbody中的内容，永远都会显示表格的中间
                
                如果表格中没有写tbody，浏览器会自动在表格中添加tbody
                并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素
                通过table > tr 无法选中行 需要通过tbody > tr
            -->
            <thead>
                <tr>
                    <th>日期</th>
                    <th>收入</th>
                    <th>支出</th>
                    <th>合计</th>
                </tr>
            </thead>
            
            <tfoot>
                <tr>
                    <td></td>
                    <td></td>
                    <td>合计</td>
                    <td>100</td>
                </tr>
            </tfoot>
            
            <tbody>
                <tr>
                    <td>10.24</td>
                    <td>500</td>
                    <td>300</td>
                    <td>200</td>
                </tr>
                <tr>
                    <td>10.24</td>
                    <td>500</td>
                    <td>300</td>
                    <td>200</td>
                </tr>
                <tr>
                    <td>10.24</td>
                    <td>500</td>
                    <td>300</td>
                    <td>200</td>
                </tr>
                <tr>
                    <td>10.24</td>
                    <td>500</td>
                    <td>300</td>
                    <td>200</td>
                </tr>
                <tr>
                    <td>10.24</td>
                    <td>500</td>
                    <td>300</td>
                    <td>200</td>
                </tr>
                <tr>
                    <td>10.24</td>
                    <td>500</td>
                    <td>300</td>
                    <td>200</td>
                </tr>
                <tr>
                    <td>10.24</td>
                    <td>500</td>
                    <td>300</td>
                    <td>200</td>
                </tr>
                <tr>
                    <td>10.24</td>
                    <td>500</td>
                    <td>300</td>
                    <td>200</td>
                </tr>
                <tr>
                    <td>10.24</td>
                    <td>500</td>
                    <td>300</td>
                    <td>200</td>
                </tr>
                <tr>
                    <td>10.24</td>
                    <td>500</td>
                    <td>300</td>
                    <td>200</td>
                </tr>
                <tr>
                    <td>10.24</td>
                    <td>500</td>
                    <td>300</td>
                    <td>200</td>
                </tr>
                <tr>
                    <td>10.24</td>
                    <td>500</td>
                    <td>300</td>
                    <td>200</td>
                </tr>
                <tr>
                    <td>10.24</td>
                    <td>500</td>
                    <td>300</td>
                    <td>200</td>
                </tr>
                <tr>
                    <td>10.24</td>
                    <td>500</td>
                    <td>300</td>
                    <td>200</td>
                </tr>
                <tr>
                    <td>10.24</td>
                    <td>500</td>
                    <td>300</td>
                    <td>200</td>
                </tr>
                <tr>
                    <td>10.24</td>
                    <td>500</td>
                    <td>300</td>
                    <td>200</td>
                </tr>
                <tr>
                    <td>10.24</td>
                    <td>500</td>
                    <td>300</td>
                    <td>200</td>
                </tr>
                <tr>
                    <td>10.24</td>
                    <td>500</td>
                    <td>300</td>
                    <td>200</td>
                </tr>
                <tr>
                    <td>10.24</td>
                    <td>500</td>
                    <td>300</td>
                    <td>200</td>
                </tr>
                <tr>
                    <td>10.24</td>
                    <td>500</td>
                    <td>300</td>
                    <td>200</td>
                </tr>
                <tr>
                    <td>10.24</td>
                    <td>500</td>
                    <td>300</td>
                    <td>200</td>
                </tr>
                <tr>
                    <td>10.24</td>
                    <td>500</td>
                    <td>300</td>
                    <td>200</td>
                </tr>
                <tr>
                    <td>10.24</td>
                    <td>500</td>
                    <td>300</td>
                    <td>200</td>
                </tr>
                <tr>
                    <td>10.24</td>
                    <td>500</td>
                    <td>300</td>
                    <td>200</td>
                </tr>
                <tr>
                    <td>10.24</td>
                    <td>500</td>
                    <td>300</td>
                    <td>200</td>
                </tr>
            </tbody>
            
            
            
        </table>
        
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!-- 
            以前表格更多的情况实际上是用来对页面进行布局的，但是这种方式早已被CSS所淘汰了
            表格的列数由td最多的那行决定
            表格是可以嵌套，可以在td中在放置一个表格
        -->
        
        <table border="1" width="100%">
            <tr height="100px">
                <td colspan="2"></td>
            </tr>
            <tr height="400px">
                <td width="20%"></td>
                <td width="80%">
                    <table border="1" width="100%" height="100%">
                        <tr>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr height="100px">
                <td colspan="2"></td>
            </tr>
        </table>
        
        
    </body>
</html>

表单

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!-- 
            表单的作用就是用来将用户信息提交给服务器的
                比如：百度的搜索框 注册 登录这些操作都需要填写表单
        -->
        
        
        <!--
            使用form标签创建一个表单
                form标签中必须指定一个action属性，该属性指向的是一个服务器的地址
                当我们提交表单时将会提交到action属性对应的地址    
        -->
        <form action="target.html">
            <!-- 
                使用form创建的仅仅是一个空白的表单，
                    我们还需要向form中添加不同的表单项
            -->
            
            <!-- 
                在表单中可以使用fieldset来为表单项进行分组，
                可以将表单项中的同一组放到一个fieldset中
            -->
            <fieldset>
                
                <!-- 在fieldset可以使用legend子标签，来指定组名 -->
                <legend>用户信息</legend>
                
                
                <!-- 
                    使用input来创建一个文本框，它的type属性是text
                        如果希望表单项中的数据会提交到服务器中，还必须给表单项指定一个name属性
                        name表示提交内容的名字    
                        
                    用户填写的信息会附在url地址的后边以查询字符串的形式发送给服务器
                        url地址?查询字符串
                    格式：
                        属性名=属性值&属性名=属性值&属性名=属性值&属性名=属性值
                    在文本框中也可以指定value属性值，该值将会作为文本框的默认值显示    
                -->
                <!-- 
                    在html中还为我们提供了一个标签，专门用来选中表单中的提示文字的
                    label标签
                    该标签可以指定一个for属性，该属性的值需要指定一个表单项的id值
                -->
                <label for="um">用户名</label>
                <input id="um" type="text" name="username"  /> <br /><br />
                
                <!--
                    密码框
                        - 使用input创建一个密码框，它的type属性值是password
                -->
                <label for="pwd">密码 </label>
                <input id="pwd" type="password" name="password" /> <br /><br />
            </fieldset>
            
            <fieldset >
                
                <legend>用户爱好</legend>
            
            <!--
                单选按钮
                    - 使用input来创建一个单选按钮，它的type属性使用radio
                    - 单选按钮通过name属性进行分组，name属性相同是一组按钮
                    - 像这种需要用户选择但是不需要用户直接填写内容的表单项，
                        还必须指定一个value属性，这样被选中的表单项的value属性值将会最终提交给服务器
                        
                    如果希望在单选按钮或者是多选框中指定默认选中的选项，
                        则可以在希望选中的项中添加checked="checked"属性
            -->
            性别  <input type="radio" name="gender" value="male" id="male" /><label for="male">男</label>
                <input type="radio" name="gender" value="female" checked="checked" id="female" /><label for="female">女</label> 
                <br /><br />
            
            <!-- 
                多选框
                    - 使用input创建一个多选框，它的type属性使用checkbox
            -->
            爱好     <input type="checkbox" name="hobby" value="zq" />足球
                <input type="checkbox" name="hobby" value="lq" />篮球
                <input type="checkbox" name="hobby" value="ymq" checked="checked" />羽毛球
                <input type="checkbox" name="hobby" value="ppq" checked="checked"/>乒乓球
            <br /><br />
            
            </fieldset>
            
            <!-- 
                下拉列表
                    - 使用select来创建一个下拉列表
                    下拉列表的name属性需要指定给select，而value属性需要指定给option
                    可以通过在option中添加selected="selected"来将选项设置为默认选中
                    
                    当为select添加一个multiple="multiple"，则下拉列表变为一个多选的下拉列表
            -->
            你喜欢的明星 
                <select name="star">
                    
                    <!-- 
                        在select中可以使用optgroup对选项进行分组
                            同一个optgroup中的选项是一组
                        可以通过label属性来指定分组的名字    
                    -->
                    <optgroup label="女明星">
                        <!-- 在下拉列表中使用option标签来创建一个一个列表项 -->
                        <option value="fbb">范冰冰</option>
                        <option value="lxr">林心如</option>
                        <option value="zw">赵薇</option>
                    </optgroup>
                    
                    <optgroup label="男明星">
                        <option value="zbs" selected="selected">赵本山</option>
                        <option value="ldh">刘德华</option>
                        <option value="pcj">潘长江</option>
                    </optgroup>
                    
                </select>
            
            <br /><br />
            
            <!--
                使用textarea创建一个文本域
            -->
            自我介绍  <textarea name="info"></textarea>
            
            <br /><br />
            
            <!-- 
                提交按钮可以将表单中的信息提交给服务器
                使用input创建一个提交按钮,它的type属性值是submit
                在提交按钮中可以通过value属性来指定按钮上的文字
            -->
            <input type="submit" value="注册" />
            
            <!--
                <input type="reset" />可以创建一个重置按钮，
                    点击重置按钮以后表单中内容将会恢复为默认值
            -->
            <input type="reset" />
            
            <!-- 
                使用input type=button可以用来创建一个单纯的按钮，
                    这个按钮没有任何功能，只能被点击
            -->
            <input type="button" value="按钮" />
            
            <!--
                除了使用input，也可以使用button标签来创建按钮
                这种方式和使用input类似，只不过由于它是成对出现的标签
                    使用起来更加的灵活
            -->
            <br /><br />
            <button type="submit">提交</button>
            <button type="reset">重置</button>
            <button type="button">按钮</button>
            
        </form>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
        <!-- 
            框架集和内联框架的作用类似，都是用于在一个页面中引入其他的外部的页面，
                框架集可以同时引入多个页面，而内联框架只能引入一个，
                在h5标准中，推荐使用框架集，而不使用内联框架
                
            使用frameset来创建一个框架集，注意frameset不能和body出现在同一个页面中
                所以要使用框架集，页面中就不可以使用body标签
            
            属性：
                rows，指定框架集中的所有的框架，一行一行的排列
                cols， 指定框架集中的所有的页面，一列一列的排列
                
                这两个属性frameset必须选择一个，并且需要在属性中指定每一部分所占的大小
                
                frameset中也可以再嵌套frameset
                
            frameset和iframe一样，它里边的内容都不会被搜索引擎所检索，
                所以如果搜索引擎检索到的页面是一个框架页的话，它是不能去判断里边的内容的
            使用框架集则意味着页面中不能有自己的内容，只能引入其他的页面，而我们每单独加载一个页面
                浏览器都需要重新发送一次请求，引入几个页面就需要发送几次请求，用户的体验比较差
            如果非得用建议使用frameset而不使用iframe    
                
        -->
        <frameset cols="30% , * , 30%">
            <!-- 在frameset中使用frame子标签来指定要引入的页面 
                引入几个页面就写几个frame
            -->    
            <frame src="01.表格.html" />
            <frame src="02.表格.html" />
            <!-- 嵌套一个frameset -->
            <frameset rows="30%,50%,*">
                <frame src="04.表格的布局.html" />
                <frame src="05.完善clearfix.html" />
                <frame src="06.表单.html" />
            </frameset>
        </frameset>
</html>

垂直居中

图片垂直居中

该方法只对line-block元素有效

vertical-align 只对行内元素有效

position:absolute和margin：auto 连用实现元素水平垂直居中

有时候，要实现一些元素水平垂直都居中，这部分元素呢可能大小未知，例如一些图片或者是一些未知大小的块元素。

利用绝对定位可以将要居中的元素脱离文档流.

 position: absolute;
 left:0px;
 right: 0px;
 top:0px;
 bottom: 0px;

但他的父元素要设成相对定位

position: relative;

这样设置完成后会发现子元素并没有居中。这是因为虽然脱离了文档流但是top的bottom的值是相等的。根据优先级会自动向上对齐。同理左右也是如此。

这时在要居中的元素中加上

margin:auto;

margin:auto会自动去计算子元素和父元素之间的边距，并设为居中。所以就会实现上下左右都居中。

那么还有一个问题，既然居中是有margin：auto来计算实现。为什么还需要将元素设为绝对定位呢？

这是因为margin：auto 默认只会计算左右边距。而上下如果设置为auto时默认是取0.也就是说，margin：auto和margin：0 auto 在一般情况下没有区别，不能实现垂直居中。

但是有了绝对定位后，margin-top和margin-bottom 的值就不是0了，也是通过计算所得。所以能实现垂直居中。

最后，发出完整的css类

.center{
               position: absolute;
               left:0px;
               right: 0px;
               top:0px;
               bottom: 0px;
               margin:auto;
               background: pink;
               text-align: center;
               vertical-align:middle;
    }

查看全文

相关阅读:
跨域资源共享 CORS 详解
 C# 每月第一天和最后一天
 jexus http to https
ASP.NET MVC 路由学习
 jexus
centos7 添加开机启动项
 jexus docker
HTTP2.0新特性
 jexus配置支持Owin
Autofac Named命名和Key Service服务

原文地址：https://www.cnblogs.com/aidata/p/12249301.html