前端三要素之CSS3

会咕噜咕噜的怪兽？

已于 2024-03-10 22:53:16 修改

阅读量876

点赞数 19

分类专栏：前端基础文章标签：前端 css3

于 2024-03-10 22:37:21 首次发布

本文链接：https://blog.csdn.net/weixin_57393137/article/details/136610941

版权

前端基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、什么是CSS

Cascading Style Sheets 层叠级联样式表

2、快速入门-未分离式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个css程序</title>
<!--  规范：style标签嵌套在head标签中，每个声明以分号结尾
      语法：
        选择器{
            声明1;
            声明2;
            声明3;
        }
-->
  <style>
    h1{
      color: #5241ff;
    }
  </style>
</head>
<body>
<h1>这是一个标题</h1>
</body>
</html>

3、快速入门-分离式

直接通过link标签引入到html页面中，这样子可以css专注于css，html专注于html，建议使用这种。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个css程序</title>
    <link rel="stylesheet" href="css/style.css">
<body>
<h1>这是一个标题</h1>
</body>
</html>

style.css

h1{
    color: #5241ff;
}

4、CSS的3中导入方式

内部样式
外部样式（导入式和链接式）
行内样式

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    内部样式-->
    <style>
    h1{
      color: red;
    }
  </style>
<!--    外部样式-->
    <link rel="stylesheet" href="css/style.css">
</head>
<!--优先级： 就近原则-->
<body>
<!--行内样式：在标签元素中添加style属性后编写样式即可-->
<h1 style="color: #5241ff">这是标题</h1>
</body>
</html>

index2.html 这里的导入式我的Google显示空，但是我查了语法是这样子没什么问题，找不到问题所在，推荐使用link标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--导入式-->
  <style>
    @import url(css/style.css);
  </style>
</head>
<body>
<h1>落霞与孤鹜齐飞，秋水共长天一色。</h1>
</body>
</html>

style,css

/*外部样式*/
h1{
    color: azure;
}

5、选择器

作用：选择页面上的某一个或者某一类元素。

5.1、基本选择器

5.1.1、标签选择器 : 选择一类标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style>
        /*标签选择器：选择页面上所有这个标签的元素*/
        h1{
            color: #ffe76e;
            background: beige;
            border-radius: 24px;
        }
        p{
            font-size: 100px;
        }
    </style>
</head>
<body>
<h1>滕王阁序</h1>
<h1>落霞与孤鹜齐飞，秋水共长天一色。</h1>
<p>没事儿吧，你没事儿吧。</p>
</body>
</html>

5.1.2、类选择器 class ：选择所有的class属性一致的标签，可跨标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
  <style>
    /*类选择器：
      语法：.class_name{}
      优点：可以多个标签归类使用同一class，可复用
      */
    .w{
      color: wheat;
    }
    .h{
      color: hotpink;
    }
    .b{
      color: blue;
    }
  </style>
</head>
<body>
<h1 class="w">标题1</h1>
<h1 class="h">标题2</h1>
<h1 class="b">标题3</h1>
<p class="b">段落</p>
</body>
</html>

5.1.3、id 选择器：全局唯一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
</head>
<Style>
  /*id选择器：id必须保证全局唯一
       语法：#id_name{}
       优先级：id选择器 > 类选择器 > 标签选择器
    */
  #w{
    color: blue;
  }
</Style>
<body>
<h1 id="w">标题一</h1>
</body>
</html>

5.2、高级选择器

5.2.1、层次选择器

后代选择器：在某个元素后面
子选择器：只有一代，子一代
相邻兄弟选择器：同辈
通用选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
  <style>
    /* 后代选择器*/
    body p{
      background: blue;
    }
    /* 子选择器 */
    body>p{
      background: yellow;
    }
    /* 相邻兄弟选择器 : 相邻同级对下不对上*/
    .active + p{
      background: red;
    }
    /* 通用兄弟选择器 ： 当前选中元素向下的所有兄弟元素 */
    .active~p{
      background: black;
    }
  </style>
</head>
<body>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<ul>
  <li>
    <p>p4</p>
  </li>
  <li>
    <p>p5</p>
  </li>
  <li>
    <p>p6</p>
  </li>
</ul>
</body>
</html>

