01-HTML+CSS/06-CSS盒子模型-CSS设置背景

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（为精灵图做准备）

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

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 214,837评论 6赞 496
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,551评论 3赞 389
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 160,417评论 0赞 350
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,448评论 1赞 288
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,524评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,554评论 1赞 293
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,569评论 3赞 414
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,316评论 0赞 270
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,766评论 1赞 307
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,077评论 2赞 330
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,240评论 1赞 343
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,912评论 5赞 338
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,560评论 3赞 322
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,176评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,425评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,114评论 2赞 366
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,114评论 2赞 352

01-HTML+CSS/06-CSS盒子模型-CSS设置背景

CSS盒子模型-CSS设置背景

盒模型

margin

padding/margin

margin上传递

如何防止触发传递问题

margin下传递

margin折叠

块级元素的水平居中

outline

box-shadow

text-shadow

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

前景色和背景色

box-sizing

盒模型

案例练习

文本修饰

一行

多行

background-image

background-repeat

background-size

background-position

background-attachment

background

内部回顾

一、盒子模型

1.1.margin

1.1.outline

1.3.box-shadow

1.4.text-shadow

1.5.box-sizing

1.6.注意事项

1.7.水平居中

二、案例练习

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的对比和选择

课后作业

一. 完成课堂所有的代码

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

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

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

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

六. 说出元素水平居中的方案以及对应的场景

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

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

推荐阅读更多精彩内容