css 一个默认宽度,然后由内容来自动增加宽度

发布网友发布时间：2022-05-13 21:20

共4个回答

懂视网时间：2022-05-14 01:41


 我是div

.boxa{
  width:300px;
  height:300px;
  background-color:green;
  border:2px solid red;
}
.boxb{
  
  height:300px;
  background-color:orange;
  border:2px solid red;
}

这段代码中 boxb 的实际宽度不会是300px;

虽然他继承的是父元素的100%;

关于这个我是这么理解的

这里boxc的宽度是300px, boxd的宽度是296px 也就是说父元素boxc可以随意设置盒子模型

boxd的宽只会等于你设置的这个300px宽,不会等于所有盒子模型相加的宽度

你只继承了它的宽没有继承他的其他值。

boxd是把所有盒子模型加起来计算的就是说是 296px宽度+边框的4px = boxc的300像素 boxd的盒子模型不会改变。

再来看一张图

这张图 boxd的宽度为276 276 + 20 +4=300px

等于boxc的宽度

也就是你父元素爱怎么加盒子模型就怎么加。

我子元素也可以加盒子模型，我最后的值要等于父元素的宽度。如果超出了会从宽度里减去。

如果有讲的不好和不对的地方欢迎大家指正。

热心网友时间：2022-05-13 22:49

那你应该设min-width最小宽度
让所有浏览器都支持min-width的CSS样式代码：
min-width:1000px;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)>1000?"1000px":"");
这里的1000和1000px是你需要的数值，注意3个数值的相同

热心网友时间：2022-05-14 00:07

热心网友时间：2022-05-14 01:42

min-width:100px; width:auto;