5.2.2、结构伪类选择器（伪类 == 条件）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
  <!-- 禁止使用类选择器和id选择器 -->
  <style>
    /*选中ul标签中的第一个子元素*/
    ul li:first-child{
        background: red;
    }
    /*选中ul标签中的最后一个子元素*/
    ul li:last-child{
        background: blue;
    }
   /* 选中p1 ： 定位到父元素，选择当前的第一个元素
      p:nth-child(1) ： 选择当前p元素的父元素body，选中父元素的第一个，并且是当前元素才生效
      按顺序选择
   */
    p:nth-child(2){
        background: #f0ff30;
    }
   /* 选择父元素下的p元素的第二个
      按类型选择
    */
   p:nth-of-type(1){
       background: yellow;
   }
   a:hover{
       background: black;
   }
  </style>
</head>
<body>
<a href="https://www.baidu.com">点我跳转百度</a> <br>
<h>h</h>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
  <li>li1</li>
  <li>li2</li>
  <li>li3</li>
</ul>
</body>
</html>

5.2.3、属性选择器（常用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
  <style>
    .demo a{ /*后代选择器*/
      float: left; /* 设置元素向左浮动，使其左侧与其容器的内容区域左侧对齐 */
      display: block; /* 将元素显示为块级元素，使其占据一行，并允许设置宽度、高度以及其他盒模型属性 */
      height: 50px;
      width: 100px;
      border-radius: 10px; /* 设置元素的边框圆角半径为 10 像素，使边框呈现圆角效果 */
      background: yellow;
      text-align: center; /* 设置元素内文本的水平居中对齐 */
      color: black;
      text-decoration: none; /* 移除链接的下划线效果 */
      margin-right: 5px; /* 设置元素右侧的外边距为 5 像素，用于与其他元素之间的间距 */
      font: bold 20px/50px Arial; /* 设置元素内文本的字体为 Arial，字体粗细为粗体，字体大小为 20 像素，行高为 50 像素 */
    }
   /*   = 绝对等于
        *= 包含这个元素
        ^= 以……开头
        $= 以……结尾
    */
   /* 选中存在id属性的元素 a[ 属性名 ]{} */
    a[id]{
      background: black;
    }
    /* 选中id = first 的元素 a[属性名 = 属性值（可写正则表达式）]{}*/
    a[id = first]{
      background: green;
    }
   /* 选中class中有links的元素 */
    a[class *= links]{
      background: green;
    }
    /* 选中href中以https开头的元素 */
    a[href ^= https]{
      background: green;
    }
    /* 选中href中以doc结尾的元素 */
    a[href $= doc]{
      background: blue;
    }
  </style>
</head>
<body>
<p class="demo">
  <a href="https://www.baidu.com" class="links item first" id="first">百度</a>
  <a href="https://www.csdn.net" class="links item active" target="_blank" title="Null">CSDN</a>
  <a href="images/123.html" class="links item">123.html</a>
  <a href="images/123.png" class="links item">123.png</a>
  <a href="images/123.jpg" class="links item">123.jpg</a>
  <a href="abc" class="links item">abc</a>
  <a href="/abc.pdf" class="links item">/abc.pdf</a>
  <a href="/abc.doc" class="links item">/abc.doc</a>
  <a href="abc.doc" class="links item">abc.doc</a>
  <a href="abcd.doc" class="links item last">abcd.doc</a>
</p>
</body>
</html>

6、美化网页元素

6.1、span标签：重点要突出的字，使用span标签套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>span标签学习</title>
    <style>
        #tips{
            font-size: 66px;
        }
    </style>
</head>
<body>
恭喜你做了一个很正确且有趣的决定：<span id="tips">学习前端-CSS3</span>
</body>
</html>

6.2、字体样式 font

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式学习</title>
  <!--  font-family:字体
        font-size:字体大小
        font-weight:字体粗细
        color:字体颜色
   -->
  <style>
    body{
      font-family: "Arial Black" , 楷体;
      color: green;
    }
    h1{
      font-size: 66px;
    }
    .p1{
      font-weight: bold;
    }
    /* font : 斜体 粗细 大小 字体 */
    .p3{
      font: oblique bolder 12px "楷体";
    }
  </style>
</head>
<body>
<h1>滕王阁序</h1>
<h6>王勃</h6>
<p class="p1">
  豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。
</p>
<p>
  时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。层峦耸翠，上出重霄；飞阁流丹，下临无地。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。
