Web前端线上系统课-01-HTML+CSS/06-CSS盒子模型-CSS设置背景

最新推荐文章于 2024-04-18 09:12:08 发布
最新推荐文章于 2024-04-18 09:12:08 发布
阅读量242 收藏
点赞数
文章标签： html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/coderlb/article/details/124178959
版权
本文详细介绍了CSS中的盒子模型，包括margin、padding、margin传递与折叠、水平居中等概念。同时，讲解了背景设置，如background-image、background-repeat、background-position等属性的用法，并给出了多个案例练习和课后作业，帮助读者深入理解并应用这些知识点。
摘要由CSDN通过智能技术生成

CSS盒子模型-CSS设置背景

盒模型

margin

<!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>
      .box {
        height: 100px;
        background-color: #f00;
        margin-bottom: 40px;
      }

      .container {
        height: 100px;
        background-color: #0f0;
        margin-top: 30px;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <div class="container"></div>
  </body>
</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>
      body {
        font-size: 0;
      }

      .box {
        display: inline-block;
        height: 100px;
        width: 100px;
        background-color: #f00;
        /* margin-bottom: 40px; */
        margin-right: 30px;
      }

      .container {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: #0f0;
        /* margin-top: 30px; */
        margin-left: 30px;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <div class="container"></div>
  </body>
</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>
      body {
        font-size: 0;
      }

      .box {
        display: inline-block;
        height: 100px;
        width: 100px;
        background-color: #f00;
        /* margin-bottom: 40px; */
        /* margin-right: 30px; */
      }

      .container {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: #0f0;
        /* margin-top: 30px; */
        /* margin-left: 30px; */
        margin: 0px 20px;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <div class="container"></div>
  </body>
</html>

padding/margin

<!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>
    .box {
      height: 300px;
      width: 300px;
      background-color: #f00;
      margin-top: 20px;
    }

    .container {
      width: 100px;
      height: 100px;
      background-color: #0f0;
      margin-left: 20px;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="container"></div>
  </div>
</body>
</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>
    .box {
      height: 300px;
      width: 300px;
      background-color: #f00;
      padding-left: 100px;
    }

    .container {
      width: 100px;
      height: 100px;
      background-color: #0f0;
      margin-top: 100px;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="container"></div>
  </div>
</body>
</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>
      .box {
        height: 300px;
        width: 300px;
        background-color: #f00;
        padding-left: 100px;
        box-sizing: border-box;
      }

      .container {
        width: 100px;
        height: 100px;
        background-color: #0f0;
        margin-top: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="container"></div>
    </div>
  </body>
</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>
      .box {
        height: 300px;
        width: 300px;
        background-color: #f00;
        /* padding-left: 100px;
        box-sizing: border-box; */
      }

      .container {
        width: 100px;
        height: 100px;
        background-color: #0f0;
        margin-left: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="container"></div>
    </div>
  </body>
</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>
      .box {
        height: 300px;
        width: 300px;
        background-color: #f00;
        /* padding-left: 100px;
        box-sizing: border-box; */
        overflow: auto;
      }

      .container {
        width: 100px;
        height: 100px;
        background-color: #0f0;
        margin-left: 100px;
        margin-top: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="container"></div>
    </div>
  </body>
</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>
      .box {
        height: 300px;
        width: 300px;
        background-color: #f00;
        /* padding-left: 100px;
        box-sizing: border-box; */
        /* overflow: auto; */
      }

      .container {
        width: 100px;
        height: 100px;
        background-color: #0f0;
        margin-left: 100px;
        margin-top: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="container"></div>
    </div>
  </body>
</html>

margin上传递

<!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>
      .box {
        width: 300px;
        height: 300px;
        background-color: #f00;
      }

      .container {
        width: 100px;
        height: 100px;
        background-color: #0f0;
        margin-left: 30px;
        margin-top: 30px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="container"></div>
    </div>
  </body>
</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>
      .box {
        width: 300px;
        height: 300px;
        background-color: #f00;
        border: 1px solid transparent;
      }

      .container {
        width: 100px;
        height: 100px;
        background-color: #0f0;
        margin-left: 30px;
        margin-top: 30px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="container"></div>
    </div>
  </body>
</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>
      .box {
        width: 300px;
        height: 300px;
        background-color: #f00;
        /* border: 1px solid transparent; */
        overflow: auto;
      }

      .container {
        width: 100px;
        height: 100px;
        background-color: #0f0;
        margin-left: 30px;
        margin-top: 30px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="container"></div>
    </div>
  </body>
</html>

如何防止触发传递问题

  • 给父元素设置padding-top/padding-bottom
  • 给父元素设置border
  • 触发bfc 设置overflow为auto

margin下传递

<!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>
      .box {
        width: 300px;
        height: auto;
        background-color: #f00;
      }

      .container {
        width: 100px;
        height: 100px;
        background-color: #0f0;
        margin-left: 100px;
        margin-bottom: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="container"></div>
    </div>
    <div>哈哈哈哈</div>
  </body>
</html>

建议

  • margin设置兄弟元素之间的间距
  • padding设置父子元素之间的间距

margin折叠

折叠

  • 兄弟之间上下margin折叠
  • 父子元素之间的折叠
<!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>
      .box1 {
        height: 100px;
        background-color: #f00;
        margin-bottom: 30px;
      }

      .box2 {
        height: 100px;
        background-color: #0f0;
        margin-top: 50px;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
  </body>
</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>
      .box1 {
        height: 100px;
        background-color: #f00;
        margin-bottom: 30px;
      }

      .box2 {
        height: 100px;
        background-color: #0f0;
        margin-top: 50px;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
  </body>
</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>
      body {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
      }
      .box {
        width: 100px;
        height: 100px;
        background-color: #f00;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</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>
      body {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 100px;
        height: 100px;
        margin: 0 auto;
        background-color: #f00;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</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>
      body {
        margin: 0;
        padding: 0;
      }

      .container {
        width: 800px;
        height: 150px;
        background-color: #0f0;
      }
      .box {
        width: 100px;
        height: 100px;
        margin: 0 auto;
        background-color: #f00;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
    </div>
  </body>
</html>

outline

  • 元素的外轮廓
  • 不占据空间
    • outline-width
    • outline-style
    • outline-color
    • outline
<!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>
      .box {
        width: 100px;
        height: 100px;
        padding: 30px;
        background-color: #f00;
        border: 50px solid orange;
        outline: 30px solid #0f0;
      }

      a {
        margin-top: 50px;
        display: block;
        /* outline: 10px solid #f00; */
        outline: none;
      }

      /* lvfha */

      input {
        outline: none;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <a href="#">百度一下</a>
    <input type="text" />
  </body>
</html>

box-shadow

  • 可以设置一个或者多个阴影
<!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>
      .box {
        width: 100px;
        height: 100px;
        background-color: #f00;
        box-shadow: 5px 5px 10px 10px orange inset;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</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>
      .box {
        width: 100px;
        height: 100px;
        background-color: #f00;
        box-shadow: 5px 5px 10px 10px orange inset;
        box-shadow: 5px 5px 10px orange inset;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</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>
     .box {
       width: 100px;
       height: 100px;
       background-color: #f00;
       box-shadow: 5px 5px 10px 10px orange inset;
       box-shadow: 5px 5px 10px orange, 10px 10px 10px green;
     }
   </style>
 </head>
 <body>
   <div class="box"></div>
 </body>
</html>

text-shadow

  • 给文字添加阴影效果
<!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>
      .box {
        font-size: 50px;
        font-weight: 700;
        /* text-shadow: 5px 5px 5px #f00; */
        text-shadow: 5px 5px 5px orange, 10px 10px 5px blue, 15px 5px 5px green;
      }
    </style>
  </head>
  <body>
    <div class="box">hello Coderwhy</div>
  </body>
</html>

行内非替换元素的注意事项

  • padding
    • 左右生效
    • 但是上下只是视觉生效，实际不占空间
<!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>
      .content {
        width: 300px;
        height: 300px;
        color: white;
        background-color: #f00;
        /* 内边距 */
        padding: 30px;
        /* margin: 30px; */
      }
    </style>
  </head>
  <body>
    <span class="content"> 我是span内容，哈哈哈 </span>
    aaaa
    <div>hehe</div>
  </body>
</html>
  • border
    • 左右生效
    • 但是上下只是视觉生效，实际不占空间
<!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>
      .content {
        width: 300px;
        height: 300px;
        color: white;
        background-color: #f00;
        /* 内边距 */
        /* padding: 30px; */
        border: 50px solid orange;
        /* margin: 30px; */
      }
    </style>
  </head>
  <body>
    <span class="content"> 我是span内容，哈哈哈 </span>
    aaaa
    <div>hehe</div>
  </body>
</html>
  • margin
    • 左右生效
    • 但是上下只是视觉生效，实际不占空间
<!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>
      .content {
        width: 300px;
        height: 300px;
        color: white;
        background-color: #f00;
        /* 内边距 */
        /* padding: 30px; */
        /* border: 50px solid orange; */
        margin: 30px;
      }
    </style>
  </head>
  <body>
    <span class="content"> 我是span内容，哈哈哈 </span>
    aaaa
    <div>hehe</div>
  </body>
</html>
  • 注意
    • 水平方向生效
    • 上下方向生效

前景色和背景色

  • 背景色
    • 扩展到border
  • 前景色
    • 未设置border-color，会使用color的属性值
<!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>
      .box {
        width: 100px;
        height: 100px;
        background-color: #f00;
        color: orange;
        padding: 30px;
        border: 10px solid;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

box-sizing

  • 设置盒子模型中宽高的行为
    • content-box
      • padding，border都布置在width，height外边
    • border-box
      • padding，border都布置在width，height里边
<!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>
      .box1 {
        box-sizing: content-box;
        width: 100px;
        height: 100px;
        background-color: #f00;
        padding: 30px;
        border: 10px solid orange;
      }

      .box2 {
        box-sizing: border-box;
        width: 100px;
        height: 100px;
        background-color: #f00;
        padding: 30px;
        border: 10px solid orange;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
  </body>
</html>

盒模型

  • W3C标准盒子模型
  • IE盒子模型

案例练习

  • 案例一
<!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>
      .btn {
        color: #333;
        font-size: 14px;
        text-decoration: none;

        display: inline-block;
        width: 70px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        border-radius: 13px;
      }

      .new {
        background-color: #e1251b;
        color: #fff;
      }

      .vip {
        background-color: #363634;
        color: #e5d799;
      }
    </style>
  </head>
  <body>
    <a
      class="btn new"
      href="https://xinren.jd.com/?channel=99#/home"
      target="_blank"
      >新人福利</a
    >
    <a
      class="btn vip"
      href="https://passport.jd.com/new/login.aspx"
      target="_blank"
      >PLUS会员</a
    >
  </body>
</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>
      .btn {
        color: #333;
        font-size: 14px;
        text-decoration: none;

        display: inline-block;
        cursor: pointer;
        width: 70px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        border-radius: 13px;
      }

      .btn:hover {
        background-color: #c81623;
        color: #fff;
      }

      .new {
        background-color: #e1251b;
        color: #fff;
      }

      .vip {
        background-color: #363634;
        color: #e5d799;
      }
    </style>
  </head>
  <body>
    <a
      class="btn new"
      href="https://xinren.jd.com/?channel=99#/home"
      target="_blank"
      >新人福利</a
    >
    <a
      class="btn vip"
      href="https://passport.jd.com/new/login.aspx"
      target="_blank"
      >PLUS会员</a
    >
  </body>
</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>
      body,
      p,
      h3 {
        padding: 0;
        margin: 0;
      }

      body {
        background-color: #f5f5f5;
      }

      h3 {
        font-weight: 400;
      }

      a {
        text-decoration: none;
        color: #333;
        font-size: 12px;
      }

      .item {
        display: inline-block;
        width: 234px;
        height: 300px;
        padding: 20px 10px;
        background-color: #fff;
        text-align: center;
        box-sizing: border-box;
      }

      .item img {
        width: 160px;
        height: 160px;
      }

      .item .title {
        margin-top: 14px;
      }

      .item p {
        color: #999;
        margin-top: 8px;
        /* 单行显示 */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .item .desc {
        color: #999;
        margin-top: 8px;
      }

      .item .price {
        margin-top: 14px;
      }

      .item .price .new-price {
        color: #ff6700;
      }

      .item .price .old-price {
        margin-left: 5px;
        color: #999;
        text-decoration: line-through;
      }
    </style>
  </head>
  <body>
    <a class="item" href="https://www.mi.com/xiaomipad5pro" target="_blank">
      <img src="../images/xiaomi01.webp" alt="" />
      <h3 class="title">小米平板5 Pro</h3>
      <p class="desc">
        全新12代英特尔处理器，CNC一体精雕工艺，2.5K
        120Hz高清屏，可选MX550独立显卡
      </p>
      <div class="price">
        <span class="new-price">2399元起</span>
        <span class="old-price">2499</span>
      </div>
    </a>
  </body>
</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>
      body,
      p,
      h3 {
        padding: 0;
        margin: 0;
      }

      body {
        background-color: #f5f5f5;
      }

      h3 {
        font-weight: 400;
      }

      a {
        text-decoration: none;
        color: #333;
        font-size: 12px;
      }

      body {
        text-align: center;
      }

      .item {
        display: inline-block;
        width: 234px;
        height: 300px;
        padding: 20px 10px;
        background-color: #fff;
        text-align: center;
        box-sizing: border-box;
      }

      .item:hover {
        box-shadow: 0 5px 20px 5px rgba(0, 0, 0, 0.2);
      }

      .item img {
        width: 160px;
        height: 160px;
      }

      .item .title {
        margin-top: 14px;
      }

      .item p {
        color: #999;
        margin-top: 8px;
        /* 单行显示 */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .item .desc {
        color: #999;
        margin-top: 8px;
      }

      .item .price {
        margin-top: 14px;
      }

      .item .price .new-price {
        color: #ff6700;
      }

      .item .price .old-price {
        margin-left: 5px;
        color: #999;
        text-decoration: line-through;
      }
    </style>
  </head>
  <body>
    <a class="item" href="https://www.mi.com/xiaomipad5pro" target="_blank">
      <img src="../images/xiaomi01.webp" alt="" />
      <h3 class="title">小米平板5 Pro</h3>
      <p class="desc">
        全新12代英特尔处理器，CNC一体精雕工艺，2.5K
        120Hz高清屏，可选MX550独立显卡
      </p>
      <div class="price">
        <span class="new-price">2399元起</span>
        <span class="old-price">2499</span>
      </div>
    </a>
  </body>
</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>
      body,
      p,
      h3 {
        padding: 0;
        margin: 0;
      }

      body {
        background-color: #f5f5f5;
        font: 12px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei,
          Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
      }

      h3 {
        font-weight: 400;
      }

      a {
        text-decoration: none;
        color: #333;
        font-size: 12px;
      }

      a {
        display: inline-block;
      }

      .item {
        width: 300px;
        margin: 0 auto;
      }

      .item .album img {
        width: 100%;
        border-radius: 8px;
      }

      .item .info a {
        width: 100%;
      }

      .item .info p {
        font-size: 15px;
        margin-top: 8px;

        /* 一行 */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .item .info .anchor {
        font-size: 13px;
        color: #888;
        margin-top: 5px;
      }

      .item .info .anchor::before {
        content: url("../images/widget-up.svg");
        display: inline-block;
        width: 16px;
        height: 16px;
        position: relative;
        top: 1px;
      }
    </style>
  </head>
  <body>
    <div class="item">
      <div class="album">
        <a href="#">
          <img
            src="https://i0.hdslb.com/bfs/archive/9c763bf06b7765462eac62cc0a9a34b260d3f9c8.jpg@672w_378h_1c.webp"
            referrerpolicy="no-referrer"
            alt=""
          />
        </a>
      </div>
      <div class="info">
        <a href="#">
          <p>
            萌化了！谁会不喜欢毛茸茸的小懒懒呢？萌化了！谁会不喜欢毛茸茸的小懒懒呢？萌化了！谁会不喜欢毛茸茸的小懒懒呢？萌化了！谁会不喜欢毛茸茸的小懒懒呢？
          </p>
        </a>
        <a class="anchor" href="#">
          <span class="nickname"> Muxi慕喜咩</span>
          <span class="time">3-20</span>
        </a>
      </div>
    </div>
  </body>
</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>
      body,
      p,
      h3 {
        padding: 0;
        margin: 0;
      }

      body {
        background-color: #f5f5f5;
        font: 12px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei,
          Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
      }

      h3 {
        font-weight: 400;
      }

      a {
        text-decoration: none;
        color: #333;
        font-size: 12px;
      }

      a {
        display: inline-block;
      }

      .item {
        width: 300px;
        margin: 0 auto;
      }

      .item .album img {
        width: 100%;
        border-radius: 8px;
      }

      .item .info a {
        width: 100%;
      }

      .item .info p {
        font-size: 15px;
        margin-top: 8px;

        /* 一行 */
        /* overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; */
        /* 多行 */
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .item .info .anchor {
        font-size: 13px;
        color: #888;
        margin-top: 5px;
      }

      .item .info .anchor::before {
        content: url("../images/widget-up.svg");
        display: inline-block;
        width: 16px;
        height: 16px;
        position: relative;
        top: 1px;
      }
    </style>
  </head>
  <body>
    <div class="item">
      <div class="album">
        <a href="#">
          <img
            src="https://i0.hdslb.com/bfs/archive/9c763bf06b7765462eac62cc0a9a34b260d3f9c8.jpg@672w_378h_1c.webp"
            referrerpolicy="no-referrer"
            alt=""
          />
        </a>
      </div>
      <div class="info">
        <a href="#">
          <p>
            萌化了！谁会不喜欢毛茸茸的小懒懒呢？萌化了！谁会不喜欢毛茸茸的小懒懒呢？萌化了！谁会不喜欢毛茸茸的小懒懒呢？萌化了！谁会不喜欢毛茸茸的小懒懒呢？
          </p>
        </a>
        <a class="anchor" href="#">
          <span class="nickname"> Muxi慕喜咩</span>
          <span class="time">3-20</span>
        </a>
      </div>
    </div>
  </body>
</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>
      body,
      p,
      h3 {
        padding: 0;
        margin: 0;
      }

      body {
        background-color: #f5f5f5;
        font: 12px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei,
          Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
      }

      h3 {
        font-weight: 400;
      }

      a {
        text-decoration: none;
        color: #333;
        font-size: 12px;
      }

      a {
        display: block;
      }

      .item {
        width: 300px;
        margin: 0 auto;
      }

      .item .album img {
        width: 100%;
        border-radius: 8px;
      }

      /* .item .info a {
        width: 100%;
      } */

      .item .info p {
        font-size: 15px;
        margin-top: 8px;

        /* 一行 */
        /* overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; */
        /* 多行 */
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .item .info .anchor {
        font-size: 13px;
        color: #888;
        margin-top: 5px;
      }

      .item .info .anchor::before {
        content: url("../images/widget-up.svg");
        display: inline-block;
        width: 16px;
        height: 16px;
        position: relative;
        top: 1px;
      }
    </style>
  </head>
  <body>
    <div class="item">
      <div class="album">
        <a href="#">
          <img
            src="https://i0.hdslb.com/bfs/archive/9c763bf06b7765462eac62cc0a9a34b260d3f9c8.jpg@672w_378h_1c.webp"
            referrerpolicy="no-referrer"
            alt=""
          />
        </a>
      </div>
      <div class="info">
        <a href="#">
          <p>
            萌化了！谁会不喜欢毛茸茸的小懒懒呢？萌化了！谁会不喜欢毛茸茸的小懒懒呢？萌化了！谁会不喜欢毛茸茸的小懒懒呢？萌化了！谁会不喜欢毛茸茸的小懒懒呢？
          </p>
        </a>
        <a class="anchor" href="#">
          <span class="nickname"> Muxi慕喜咩</span>
          <span class="time">3-20</span>
        </a>
      </div>
    </div>
  </body>
</html>

文本修饰

一行
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
多行
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical

background-image

  • 设置元素的背景图片
    • 盖在background-color， background-color仍然存在
    • 多张图片
      • 第一张图片将显示在最上面，其他图片按顺序层叠在下面
      • 依次放在后面 1 2 3 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>
      .box {
        width: 600px;
        height: 600px;
        background-color: #f00;

        /* 背景图片 */
        background-image: url("../images/kobe01.jpg");
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

background-repeat

  • 设置背景图片是否平铺
    • repeat 平铺
    • no-repeat 不平铺
    • repeat-x 只在水平方向平铺
    • repeat-y 只在垂直方向平铺
<!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>
      .box {
        width: 600px;
        height: 600px;
        background-color: #f00;

        /* 背景图片 */
        background-image: url("../images/kobe01.jpg"),
          url("../images/kobe02.png");
        /* background-repeat: no-repeat; */
        /* background-repeat: repeat-x; */
        /* background-repeat: repeat-y; */
        background-repeat: repeat;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</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>
      .box {
        width: 600px;
        height: 600px;
        background-color: #f00;

        /* 背景图片 */
        background-image: url("../images/wall.png")
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

background-size

  • 设置背景图片的大小
    • auto 默认值 一背景图片大小显示
    • cover 完全铺满元素 有裁剪的可能，部分看不见
    • contain 高度或者宽度铺满元素 保持宽高纵横比
    • 百分比
    • 具体尺度
<!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>
      .box {
        width: 600px;
        height: 600px;
        background-color: #f00;

        /* 背景图片 */
        background-image: url("../images/kobe01.jpg");
        background-repeat: no-repeat;
        /* background-size: contain; */
        /* background-size: cover; */
        /* background-size: 100% 100%; */
        background-size: 600px 600px;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</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>
      .box {
        width: 600px;
        height: 600px;
        background-color: #f00;

        /* 背景图片 */
        background-image: url("../images/kobe01.jpg");
        background-repeat: no-repeat;
        /* background-size: contain; */
        /* background-size: cover; */
        /* background-size: 100% 100%; */
        /* background-size: 600px 600px; */
        background-size: 100px auto;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

background-position

  • 设置图片在水平和垂直方向的位置
<!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>
      .box {
        width: 600px;
        height: 600px;
        background-color: #f00;

        /* 背景图片 */
        background-image: url("../images/kobe01.jpg");
        background-repeat: no-repeat;

        /* 背景位置 */
        /* background-position: right bottom; */
        background-position: 100px 100px;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</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>
      .box {
        width: 600px;
        height: 600px;
        background-color: #f00;

        /* 背景图片 */
        background-image: url("../images/kobe01.jpg");
        background-repeat: no-repeat;

        /* 背景位置 */
        /* background-position: right bottom; */
        /* background-position: 100px 100px; */
        /* background-position: right bottom; */
        /* background-position: center center; */
        background-position: top;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</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>
      body {
        padding: 0;
        margin: 0;
      }

      .box {
        height: 489px;
        background-color: #f00;
        background-image: url("../images/mhxy.jpg");
        background-position: center;
        background-repeat: no-repeat;
        /* background-size: contain; */
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

background-attachment

<!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>
      .box {
        width: 300px;
        height: 300px;
        color: #fff;
        overflow: scroll;
        background-color: #f00;
        background-image: url("../images/kobe01.jpg");
        /* 附加效果 */
        /* background-attachment: local; */
      }
    </style>
  </head>
  <body>
    <div class="box">
      赏花游人群中，朋友相约出游、全家出游、亲子出游占比较高。同程旅行大数据显示，赏花游对男性和女性游客同样具有吸引力。在关注赏花游的人群中，男性占比为48%，女性占比为52%，几乎持平。在年龄分布上，80后和90后更爱赏花游，00后赏花游客群体增长迅速，占比从去年的5%增至今年的16%。和朋友一起相约赏花，在赏花人群中占比最高，达到36%，带着家人孩子一起外出赏花的游客占比也达到33%。
      3月上旬，多地出现散发疫情，赏花长线游市场受到较大影响。
      “近两年以来，春季赏花游市场中，周边短途游占比进一步提高，从今年途牛旅游网预订情况看，超七成游客选择周末周边游。疫情发生前，每年春季，江西婺源、西藏林芝等地跟团游中，外省游客占比较大，今年，在跨省游受限的情况下，赏花长线游产品受影响较大。”途牛旅游相关负责人告诉记者。
      驴妈妈旅游网首席执行官邹庆龄说：“今年赏花游目的地更偏向省内、当地，其次是周边省市。从玩法上来看，赏花游产品呈现高频化、深度打卡、网红内容体验等特点；行程设计由单纯的赏花到品农家菜、入住当地酒店及特色民宿，赏花游呈现慢节奏体验的趋势。”
    </div>
  </body>
</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>
      .box {
        width: 300px;
        height: 300px;
        color: #fff;
        overflow: scroll;
        background-color: #f00;
        background-image: url("../images/kobe01.jpg");
        /* 附加效果 */
        /* background-attachment: scroll; */
        /* background-attachment: local; */
        background-attachment: fixed;
      }
    </style>
  </head>
  <body>
    <div class="box">
      赏花游人群中，朋友相约出游、全家出游、亲子出游占比较高。同程旅行大数据显示，赏花游对男性和女性游客同样具有吸引力。在关注赏花游的人群中，男性占比为48%，女性占比为52%，几乎持平。在年龄分布上，80后和90后更爱赏花游，00后赏花游客群体增长迅速，占比从去年的5%增至今年的16%。和朋友一起相约赏花，在赏花人群中占比最高，达到36%，带着家人孩子一起外出赏花的游客占比也达到33%。
      3月上旬，多地出现散发疫情，赏花长线游市场受到较大影响。
      “近两年以来，春季赏花游市场中，周边短途游占比进一步提高，从今年途牛旅游网预订情况看，超七成游客选择周末周边游。疫情发生前，每年春季，江西婺源、西藏林芝等地跟团游中，外省游客占比较大，今年，在跨省游受限的情况下，赏花长线游产品受影响较大。”途牛旅游相关负责人告诉记者。
      驴妈妈旅游网首席执行官邹庆龄说：“今年赏花游目的地更偏向省内、当地，其次是周边省市。从玩法上来看，赏花游产品呈现高频化、深度打卡、网红内容体验等特点；行程设计由单纯的赏花到品农家菜、入住当地酒店及特色民宿，赏花游呈现慢节奏体验的趋势。”
    </div>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  </body>
</html>

background

内部回顾

一、盒子模型

1.1.margin
  • margin的设置问题
    • top
    • right
    • bottom
    • left
  • margin和padding的选择
  • margin的传递和折叠
    • 父子的传递
    • 兄弟的折叠
  • margin进行水平居中
    • o auto
1.1.outline
  • 外轮廓
    • 不占据空间
1.3.box-shadow
  • box-shadow
1.4.text-shadow
  • text-shadow
1.5.box-sizing
  • content-box
  • border-box
1.6.注意事项
  • 对于行内非替换元素无效的属性
    • width
    • height
    • margin-top
    • margin-bottom
    • padding-top
    • padding-bottom
  • 对于行内非替换元素有效的属性
    • padding-left
    • padding-right
    • margin-left
    • margin-right
1.7.水平居中
  • 行内级元素
    • text-align: center
  • 块级元素
    • margin： 0 auto

二、案例练习

2.1.京东小按钮
2.2.小米的商品
2.3.哔哩哔哩视频展示

三、背景设置

3.1.background-image
3.2.background-repeat
3.3.backgorund-size
3.4.background-position
3.5.background-attchment
3.6.backround
3.7.background-image/img的对比和选择

课后作业

一. 完成课堂所有的代码

二. 写出盒子模型包含的内容以及如何设置

  • 盒子模型
    • content
      • width
      • height
    • padding
    • border
    • margin

三. 说说你对margin的传递和折叠的理解

四. 行内非替换元素在设置padding/border的上下时，有什么特殊的地方？

  • 水平方向有效
  • 垂直方面无效

五. 整理box-sizing的作用，以及content-box和border-box的区别

  • 设置盒子模型中宽高的行为
    • content-box 标准盒模型
      • padding border都布置在width，height的外边
    • border-box
      • padding border都布置在width， height的里边
  • border-box
<!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>
      * {
        padding: 0;
        margin: 0;
      }

      .box {
        width: 200px;
        height: 200px;
        padding: 10px 10px;
        border: 10px solid orange;
        background-color: red;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>
  • content-box
<!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>
      * {
        padding: 0;
        margin: 0;
      }

      .box {
        width: 200px;
        height: 200px;
        padding: 10px 10px;
        border: 10px solid orange;
        background-color: red;
        box-sizing: content-box;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</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>
      * {
        padding: 0;
        margin: 0;
      }

      .box {
        width: 200px;
        height: 200px;
        margin: 0 auto;
        background-color: #f00;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</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>
      * {
        padding: 0;
        margin: 0;
      }

      body {
        display: flex;
        justify-content: center;
      }

      .box {
        width: 200px;
        height: 200px;
        background-color: #f00;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</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>
      * {
        padding: 0;
        margin: 0;
      }

      body {
        text-align: center;
      }

      .box {
        width: 200px;
        height: 200px;
        display: inline-block;
        background-color: #f00;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</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>
      * {
        padding: 0;
        margin: 0;
      }

      body {
        text-align: center;
      }

      .span {
        width: 200px;
        height: 200px;
        background-color: #f00;
      }
    </style>
  </head>
  <body>
    <span class="span">span</span>
  </body>
</html>

七. 练习background-position和background-size（为精灵图做准备）

八. 找出三个盒子模型的综合案例进行练习

coderlb
关注
coderwhy - WEB前端线上系统课(20K+标准) ~V:smilefell01
Aurora
10-04 945
前端
Web前端线上系统课-01-HTML+CSS/09-CSS元素的定位和浮动
coderlb的博客
04-14 156
CSS元素的定位和浮动 画布和窗口的区别 position 标准流布局 相对定位 固定定位 绝对定位 元素脱离标准流 absolute left/right/top/right 定位参考对象是最邻近的定位祖先元素 如果找不到这样的祖先元素，参考对象是画布 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv=
CoderWhy-Web前端线上系统课学习笔记
qq_43362244的博客
04-24 4144
浏览器的本地存储主要分为Cookie和WebStorage和IndexDB,而WebStorage又可以分为LocalStorage和sessionStorage Cookie Cookie最开始的时候不是用来做本地存储的,而是为弥补HTTP在状态管理上的不足 HTTP协议是一个无状态协议,客户端向服务端发送请求,服务器返回响应,但是如何让服务端记住下次发送请求时客户端是谁?那么久产生了Cookie Cookie本质上是浏览器内部存储的一个很小的文本文件,内部是以键值对的方式在存储.在同一个域名发送
coderwhy web前端系统课
wx_fee1024的博客
04-02 2101
已报名入坑，需要地下留言 web前端的分类: 前端设计和前端架构。 HTML结构化语言:超文本标记语言。 通过各种标记符号(标签)来表示网页中的内容元素，构造网页中的内容。 特点:可以通过浏览器进行解析，文件名为HTML或HTM。 2. CSS样式语言(样式表):一种将性能与结构分离的样式设计语言。 控制网页的视觉表达和简单交互。它是通过浏览器解析的，文件名是CSS。 3.DW编码软件(dreamwaver) 两个主要功能:网页编程和网站管理。推荐版本:CS6 / cc。 相关资源:1 HTML
前端性能优化的 24 条最新建议，实用篇！
全栈修炼
03-11 971
性能优化是把双刃剑，有好的一面也有坏的一面。好的一面就是能提升网站性能，坏的一面就是配置麻烦，或者要遵守的规则太多。并且某些性能优化规则并不适用所有场景，需要谨慎使用，请读者带着批判性的眼...
html+css+js基础问答
qq_43751465的博客
08-26 5213
css3 1.标签语义化 顾名思义，合理的标签干合适的事情 块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot 行级（display：inline）：a、span、small、strong、em、i、code、 行内块（display：inline-block）：img、input 区别： 1.
web前端面试题（必背面试题）
Z_Gleng的博客
05-25 3万+
自己总结的常见的面试题 总字数13万+ 大概有200+左右道题 会不定期更新
《WEB前端应用技术》教学大纲.docx
12-15
本课程的主要内容包括HTML基本标记、CSS基础选择器、CSS文本字体样式、CSS复合选择器、盒子模型、浮动定位、表格标记、表单标签控件、网页布局、响应式页面布局等。 为了确保学生能够顺利地完成课程目标，本课程还...
移动端 h5开发相关内容总结——CSS篇
热门推荐
强子的专栏
01-06 3万+
1.移动端开发视窗口的添加h5端开发下面这段话是必须配置的<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">其它相关配置内容如下： width viewport 宽度(数值/device-width) height viewport 高度(数值/device-height) in
web前端开发笔试题
husbandhu的博客
06-24 839
1.src与href的区别 (1)请求资源类型不同 ①href是Hypertext Reference的缩写,表示超文本引用。用来建立当前元素和 文档之间的链接。常用的有:link、a标签 ②在请求 src 资源时会将其指向的资源下载并应用到文档中，常用的有:script， img 、iframe； (2)作用结果不同 ①href 用于在当前文档和引用资源之间确立联系 ②src 用于替换当前内容 (3) 浏览器解析方式不同 ①若在文档中添加href ，浏览器会识别该文档为 CSS 文件，就会
前端coderwhy前端系统课 - 阶段六VUE (整理版)（更新中）
10-23
带样式的版本，相对于博客内的文章更好阅读些
B站coderwhy老师Vue课程上课课件代码笔记资料
09-11
B站视频地址： https://www.bilibili.com/video/BV15741177Eh?from=search&seid=291894933216424179 B站视频是免费的，讲的很好，这里放一份资料，方便大家学习。
coderwhy - WEB前端线上系统课全程直播课
yyds543a的博客
03-18 1507
性能优化是把双刃剑，有好的一面也有坏的一面。好的一面就是能提升网站性能，坏的一面就是配置麻烦，或者要遵守的规则太多。并且某些性能优化规则并不适用所有场景，需要谨慎使用，请读者带着批判性的眼光来阅读本文。
coderwhy前端课程笔记|javascript基础教程|浏览器渲染原理,网页被解析的过程,渲染引擎如何解析页面呢？渲染页面详细过程,WebSocket和http协议有什么区别
VAN
04-11 43
◼ 大家有没有深入思考过：一个网页URL从输入到浏览器中，到显示经历过怎么样的解析过程呢？
Node.js学习笔记 更新完毕 2022 coderwhyWEB前端体系课
专注于 前端开发 知识分享
09-16 1057
Node.js是一个基于V8 JavaScript引擎的JavaScript运行时环境模块化开发最终的目的是将程序划分成一个个小的结构;这个结构中编写属于自己的逻辑代码有自己的作用域定义变量名称时不会影响到其他的结构这个结构可以将自己希望暴露的变量 函数 对象 等导出给其他 结构使用也可以通过某种方式导入另外结构中的变量 函数对象 等上面提到的结构就是模块按照这种结构划分开发程序的过程 就是模块化开发的过程pnpm:理解为 performant npm 缩写;
coderwhy--前端知识整合包--htmlcss03
Princesk的博客
09-24 349
coderwhy–前端知识整合包–html/css03 1、CSS文本属性 text-decoration: underline:下划线 overline：上划线 line-through：中划线（删除） letter-spacing和wordspacing（正负都行） letter-spacing:字母之间的间距 <head> <style> .one{ letter-spacing:10px; <!--letter-space
coderwhy前端课程课堂笔记|react教程|-1react特点，组件化开发，数据以来，事件绑定，电影列表数据，vscode代码片段
最新发布
VAN
04-18 68
Vue Composition API学习了React Hooks的思想。
CoderWhy
m0_66445398的博客
03-28 3115
前端性能优化建议 性能优化是把双刃剑，有好的一面也有坏的一面。好的一面就是能提升网站性能，坏的一面就是配置麻烦，或者要遵守的规则太多。并且某些性能优化规则并不适用所有场景，需要谨慎使用，请读者带着批判性的眼光来阅读本文。 前端性能的一个重要指标是页面加载时间，不仅事关用户体验，也是搜索引擎排名考虑的一个因素。 Donwload: 大神coderwhy WEB前端线上系统课 来自Google的数据表明，一个有10条数据0.4秒能加载完的页面，变成30条数据0.9秒加载完之后，流量和广告收入下降90%。 Goo
前端项目总结干货 + 渡一、coderwhy、黑马、尚硅谷实操笔记（第二版，持续更新中~~~）
qq_53461589的博客
05-06 2万+
reflow 的本质就是重新计算 layout 树。当进行了会影响布局树的操作后，需要重新计算布局树，会引发 layout。为了避免连续的多次操作导致布局树反复计算，浏览器会合并这些操作，当 JS 代码全部完成后再进行统一计算。所以，改动属性造成的 reflow 是异步完成的。也同样因为如此，当 JS 获取布局属性时，就可能造成无法获取到最新的布局信息。浏览器在反复权衡下，最终决定获取属性立即 reflow。repaint 的本质就是重新根据分层信息计算了绘制指令。
韩顺平讲解：HTML+CSS+JS网页设计深度解析
"51CTO下载-韩顺平html+css+js笔记" 网页设计是构建互联网应用程序的关键组成部分，而HTML、CSS和JavaScript是这一领域不可或缺的三大核心技术。韩顺平的html+css+js笔记提供了对这些技术的详细讲解，适合初学者和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值