深入浅出的CSS项目开发总结

╰+攻爆jí腚メ 2022-12-19 13:12 65阅读 0赞

### 这里写目录标题 ###

*  一：布局
 *   *  1. 遍历出的盒子最后边的\`border\`看不到
     *  2. 设置元素的垂直对齐方式\`vertical-align\`
     *  3. 伪类使用
     *  4. 外边距合并(外边距塌陷) ⭐
 *  参考

# 一：布局 #

## 1. 遍历出的盒子最后边的`border`看不到 ##

原因：  
盒子模型默认使用的是`标准盒子模型`即`W3C盒子模型`，

> box-sizing: content-box;

产生的问题：

最右侧的`border`看不到了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center]  
解决方法：  
将盒子模型设置为`IE盒子`

> box-sizing: border-box;

解决效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 1]

## 2. 设置元素的垂直对齐方式`vertical-align` ##

*  属性：  
    `vertical-align`
 *  定义和用法  
    vertical-align 属性设置元素的垂直对齐方式。
 *  说明  
    该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
 *  **实例1**

<html>
    
    <head>
    <style type="text/css"> img.top { vertical-align:text-top} img.bottom { vertical-align:text-bottom} </style>
    </head>
    
    <body>
    
    <p>
    这是一幅<img class="top" border="0" src="/i/eg_cute.gif" />位于段落中的图像。
    </p> 
    
    <p>
    这是一幅<img class="bottom" border="0" src="/i/eg_cute.gif" />位于段落中的图像。
    </p>
    
    </body>
    
    </html>

*  效果  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 2]

> [CSS vertical-align 属性 https://www.w3school.com.cn/css/pr\_pos\_vertical-align.asp][CSS vertical-align _ https_www.w3school.com.cn_css_pr_pos_vertical-align.asp]

*  **实例2 项目开发实际遇到情况**
 *  UI样式：  
    ![在这里插入图片描述][20201109000607362.png_pic_center]
 *  自己的代码实现

<div class="aside">
         <div class="aside-value">{
       { item.ratio }}%</div>
         <div class="aside-suffix">生存</div>
       </div>

.aside { 
        height: 47px;
        font-size: 32px;
        font-family: SourceHanSansSC, SourceHanSansSC-Bold;
        font-weight: 700;
        color: #67d8c2;
        line-height: 47px;
        position: absolute;
        right: 20px;
        bottom: 17px; div { 
          display: inline-block;
        }
        .aside-suffix { 
          height: 20px;
          font-size: 14px;
          font-family: SourceHanSansSC, SourceHanSansSC-Regular;
          font-weight: 400;
          line-height: 20px;
          width: 28px;
          // vertical-align: top;
          // margin-top: 17px;
        }
        .aside-value { 
          padding-right: 8px;
        }
      }

*  没添加`vertical-align: top;`样式的时候并不很容易实现ui的样式  
    此时加`margin`属性并不起作用，就像下面这样  
    ![在这里插入图片描述][20201109001042901.png_pic_center]
 *  加上`vertical-align: top;`属性后，使用margin就有效果了  
    ![在这里插入图片描述][20201109001223810.png_pic_center]

## 3. 伪类使用 ##

块级元素和内联元素都可以使用，

**注意，一下写法使用绝对定位才能正常显示。**

.input::after { 
      content: '';
      background-color: #91acc5;
      width: 9vw;
      height: 1px;
      position: absolute;
      top: 8.5vw;
      left: 1.5vw;
    }

## 4. 外边距合并(外边距塌陷) ⭐ ##

**外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。**

**合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。**、

**`外边距合并`**  
外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。

**简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。**

**当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 3]  
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：  
![在这里插入图片描述][2020111015462646.png_pic_center]  
尽管看上去有些奇怪，但是外边距甚至可以与自身发生合并。

假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：  
![在这里插入图片描述][20201110154648293.png_pic_center]  
如果这个外边距遇到另一个元素的外边距，它还会发生合并：  
![在这里插入图片描述][20201110154705850.png_pic_center]  
这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。

外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 4]  
注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

*  [CSS 外边距合并 https://www.w3school.com.cn/css/css\_margin\_collapsing.asp][CSS _ https_www.w3school.com.cn_css_css_margin_collapsing.asp]
 *  [margin-塌陷问题 - hugejinfan - 博客园 https://www.cnblogs.com/hugejinfan/p/5901320.html][margin-_ - hugejinfan - _ https_www.cnblogs.com_hugejinfan_p_5901320.html]

# 参考 #

*  [CSS盒模型详解（图文教程） - 千古壹号 - 博客园 https://www.cnblogs.com/qianguyihao/p/7256371.html][CSS_ - _ - _ https_www.cnblogs.com_qianguyihao_p_7256371.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/8b0a8a2909644dc4810d1ce2192e5910.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201107192626668.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20201109000144538.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70#pic_center
[CSS vertical-align _ https_www.w3school.com.cn_css_pr_pos_vertical-align.asp]: https://www.w3school.com.cn/css/pr_pos_vertical-align.asp
[20201109000607362.png_pic_center]: https://img-blog.csdnimg.cn/20201109000607362.png#pic_center
[20201109001042901.png_pic_center]: https://img-blog.csdnimg.cn/20201109001042901.png#pic_center
[20201109001223810.png_pic_center]: https://img-blog.csdnimg.cn/20201109001223810.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20201110154550327.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70#pic_center
[2020111015462646.png_pic_center]: https://img-blog.csdnimg.cn/2020111015462646.png#pic_center
[20201110154648293.png_pic_center]: https://img-blog.csdnimg.cn/20201110154648293.png#pic_center
[20201110154705850.png_pic_center]: https://img-blog.csdnimg.cn/20201110154705850.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 4]: https://img-blog.csdnimg.cn/20201110154725577.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70#pic_center
[CSS _ https_www.w3school.com.cn_css_css_margin_collapsing.asp]: https://www.w3school.com.cn/css/css_margin_collapsing.asp
[margin-_ - hugejinfan - _ https_www.cnblogs.com_hugejinfan_p_5901320.html]: https://www.cnblogs.com/hugejinfan/p/5901320.html
[CSS_ - _ - _ https_www.cnblogs.com_qianguyihao_p_7256371.html]: https://www.cnblogs.com/qianguyihao/p/7256371.html