一、 width属性介绍
width属性用于设置元素的宽度。width默认设置内容区域的宽度，但如果box-sizing属性被设置为border-box，就转而设置边框区域的宽度。
二、 话不多说，直接上代码看效果
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Document</title>
7 </head>
8
9 <style>
10 div {
11 color: #fff;
12 font-size: 2rem;
13 text-align: center;
14 }
15 .parent {
16 width: 600px;
17 height: 600px;
18 background-color: blue;
19 border: 10px solid black;
20 padding: 20px;
21 }
22
23 .child {
24 background-color: red;
25 border: 10px solid grey;
26 margin: 20px;
27 height: 100px;
28 }
29
30 .auto{
31 width: auto;
32 }
33
34 .hundred-percent{
35 width: 100%;
36 }
37 </style>
38
39 <body>
40 <div class="parent">
41 parent
42 <div class="child auto">child1: width:auto</div>
43 <div class="child hundred-percent">child2: width:100%</div>
44 </div>
45 </body>
46</html>
47
三、 分析比较
-
我们给parent设置了
padding:20px内边距，给两个child都设置了margin:20px的外边距。child1的width属性是auto,child2的width属性是100%。 -
很明显地看到两个child的不同表现，child1的宽度是可以适应的，不会溢出其父元素。
-
child1最终的宽度值:540px=600px(父元素宽度)−20px(父元素padding)−20px(child1margin)−10px(父元素border)−10px(child1border)child1最终的宽度值: 540px = 600px(父元素宽度) - 20px(父元素padding) - 20px (child1 margin) - 10px(父元素border) - 10px (child1 border)
-
而child2的宽度则是和父元素一样大最终溢出了其父元素。
-
child2最终的宽度值:600px=600px(父元素宽度)child2最终的宽度值: 600px = 600px(父元素宽度)
四、 结论
-
width:100%: 子元素的 content 撑满父元素的content，如果子元素还有 padding、border等属性，或者是在父元素上设置了边距和填充，都有可能会造成子元素区域溢出显示; -
width:auto: 是子元素的 content+padding+border+margin 等撑满父元素的 content 区域。 -
所以，在开发中尽量还是选择
width:auto,因为当从边距、填充或边框添加额外空间时，它将尽可能努力保持元素与其父容器的宽度相同。而宽度：100%将使元素与父容器一样宽。额外的间距将添加到元素的大小，而不考虑父元素。这通常会导致问题。