讀“css世界”筆記

流，元素與基本尺寸

• width/height作用的細節

  • width:auto

    • 充分利用可用的空間
    • 收縮與包裹
    • 收縮到最小
    • 超出容器限制

  • 流體佈局下的寬度分離原則

    width獨佔一個標籤，而padding.border.margin利用流體內部自適應呈現

      .father{
          width: 100px;
      }
      .son{
          margin: 0 auto;
          padding:20px;
          border: 1px solid 
      }
  複製程式碼

  • 關於height：100%

    為什麼在父級未設定實際高度，height:100% 無效？

    如何讓元素支援height：100%？

      <!--使用顯示的高度，比較常見的設定-->
      html,body{
          height: 100%
      }
      <!--使用絕對定位，如果父級有padding，會將padding計算在內，height+padding -->
      div{
          height: 100%;
          position: absolute;
      }
    複製程式碼

• max-width/max-height/min-width/min-height

    注意下：比important權級還更大
    <img style="100px !important"/>
    img{max-width: 256px;} ====>  max-width 會覆蓋width
    .container{
        min-width: 1400px;
        max-width: 1200px;
    }
    <!-- min-width 將會起作用-->
  複製程式碼

• 內聯元素

        1.內聯盒子
        2.行框盒子
        3.包含盒子
    幽靈空白節點複製程式碼