元素最基本最常用的两个属性就是width和height了，他们虽然很普通很常见，却有着我不了解的东西。
先看看width属性，默认值是auto，意思就是自动计算宽度，具体怎么自动计算是有一个计算规则的，而且对于块级和内联元素这个规则还不一样。
假如，我在页面中写了一个元素，且没有设置width属性时，会有什么表现呢？
如果这个元素是div、p等块级元素，则它的width表现为父容器的宽度，随着容器的变化变化，始终和父容器宽度一致；（流特性）
如果这个元素是inline-block、浮动、绝对定位等内联元素，则它的宽度取决于元素包含内容的多少，内容为空的话宽度就是0，随着内容增加宽度增加；（包裹性）
对于以上两种情况，当元素中的内容多到快要超出父容器边界时，内容都会自动换行。
换个说法就是，块级元素的尺寸由外部尺寸也就是父容器尺寸决定，内联元素的尺寸由内部尺寸也就是由包含的内容或子元素尺寸决定。
width属性auto的这种表现，正是为了满足布局需要产生的，我们可以合理利用这种特性可以轻松实现自适应布局。
绝对定位元素一般情况下宽度表现的是包裹性，即由内容决定，但是有一种情况下会表现出流特性，比如：
div {position：absolute；left：20px；right:20px；}
可以这样理解，当对立方位属性值都存在，如left、right 或 top、bottom，此时该元素的尺寸已经可以确定了，因此就确定出来了。
1.width的作用细节
先来了解下“盒尺寸“概念，上篇说了，元素由外在盒子和内在盒子构成，外在盒子决定能不能换行，长啥样我也不知道，内在盒子就是我们耳熟能详的盒模型了。
这个盒模型从内到外依次是 content box、padding box、border box、margin box，简单明了。
前辈们设计了这个模型，也相应地定义了一堆属性来控制模型具体表现，而width、height这两个普通的属性就是作用在content box上的。
因此，我们看到的元素实际尺寸是content+padding+border的总和，这很容易理解，但实际中我们布局需要控制的是这个实际的总尺寸，往往有些麻烦。
麻烦在于，假如想让元素占据100px宽度，设置width为100px后，再调整padding、border的话，最终的宽度就不符合预期了，当然也可以直接设置一个减掉paddng、border之后的宽度值，如此再想调整布局，代码改动较多。
针对此问题，css3给出了解决方案 box-sizing，我们也可以使用宽度分离原则来处理,
.father{ width:180px } .son{ margin:0 20px; padding:20px; border:1px solid; }
2.height的作用细节
height的默认值也是auto，但它的计算规则却没有width那么复杂，只是简单的把子元素高度相加。
为什么如此简单呢？因为犯不上搞那么复杂。因为css默认流是水平方向的，宽度是稀缺的，而高度是无限的，所以关于宽度如何分配的规则就比较复杂。
2.1 width、 height：100%
对于width而言，无论父元素width是否为auto，子元素100%有效。
对于height而言，如果父元素height为auto，则100%会被忽略。
比如，直接在页面中插入div，代码如下：
div { width:100%; /*这是多余的*/ height:100%; /* 这是无效的*/ background:url(bg.jpg); }
因为，div属于块级元素，width默认auto，具有自适应性，不用设置100%，宽度始终自动充满父元素空间；height无效是因为父元素body宽度目前默认是auto；
想要生效，还需要这样操作一下：
html，body{ height：100%; }
这就是我们经常在项目，index.css文件中看到的代码。
做是这样做了，可是为什么呢？
官网解释：如果包含块的高度没有显示指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为auto。
宽度的解释：如果包含块的宽度取决于该元素的宽度，即取决于子元素，则行为未定义。
但是各浏览器对此情况下宽度100%的表现行为一致，而高度由于是auto，该值无法和百分比进行计算，‘auto’*100/100=NaN，因此此情况下高度百分比无效。
父元素宽度auto，子元素宽度百分比的表现可以看这段代码：
<div class="box"> <img src="1.jpg"> <span class="text">红色背景是父级</span> </div> .box{ display:inline-block; white-space:nowrap; background-color:#cd0000; } .text{ display:inline-block; width:100%; background-color:#34538b; color:#fff; }
浏览器如何渲染呢，最终父元素多宽，子元素多宽？
浏览器的渲染顺序是自上而下、由外到内渲染DOM内容，因此在这里，会先渲染父元素，宽度是图片宽度加文字宽度，此时文字宽度是文字本身的宽度，没有被width 100%渲染，等父元素渲染完成，父元素宽度确定，子元素width 100%才会计算。
因此，height 100%生效的代码如下：
1. 设定显式高度值，600px，或可以生效的100%，比如我们从html一层层设置下来的height：100%
html，body{ height：100%; }
2.使用绝对定位
div{ height:100%; position:absolute; }
大概，按照规范的意思，绝对定位的时候，子元素百分比的计算值就不是auto了，父元素已经渲染结束了，height已经确定了。