学习前端html5和css3笔记六

小瑜蔬食

已于 2023-04-30 18:18:52 修改

阅读量171

点赞数

文章标签：前端 html5 学习 Powered by 金山文档

于 2023-02-08 01:47:04 首次发布

本文链接：https://blog.csdn.net/weixin_53178802/article/details/128928656

版权

1-案例练习.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

    /* 07- 来到内嵌css里用通配符选择器清除内外边距和项目符号并把文字风格设置为正常  。
        */
    * {
      padding: 0;
      margin: 0;
      list-style: none;
      font-style: normal;
    }
    /* 08- 給类选择器.wrap宽度1000px，高450px，边框和盒子在页面居中 。 */
    .wrap {
      width: 1000px;
      height: 500px;
      /* border: 1px solid; */
      margin: 50px auto;
    }
    
    /* 09- 給类选择器.top高40px，边框以及边框宽度和颜色，給字体行高40px 。 */
    .top {
      height: 40px;
      border-bottom: 3px solid #64CEDD;
      line-height: 40px;
    }
    /* 010- 給标签选择器span字体大小20px，字体颜色蓝色，字体粗细: 粗体; */
    span {
      font-size: 20px;
      color:#64CEDD ;
      font-weight: bold;
    }

    /* 011- 給标签选择器em字体颜色，字体大小14px，左外边距20px 。 */
    em {
      color: #ccc;
      font-size: 14px;
      margin-left: 20px;
    }

    /* 012- 給类选择器.center高度40px，再給一个边框 。 */
    .center {
      height: 40px;
      border: 1px solid;
    }

    /* 013- 标签选择器li左浮动，上外边距7px，左外边距15px，字体颜色，背景颜色蓝色，内边距上下为3px左右为10px，内边距是
    可以绘制背景颜色的。*/
    li {
      float: left;
      margin-top: 7px;
      color: #333;
      margin-left: 15px;
      /* background-color: #3BB0D0; */
      padding: 3px 10px;
    }
    /* 014- 給标签选择器.right右浮动和内边距上下为3px左右为0px 。*/
    .right {
      float:right;
      padding: 3px 0;
    }

  /* 015- 因为ul li 清除浮动是写在ul上，所以在html里的ul上面清除浮动写上<ul class="clearfix">，并且在css用伪元素清除浮动 。 */
    .clearfix::after {
      content: '';
      display: block;
      clear: both;
    }

  /* 016- 給类选择器.first也就是第一个li盒子左外边距为0px 。 */
    .first {
      margin-left: 0px;
    }

  /* 017- 把上面的li的背景颜色注释掉后，
  写鼠标移入li:hover里給鼠标移入时背景颜色蓝色，鼠标移入变小手，鼠标移入字体颜色变白色 。 */
    li:hover {
      background-color: #3BB0D0;
      cursor: pointer;
      color: white;
    }
    
  /* 018- 給类名.right鼠标移入背时背景颜色为白色，字体颜色为蓝色 。 */
    .right:hover {
      background-color: #fff;
      color:  #3BB0D0;
    }

  /* 019- 給img标签选择器左浮动，方便所有图片向左对齐，給所有图片一个左外边距63px 。 */
    img {
      float: left;
      margin-left: 63px;
    }

  /* 020- 給粉红色花的图片一个右浮动 。 */
    .flower {
      float: right;
    }
  /* 021- 給第一张图片左外边距清零 。 */
    .vegan{
      margin-left: 0px;
    }
  
  /* 022- 遗漏补充：在html里面清除掉div bottom的浮动这个盒子的高度才会是正常,不为0。
    所以在在html里面写上<div class="bottom clearfix"> 。 */

  /* 023- 注释掉 .wrap的边框 。 */
  </style>
</head>
<body>
<!-- 01- 給div大盒子类名为wrap 。-->
  <div class="wrap">
<!-- 02- wrap里面嵌套了div类名为top 。 -->
    <div class="top">
<!-- 03- top里面嵌套了span并給出内容：骆驼书，em并給出内容：读骆驼书，行万里路 。 -->
       <span>骆驼书</span>
      <em>读骆驼书，行万里路</em>
    </div>
<!-- 04- wrap里面嵌套了div，类名为center 。 -->
    <div class="center">
