CSS元素的宽高由什么决定？

深藏阁楼爱情的钟 2022-02-20 09:42 230阅读 0赞

任何元素都可以是行内元素或块级元素，只需通过css display来设置。  
那么，为什么我们会说div是块级元素，span是行内元素。这是因为浏览器默认div为块级元素，默认span为行内元素。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdmYW5neXVhbg_size_16_color_FFFFFF_t_70]

### 行内元素 ###

1.  表现形式
    
        <span class="first">hug</span>
          <span class="first">hug</span> 
          <span class="first">hug</span>   
          <span class="first">hug</span>
    
    ![在这里插入图片描述][20190413104208639.png]  
    当一行显示不下时会自动换行，  
    ![在这里插入图片描述][20190413104431537.png]  
    假如是中文，一行显示不下会被拆分成两块：  
    ![在这里插入图片描述][20190413104557264.png]  
    但如果是英文，则不会被拆开，而是整块换行：  
    ![在这里插入图片描述][20190413104652790.png]  
    用css word-break可以控制换行方式，可参考mdn
2.  行内元素高度由什么决定？  
    首先，不同字体的行高是不一样的，如下，font-size同是100px，大小行高都是不一样的，这个就和字体的设计有关了，字体设计都有默认行高，所以行内元素的高度就由字体默认行高决定的
    
        <!DOCTYPE html>
        <html>
        <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width">
          <title>JS Bin</title>
          <style>
            span{
              border:1px solid red;  
              font-size:100px;
            }
            span.first{
              font-family:'微软雅黑'; 
            }
            span.second{
              font-family:"宋体";
            }
            div{
              border:1px solid green;
            }
          </style>
        </head>
        <body>
          <div>
            <span class="first">hug</span>
            <span class="second">hug</span>    
          </div>
        
        </body>
        </html>
    
    ![在这里插入图片描述][20190413105826775.png]

### 块级元素 ###

1.  表现形式：
    
        <!DOCTYPE html>
        <html>
        <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width">
          <title>JS Bin</title>
          <style>
            span{
              border:1px solid red;  
              font-size:100px;
              line-height:200px
            }
            span.first{
              font-family:'微软雅黑'; 
            }
            span.second{
              font-family:"宋体";
            }
            div{
              border:1px solid green;
            }
          </style>
        </head>
        <body>
          <div>
            <div class="first">hug</div>
            <div class="second">hug</div>    
          </div>
        </body>
        </html>

![在这里插入图片描述][20190413110745848.png]  
2. 宽度由什么决定的？  
宽度默认100%，当然可以通过css设置其宽度。  
3. 高度由什么决定的？  
由其内部文档流元素的高度的总和决定的  
4. 什么是文档流？  
是指文档内元素的流动方向，内联元素从左往右流  
，块级元素从上往下流,每个块占一行。  
5. 假如一个div由多个span，其高度由什么决定？  
由最高的span高度决定

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlbmdmYW5neXVhbg_size_16_color_FFFFFF_t_70]: /images/20220220/c3f8f08d109e42fea91ef7447d276f0b.png
[20190413104208639.png]: /images/20220220/0971471688814dcdbdb515bbb64f682a.png
[20190413104431537.png]: /images/20220220/4d4d7ef37da348d8ab9507d59dbedcc4.png
[20190413104557264.png]: /images/20220220/f8b318ee066c41078dea433029f5440a.png
[20190413104652790.png]: /images/20220220/3337756f36ab42d48bb587ae15494a41.png
[20190413105826775.png]: /images/20220220/606b0d48984a477ca0469135009f6bf4.png
[20190413110745848.png]: /images/20220220/6fac544bae0841398c0302552f7cb79d.png