布局时候width和height的计算

最新推荐文章于 2024-01-16 10:00:00 发布

Adventurers

最新推荐文章于 2024-01-16 10:00:00 发布

阅读量1.4k

点赞数

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

本文链接：https://blog.youkuaiyun.com/Adventurers/article/details/77189451

版权

css3 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用CSS3的calc()属性解决子元素超出父元素范围的问题。通过具体实例展示了如何利用calc()进行精确布局，包括调整子元素的宽度、边界和填充等。

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

子元素border，margin，padding有值时

HTML
<div class="wrapper">
  <div class="content">
    <div class="c1">111</div>
    <div class="c1">222</div>
  </div>
</div>

.wrapper{
  width:500px;
  height:300px;
  background-color:bisque
}
.content{
  display:flex;
  flex-flow:row wrap;
  /* width:calc(100% - 5*2px - 10*2px); */
 /* 此处也可以使用box-sizing */
  width:100%;
  /* box-sizing:border-box; */ 
  border:5px solid orange;
  padding:0 10px
}

效果如下
这里写图片描述
这种问题可以依靠盒模型解决 width:100%;box-sizing:border-box;
也可以依靠 calc() 这个css3的属性来解决 width:calc(100% - 5*2px - 10*2px); 5是border的值，10是padding值这里需要注意运算符号 - 前后需要有空格

content的子元素有margin值且子元素并列排布时候自身的margin值会影响布局

.c1{
  width:50%;
  box-sizing:border-box; 
  margin:0 10px;
  background-color:#eff243;
  height:100px;
}

这里写图片描述
50%的宽度加上margin值必然是子元素超出content的范围从而使后面的div往下排布

此时想到如果是子元素能使用父元素的50%的宽度再减去自身的margin值多好，bingo！calc就是用来干这个的

.c1{
  width:calc(50% - 10 * 2px);
  /* 对于并列的div我需要用margin将他们的距离拉开 */
  margin:0 10px;
  background-color:#eff243;
  height:100px;
}

这里写图片描述
整整齐齐
源码