非零基础自学前端最后一遍一 HTML+CSS 10 CSS盒子模型 10.15 盒子模型-案例练习

清疚 2024-03-26 21:52 42阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  10 CSS盒子模型
         *   *  10.15 盒子模型-案例练习
             *   *  10.15.1 元素的水平居中方案
                 *  10.15.2 案例1
                 *  10.15.3 案例2
                 *  10.15.4 案例3

![在这里插入图片描述][36b3899479d04e21847313ce22d4c1fb.png_pic_center]

#### 一 HTML+CSS ####

#### 10 CSS盒子模型 ####

##### 10.15 盒子模型-案例练习 #####

###### 10.15.1 元素的水平居中方案 ######

*  上在一些需求中，需要元素在父元素中水平居中显示（父元素一般都是块级元素、inline-block）
 *  行内级元素(包括inline-block元素)
    
     *  水平居中：在父元素中设置text-align: center
 *  块级元素
    
     *  水平居中：margin: 0 auto

<!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 {
          
          background-color: #f00;
          text-align: center;
        }
    
        .box span {
          
          background-color: #0f0;
        }
    
        .container {
          
          background-color: #00f;
          width: 100px;
          height: 100px;
        }
      </style>
    </head>
    
    <body>
    
      <div class="box">
        <span>我是span元素</span>
        <div class="container"></div>
      </div>
    
    </body>
    
    </html>

![在这里插入图片描述][54f6d9b553a6405c85e68a773dd0d83b.png_pic_center]

###### 10.15.2 案例1 ######

reset.css

body, p, h3 {
        
      margin: 0;
      padding: 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的重置 */
    a {
        
      text-decoration: none;
      color: #333;
      font-size: 12px;
    }

渲染效果

![在这里插入图片描述][d737cc6c6dee4f8796828442e5af6a7f.png_pic_center]

###### 10.15.3 案例2 ######

demo02.css

.item {
        
      display: inline-block;
    
      width: 234px;
      height: 300px;
      padding: 20px 10px;
    
      text-align: center;
    
      background-color: #fff;
      box-sizing: border-box;
    }
    
    .item:hover {
        
      box-shadow: 0 2px 20px 5px rgba(0, 0, 0, .1)
    }
    
    .item img {
        
      width: 160px;
      height: 160px;
    }
    
    .item .title {
        
      margin-top: 14px;
    }
    
    .item .desc {
        
      color: #999;
      margin-top: 8px;
    
      /* 单行显示省略号 */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .item .price {
        
      margin-top: 14px;
      font-size: 14px;
    }
    
    .item .new-price {
        
      color: #ff6700;
    }
    
    .item .old-price {
        
      color: #999;
      text-decoration: line-through;
      margin-left: 5px;
    }

渲染效果

![在这里插入图片描述][3db5fa2cdcf0461abfeee03d2ac06816.png_pic_center]

###### 10.15.4 案例3 ######

<!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>
      <link rel="stylesheet" href="./css/reset.css">
      <style>
        a {
          
          display: block;
        }
    
        .item {
          
          width: 300px;
          margin: 0 auto;
        }
    
        .item .album img {
          
          width: 100%;
          border-radius: 8px;
        }
    
        .item .info p {
          
          font-size: 15px;
          margin-top: 8px;
    
          /* 显示一行 */
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          /* display: -webkit-box;
          -webkit-line-clamp: 3;
          -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>

渲染效果

![在这里插入图片描述][6371298fe6c94c4aa4ffa46bc67badc7.png_pic_center]

[36b3899479d04e21847313ce22d4c1fb.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/6f06391f4954404385a37ab0e47e5bee.png
[54f6d9b553a6405c85e68a773dd0d83b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/d0c2f98d3a2441bbbf0a304a25658b11.png
[d737cc6c6dee4f8796828442e5af6a7f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/bb86e7ff99d64f13911448ed17203711.png
[3db5fa2cdcf0461abfeee03d2ac06816.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/fff77353e9584e8da96989ed1afdb72e.png
[6371298fe6c94c4aa4ffa46bc67badc7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/3ff9766328f846438560fc05c5ab516d.png