HTML CSS第九次笔记

爱泡脚的鸡腿
122 阅读6分钟

1定位

image.png

1.1相对定位（不脱标）

image.png

1.2绝对定位（脱标）

绝对于最近一级的长辈盒子 image.png

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      position: relative;
      width: 100px;
      height: 100px;
      background-color: red;

    }

    .son {
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: blue;
      left: 50px;
      top: 50px;
    }
  </style>
</head>

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

</html>

1.3 子绝父相

孩子绝对，父亲相对

1.3.1 案例——定位居中

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      position: absolute;
      left: 50%;
      /* 再往回移动一半盒子的宽度 */
      margin-left: -50px;
      top: 50%;
      /* 再往回移动一半盒子的高度 */
      margin-top: -100px;
      width: 100px;
      height: 500px;
      background-color: red;
      /* 绝对定位让margin:0 auto失效 */
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>

结果：

image.png

1.3.2（1.3.1的改进版 也最常使用）

使用
position：absolute
top50%;
left:50%;
transform:translate(-50%;-50%) 实现

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      position: absolute;
      left: 50%;
      /* 再往回移动一半盒子的宽度 */
      /* 让盒子走自己宽度和高度的一半 */
      transform: translate(-50%, -50%);
      top: 50%;
      /* 再往回移动一半盒子的高度 */
      margin-top: -100px;
      width: 100px;
      height: 200px;
      background-color: red;
      /* 绝对定位让margin:0 auto失效 */
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>

1.4 固定定位（脱标）

<!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>
    .header {
      position: fixed;
      left: 0;
      top: 0;
      /* width: 200px; */
      width: 100%;
      height: 80px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="header">123</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>
</body>

</html>

结果：

image.png

1.5 层级

后盒子一定会覆盖前盒子（只要使用了定位）,这就叫层级；为了解决一般业务因磨人层级关系而导致的页面结构发生改变，可以使用 z-index:x; 其中，x越大，层级越高；无论前后关系，层级高的在上层

image.png

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      /* 绝对定位是脱标的 */
      position: absolute;
      top: 0;
      left: 0;
      width: 200px;
      height: 200px;

    }

    .box1 {
      background-color: red;
      /* 给box添加层级属性 */
      z-index: 1;
    }

    .box2 {
      background-color: blue;
      left: 20px;
      top: 20px;
      /* z-index的数字越高，越靠上 */
      z-index: 2;

    }

    .box3 {
      background-color: green;
      left: 40px;
      top: 40px;
    }
  </style>
</head>

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

</html>

结果：

image.png

1.6 定位-总结

image.png

1.7 定位——补充 （粘性定位sticky）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .nav {
      /* 粘性定位的特点：相对定位+绝对定位 */
      position: sticky;
      /* 粘性定位必须有top和left属性 */
      top: 0;
      left: 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>
  <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>
  <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>
</body>

</html>

2 高级技术

image.png

2.1 CSS精灵

image.png

2.1.1 精灵图demo

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      background: url(./images/abcd.jpg) no-repeat;
      display: inline-block;
    }



    .l {
      width: 96px;
      height: 112px;
      background-color: pink;
      background-position: -5px -275px;
    }

    .i {
      width: 62px;
      height: 107px;
      background-color: pink;
      background-position: -324px -141px;
    }

    .u {
      width: 112px;
      height: 112px;
      background-color: pink;
      background-position: -476px -421px;
    }
  </style>
</head>

<body>
  <div class="l"></div>
  <div class="i"></div>
  <div class="u"></div>
</body>

</html>

结果：

image.png

2.1.2 鼠标经过更换精灵图