<!-- 05- center里面嵌套了ul li，li里面給出了不同的内容分别是专题、亚洲、欧洲、北美洲、大洋洲、更多 ，
  并給第一个li类名为first，最后一个li类名为right 。 -->
      <ul class="clearfix">
        <li class="first">专题</li>
        <li>亚洲</li>
        <li>欧洲</li>
        <li>北美洲</li>
        <li>大洋洲</li>
        <li class="right">更多 &gt;</li>
      </ul>
    </div>
<!-- 06- wrap里面嵌套了div 类名为img ，  imgs里面又嵌套了四个img标签并給出图片 。
    第一个img类名为vegan，第二个img类名为love，第三个img类名为tree，第四个img类名为flower，并且給每个图片宽高。 -->
    <div class="bottom clearfix">
      <img src="./img/vegan.jpg" alt="" class="vegan" width="200" height="300">
      <img src="./img/love.jpg" alt="" class="love" width="200" height="300">
      <img src="./img/树.jpg" alt="" class="tree" width="200" height="300">
      <img src="./img/鸡蛋花.jpg" alt="" class="flower" width="200" height="300">
    </div>


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

2- 定位.html

<!-- 
  01- 背景图上面才可以直接放其它图片盒子，
  img图片上面不能直接放其它图片盒子，
  所以如本图如何让其它图片盒子盖在img图片身上呢？
  当一个盒子盖在另外一个盒子身上的时候，就需要用定位。  
  -->

<!-- 
  
  02- 定位
A.定位的应用场景和基本原理。
B.定位的原理。
C.在本文流中 , 任何一个标签都被文本流所限制了
自身的位置 , 但是通过 CSS 我们依然使得这些标
签可以改变 自己的位置 , 我们可以通过 float 来让
标签浮动 , 我们也可以通过 margin 来让标签产生位
置移动。 CSS 定位属性，允许定义标签框相对于其正
常位置应该出现的位置，或者相对于父标签、 另一个
标签甚至浏览器窗口本身的位置。标签可以使用顶部、底
部、左侧和右侧属性定义具体的位置。

D.position

- position static默认静态定位
- 默认的定位位置，不写就是静态定位。

