讀“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.包含盒子
  幽靈空白節點複製程式碼

讀“css世界”筆記

流，元素與基本尺寸

相關文章