css佈局之百分比寬度佈局的使用

如何利用百分比佈局？本篇文章就為大家介紹css佈局之百分比寬度佈局的使用。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

百分比是什麼？如何設定？

百分比是一種相對於包含區塊的計量單位。

百分比寬度的計算： 目標元素寬度/父級元素寬度=百分比寬度

它對圖片很有用：如下我們實現了圖片寬度總是容器寬度的50%。大家可以運行後，改變頁面大小看看效果！

你也可以同時使用 min-width 和 max-width 來限制圖片的最大或最小寬度比！

百分比寬度佈局

我們來看看一個百分比寬度佈局的範例：

nav {
  float: left;
  width: 25%;
}
section {
  margin-left: 25%;
}

當父容器的寬度為：800px時

當父容器的寬度為：500px時

#設定百分比後，nav 和section 標籤會隨著父容器寬度的改變而改變。

下面我們來看看css佈局中常用屬性的百分比設定

說明：進行百分比佈局需要

1、 首先對整個頁面進行區塊分區，每個模組的寬度都採取相對應的百分比。

2、當你定義內容區域的寬度，區域之間的距離時，也就是各盒模型只見的間距，都需要採用百分比，絕對不能用固定寬度。就算是margin-left margin-right  也要用百分比！

3、在進行百分比佈局中，盡可能的從大塊到小快，拋開具體內容實體，這些區塊都要用百分比。 (內容實體，也就是會展示的內容文字圖像圖示等等。區塊，沒有內容。)

百分比寬度佈局要面臨的問題：

以上是css佈局之百分比寬度佈局的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！