- position relative相对定位
- 相对于自己本身移动(原来的位置保持不变，也不占用新的位置，不会影响页面布局）。

- position absolute绝对定位
- 子绝父相（当找不到父标签有相对定位的时候，就会继续向上找）
- 相对于父标签（父标签相对定位，子标签绝对定位）
- 脱离文档流也脱离文本流，也就是说图片，文字，输入框会到绝对定位下面。

- position fixed固定定位
- 相对于浏览器窗口
- 不会随着滚动条滚动。 

- 总结一下position
| 定位              | 是否脱标 | 参考点             | 参数                  |
| ----------------- | --------| ----------------- | --------------------- |
| position static   | 否      | 无                 |                       |
| position relative | 否      | 自己本身           | left,right,top,bottom |
| position absolute | 是      | 父标签（子绝父相）  | left,right,top,bottom |
| position fixed    | 是      | 浏览器窗口         | left,right,top,bottom |
-->

3-静态定位.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  /* 02- 来到内嵌css里給标签选择器div宽和高还有背景颜色 。
   */
    div {
      width: 200px;
      height: 200px;
      background-color: pink;

  /* 03-  給标签选择器div设置静态定位，设置静态定位并且給了左500px和上500px之后，发现盒子没有移动
  也就是说静态定位默认值是原地不动  。
  */
      position: static;
      left: 500px;
      top: 500px; 
    }
  </style>
</head>
<body>

<!-- 01- 給一个div 。-->
  <div></div>

</body>
</html>

4-相对定位.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
/* 02- 来到内嵌css里清除内外边距 。 */
    * {
      padding: 0;
      margin: 0;
    }
     
/* 03- 标签选择器div里給出宽高和背景颜色  。  */
    div {
      width: 200px;
      height: 200px;
      background-color: #909;

/* 05- 給div标签选择器设置相对定位向左100px，向下100px。
    相对定位，相对于自己本身定位，自己本身的位置保留空在那里，
    不占用新的位置，不会影响页面布局，它自己动的时候其它盒子不会动 。*/
      position: relative;
      left: 100px;
      top: 100px;
    }

  /* 04- 标签选择器p里給出宽高和背景颜色  。 */
    p {
      width: 400px;
      height: 400px;
      background-color: #009;
    }
  </style>
</head>
<body>
<!-- 01- 给一个div，下面排列一个p标签 。 -->
  <div>div</div>
  <p>p</p>


    <!--
      01- 给一个div，下面排列一个p标签 。 
      02- 来到内嵌css里清除内外边距 。  
      03- 标签选择器div里給出宽高和背景颜色  。
      04- 标签选择器p里給出宽高和背景颜色  。 
      05- 給div标签选择器设置相对定位向左100px，向下100px。
    相对定位，相对于自己本身定位，自己本身的位置保留空在那里，
    不占用新的位置，不会影响页面布局，它自己动的时候其它盒子不会动 。
    -->
</body>
</html>

5-图片相对定位.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

  /* 02- 在内嵌css里面給类选择器.box宽高和边框以及居中 。 */
    .box {
      width: 300px;
      height: 400px;
      border: 10px solid;
      margin: 100px auto;
    }
  
  /* 03- 給标签选择器img图片设置宽度百分百，高度百分百 。 */
    img {
      width: 100%;
      height: 100%;

  /* 04- 給标签选择器img图片设置 相对定位，top:20px; left:20px 。 */
      position: relative;
      top: 20px;
      left: 20px;
    }

  </style>
</head>
<body>

<!-- 01- 給一个div,类名为box，里面嵌套一个img并且給img一个绝对路径 。 -->
  <div class="box">
    <img src="https://img2.baidu.com/it/u=3175078213,2289478130&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
  </div>


</body>
</html>

6-绝对定位.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
 /* 02- 在内嵌css里給通配符选择器清除内外边距。 */
 *{
    padding: 0;
    margin: 0;
 }

 /* 03- 給div标签选择器宽200像素高200像素和背景颜色紫色 。 */
 div{
    width: 200px;
    height: 200px;
    background-color: #909;

/* 05- 給div标签选择器绝对定位top:100px;left: 100px; 
       绝对定位是自己本身的位置不存在，也不占用新的位置 。
 */

    position: absolute;
    top:100px;
    /* left: 100px;  */

/* 06- 注释掉div标签选择器绝对定位left: 100px; 写一个right: 0px;
    top：100px不变;
    相对于父标签，在父标签范围内去定位，如果父标签没有相对定位属性，
    子标签就继续向上层找父标签，找不到父标签就找body为父标签，
    这里就是以body为父标签 。
         */
    right: 0px;
 
   
 }

 /* 04- 給p标签选择器宽400像素高400像素背景颜色黄色 。 */
 p{
    width: 400px;
    height: 400px;
    background-color: yellow;
 }
    </style>
    
</head>
<body>
    <!-- 01- 給个div再給一个p标签 。-->
    <div>div</div>
    <p>p</p>

</body>
</html>

7- 父相子绝.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    /* 02- 在内嵌css里給通配符选择器清除内外边距。 */
        *{
    padding: 0;
    margin: 0;
         }
    /* 03- 給父盒子标签选择器.father宽400px,高400px以及边框 。 */
    .father{
        width: 400px;
        height: 400px;
        border: 10px solid;
    /* 06- 給父盒子标签选择器.father加相对定位position: relative 。    */
        position: relative;
    }

    /* 04- 給子盒子类选择器.son宽200像素,高200像素和背景颜色紫色 。 */
  .son{
    width: 200px;
    height: 200px;
    background-color: #909;

    /* 05- 給子盒子类选择器.son绝对定位top:100px;right:0px 。*/
    /* position: absolute; */
    top:100px;
    right:0px;
    
}

/* 08- 給类选择器.small 一个宽100px，高100px，背景颜色红色 。 */
 .small{
    width: 100px;
    height: 100px;
    background-color: red;
/* 09- 給类选择器.small 一个绝对定位right: 0px;top:100px，
    第三层嵌套的小盒子.small的上级只需要有一个定位即可，无论是绝对还是相对，
    第三层小盒子的绝对定位都在自己的上级盒子内起作用 。*/
    position: absolute;
    right: 0px;
    top:100px;
 }

 /* 010- 注释掉子盒子.son的绝对定位后，小盒子.small的绝对定位就会向上上一级找
    ，绝对定位会在上上级的父盒子区域内起作用 。
 */

 /* 011- 最后注释： 父相子绝：父标签相对定位,子标签绝对定位。
         第三层嵌套盒子的上级只能设置一种定位， 
         第三层嵌套盒子的上级无论哪种定位都能帮助其自己类.small绝对定位实现活动范围 。
 */

        
    </style>
</head>
<body>
    <!-- 01- 給一个div父盒子类名为father，
    里面嵌套了div子盒子类名为son 。-->
    <div class="father">
    <div class="son">
    <!-- 07- 在div子盒子里嵌套一个小div盒子类名为small 。 -->
    <div class="small"></div>    
    </div>
    </div>

 
    
</body>
</html>

8- 绝对定位的特点.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 02- 来到内嵌css里用通配符选择器清除内外边距 。 */
        *{
             padding: 0;
             margin: 0;
        }
        /* 03- 給div标签选择器宽高和背景颜色 。 */
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        /* 05- 給div标签选择器加上绝对定位后，发现div自身脱离了文档流,
        整个页面就是一个文档。 */
        position: absolute;
        }
        /* 04- 給p标签选择器宽高和背景颜色 。 */
        p{
            width: 400px;
            height: 400px;
            background-color: blue;
        }


    </style>
