css（二）：高度與文件流，line-box與box，寬度，position與

soldiermakk發表於2019-03-14
CSS

最常用除錯方法

border{ solid 1px red; }

高度

塊級元素高度

div的高度是由 其內部 文件流元素的高度 總和決定的(並非想等)

內聯元素高度

內斂元素的高度由line-height決定；

css（二）：高度與文件流，line-box與box，寬度，position與

css（二）：高度與文件流，line-box與box，寬度，position與

  1. 你好和a是基線（底部）對齊
  2. 每一種字型都有一個建議行高，超出四線格還會空出一部分
  3. font-size:100px;指的是字型最高到最低的高度，不是行高（不包括多餘的空部分）
  4. 真實高度：font-size X 字型本身建議行高

解決辦法

強制規定line-height:100px;

文件流

文件流就是文件內元素的流動方向。

內聯元素

內聯元素從左往右流動，如果遇到阻礙（寬度不夠）就換行繼續流動

css（二）：高度與文件流，line-box與box，寬度，position與

內聯元素內容不換行

例子：

css（二）：高度與文件流，line-box與box，寬度，position與
原因：haaaaaaaaaaaaaa是一個英語單詞（整體）不可以打斷

method：word-break:break-all;

塊級元素

每塊佔用一行，從上往下依次流動

css（二）：高度與文件流，line-box與box，寬度，position與

高度

div的高度是由 其內部 文件流元素的高度 總和決定的(並非想等)

塊級元素同行（float的另一種方法）

display：inline-block;

css（二）：高度與文件流，line-box與box，寬度，position與

背景圖片的處理技巧

背景圖片過大： background-position:center center; 背景圖片自適應:background-size:cover;

容易出bug的幾個寫法

height：100px

在div中寫height：100px;指定塊級元素高度（因為塊級元素高度是撐起來的，直接指定會出bug）

width：100%

因為如果這個元素有padding，那麼width（內容寬度）為100%時他總寬度會超過父元素的總寬度

解決方法：外套一個div，將div的padding左右轉移到外邊的div上去。

小程式碼塊的實現方式

效果圖：

css（二）：高度與文件流，line-box與box，寬度，position與
正確解法：

 display: inline-block;
 padding:5px 5px;
 line-height:22px;
複製程式碼

因為內聯元素不能設定高度，所以先用 display: inline-block;將其變為塊級元素，然後再用padding將寬高撐出來,滿足寬高並且達到居中效果。

錯誤解法：

width:70px;
height:30px;
line-height:30px;
text-algin:center;
複製程式碼

這樣子寫死高度會導致不能加字，很容易出bug。

相關文章