客戶端浮動的相關程式碼學習
阿新 • • 發佈：2019-01-06
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> /* 通過元素選擇器(因為就一個article所以直接用標籤(元素)名)設定article的高度 */ article{ /* 設定邊框但是outline不佔px(畫素) */ outline: 2px solid red; } /* 通過類選擇器設定左邊的盒子 */ .leftBox { width: 200px; height: 200px; /* 文字水平居中 */ text-align: center; /* 設定行高 */ line-height: 200px; background: gray; /* 左浮動 */ float: left; } .rightBox { width: 200px; height: 200px; /* 文字水平居中 */ text-align: center; /* 設定行高 */ line-height: 200px; background: gray; float: right; } /* 當我們看見article的高度塌陷了就沒有高度----->可以將下面的css樣式註釋掉或者刪除掉(反正可以Ctrl+z)撤銷，看看效果你就明白了 */ /* 下面我們需要用到偽元素::after來清除浮動讓article的高度恢復(但可以瞭解浮動,後面學了定位還要簡單些) */ article::after{ /* 往article的內容後面再新增內容，""內下面為新增的空白，""內也可以文或字母等 */ content:""; /* display轉換為block(塊)元素 */ display: block; /* clear為清除浮動 */ clear: both; } </style> </head>
<body> <header> 頭部區域 </header> <article> <div class="leftBox">左邊的盒子</div> <div class="rightBox">右邊的盒子</div> </article> <footer> 頁尾區域 </footer>
</body>
</html>
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> /* 通過元素選擇器(因為就一個article所以直接用標籤(元素)名)設定article的高度 */ article{ /* 設定邊框但是outline不佔px(畫素) */ outline: 2px solid red; } /* 通過類選擇器設定左邊的盒子 */ .leftBox { width: 200px; height: 200px; /* 文字水平居中 */ text-align: center; /* 設定行高 */ line-height: 200px; background: gray; /* 左浮動 */ float: left; } .rightBox { width: 200px; height: 200px; /* 文字水平居中 */ text-align: center; /* 設定行高 */ line-height: 200px; background: gray; float: right; } /* 當我們看見article的高度塌陷了就沒有高度----->可以將下面的css樣式註釋掉或者刪除掉(反正可以Ctrl+z)撤銷，看看效果你就明白了 */ /* 下面我們需要用到偽元素::after來清除浮動讓article的高度恢復(但可以瞭解浮動,後面學了定位還要簡單些) */ article::after{ /* 往article的內容後面再新增內容，""內下面為新增的空白，""內也可以文或字母等 */ content:""; /* display轉換為block(塊)元素 */ display: block; /* clear為清除浮動 */ clear: both; } </style> </head>
<body> <header> 頭部區域 </header> <article> <div class="leftBox">左邊的盒子</div> <div class="rightBox">右邊的盒子</div> </article> <footer> 頁尾區域 </footer>
</body>
</html>