</p>
<p class="p3">
  披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。闾阎扑地，钟鸣鼎食之家；舸舰弥津，青雀黄龙之舳。云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。渔舟唱晚，响穷彭蠡之滨；雁阵惊寒，声断衡阳之浦。
</p>
<p>
  JavaSE HTML CSS JavaScript JavaWeb JavaEE Vue SpringBoot
</p>
</body>
</html>

6.3、文本样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式</title>
  <!-- 颜色color ：单词
                 RGB ：0~F
                 RGBA中的A透明度： 0~1
       text-align : 排版 针对左右
       text-indent: 2em; 首行缩进两个字符，一个em代表一个字符
       行高 = 块高 ： 上下居中
       text-decoration : underline 下划线
                         line-through 中划线
                         overline 上划线
       vertical-align: middle 垂直居中
   -->
  <style>
    h1{
      color: rgba(0,255,255,0.5);
      text-align: center;
    }
    p{
      text-indent: 2em;
    }
    .p1{
        text-decoration: underline;
    }
    .p2{
        text-decoration: line-through;
    }
    .p3{
      height: 30px; /* 块高 */
      line-height: 30px; /* 行高 */
      text-decoration: overline;
    }
    img,span{
        vertical-align: middle;
    }
  </style>
</head>
<body>
<h1>滕王阁序</h1>
<p class="p1">
  豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。
</p>
<p class="p2">
  时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。层峦耸翠，上出重霄；飞阁流丹，下临无地。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。
</p>
<p class="p3">
  披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。闾阎扑地，钟鸣鼎食之家；舸舰弥津，青雀黄龙之舳。云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。渔舟唱晚，响穷彭蠡之滨；雁阵惊寒，声断衡阳之浦。
</p>
<p>
    <img src="images/background.jpg" alt="">
    <span>落霞与孤鹜齐飞，秋水共长天一色。</span>
</p>
</body>
</html>

6.4、超链接伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接伪类学习</title>
  <style>
    /* 默认的颜色 */
    a{
      text-decoration: none;
      color: black;
    }
    /* 鼠标悬停时的颜色 状态 */
    a:hover{
      color: blue;
      font-size: 20px;
    }
    /* 鼠标按住不松时的颜色 */
    a:active{
      color: green;
    }
    /* text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径*/
    #price{
        text-shadow: yellow 5px 5px 5px;
    }
  </style>
</head>
<body>
<p>
  <img src="images/mcgx.png" alt="">
</p>
<p>
  <a href="#">码出高效：Java开发手册</a>
</p>
<p>
  <a href="#">作者：孤尽老师</a>
</p>
<p id="price">
  <a href="#">￥99</a>
</p>
</body>
</html>

6.5、列表

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
  <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="nav">
  <h2 class="T">全部商品分类</h2>
  <ul>
    <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
    <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
    <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
    <li><a href="#">家具</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
    <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个性化妆</a></li>
    <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
    <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
    <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li>
  </ul>
</div>
</body>
</html>

style.css

#nav{
    width: 260px;
    background: whitesmoke;
}
.T{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 30px;
    background: red;
}
/* list-style:
              none 去掉原点
              circle 空心圆
              decimal 数字
              square 正方形
 */
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}
a{
    color: black;
    text-decoration: none;
    font-size: 14px;
}
a:hover{
    color: blue;
    text-decoration: underline;
}

6.6、背景

6.6.1、背景颜色

合并式

/* 颜色 图片 图片坐标 平铺方式 */
    background: red url("../images/down.png") 270px 10px no-repeat;

散开式

background-image: url("../images/right.png");
background-repeat: no-repeat;
background-position: 200px 2px;

6.6.2、背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景</title>
  <style>
    /* 默认全部平铺 repeat */
    div{
      width: 1000px;
      height: 800px;
      border: 1px solid red; /* border边框 ： 边框粗细 实线 颜色 */
      background-image: url("images/background.jpg");
    }
    .first{
      background-repeat: repeat-x; /* 水平平铺 */
    }
    .second{
      background-repeat: repeat-y; /* 垂直平铺 */
    }
    .third{
      background-repeat: no-repeat; /* 不平铺 */
    }
  </style>
</head>
<body>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</body>
</html>

6.6.3、渐变色