</head>
<body>
    <!--  01- 給一个div下面垂直排列再給一个p标签 。 -->
    <div>div</div>

    <!-- 06- div标签下面垂直排列一个input标签，再給一个图片标签并且給出图片绝对地址和文字内容 。   -->
  <input type="text" name="" id="">
  <img src="https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3100065911,3169492079&fm=58" alt="">诸葛亮（181－234），字孔明，号卧龙（也作伏龙），汉族，徐州琅琊阳都（今山东临沂市沂南县）人，三国时期蜀汉丞相，杰出的政治家、军事家、散文家、书法家、发明家。在世时被封为武乡侯，死后追谥忠武侯，东晋政权因其军事才能特追封他为武兴王。
    <p>p</p>

    <!-- 07- 在控制台里改变一下div粉色盒子的透明度 ，
    发现input框和图片文字盒子这些属于文本的都会到有绝对定位的div粉色盒子的下方，
    意思就是绝对定位的特点是脱离文本流又脱离文档流 。 -->


</body>
</html>

9- 父相子绝案例.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    /* 02- 来到内嵌css里面清除内外边距 。 */
        *{
            padding: 0;
            margin: 0;
        }
    /* 03- 给类选择器.wrap大盒子宽度1200px,高度460px ，居中 。 */
    .wrap{
            width: 1200px;
            height: 460px;
            margin: 50px auto;
            position: relative;
        }
    /* 04- 给类选择器.left宽234px，高460px,给一个透明色 ，加上绝对定位 ， top: 0; 。*/
    .left{
        width: 234px;
        height: 460px;
        background-color: rgba(0,0,0,.5);
        position: absolute;
        top: 0;

    }

    /* 05- 在ps里测量好精灵图的宽高  。 */

    /* 06- 给类选择器.arrow_l刚刚测量好的宽高和用背景图引入精灵图  。*/
    .arrow_l{
     width: 40px;
     height: 69px;
     background-image: url(./img/icon-slides.png);
    /* 07- ps里测量所需要的图片的距离左边的距离是83px  。 */
    /* 08- 给类选择器.arrow_l背景-位置-83px 。*/
    background-position: -83px;

    /* 010- 给类选择器.arrow_l绝对定位left:234px;top:200px 。*/
    position: absolute;
    left:234px;
    top:200px;

    } 

    /* 013- 給左边箭头写鼠标移入变深色，只需要改变背景-定位的值就可以了 ，再加上鼠标移入变小手 。 */
    .arrow_l:hover {
      background-position: 0px;
      cursor: pointer;
    }
    /* 014- 給右边箭头写鼠标移入变深色，只需要改变背景-定位的值就可以了 ，再加上鼠标移入变小手 。 */
    .arrow_r:hover {
      background-position: -41px;
      cursor: pointer;
    }

    /* 09- 给类选择器.arrow_r刚刚测量好的宽高和用背景图引入精灵图以及ps里测量好的背景-位置  。*/
    .arrow_r{
      width: 40px;
      height: 69px;
      background-image: url(./img/icon-slides.png);
      background-position: -123px;

    /* 011- 给类选择器.arrow_r绝对定位right:0px;top:200px 。 */
    position: absolute;
    right:0px;
    top:200px;


    }

    /* 012- 给img标签选择器宽度100%，高度100% 。 */

    img{
        width: 100%;
        height: 100%;
    }
    </style>
