什么元素可以有width和height
元素设置width和height是否生效跟display属性有关，当display：inline时，设置width，height是无效的，比如span元素它的默认样式为display：inline，设置宽高无效。对于其他情况，如display：block，inline-block,flex等设置宽高有效。
width，height的取值
width，height为具体值
（1）px,em。如：width：100px。
（2）100vw,100vh，其中100vw表示当前窗口宽度100%，100vh表示当前窗口高度100%。其中窗口动态改变大小时，vw和vh也会改变。
（3）calc()函数。如：height：calc(100vh - 32px)；表示当前窗口高度*100%-32px。
width默认为auto，height默认也为auto
当height为auto时，它的高度由子元素决定，子元素多高它就多高，如果没有子元素，那么高度就是0。
width为auto
width的默认值是auto。width的auto包含以下4种不同的宽度表现：
1、充分利用可用空间（fill）
2、收缩与包裹。（fit-content）
3、收缩到最小。（min-content）
4、超出容器限制.（max-content）
width为fill
尽可能宽，撑满父元素。如div，p标签这些元素的宽度默认是100%于父级容器的。
这种情况下设置宽度为100%是没有必要的，相反，设置了width：100%还会使得流动性丢失。如下例：
<h4>无宽度，借助流动性</h4>
<div class="nav">
<a href="" class="nav-a">导航1</a>
<a href="" class="nav-a">导航2</a>
<a href="" class="nav-a">导航3</a>
</div>
<h4>width:100%</h4>
<div class="nav">
<a href="" class="nav-a nav-a-width ">导航1</a>
<a href="" class="nav-a nav-a-width ">导航2</a>
<a href="" class="nav-a nav-a-width ">导航3</a>
</div>
.nav {
width: 240px;
background-color: #cd0000;
}
.nav-a {
display: block;
margin: 0 10px;
padding: 9px 10px;
border-bottom: 1px solid #b70000;
border-top: 1px solid #de3636;
color: #fff;
}
.nav-a-width {
width: 100%;
}
.nav-a:first-child {
border-top: 0;
}
.nav-a + .nav-a + .nav-a {
border-bottom: 0;
}
在上述例子中，前者没有设置宽度，它将完全借助流动性，后者设置了width：100%,导致后者的尺寸超出了外部的容器，不能完全利用容器空间，流动性丢失。
width为min-content
也称首选最小宽度，指的是元素最适合的最小宽度。在CSS中，图片和文字的权重远大于布局，因此width：auto的宽度不会为0。首选最小宽度的具体表现规则如下：
- 中文的以每个文字作为最小宽度
- 英文由特定的连续的英文单词决定
- 类似图片以图片自身宽度决定
<span class="ao"></span>
<span class="tu"></span>
.ao,
.tu {
display: inline-block;
width: 0;
font-size: 14px;
line-height: 18px;
margin: 35px;
color: #fff;
}
.ao:before,
.tu:before {
outline: 2px solid #cd0000;
font-family: Consolas, Monaco, monospace;
}
.ao:before {
content: 'love你love';
}
.tu {
direction: rtl;
}
.tu:before {
content: '我love你';
}
width为max-content
width是max-content时，它的宽度由子元素决定。子元素多宽，它就多宽（即子元素会尽可能宽，意思是：子元素若能不换行就不换行）。没有子元素，那么宽度就是0。
如果子元素是一段文字，这段文字就不会换行，除非你直接限制了子元素的宽度（此时即使你限制max-content元素的父元素的宽度，都拦不住子元素前进的步伐）。
width为fit-content
在CSS世界了，作者称之为包裹性，它除了包裹，还有自适应性。
自适应性：指的是元素由内部元素决定，但永远小于包含块容器的尺寸（除非容器尺寸小于元素的首选最小宽度）。
对于一个元素，如果其display属性值是inline-block,那么即使其里面的内容再多，只要是正常文本，宽度也不会超过容器。其中按钮是CSS世界中极具代表性的inline-block元素，具体表现为：按钮文字越多，宽度越宽（内部尺寸特性），如果文字太多，则会在容器的宽度处自动换行（自适应特性）。如下例所示：
下例中，标签内部的文字是动态的，当文字少的时候居中显示，文字超过一行的时候居左显示，核心代码就是：
.box {
text-align: center;
}
.content {
display: inline-block;
text-align: left;
}
<div style="display: flex;">
<div class="box">
<p class="content">按钮</p>
</div>
<div class="box1">
<p class="content">按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮</p>
</div>
</div>
.box {
width: 100px;
text-align: center;
background-color: antiquewhite;
padding: 10px;
margin-right: 20px;
}
.box1 {
width: 100px;
text-align: center;
background-color: antiquewhite;
padding: 10px;
margin-top: 20px;
}
.content {
display: inline-block;
text-align: left;
}
width，height为百分比值
当width是百分比时，元素的宽度 = 父亲元素的宽度 乘以 width。
当height是百分比时，元素的高度 = 父亲元素的高度 乘以 height。
怪异现象：父元素height为auto，子元素在文档流中，设置子元素的高度height:100%会被忽略，即height:100%失效。而对于width，父元素宽度未设置，子元素设置width:100%是多余的，宽度为图片加文字内容的宽度，但也不会像height一样失效。
浏览器的渲染规则是：先渲染父元素，后渲染子元素，当渲染父元素的时候，子元素的width:100%没有被渲染，宽度为图片加文字内容的宽度，渲染到子元素的时候父元素的宽度已经确定，此时的width:100%就是图片加文字的宽度，如果宽度不够就溢出。
对于宽度的解释：如果包含块的宽度取决于该元素的宽度，那么产生的布局在CSS2.1中是未定义的（不同浏览器样式表现不一样）。
对于高度的解释：如果包含块的高度没有显示指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为auto。
根据高度计算公式，如果父元素高度为auto，子元素height:100%，那么该高度为height=auto * 100% = NaN，此时的高度是计算不了的，因此高度失效。
示例：
上图中，为某个div元素设置height为100%，但是渲染的时候为0，原因就是其父级元素没有显示指定高度，且该元素不是绝对定位，因此其父元素的计算值是auto，因此该元素的百分比值被完全忽略了。
如何让元素支持height：100%效果
1、设定显示的高度值
（1）设置height:600px
（2）设置可以生效的百分比值高度，如：html,body{height:100%}
2、使用绝对定位
.content {
width: 100%;
height: 100%;
position:absolute;
background: url('./1.jpeg');
}
注意：绝对定位元素的百分比计算和非绝对定位元素的百分比计算是有区别的
（1）绝对定位的宽高百分比计算是相对于padding box的，也就是说会把padding大小值计算在内。
（2）非绝对定位元素是相对于content box计算的。
box-sizing对width，height的影响
box-sizing属性的作用是改变width的作用细节。
box-sizing不同值得作用原理示意图
box-sizing:content-box
box-sizing的默认值是content-box，元素宽和高不包括padding和border。
box-sizing:border-box
元素的宽高：content+padding+border。
max-width和min-width遇上width
min-width和min-height的初始值为auto
max-width和max-height的初始值为none
max-width和min-width优先级更高，即使width有!important。另外，min-width比max-width优先级更高！
超越!important
超越!important指的是max-width会覆盖width。比如：
width:400px !important;
max-width:200px;
最终呈现的宽度大小是200px,即使width有 !important，max-width也会覆盖该width。
超越最大
超越最大指的是min-width覆盖max-width，此规则发生在min-width和max-width发生冲突的时候，如下所示：
min-width:400px;
max-width:200px;
最小宽度设置的比最大宽度还要大，此时min-width和max-width发生冲突，根据超越最大原则，最终呈现的是400px，min-width存活，而max-width被忽略。
