width为auto与100%的区别

柔情只为你懂 2023-07-23 06:56 73阅读 0赞

我们平常在使用的时候width为auto与100%好像没有什么区别，但这里有一点点问题
因为盒模型的box-sizing默认为content-box，而导致了当width为100%的时候，盒子会被撑大，继而超过父盒子的大小，如下例
HTML

  1. <div class="container">
  2.             <div class="box">
  3.             </div>
  4.         </div>

CSS

  1. .container{ 
  2.                 width: 400px;
  3.                 height: 400px;
  4.                 margin: 0 auto;
  5.                 background-color: #ccc;
  6.                 position: relative;
  7.             }
  8.             .box{ 
  9.                 width: 100%;
  10.                 padding: 10px;
  11.                 height: 30%;
  12.                 background-color: rgba(100,100,250,0.3);
  13.                 border: 1px black solid;
  14.             }

效果图：
在这里插入图片描述
但如果width为auto的时候，盒子就不会被撑开，会在父盒子内进行布局
更改width

  1. .box{ 
  2.     width: auto;
  3. }

效果图为：
在这里插入图片描述

本文只用与个人学习与记录

发表评论

表情：
评论列表 （有 0 条评论，73人围观）

还没有评论，来说两句吧...

相关阅读

    相关 width与max-width的区别

        之前一直也都不太明白他们之间的应用，感觉他们之间的算是没有区别的（怎么可能！！！总不会无端端多一个属性吧），看了几次的概念也不知道他们的应用究竟在哪里，今天终于知道他们

    柔情只为你懂柔情只为你懂/ 0 赞/ 398 阅读