必须知道

1 .width作用在内在盒子，也就是容器盒子

auto的四种宽度表现

auto是width的默认值，尽管这样，却也是一个深藏不漏的家伙

1 .充分利用可用空间(外部尺寸)

1 .div,p这些元素的宽度默认是100%于父级容器的
2 .这种充分利用可用空间的行为还有一个专有名字fill-available

2 .收缩与包裹（内部尺寸）

1 .浮动，绝对定位，inline-block或者table元素,会收缩到内容大小
.container{
            /* float: left; */
            position: absolute;
        }
<div class="container">
        飞流直下三千尺
 </div>
正常这个盒子大小应该是占满屏幕的，但是现在只有112px

3 .收缩到最小min-content（内部尺寸）

1 .

4 .超出容器限制 max-content（内部尺寸）

1 .除非有明确的width设置，否则上面三种情况尺寸都不会主动超过父级宽度，但是如果是很长的文字，而且设置了white-space:nowrap.文字就会一直向右排列，不会换行，这种情况就会超出容器的宽度

截屏2022-02-27 下午5.27.56.png

如图，不设置white-space:nowrap的时候，宽度不会超，只会向下

截屏2022-02-27 下午5.29.32.png

如图，如果加了white-wrap:nowrap;会超出容器限制

总结

1 .在css世界中，盒子分为“内在盒子”，‘外在盒子’，显示也分为“内部显示”，‘’外部显示‘。尺寸也分为“内部尺寸”，’外部尺寸‘
2 .内部尺寸英语是'intrinsic sizing',表示尺寸由内部元素决定，外部尺寸“extrinsic sizing”,宽度由外部元素决定

外部尺寸和流体特性

1 .正常流宽度.当我们往页面中添加一个div元素，div的尺寸就像是流铺满元素一样，会铺满整个容器，但是这并不等于这个div的宽度是width:"100%".所以当把一个元素设置为display:block的时候，在加一条width:100%是不对的。这俩是互斥的，给一个元素添加宽度是会破坏他的流动性

1 .其次，流自己的铺满并不仅仅是width:100%,而是margin，border,padding,和content内容区域自动分配水平空间的机制。
2 .所以张鑫旭的“无宽度”原则还是有必要的.

2 .格式化宽度：在绝对定位模型中，默认是包裹性，宽度由内容决定，但是如果有以下属性，left/righ或top/bottom对立方位的属性值同时存在的时候，他的宽度表现为格式化宽度，宽度大小由最近的具有定位特性(position的值不是static)的祖先元素计算而来

position:absolute;left:20px;righht:20px;这种情况下元素宽度是由最近定位的祖先元素款速定位而来

内部尺寸与流体特性

1 .尺寸的大小由内部的元素决定。如果一个元素没有内容的时候他的宽度是0，那么这个元素就是由内部元素决定
3 .内部尺寸的三种表现形式

1 .包裹性

1 .元素尺寸由内部元素决定，会永远小于“包含块”容器的尺寸。对于一个元素如果display：inline-block，那么即使里面内容再多，只要是正常文本，宽度也不会超过容器
2 .Button元素，按钮就是最具代表性的inline-block元素。按钮文字越多，宽度越高，如果文字足够多，则会在容器的宽度处自动换行。

1 .注意，button按钮标签才会自换行，input标签按钮，默认white-space:pre是不会换行的
2 .包裹性实际的使用:文字少的时候居中显示，文字多的时候左对齐
.container{
           text-align: center;
           background-color: blueviolet;
           padding:10px;
           width: 200px;
        }

        .content{
            display: inline-block;
            text-align: left;
        }
<div class="container">
        <p class="content">123123123123</p>
    </div>

2 .首选最小宽度

1 .也就是css不会在width:auto的时候，并且有图文的时候不会是0的。会选最小宽度的
2 .汉字的时候，最小宽度是一个汉字的宽度
3 .英语单词的时候，最小宽度有额定的英文字符单元决定
4 .使用情况，画一些图形:利用连续单词不换行的特性，可以控制什么时候换行，什么时候正常显示，所以可以非常方便实现这些凹凸的形状

截屏2022-02-27 下午7.39.21.png

.ao{
                display: inline-block;
                width: 0;
            }

            .ao:before{
                content:"love 你 love";
                outline:2px solid #eee;
            }

3.最大宽度

1 .最大宽度就是元素可以有的最大宽度。实际上最大宽度实际等同于“包裹性”。如果设置了withe-space:nowrap。那就是最后没有换行的宽度。如果内部没有块级元素或块级元素没有设置宽度值，那么最大宽度实际上是最大的连续内联盒子的宽度
2 .连续内联盒子就是全部都是内联级别的一个或一堆元素，中间没有任何的换行标签br或其他块级元素
3 .实际用处:实现滚动

滚动的实现方式有两种原理：一种是使用原生的滚动，scrollLeft/scrollTop值的变化，他的优点是简单，不足是效果呆板。另一种是借助内部元素的尺寸和容器的关系，通过修改内部元素的位置实现滚动效果，优点就是效果很炫酷，比如滑动的阻尼感。iScroll就是使用这种方式实现的

width值作用的细节width:100px是怎么起作用的

1 .上面全部都只是说了width:auto的点，别的都没说
2 .width宽度直接作用在内在盒子上，内在盒子是由content box，padding box,border box,margin box。
3 .margin的背景永远是透明的，因此不能作为background-clip,background-origin属性值出现。
4 .100px作用在了content box上，但是由于div默认的padding,border,margin都是0，因此div所呈现的宽度就是100像素.如果此时padding，border也有值的话，那么最后的表现就不是100px.一定比这个大

缺点

1 .流动性丢失，对于块状元素来说，如果是width:auto的话，元素会如水流般充满整个元素，一旦设定了width具体数值，元素的流动性就会被阻断，因为元素给定宽度就像河流中间竖起两个大闸一样，流动性丢失
2 .与现实世界表现不一致.包含padding或border会让元素宽度变大。我们设置100像素宽度，其实希望是整个元素的最终宽度是100px,而不是最后比这个大.-解决方式-宽度分离原则:和宽度有关的属性要分在两个地方写，比如父元素写width属性，子元素做padding,border这些属性

.box{
                width: 10px;
                border:1px solid red;
            }
.box{
                width: 10px;
                padding:10px;
            }
//这种情况不要出现

3 .解决方式2，使用box-sizing属性：他可以改变width作用的细节.box-sizing属性值

1 .content-box:默认值
2 .padding-box:不支持
3 .border-box:不支持
4 .margin-box:不支持
5 .border-box:100px像素的宽度将会作用到border box上

4 .注意box-sizing不持之margin,只有当元素没有水平margin的时候，box-sizing才能真正无计算，上面提到的宽度分离元素是可以真正解决这个问题的
5 .唯一离不开box-sizing的元素就是input和textarea元素,让他们实现100%自适应宽度

 .ao{
            width:300px;
        }
 .ao textarea{
            width:100%;
        }
 <div class="ao">
            <textarea name="" id="" cols="30" rows="10"></textarea>
    </div>