重识css(1) —— height,width

要弄清楚height,width,先要明白指定元素是行内还是块级。

两者的特性：

包含块简单理解为父元素（不完全是，比如绝对定位的包含块是层级最接近的相对定位）

1、内外盒子

每个元素都是分为两层，
inline-block外层是inline故宽度随内容且不换行，内层是block故可以设置height，
同理block => block-block ； inline => inline-inline

2、width:auto

该属性是元素默认宽度，且体现在元素盒子的特性上，块级元素随包含块填满（width:100%）,行内以内容的宽度为准

3、元素包裹性和自适应性对width的影响

包裹性：包含块确定width，指定元素的内容在大于包含块的width时会自动换行，不超出（指定元素设置width大于包含块时是会超出的）
自适性：包含块不确定width，width随子元素width改变
应用：利用包裹性实现字数少时居中，字数多时靠左

4、包含块height，width为auto时指定元素设置100%的差异

包含块heigth为auto，指定元素百分比不可获得，由于包含块height：auto随指定元素height改变，指定元素height根据包含块height*百分比，故不能实现
包含块width为auto，指定元素百分比可以获得，这里有一个机制影响，在渲染包含块时不在意指定元素的width而在意指定元素中的内容，却能算出确切的值，指定元素能计算出百分比

<!-- 百分比计算问题 -->
<div class="f_box">
    <span class="box_a">我是A元素</span>
    <span class="box_b">我是B元素我是B元素</span>
</div>
<style>
    .f_box {
        display: inline-block;
        height: 100px;
        background: blue;
        white-space: nowrap;
    }
    
    .box_a {
        width: 50%;
        background: red;
        display: inline-block;
    }
    
    .box_b {
        width: 50%;
        background: green;
        display: inline-block;
    }
</style>

5、height:100%在绝对定位元素和非绝对定位元素表现的不同点

绝对定位元素：content-height + padding-height
非绝对定位元素：content-height