CSS样式之width: auto 100%与height:100%

1.Width（默认情况下为content box的宽度）

width:auto

元素content+padding+border+margin=父元素的width

 <style>
        .parent {
            height: 400px;
            width: 400px;
            border: 1px solid black;
            padding: 10px 10px;
        }
        .son { 
            height: 400px; 
            /* content+border+padding+margin = 400px of parent*/
            width: auto;
            border: 1px solid red;
            padding: 0 2px;
            margin:  0 2px;
        }
    style>
 <div class="parent">
        <div class="son">div>
    div>

width: 100%

元素content == 父content

 <style>
        .parent {
            height: 400px;
            width: 400px;
            border: 1px solid black;
            padding: 10px 10px;
        }
        .son { 
            height: 400px; 
            /* content = 400px of parent*/
            width: 100%;
            border: 1px solid red;
            padding: 0 2px;
            margin:  0 2px;
        }
    style>
 <div class="parent">
        <div class="son">div>
    div>

注意： 当子元素为absolute 绝对定位时，width:100% 相对于第一个非static的父元素而言

2. height(默认情况下为content box的高度）

height: 100%

**现象：**当父元素的height：auto时（即高度由子撑开时），子元素（非绝对）height:100%不起作用：
因为： auto * percentage % == NAN
解决办法： 1. 为父提供一个显式高度值 2. 设置子元素为绝对元素
1. 父设置显式高度

 <style>
        .parent {
            height: 400px;
            width: 400px;
            border: 1px solid black;
            padding: 10px 10px;
        }
        .son { 
        /* height = 400px of parent */
            height: 100%; 
            width: 400px;
            padding: 10px 0px;
            border: 1px solid red;
        }
    style>
     <div class="parent">
        <div class="son">div>
    div>

2. 子元素设置为绝对元素:此时子元素高度相对于content + padding of parent

 <style>
        .parent {
            height: 400px;
            width: 400px;
            border: 1px solid black;
            padding: 10px 10px;
            position: relative;
        }
        .son { 
        /* height = 400+20 of parent */
            height: 100%; 
            width: 400px;
            padding: 10px 0px;
            border: 1px solid red;
            position:absolute;
        }
    style>
      <div class="parent">
        <div class="son">div>
    div>

注意：与width相同，这种 子元素为absolute 绝对定位时，height:100% 相对于第一个非static的父元素而言