CSS之盒子模型一_css 还是csu

作者：我家小花儿 | 2024-05-12 13:37:11

踩

css 还是csu

CSS中用display属性来定义盒子模型，display：block和display：inline分别声明的是盒子的block类型和inline类型

div默认就是block类型、span默认就是inline类型

具体的表现就是div元素所代表的block类型的元素的宽度会占满整个浏览器，span元素所代表的inline类型的元素的宽度只是该元素内容的宽度


<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<style>
div {
  background-color: red;
}
span {
  background-color: black;
}
</style>
</head>
<body>
<div>div元素</div>
<div>div元素</div>
<span>span元素</span>
<span>span元素</span>
 
</body>

运行结果如图：

当然我们可以把代码修改成下面的样子，去修改div和span元素默认的类型，让div成为inline类型，span成为


<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<style>
div {
  background-color: red;
  display: inline;
}
span {
  background-color: black;
  display: block;
}
</style>
</head>
<body>
<div>div元素</div>
<div>div元素</div>
<span>span元素</span>
<span>span元素</span>
 
</body>

结果如下图：

按上上面的例子，一行当中不允许有多个block类型的元素，而可以有多个inline类型元素（但也不是绝对，在css2.1之前可以使用float或者position来改变这种情况），并且block类型的模型，可以添加width属性，如果在上述代码中span元素声明成了block模型，那么还可以添加一段代码width：300px，这样block类型的span元素就会变成300px的宽度，效果如下图：

上述图片会看见黑色block类型宽度是300px，每行并没有占满整个浏览器的宽度，同样证明了block类型的盒子模型只能一行一个，无论他的宽度是否横跨浏览器宽度

但在CSS2.1之后，display添加了另一个值，display：inline-block用来使同一行可以有多个block类型的盒子模型

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/559174