</head>
<body>
    <!-- 01- 给一个大盒子类名为wrap，里面嵌套一个图片给图片绝对路径,
        wrap还嵌套一个div类名为left,wrap再嵌套一个arrow_l和arrow_r 。 -->
    <div class="wrap">
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/94138ec5502b60531e5e4a7793097cc4.jpg?thumb=1&w=1226&h=460&f=webp&q=90" alt="">
        <div class="left"></div>
        <div class="arrow_l"></div>
        <div class="arrow_r"></div>
    </div>

 
</body>
</html>

10-固定定位.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

/* 02- 来到内嵌css里面用通配符选择器清除内外边距 。 */
    * {
      padding: 0;
      margin: 0;
     
    }

/* 03- 给标签选择器div宽200px;高200px;背景颜色绿色 。   */
    div {
      width: 200px;
      height: 200px;
      background-color: #090;

/* 05- 给标签选择器div固定定位 
      left: 100px; top: 100px;
     */
      position: fixed;

/* 06- 给标签选择器div的固定定位 
       right: 20px; bottom: 20px;
     */
      right: 20px;
      bottom: 20px;

    }

/* 04- 给标签选择器p宽400px;高400px;背景颜色紫色  。  */

/* 07- 将p标签的高度改为3000px，出现滚动条  。*/
    p {
      width: 400px;
      height: 3000px;
      background-color: #909;
    }
/* 
    08- 解释position fixed固定定位：
  它相对于浏览器窗口，本身位置没有了，
  自己也不会占用新的位置，悬浮起来，不会随着滚动条移动  。 */
  </style>
  <!-- 01- 给一个div，垂直向下排列一个p标签给出文字内容  。-->
  <div></div>
  <p>先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
    宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。
    侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。
    将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。
  </p>




</body>
</html>

11-定位居中技巧一.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

  /* 02- 再内嵌css里面清除内外边距  。 */
    * {

      padding: 0;
      margin: 0;
    
    }

  /* 03- 给类选择器.wrap宽567px;高467px,背景颜色亮粉红色，居中，给父盒子一个绝对定位(父相子绝)  。*/
    .father {
      width: 567px;
      height: 467px;
      background-color: lightpink;
      margin: 100px auto;
      position: relative;
    }

  /* 04- 给类选择器.son宽200px;高200px;背景颜色紫色，给子盒子一个相对定位(父相子绝)  。 */
    .son {
      width: 200px;
      height: 200px;
      background-color: #909;
      position: absolute;

  /* 
  05- 定位居中方法一：给子盒子的绝对定位top: 50%; left: 50%; 
  自身宽度的一半margin-left: -100px; 
  自身高度的一半margin-top: -100px 。
  */
      top: 50%;
      left: 50%;
      margin-left: -100px;
      margin-top: -100px;
  /* 06- 在控制台里缩小大盒父的高度和高度，发现子盒子不会变化依然水平垂直居中 。 */
    }
  </style>
</head>
<body>
<!-- 01- 给一个div类名为.father,里面嵌套一个div类名为.son 。 -->
  <div class="father">
  <div class="son"></div>
  </div>



</body>
</html>

