Practical Training JQuery data-屬性的作用
阿新 • • 發佈：2021-11-09
一.頁面佈局方式
主要包括：文件流、浮動層、float屬性
文件流：
HTML頁面的標準文件流是HTML中元素在計算佈局排版的過程中,所有處於文件流中的元素會自動的從左到右(非塊級元素),從上到下(塊級元素)的排列規則。
浮動層：
給元素的float屬性賦值後，就是脫離文件流，進行左右浮動，緊貼著父元素(預設為body文字區域)的左右邊框；而此浮動元素在文件流空出的位置，由後續的(非浮動)元素填充上去：塊級元素直接填充上去，若跟浮動元素的範圍發生重疊，浮動元素覆蓋塊級元素。
float屬性：
1.float屬性介紹：
① left ：元素向左浮動。② right ：元素向右浮動。③ none ：預設值。
具體用法及說明：
1.float：left：說明元素向左浮動
會出現以下情況
|
當前元素分類(float:left) |
下一個緊鄰元素分類(不含float) |
結論 |
|
塊級元素(a) |
塊級元素(b) |
b會填充a遺留下來的空間，a會和b發生重疊，a的圖層在上面。 |
2.float：right：說明元素向右浮動
會出現以下情況：
|
當前元素分類(float:right) |
下一個緊鄰元素分類(不包含float) |
結論 |
|
塊級元素(a) |
塊級元素(b) |
b會填充a遺留下來的空間，若a會和b發生重疊(父容器寬度減少)，a的圖層在上面。 |
二.浮動後瀏覽器寬度變形問題的解決方法
把新增float的屬性的div元素嵌入在一個div中，並給此div新增width和height屬性。瀏覽器寬度縮小時，也不會發生變形。
三.浮動程式碼示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#father{
width: 700px;
height: 30px;
background: lightblue;
margin: 100px auto 0;
}
#son1{
width: 500px;
height: 100%;
background: lightcoral;
/*display: inline-block;*/
float: left;
}
#son2{
width: 100px;
height: 100%;
background: lightgreen;
/*display: inline-block;*/
float: left;
}
</style>
</head>
<body>
浮動可以向左向右移動，直到外邊緣碰到包含另一個浮動框的邊框為止
文件流:文件流指的是HTML中元素在計算佈局排版的過程中,所有處於文件流中的元素會自動的從左到右(非塊級元素),從上到下(塊級元素)的排列規則。
<div id="father">
<div id="son1"></div>
<div id="son2"></div>
</div>
</body>
</html>