盒尺寸四大家族

content

img

  替換內容預設的適配方式是填充(fill)，也就是外
  設定的尺寸多大，我就填滿、跟著一樣大。尺寸變化
  的本質並不是改變固有尺寸，而是採用了填充作為適
  HTMl尺寸和CSS尺寸的方式
複製程式碼

padding

padding的百分比值

  <!--實現一個寬高5:1的頭像效果-->
  .box{
      padding: 10% 50%;
      position:relative;
  }
  .box > img{
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
  }
複製程式碼

padding 與圖形繪製

標籤內建的padding

  很多表單元素都內建 padding，如button
  button在各個瀏覽器padding的計算方式都不一樣
  <!--相容-->
  <button id="btn"></button> <label for="btn">按鈕</label>
  button {
      position: absolute;
      clip: rect(0 0 0 0);
  }
  label {
      display: inline-block;
      line-height: 20px;
      padding: 10px;
  }
複製程式碼

激進的 margin 屬性

  <!---圖片右則定位--->
  .box { overflow: hidden; }
  .full { width: 100%; float: left; }
  .box > img { float: left; margin-left: -128px; }
  .full > p { margin-right: 140px; }
  <div class="box">
      <div class="full"> 
          <p>文字內容...</p>
      </div>
      <img src="1.jpg">
  </div>
  <!--一行三個並列div-->
  ul{
      margin-right: -20px;
  }
  ul>li{
      float:left;
      width: 100px;
      margin-right: 20px;
  }
  <!--margin來實現左右對齊，前提是在子div有寬度-->
  .father {
     width: 300px;
  }
  .son {
     width: 200px;
     margin-right: 80px;
     margin-left: auto;
  }
複製程式碼

border

border登高佈局技術

  .box {
        border-left: 150px solid #333;
        background-color: #f0f3f9;
  }
  .box > nav {
        width: 150px;
        margin-left: -150px;
        float: left;
  }
  .box > section {
      overflow: hidden;
  }
複製程式碼

注意：一旦等高佈局欄目過多，則建議使用 table-cell 等高佈局或者 margin 負值等高佈局。關於table-cell的應用--等高佈局

盒尺寸四大家族

盒尺寸四大家族

相關文章