css 父子盒子的width 问题
程序员文章站
2022-05-05 08:47:15
...
平时在写css的时候，并没有刻意关注盒子的width属性，有时候要加，有时候不加，有时候默认占满父盒子，有时候却又没有宽度。今来看看到底有哪些情况
- 首先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;
}- 当没有给子盒子设置宽度时（默认撑满父盒子）效果如下
- 当给子元素设置 display: inline ，或者 display: inline-block;时 默认宽度就为0；（也就是只要是行内元素了就不会默认占宽了）效果如下
- 很多时候用到float时也会有with 不占宽的问题，这时候我们就要认清本质，在浮动的时候首先，元素可以当作会变为inline-block 并且脱离文档流 所以效果也可想而知 效果同上
- 还有position属性 它也可以改变元素的display属性，同样因为值为 absolute、fixed 都会使元素脱离文档流，并且可以看所display的值改为了inline-block 所以也同样不会占宽度
- 还有使用flex布局时，如果父盒子 flex-direction: row;
也会使元素变成inline-block 同样也会使得子元素不占宽度
总的来说想判断占不占宽度，就想想它是不是块级元素了，如果是那么便会默认占满父盒子的宽度
- 个人理解 如果有错误请及时告知，以免误导其他同学！！