CSS深入淺出-寬度與高度

weixin_34128411發表於2019-01-08
CSS

文件流

文件流就是文件內元素的流動方向。
內聯元素從左到右流動，遇到阻礙分行繼續流。
塊級元素從上往下流動，每一個塊獨佔一行。

CSS高度

設計字型時要給一個建議行高，所以除了用line-height固定行高外，很難寫死字型高度

內聯元素的寬高
  • 寬度
    內聯元素的寬度是由裡面的字個數決定的
  • 高度
    內聯元素的高度是由行高(line-height)決定的，padding和margin無法改變其高度。
塊級元素的寬高
  • 寬度
    塊級元素的寬度是由裡面的字個數，以及內外邊距決定的。
  • 高度
    塊級元素的高度是由裡面文件流的元素高度總和決定的

小技巧

居中

  • 文字垂直居中
    使用padding屬性可以實現垂直居中
  • 文字水平居中
    使用text-align:center;屬性可以實現水平居中

兩端對齊

  • 一段話
    1.使用text-align:justify;可以讓一段話兩端對齊，但如果只有一行，是不能對齊的
    2.給元素加上::after偽類，在該偽類裡使用width100%，給原話加上text-align:justify;,同時兩端屬性均加上display:inline-block;來兩端對齊
  • 舉例
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    div{
      font-size:20px;
    }
    span{
      display:inline-block;
      text-align:justify;
      line-height:20px;
      height:20px;
      width:5em;
      overflow:hidden;
    } 
    span::after{
      content:'';
      display:inline-block;
      width:100%;
      text-align:justify;
    }
  </style>
</head>
<body>
  <div>
    <span>姓名</span><br><span>聯絡方式</span>
  </div>
</body>
</html>

文字打斷

因為中英文語言上的區別，預設的文字打斷屬性是不同的，可以通過改該屬性實現英文分行

  • 英文
    預設屬性為word-break:break-word;，通過改該屬性來實現英文分行
    也可以在單詞中加上連字元"-"來實現英文分行
  • 中文
    預設屬性是word-break:break-all;，即為每個字都分開來算

inline空格問題

只要是inline元素，兩個元素間不相鄰的話一定會有空格，可以通過脫離文件流來解決這個問題

margin合併問題

假設一個父元素包裹住一個子元素，如果父子元素都有margin屬性，而父元素沒有擋住子元素的東西，那麼子元素的margin會和父元素的margin合併起來
使用padding或者block可以解決這個問題

文字省略效果怎麼做

  • 單行文字
div{
  white-space:nowrap;  //不換行
  overflow:hidden;    //超出div邊界部分隱藏
  text-overflow:ellipsis;  //超出部分文字以省略號顯示
}
  • 多行文字
  1. 直接google關鍵詞"css multi line text ellipsis"然後點選第一條關鍵詞，直接抄程式碼，略改一下以完成需求。
  2. 抄下方程式碼
div{
overflow:hidden;  //超出div邊界部分隱藏
display:-webkit-box;
-webkit-line-clamp:2; //顯示兩行文字
-webkit-box-orient:vertical;
}

實現一個1:1的div

  • 以下程式碼
div{
padding-top:100%;
}

border除錯大法

在除錯css之前，給所有div都加上一個1px的border用來看，方便除錯

相關文章