css之width

如何div没有设置height，那么它的高度将由内容撑开。高度的计算根据内容计算，css中控制高度的只有两个属性height和line-height。如果没有设置高度，那么该div会根据文字的大小获取默认的line-height来计算自己的高度。

但是如果没有设置 width，那么宽度通常是100%显示。（块级元素，默认的宽度就是100%）

Q：如何让width也根据内容自适应

1. display: inline;会让它根据内容来决定自身的尺寸
2. float: left;设置元素浮动会让它得到正确的宽度，但同时也彻底改变了它的布局模式
3. CSS 内部与外部尺寸模型 第三版是一个相对较新的规范，它为 width 和height 属性定义了一些新的关键字，width: min-content;margin: auto;让元素水平居中。min-content这个关键字将解析为这个容器内部最大的不可断行元素的宽度（即最宽的单词、图片或具有固定宽度的盒元素）。fit-content可得到和浮动一样的效果。
4. max-width: 300px;margin:auto;可让元素水平居中。

Q：margin: auto;实现水平居中。这条声明所产生的左右外边距实际上都等于视口宽度的一半减去内容宽度的一半。由于百分比在这里是基于视口宽度来解析的（假设所有祖先元素都没有显式指定宽度），我们可以把这个外边距的值表达为 50% - 450px。max-width:200px;margin: 1em calc(50% - 100px);也可实现元素的水平居中，或者给父元素设置padding: 1em calc(50% - 100px);也能达到同样效果。
这是如果取消width的设置，样式仍不会受到影响，因为当内边距是 50% - 450px 时，只可能给内容留出 900px（2×450px）的可用空间。