<style>
  body{
    /* 也可以这么写
     background-color: #FFFFFF;
     background-image: linear-gradient(115deg, #FFFFFF 0%, #6284FF 50%, #FFF000 100%);
     */
    background: linear-gradient(115deg, #FFFFFF 0%, #6284FF 50%, #FFF000 100%);
  }
</style>

7、盒子模型

7.1、什么是盒子模型？

margin ：外边距
padding ：内边距
border ：边框

7.2、边框border

边框的粗细
边框的样式
边框的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        <!-- 网页原生属性都默认有内外边距 -->
        h1,ul,li,a,body{
            margin: 0;
            padding: 0;
        }
        h2{
            font-size: 16px;
            background-color: green;
            margin: 0;
            line-height: 30px;
        }
        #app{
            width: 300px;
            border: 1px solid black; /* 边框 ： 粗细 实线 颜色 */
        }
        form{
            background-color: green;
        }
        div:nth-of-type(1) input{
            border: 1px solid blue;
        }
        div:nth-of-type(2) input{
            border: 1px dashed yellow; /* dashed : 边框虚线 */
        }
    </style>
</head>
<body>
<div id="app">
    <h2>用户登录</h2>
    <form action="https://www.baidu.com">
        <div style="text-align: left; line-height: 30px">
            <span>账号：</span>
            <input type="text" name="username" />
        </div>
        <div style="text-align: left; line-height: 30px">
            <span>密码：</span>
            <input type="password" name="password" />
        </div>
        <div style="text-align: center; line-height: 60px">
            <input type="submit" name="Login" value="登录" />
            <input type="button" name="forget" value="忘记密码" />
        </div>
    </form>
</div>
</body>
</html>

7.3、内外边距 margin padding

盒子的计算方式：即当前这个元素到底有多大面积

S = margin + border + padding + 内容宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距</title>
    <style>
        #app{
            width: 300px;
            border: 1px solid black; /* 边框 ： 粗细 实线 颜色 */
            margin: 0 auto;
        }
        /* margin和padding遵循顺时针旋转
                margin : 0 上下和左右都为0
                margin : 0 1px 上下边距为0，左右边距为1px
                margin: 0 1px 2px 3px 上 右 下 左边
         */
        h2{
            font-size: 16px;
            background-color: green;
            margin: 0;
            line-height: 30px;
            color: white;
            margin: 0 1px 2px 3px;
        }
        form{
            background-color: green;
        }
        input{
            border: 1px solid black;
        }
        div:nth-of-type(1){
            padding: 5px;
        }
    </style>
</head>
<body>
<div id="app">
    <h2>用户登录</h2>
    <form action="https://www.baidu.com">
        <div>
            <span>账号：</span>
            <input type="text" name="username" />
        </div>
        <div>
            <span>密码：</span>
            <input type="password" name="password" />
        </div>
        <div>
            <input type="submit" name="Login" value="登录" />
            <input type="button" name="forget" value="忘记密码" />
        </div>
    </form>
</div>
</body>
</html>

7.4、圆角边框

1.边框圆角.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框圆角</title>
  <style>
    /* border-radius: 50px 40px 30px 20px 左上 右上 右下 左下 依然遵循顺时针
                     圆圈 ： 圆角 = 半径
     */
    div{
      width: 100px;
      height: 100px;
      border: 10px solid black;
      border-radius: 50px 40px 30px 20px;
    }
  </style>
</head>
<body>
<div></div>
</body>
</html>

2.圆形（可以利用网页作图）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆形</title>
    <style>
        div{
            width: 50px;
            height: 50px;
            margin: 30px;
            background-color: blue;
            border-radius: 50px 0 0 0;
        }
        img{
            border-radius: 500px;
        }
    </style>
</head>images
<body>
<div></div>
<img src="images/background.jpg" alt="">
</body>
</html>

7.5、阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阴影</title>
  <style>
    img{
      border-radius: 50px;
      box-shadow: 10px 10px 100px yellow;
    }
  </style>
</head>
<body>
<!-- margin: 0 auto : 居中
     要求 : 只有块元素中才可以，body标签中无边界
 -->
<div style="height: 377px; width: 477px; margin: 0 auto;">
  <img src="images/background.jpg" alt="">
</div>
</body>
</html>

8、浮动

8.1、display(是一种实现行内元素排列的方式,但多数情况都是用float)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display</title>
  <style>
    /* display:
              block : 块元素
              inline : 行内元素
              inline-block : 是块元素但可以内联，在一行
              none : 消失
     */
    div{
      width: 100px;
      height: 100px;
      border: 1px solid black;
      display: inline;
    }
    span{
      width: 100px;
      height: 100px;
      border: 1px solid black;
      display: block;
    }
  </style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>

