6.定位

黄土地
77 阅读4分钟

day08-CSS高级.png

1.相对定位

 <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 相对定位 1.保留位置不会影响其他盒子，2.显示模式不变，3.偏移相对自己原来位置移动。-->
    <!-- 很少使用相对定位 -->
    <style>
        .div1 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: relative;
            top: 300px;
        }
        .div2 {
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
     <div class="div1"></div>
     <div class="div2"></div>
</body>

2.绝对定位

 <!-- 绝对定位  子绝父相-->
    <!-- 绝对定位 position:absolute  
        1.脱标不占位置，2,行内块特点，3.相对于最近的已经定位的祖先元素改变位置，
        如果祖先未定位，则相对浏览器可视化改变位置。
    -->
    <style>
         .div1 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            top: 800px;
        }
        .div2 {
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
        }
        .father {
            width: 500px;
            height: 500px;
            background-color: pink;
            position: relative;
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: purple;
            position: absolute;
            right: 10px;
            bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

3. 绝对布局的水平垂直居中

  <!-- 水平垂直居中，transform == margin-left/margin-right -->
    <style>
        .father {
            width: 500px;
            height: 500px;
            background-color: yellow;
            position: relative;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: blue;
            position:absolute;
            left: 50%;
            top: 50%;
            /* transform: translate(-50%,-50%); */
            margin-left: -50px;
            margin-top: -50px;
        }

    </style>


</head>
<body>
      <div class="father">
        <div class="son"></div>
      </div>
</body>
</html>

4.固定定位

 <!-- 固定定位 -->
    <style>
        .header {
           position: fixed;
           left: 0px;
           top: 0px;
           width: 100%;
           height: 80px; 
           background-color: yellowgreen;
           z-index: 100;
           /* 如果有多个层级，需要设置层级的数量。 */
        }

        .p_top {
            margin-top: 80px;
        }
        .father {
            width: 500px;
            height: 500px;
            background-color: pink;
            position: relative;
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: purple;
            position: absolute;
            right: 10px;
            bottom: 10px;
        }
    </style>
 <div class="header">123</div>
  <p class="p_top"> 里面有很多的文字</p>
  <p> 里面有很多的文字</p>
  <p> 里面有很多的文字</p>
  <p> 里面有很多的文字</p>
  <p> 里面有很多的文字</p>

  <div class="father">
    <div class="son"></div>
</div>
  <p> 里面有很多的文字</p>
  <p> 里面有很多的文字</p>
  <p> 里面有很多的文字</p>
  <p> 里面有很多的文字</p>
  <p> 里面有很多的文字</p>
  <p> 里面有很多的文字</p>
  <p> 里面有很多的文字</p>

</body>
</html>

5.精灵图

    <!-- 精灵图 -->
    <!-- 坐标一般都是负数 background-position: x y;-->
    <style>
        .z{
            width: 124px;
            height: 128px;
            background: url('./abcd.jpg') no-repeat;
            background-position: -480px -553px;
        }

        .f {
            width: 90px;
            height: 130px;
            background-color: gray;
            background: url('./abcd.jpg') no-repeat;
            background-position: 0px -140px;
        }

        .l {
            width: 109px;
            height: 120px;
            background-color: red;
            background: url('./abcd.jpg') no-repeat;
            background-position: 0px -270px;
        }

        .l:hover {
            background: url('./abcd.jpg') no-repeat;
            background-position: 0px -140px;
        }

    </style>
</head>
<body>
    <div class="z"></div>
    <div class="f"></div>
    <div class="l"></div>
</body>
</html>

6.粘性定位

 <!-- 粘性定位sticky -->
  <style>
    .nav {
      /* 相对定位+固定定位 */
      position: sticky;
      top: 0;
      width: 1000px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <p>文字内容</p>
  <p>文字内容</p>
  <p>文字内容</p>
  <p>文字内容</p>
  <p>文字内容</p>
  <p>文字内容</p>
  <p>文字内容</p>
  <p>文字内容</p>
  <div class="nav"></div>
  <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>
  <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>
  <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>
  <p>文字内容</p>

7.字体图标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <style> 
        .iconfont{
            font-size: 300px;
            color: pink;
            text-decoration: none;
        }
    </style>
</head>
<body>
     <a href="" class="iconfont icon-shouji"></a>
     <a href="" class="iconfont icon-zhaoxiangji"></a>

</body>
</html>

8.CSS修饰属性 - 垂直对齐 图片和文字的垂直对齐，

  <style>
        img {
            /* 默认是基线对齐 */
            /* vertical-align: baseline; */
            /* 中线对齐 */
            /* vertical-align: middle;  */
            /* 底线对齐 */
            vertical-align: bottom;
        }
    </style>
</head>
<body>
    <!-- 默认是基线对齐 -->
     <img src="../xiangmu/uploads/course01.png" alt="">
     <a href="">我是文字</a>
</body>
</html>

9.CSS修饰属性 - 过渡transition

 <!-- 过渡 -->
    <style>
        .div1 {
            width: 100px;
            height: 100px;
            background-color: blue;
            /* transition: all 0.4; */
            /* transition: width 0.5; */
            transition: height 0.5; 
        }
        .div1:hover {
            width: 300px;
            height: 300px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
</body>
</html>

9.CSS修饰属性 - div透明度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- div透明度opacity/background-color-->
    <style> 
      .div4 {
            width: 300px;
            height: 300px;
            /* 如果设置 opacity的透明度，div上的内容也会变透明  */
            /* background-color: yellowgreen;
            opacity: 0.6; */
            
            /* 背景色可以设置透明度 */
            background-color: rgba(6, 95, 6, 0.6);
        }
    </style>
</head>
<body>
        <div class="div4">
            我是文字
        </div>
</body>
</html>

10.CSS修饰属性 - 光标类型。

  <!-- 光标类型 -->
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            margin-bottom: 20px;
        }

        .div1 {
            /* 默认就是箭头 */
            cursor: default;
        }
        .div2 {
            /* 工字 */
            cursor: text;
        }
        .div3 {
            /* 小手 */
            cursor: pointer;
        }
        .div4 {
            /* 禁止 */
            cursor: not-allowed;
        }
        .div5 {
            /* 移动 放大 */
            cursor: move;
        }
    </style>
</head>
<body>
     <div class="div1"></div>
     <div class="div2"></div>
     <div class="div3"></div>
     <div class="div4"></div>
     <div class="div5"></div>
</body>
</html>

11.CSS修饰属性 - 表格样式

 <!-- 表格样式 中间线的合并 border-collapse:collapse-->
    <style>
        table ,tr, td{
            border: 1px solid #000;
            border-collapse: collapse;
        }

        table tr:nth-child(even) {
            background-color: #ccc;
        }

        table tr:nth-child(odd) {
            background-color: #eee;
        }

    </style>
</head>
<body>
    <table>
        <tr>
            <td>100</td>
            <td>100</td>
            <td>100</td>
            <td>100</td>
        </tr>
        <tr>
            <td>100</td>
            <td>100</td>
            <td>100</td>
            <td>100</td>
        </tr>
        <tr>
            <td>100</td>
            <td>100</td>
            <td>100</td>
            <td>100</td>
        </tr>
        <tr>
            <td>100</td>
            <td>100</td>
            <td>100</td>
            <td>100</td>
        </tr>
    </table>
</body>
</html>

12.隐藏display/visibility

 <!-- 隐藏display:none隐藏的时候不占位置-->
    <!--  visibility: hidden; 隐藏的时候占位置 -->
    <style>
        .div1{
            width: 100px;
            height: 100px;
            background-color: tan;
            /* display: none; */
            visibility: hidden;
        }
        .div2{
            width: 100px;
            height: 100px;
            background-color:pink;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>
avatar
文章
阅读
粉丝