Css深刻理解width：auto的⽤法
前⾔
看了我上篇⽂章的⼈可能觉得我⼩题⼤做，css2有什么好看的？那么我就参考《css世界》这本书，与⼤家⼀同复习理解下具体的点，对我们代码的影响。
⾸先，我们需要清楚width默认值就是auto，所以不⽤去⼈为写代码控制其宽度⾃动哦。
常见的4种宽度表现
充分利⽤可⽤空间
默认块元素都是100%⽗元素宽度，这点⼤家都知道，但很多⼈会针对块元素写多余的宽度为100%。
收缩与包裹
常见的是浮动，⾏内块元素，绝对定位。我们称这种特性为包裹性。
收缩到最⼩
这个最容易出现在table-layout为auto表格中，我们不控制表格单元格宽⾼的时候，当每⼀列都放不下的时候，会把⽂字截断，然⽽⼿机号，英⽂单词，数字等不能断，就可能会导致某些只是⽂字的列，每个字都换⾏显⽰，称min-content。
超出容器宽度
⼀般元素不会超出容器显⽰，除⾮以下两种情况，尤其第⼀种是初级前端在开发中经常遇到的问题。
1. 内容出现了英⽂或者数字，不换⾏显⽰
2. 设置了样式white-space:nowrap，不换⾏。
针对上⾯两个问题，可以分别做如下纠正。
1. word-break:break-all
2. white-space:normal
其他特性
好看的css代码外部尺⼨与流体特性
正常流宽度
块元素默认有流体特性，继承⽗元素宽度，不会超出⽗元素宽度。然⽽有些⼈还是这样写代码：
a{
display:block;
width:100%;
}
⼜或者这样的代码，你给导航中的a标签设置间距宽度什么的，其实标签变为块级之后，会⾃动根据计算拿到属于⾃⼰的宽度，多此⼀举。
.nav{
width:240px}
.nav-a{
display:block;
width:200px;
margin:0 10px;
padding:9px 10px ;}
格式化宽度
格式化宽度指出现在绝对定位模型中，包括绝对定位以及固定位置，只是两者参考点不同⽽已。默认情况下其特性为包括性，由内容宽度决定盒⼦宽度，但是当（⾮替换元素）left/right同时设置的时候，其宽度为相对于最近的定位特性不是static的祖先元素计算。其宽度会是⽗元素宽度-left-right,⽽其他特性仍然不变。这点在我们实际的布局中有很⼤的⽤途，⽐如我分享的css 实⽤技术中的变宽与固宽结合的布局。
.par{
width:1000px;
position:relative;
}
//⼦元素宽度为700px
.son{
position:absolute;
left:100px;
right:200px;}
内部尺⼨与流体特性
包裹性
包括性是指当元素为⾮块元素的时候，其宽度由内容决定，⾃⼰只负责根据需要扩⼤，⽽由于外部肯定是块元素，所以⼜不会超出容器特性。
实际作⽤有可以不⽤脚本实现⽂字较少⽔平居中，⽂字较多，靠左显⽰。
.container{
text-align:center;
}
.content{
display:inline-block;
text-align:left;
}
⾸选最⼩宽度
这个简单的理解就是元素的实际宽度取决于内容的最⼩单元，这个优先级⽐width:0⾼。⽐如你设置了宽度是0，但是内容有⼀个汉字，就会有⼀个汉字的⼤⼩；为⼀个单词就会显⽰⼀个单词的⼤⼩。
这种实际的⽤途可以做各种简单的图形，⽐如凹凸形状的，然后内容设置为⽩⾊就可以。
.ao{
width:0;
display:inline-block;
}
.ao:before{
color:#fff;
content:'love你love';
outline:2px solid #000;
}
最⼤宽度
最⼤宽度就是元素可以有的最⼤宽度，⼀般情况下我们⽤于限制⽂字或者内容特别多的情况。这样的实际场景并不多。
在这⾥我们只延伸两种滚动效果，⼀种是原⽣的页⾯或者dom滚动，另⼀种就是iscroll那样的设置内部元素与容器的位置关系来展现，效果更好。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。