实现重点：使用过渡：transition:x(s),过渡时间依赖x的设置大小

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      background: url(./images/abcd.jpg) no-repeat;
      /* 转换为行内块元素:
         1. 既可以设置宽高
         2. 又可以让元素在一行显示
         3. 常用于让div横向排列 */
      display: inline-block;
    }



    .l {
      width: 96px;
      height: 112px;
      background-color: pink;
      background-position: -5px -275px;
    }

    .i {
      width: 62px;
      height: 107px;
      background-color: pink;
      background-position: -324px -141px;
    }

    .u {
      width: 112px;
      height: 112px;
      background-color: pink;
      background-position: -476px -421px;
    }

    span {
      display: block;
      width: 106px;
      height: 118px;
      background: url(./images/abcd.jpg) no-repeat;
      /* 过渡 */
      transition: all 0.3s;
    }

    span:hover {
      background-position: -118px -12px;
    }
  </style>
</head>

<body>
  <div class="l"></div>
  <div class="i"></div>
  <div class="u"></div>

  <span></span>
</body>

</html>

2.2 字体图标（重点）

image.png iconfont-阿里巴巴字体
.ttf .woff .woff2后缀的文件都是字体文件

<!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="./iconfont.css">
  <style>
    .icon-fangdajing {
      font-size: 60px;
      color: aquamarine;
    }
  </style>
</head>

<body>
  <!-- 必须要有两个类名，第一个图标必须是iconfont，第二个是图标的类名 -->
  <i class="iconfont icon-fangdajing"></i>
  <span class="iconfont icon-search"></span>
</body>

</html>

结果：

image.png

3 CSS修饰属性

3.1 垂直对齐方式 vertical-align

解决图片底部仍有空隙的方法：
<1> vertical-align:非基线（baseline）对齐即可； <2>把图片转化为块级元素（因为只有行内块才有header对齐，块级元素没有）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img {
      /* 一般默认为和图片的底对齐 */
      /* 基线对齐 */
      vertical-align: middle;
    }
  </style>
</head>

<body>
  <img src="./images/logo.png" alt=""> my name is csq
</body>

<body>

</body>

</html>

结果：

image.png

3.2 过渡transition

image.png

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: pink;
      /* 谁做过渡，给谁加 */
      transition: height .3s, width .5s;
    }

    .box:hover {
      height: 400px;
      width: 400px;

    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>

结果：

image.png

image.png

3.3 透明度 opacity

opacity和rgb的区别是： opacity是背景和文字都半透明，而rgb只有背景会半透明 image.png

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1 {
      width: 200px;
      height: 200px;
      background-color: black;
      /* 盒子半透明：(背景和文字都半透明) */
      opacity: 0.5;
    }
  </style>
</head>

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

</html>

3.4 光标类型 cursor

image.png

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div:nth-child(1) {
      cursor: default;
    }

    div:nth-child(2) {
      cursor: pointer;
    }

    div:nth-child(3) {
      cursor: text;
    }

    div:nth-child(4) {
      cursor: move;
    }

    div:nth-child(5) {
      cursor: not-allowed;
    }
  </style>
</head>

<body>
  <div>鼠标默认</div>
  <div>鼠标小手</div>
  <div>鼠标选择文本</div>
  <div>鼠标移动</div>
  <div>鼠标禁止</div>
</body>

</html>

3.5 表格样式

使用border-collapse: collapse;将相邻的两个边框合并

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table {
      width: 700px;
      height: 400px;
      margin: 0 auto;
      border: 1px solid pink;
            /* 文字居中 */
      text-align: center;
    }

    table,
    tr,
    td {
      border: 1px solid #000;
      /* 合并相邻的两个边框 */
      border-collapse: collapse;
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <td>内容</td>
      <td>内容</td>
      <td>内容</td>
      <td>内容</td>
      <td>内容</td>
    </tr>
    <tr>
      <td>内容</td>
      <td>内容</td>
      <td>内容</td>
      <td>内容</td>
      <td>内容</td>
    </tr>
    <tr>
      <td>内容</td>
      <td>内容</td>
      <td>内容</td>
      <td>内容</td>
      <td>内容</td>
    </tr>
  </table>
</body>

</html>

结果：

image.png

avatar
文章
阅读
粉丝