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

最新推荐文章于 2024-05-12 00:00:00 发布

方小圆

最新推荐文章于 2024-05-12 00:00:00 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：技术

本文链接：https://blog.youkuaiyun.com/fengfangyuan/article/details/89279533

技术专栏收录该内容

21 篇文章

订阅专栏

本文深入探讨了HTML中行内元素与块级元素的区别，包括它们的默认行为、如何通过CSS控制元素的显示方式，以及行内元素与块级元素在布局中的表现形式。文章还解释了元素高度与宽度的决定因素，以及文档流的概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

行内元素

表现形式
```
 hug
 hug 
 hug 
 hug 
```
当一行显示不下时会自动换行，

假如是中文，一行显示不下会被拆分成两块：

但如果是英文，则不会被拆开，而是整块换行：

用css word-break可以控制换行方式，可参考mdn

行内元素高度由什么决定？
首先，不同字体的行高是不一样的，如下，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>

在这里插入图片描述

块级元素

表现形式：

<!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>

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