8.2、float（左右浮动）

float : left
float : right

8.3、父级边框塌陷的问题

8.3.1、clear

/* clear :
            right : 右侧不允许有浮动元素
            left : 左侧不允许有浮动元素
            both : 两侧不允许有浮动元素
            none : 可以浮动
*/

8.3.2、解决方案

1、增加父级元素的宽高

#father{
    border: 1px #000 solid;
    height: 800px;
}

2、增加一个空的div标签且清除浮动

<div class="clear"></div>
.clear{
    clear: both;
    margin: 0;
    padding: 0;
}

3、增加overflow(hidden:隐藏；scroll/auto：溢出有滚动条)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>overflow</title>
  <style>
    #content{
      width: 200px;
      height: 200px;
      overflow: scroll;
    }
  </style>
</head>
<body>
<div id="content">
  <img src="images/little.png" alt="">
  <p>
    落霞与孤鹜齐飞，秋水共长天一色。
  </p>
</div>
</body>
</html>

4、为父类添加一个伪类

#father:after{
    content: '';
    display: block;
    clear: both;
}

9、定位

9.1、相对定位（position: relative 相对原来位置进行指定偏移,原位置会被保留）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 0;
            padding: 0;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid black;
            padding: 0;
        }
        .first{
            background-color: red;
            border: 1px dashed red;
            position: relative; /* 相对定位 ：上下左右 */
            top: -20px;
            left: 20px;
        }
        .second{
            background-color: orange;
            border: 1px dashed orange;
        }
        .third{
            background-color: yellow;
            border: 1px dashed yellow;
            position: relative;
            bottom: -50px;
            right: 50px;
        }
    </style>
</head>
<body>
<div id="father">
  <div class="first">第一个盒子</div>
  <div class="second">第二个盒子</div>
  <div class="third">第三个盒子</div>
</div>
</body>
</html>

9.2、绝对定位（position: absolute ：相对父级或者浏览器进行指定偏移,原位置不会被保留）

在没有父级元素的前提下，相对于浏览器定位
假设父级元素存在定位，通常会相对于父级元素进行偏移定位
在父级元素范围内移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 0;
            padding: 0;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid black;
            padding: 0;
            position: relative;
        }
        .first{
            background-color: red;
            border: 1px dashed red;
        }
        .second{
            background-color: orange;
            border: 1px dashed orange;
            position: absolute;
            top: 20px;
            left: 50px;
        }
        .third{
            background-color: yellow;
            border: 1px dashed yellow;
        }
    </style>
</head>
<body>
<div id="father">
  <div class="first">第一个盒子</div>
  <div class="second">第二个盒子</div>
  <div class="third">第三个盒子</div>
</div>
</body>
</html>

9.3、固定定位 fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
  <style>
    body{
      height: 1000px;
    }
    div:nth-of-type(1){
      width: 100px;
      height: 100px;
      background-color: green;
      position: absolute; /* 绝对定位 ： 相对于浏览器 */
      right: 0;
      bottom: 0;
    }
    div:nth-of-type(2){
      width: 50px;
      height: 50px;
      background-color: yellow;
      position: fixed; /* 固定定位 ： fixed */
      right: 0;
      bottom: 0;
    }
  </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

9.4、z-index 图层

index .html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="app">
  <ul>
    <li><img src="images/little.png" alt=""></li>
    <li class="tipText">小小的</li>
    <li class="tipImage"></li>
    <li>时间：6060-01-01</li>
    <li>地点：光之国</li>
  </ul>
</div>
</body>
</html>

style.css

ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}
#app{
    margin: 0;
    padding: 0;
    width: 640px;
    height: 800px;
    font-size: 12px;
    line-height: 25px;
    overflow: hidden;
    border: 1px solid black;
}
#app ul{
    position: relative;
}
.tipText, .tipImage{
    position: absolute;
    width: 640px;
    height: 25px;
    top: 615px;
}
.tipText{
    color: white;
    z-index: 999; /* 图层从0~无穷大，0在最下面 */
    text-align: center;
}
.tipImage{
    background: black;
    opacity: 0.5; /* 背景透明度 范围：0~1 */
    filter: alpha(opacity = 50); /* 等同于opacity: 0.5; 但是仅限于IE8及更早之前的浏览器 */
}