css 父子盒子的width 问题

最新推荐文章于 2024-04-25 11:27:37 发布

木木林_

最新推荐文章于 2024-04-25 11:27:37 发布

阅读量2.8k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_44812835/article/details/108330534

css 专栏收录该内容

7 篇文章

订阅专栏

本文探讨了CSS中影响子元素宽度的几种情况，包括：未设置宽度时默认撑满父盒子，设置`display: inline`或`inline-block`导致不占宽，`float`属性和`position`属性（如`absolute`、`fixed`）使元素脱离文档流不占宽，以及`flex`布局下`flex-direction: row`对子元素宽度的影响。总结指出，判断元素是否占宽关键看其是否被视为块级元素。

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

1.前言

平时在写css的时候，并没有刻意关注盒子的width属性，有时候要加，有时候不加，有时候默认占满父盒子，有时候却又没有宽度。今来看看到底有哪些情况

2.介绍

首先width它不是一个可以继承的属性，之所以可以和父盒子宽度一样，应该还是因为块级元素默认独占一行的缘故会撑满父盒子的宽度
知道它是因为块级元素的特性撑满父元素，很多现象就可以解释了
下面我们通过代码来一探究竟

//dom结构
<body>
  <div class="box">
   <div class="son"></div>
  </div>
</body>
//css样式
.box{
    width: 600px;
    height: 300px;
    background-color: aquamarine;   
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
   }
   .son{
    height: 100px;
    background-color: forestgreen;
   }