12-定位居中技巧二.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

  /* 02- 再内嵌css里面清除内外边距  。 */
    * {

      padding: 0;
      margin: 0;
    
    }

  /* 03- 给类选择器.wrap宽567px;高467px,背景颜色亮粉红色，居中，给父盒子一个绝对定位(父相子绝)  。*/
    .father {
      width: 567px;
      height: 467px;
      background-color: lightpink;
      margin: 100px auto;
      position: relative;
    }

  /* 04- 给类选择器.son宽200px;高200px;背景颜色紫色，给子盒子一个相对定位(父相子绝)  。 */
    .son {
      /* width: 200px;
      height: 200px; */

  /* 06- 改子盒子的宽为100px高为150px后发现方法二比方法一更加的便捷,改自己的宽高不需要修改margin的值 。     */
      width: 100px;
      height: 150px;
      background-color: #909;
      position: absolute;


 /* 05- 定位居中技巧方法二:給子盒子的绝对定位top: 0;left: 0;right: 0;margin: auto 。 */
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
  </style>
</head>
<body>
<!-- 01- 给一个div类名为.father,里面嵌套一个div类名为.son 。 -->
  <div class="father">
  <div class="son"></div>
  </div>

</body>
</html>

13- 总结定位的属性.html

14- z-index层级属性.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    /* 02- 在内嵌css里面清除内外边距；  */
    *{
        padding: 0;
        margin: 0;
     }
    /* 03- 在内嵌css里给div宽200，高200； */
    div{
        width: 200px;
        height: 200px;
    }
    /* 04- 在内嵌css里分别給出div的box1，box2，box3背景颜色黄，紫，绿； */
    /* 05- 在内嵌css里给box1相对定位left:100px,top:100px;
    给box2相对定位left：200px；给box3相对定位left：300px；top：-50； */
    .box1{
     background-color: yellow;
     position: relative;
     left: 100px;
    /* 06- 现在三个盒子的层级指数z-index都为0，因为我想要紫色盒子到上面来，
    所以给box2一个z-index：1； */
     top:100px;

    /* 08- 给box1一个z-index：3； */
    z-index: 3;
    }
    .box2{
     background-color: purple;
     position: relative;
     left: 200px;
     z-index: 1;
    }
    /* 07- 给box3一个z-index：2； */
    .box3{
    background-color: green;
    position: relative;
    left: 300px;
    top: -50px;
    z-index: 2;
    }
    </style>
  <!-- 09- 层级属性必须要搭配相对定位或者绝对定或者固定位来使用才生效，值越大层级越高显示越在最上面； -->
</head>
<body>
    <!-- 01- 给三个div分别类名为box1，box2，box3； -->
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
</body>

</html>

15-浮动和定位对比.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    /* 02- 在通配符选择器里面清除内外边距； */
    *{
        padding: 0;
        margin: 0;
    }

    /* 03- 给大盒子宽高600以及边框； */
    .big{
        width: 600px;
        height: 600px;
        border: 1px solid;
    }
    /* 04- 給内嵌的小盒子宽高200一个背景颜色粉红色； */
    .box{
        width: 200px;
        height: 200px;
        background-color: pink;
    /* 06- 給粉色盒子一个左浮动；浮动的粉色盒子就脱离了文档流，
    注意:浮动属性脱离文档流但是不脱离文本流，
    意思就是(图片,文字,输入框不会到浮动属性的垂直下方,会围绕着浮动盒子)*/
        float:left;
    }
    /* 05- 給p标签宽高100以及背景颜色紫色； */
    p{
        width: 100px;
        height: 100px;
        background-color: purple;
        
    }


    /* 08- 给.box1宽高600以及边框； */
    .box1{
        width: 600px;
        height: 600px;
        border: 1px solid;
    }
    /* 09- 給内嵌的小盒子.small宽高200一个背景颜色黄色； */
    .small{
        width: 200px;
        height: 200px;
        background-color: yellow;

    /* 011- 给黄色小盒子.small一个相对定位left：100px，top：100px,
       相对定位是不会脱离文档流的； */
        /* position: relative;
        left: 100px;
        top:100px;
   */
    /* 012- 给黄色小盒子.small一个绝对定位,发现绝对定位的盒子既脱离文档流又脱离文本流；*/
      /* position: absolute; */
    /* 013- 给黄色小盒子.small一个固定定位 top:0px; left:0px;,发现固定定位的盒子既脱离文档流又脱离文本流； */
    position: fixed;
    top:0px;
    left:0px;

    }
    /* 010- 給p标签宽高100以及背景颜色紫色； */
    p{
        width: 100px;
        height: 100px;
        background-color: purple;
        
    }


    /* 014- **脱离文档流的元素的代码以及特点总结**

- float:left;

- float:right;

- position:absolute;

- position:fixed;

- 脱离文档流的元素不再区分行内或者块级，默认宽度都由内容撑开，都可以设置宽高及所有盒模型属性; */
    </style>
</head>
<body>
    <!-- 01- 给一个div类名为big，里面给一个div类名为box，再向下垂直排列一个p标签，
    再向下垂直排列一个input输入框，再向下排列一个img图片标签里面給出图片地址和文字内容。 -->
    <div class="big">
        <div class="box"></div>
        <p></p>
        <input type="text" name="" id="">
        <img src="https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3100065911,3169492079&fm=58" alt="">
        诸葛亮(181-234),字孔明,号卧龙(也作伏龙),汉族,徐州琅琊阳都(今山东临沂市沂南县)人,三国时期蜀汉丞相,杰出
        的政治家、军事家、散文家、书法家、发明家。在世时被封为武乡侯,死后追谥忠武侯,东晋政权因其军事才能特追封他为武兴王。
    </div>

    <!-- 07- 給一个类名为box1的div,里面内嵌类名为small的div和p标签,
    再向下垂直排列一个input输入框，再向下排列一个img图片标签里面給出图片地址和文字内容。 -->
    <div class="box1">
        <div class="small"></div>
        <!-- <p></p> -->
        <input type="text" name="" id="">
        <img src="https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3100065911,3169492079&fm=58" alt="">
        诸葛亮(181-234),字孔明,号卧龙(也作伏龙),汉族,徐州琅琊阳都(今山东临沂市沂南县)人,三国时期蜀汉丞相,杰出
        的政治家、军事家、散文家、书法家、发明家。在世时被封为武乡侯,死后追谥忠武侯,东晋政权因其军事才能特追封他为武兴王。
    </div>
  
</body>
</html>

16- 脱离文档流的特点.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 02-在内嵌css里面清除内外边距； -->
    <style>
        *{
            padding: 0;
            margin: 0;
        }
    /* 03-在内嵌css里给span标签宽高和背景颜色粉红色； */
    span{
        width: 100px;
        height: 100px;
        background-color: pink;
    
    /* 04- float: left;脱离文档流的元素，让span不再区分块或者行内，宽高从关到开，可以设置宽高和所有和模型属性；*/
    /* float: left; */
    /* 05- float: right;脱离文档流的元素，让span不再区分块或者行内，宽高从关到开，可以设置宽高和所有和模型属性；*/
    /* float: right; */

    /* 06- 绝对定位属性脱离文档流,也脱离文本流,懸浮(图文输入框,会到定位盒子的下方)实现盒子覆盖图文输入框之间的层级关系；*/
    /* position: absolute; */

    /* 07- 固定定位属性脱离文档流,也脱离文本流,懸浮(图文输入框,会到定位盒子的下方)实现盒子覆盖图文输入框之间的层级关系； */
    position: fixed;

    /* 08- 总结，float: left;float: right;position: absolute; position: fixed;这四种脱离文档流的元素，
    让标签不再区分块或者行内，默认宽度都是由内容撑开的，可以设置宽高和所有盒模型属性； */

    }

    </style>
</head>
<body>
    <!-- 01-给一个div ,再向下给两个span标签；-->
    <div></div>
    <span>1</span>
    <span>2</span>

</body>
</html>

17-透明属性.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
   /* 02- 在内嵌css里面给大盒子宽高以及背景颜色； */
.big{
    width: 400px;
  
   /* 03- 背景颜色rgba（     .2）代表標籤顏色的透明的深淺度数值越小透明度越浅； */
     background-color: rgba(0,0,0,.2);

}

   /* 04- 給小盒子宽高以及背景颜色；   */
   .small{
    width: 100px;
    height:100px;
    background-color: red;
/* 05- 給小盒子small设置opacity不透明度 ，0-1， 0表示完全透明， 1表示完全不透明 ，
这里设置的opacity: .2是opacity:0.2的简写，
也可以写为0.2，当前盒子还有和盒子内的所有内容都会随数值的变化而变化；opacity要配合background-color来使用；*/
/* opacity: .2; */
/* 06- 注释掉上面的opacity，的給小盒子small设置opacity不透明opacity: 1; */
/* opacity: 1; */
/* 07- 注释掉上面的opacity，的給小盒子small设置opacity不透明opacity: 0;0表示完全透明； */
opacity: 0;
/* 08- 注：opacity可以控制当前盒子和盒子里的所有内容都变透明或者不透明，但是用 background-color: rgba()里面的文字和
    内容不会随着盒子的透明而变透明； */
/* 09- 在控制台里调整background-color: rgba()透明度的方式是点击控制台里的图片的颜色； */
/* 010- 在控制台里调整opacity的透明度的方式是更改opacity的数值； */

}





    </style>

</head>
<body>
    <!-- 01- 给一个div类名为big，里面内嵌一小盒子div类名为small，大盒子里再内嵌一个图文； -->
    <div class="big">big
        <div class="small">small</div>
        <img src="https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3100065911,3169492079&fm=58" alt="">诸葛亮(181-234),字孔明,号卧龙(也作伏龙),汉族,徐州琅琊阳都(今山东临沂市沂南县)人,三国时期蜀汉丞相,杰出的政治家、军事家、散文家、书法家、发明家。在世时被封为武乡侯,死后追谥忠武侯,东晋政权因其军事才能特追封他为武兴王。
    </div>


</body>
</html>