一. 本節課學習目標。
- 掌握行屬性標籤以及塊屬性標籤的特點。
- 掌握display屬性的用法。
- 掌握浮動的作用以及用法。 ★重點
- 掌握清除浮動的方法。
- 能夠通過html，css，盒模型，浮動進行復雜網頁佈局。
二. 行屬性標籤以及塊屬性標籤特點。
根據標籤特性進行分類：
- 行屬性標籤。 默認display：inline;
特點1：可以和其他行屬性標籤放置在同一行。 a, span, em, strong等。
特點2：行屬性標籤的區域大小隻由內容來撐開，width和height屬性是無效的。 - 塊屬性標籤。 默認display: block;
特點1：獨佔一行。 Div,p,h1~h6,ol,ul,li等。
特點2：塊屬性標籤寬度默認和父元素寬度保持一致，高度由內容撐開，但是可以通過width和height屬性來更改寬高。 - 行內塊屬性標籤。 默認 display:inline-block; 比如:img，input。
特點1：可以和其他行屬性標籤以及行內塊屬性標籤放置在同一行。
特點2：可以通過css屬性修改寬高，width和height兩個屬性是有效的。
解決的實質性問題：如果一個行屬性標籤（a，span）想要進行寬高的修改，就必須將display設置爲inline-block。
三. Display屬性的用法。
作用：用來更改元素的特性。 行屬性標籤更改爲塊屬性標籤，也可以反過來。
用法：直接給元素添加display屬性即可， display: inline(行屬性標籤),block(塊屬性標籤),inline-block(行內塊屬性標籤), none(元素隱藏掉);
四. 浮動。
- 作用。
用來實現網頁中水平佈局的結構（讓塊元素可以放置在同一行）。 - 實現方式。
給想要放置在同一行的元素添加float屬性即可。
注意：給元素添加上float屬性之後，該元素會提升層級，脫離文檔流。 會影響到之前在同一個層級上的元素，當前float的元素層級提升，之前的層級位置空出，後面的元素自動佔據之前的位置，所以就看到覆蓋的效果。 - 浮動原理。
a. 當給一個元素添加了float屬性，該屬性會給元素實現兩個功能（1.可以提升層級 2.可以允許當前元素的這一行能夠放置其他浮動元素了）。
b. Float的值left和right，決定的當前浮動元素放置在這一行時，放到什麼位置，left最左邊，right最右邊。
c. 當一個元素浮動時，會先去查找前面有沒有同級別的浮動元素，如果有，就往後放，如果放的時候，沒有空間了，則被擠到下一行。當被擠到下一行時，當前元素的上邊界會根據當前元素的浮動方向（left，right），保持和上一個浮動方向相同的元素的下邊界重合。
當前元素是左浮動元素left，則會和上一個左浮動元素下邊界重合。
當前元素是右浮動元素right，則會和上一個右浮動元素下邊界重合。
注意：如果一個元素既可以使用左浮動，又可以使用右浮動時，一定要注意，使用哪個浮動方向不會影響自己，是影響的下一個浮動元素。
五. 浮動產生的問題以及解決辦法。
- 影響兄弟元素佈局。
- 父元素高度塌陷。
原因：當子元素添加float屬性之後，元素浮動了，則會影響父元素動態識別子元素的高度，浮動元素的高度父元素無法識別。
解決方案1：給父元素指定一個高度即可。 但是這種方式不通用。
解決方案2：給父元素添加overflow:hidden;屬性即可。
六. 浮動練習3-12宮格佈局。
效果圖：
實現代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>12宮格 - 浮動</title>
<style type="text/css">
.wrap {
/* 水平居中 */
margin: 0 auto;
width: 500px;
/* border: 2px solid black; */
/* 處理因子元素浮動造成的父元素高度塌陷的問題 */
overflow: hidden;
}
.wrap>div {
font-size: 50px;
color: white;
text-align: center;
}
.green {
width: 100px;
height: 100px;
background-color: green;
/* 一行文字垂直居中 */
line-height: 100px;
/* 浮動 - 左 */
float: left;
}
.f6 {
width: 300px;
height: 100px;
background-color: yellow;
line-height: 100px;
/* 浮動 - 左 */
float: left;
}
.f7 {
width: 200px;
height: 200px;
background-color: lightblue;
line-height: 200px;
/* 浮動 - 右 */
float: right;
}
.f8 {
width: 150px;
height: 150px;
background-color: gray;
line-height: 150px;
/* 浮動 - 左 */
float: left;
}
.f9 {
width: 150px;
height: 150px;
background-color: black;
line-height: 150px;
/* 浮動 - 左 */
float: left;
}
.f10 {
width: 200px;
height: 150px;
background-color: cyan;
line-height: 150px;
/* 浮動 - 右 */
float: right;
}
.f11 {
width: 300px;
height: 100px;
background-color: red;
line-height: 100px;
/* 浮動 - 左 */
float: left;
}
.f12 {
width: 500px;
height: 100px;
background-color: blue;
line-height: 100px;
/* 浮動 - 左 */
float: left;
}
</style>
</head>
<body>
<!-- .f${$}*12 -->
<div class="wrap">
<div class="f1 green">1</div>
<div class="f2 green">2</div>
<div class="f3 green">3</div>
<div class="f4 green">4</div>
<div class="f5 green">5</div>
<div class="f6">6</div>
<div class="f7">7</div>
<div class="f8">8</div>
<div class="f9">9</div>
<div class="f10">10</div>
<div class="f11">11</div>
<div class="f12">12</div>
</div>
</body>
</html>
本節一些快捷方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box {
/* 屬性的快速寫法 */
/* 背景顏色 bc+tab*/
background-color: yellow;
/* 寬度 w值+tab */
width: 500px;
/* 高度 h值+tab */
height: 200px;
}
</style>
</head>
<body>
<!-- 1.生成一個div，div帶一個class屬性 .box+tab-->
<div class="box"></div>
<!-- 2.生成一個p，p帶一個class屬性 p.p1+tab-->
<p id="box">
</p>
</body>
</html>