基础 页面结构

  1. 三层div，宽度与高度、padding、margin

    1. <div id="top">
    2.   <div id="top-container">
    3.       <div class="top-item"></div>
    4.       <div class="top-item"></div>
    5.       <div class="top-item"></div>
    6.   </div>
    7. </div>
    1. #top {
    2.  height: 100px;
    3.  background-color: rgb(137, 211, 253);
    4. }
    5. #top-container {
    6.  padding: 5px;
    7.  max-width: 100%;            
    8.  height: 90%;            /* 这个写max- 会为空  */
    9. }
    10. .top-item {
    11.  width: 32.8%;
    12.  height: 100%;
    13.  border: 1px solid snow;
    14.  background-color: springgreen;
    15.  display: inline-block;
    16. }

  2. 父盒子中均匀容纳三个子盒子，写了两种方法 ```css

    top-container {

    width: 100%; 一个固定值 height: 90%; 一个固定值 / display: table; /

    / display: flex; /

} .top-item { height: 100%; border: 1px solid snow; background-color: springgreen;

  1. /* display: table-cell;   可以 */
  3. /* flex: 1;       可以 */

} ```