CSS塊元素-內聯元素-浮動
1.塊元素
塊元素，也稱為行元素，佈局常用的標籤如：div,p,ul,h1-h6,dl,dt,dd等等都是塊元素，它在佈局中的行為：
（1）支援全部的樣式
（2）如果沒有設定寬度，預設的寬度為父級寬度100%
（3）盒子佔據一行、即是設定了寬度
<div class="box">div元素</div>
<p class="box01">p標籤</p>
2.內聯元素
內聯元素，也可以稱為行內元素，佈局中常用的標籤如：a,span,em,b,strong,i,等等都是內聯元素
它們在佈局中的行為：
（1）支援部分樣式（不支援寬、高、margin上下、padding上下）
.box a{
background-color: pink;
margin: 20px 20px;
padding: 30px 30px;
}（2）寬高由內容決定
（3）盒子並行一行
（4）程式碼換行，盒子之間會產生間距
（5）子元素是內聯元素，父元素可以用text-align屬性設定子元素水平對齊方式
解決內聯元素之間間隙的方法
.box01{
width: 200px;
height: 100px;
border: 1px solid #000000;
margin: 20px;
text-align: center;
（1）去掉內聯元素之間的換行
（2）將內聯元素的父級設定font-size為0，內聯元素自身再設定font-size
.box{
width: 300px;
height: 500px;
background-color: yellow;
border: 1px solid #000000;
font-size: 0px; /除去間隙/
**3.內聯塊元素**內聯塊元素，也叫行內塊元素，是新增的元素型別，現有元素沒有歸於此類別的，img和input元素的行為類似這種元素，但是也歸於類於內聯元素，我們可以用display屬性將塊元素或者內聯元素轉化成這種元素。它們在佈局中表現的行為：
（1）支援全部樣式
（2）如果沒有設定寬高，寬高由內容決定
（3）盒子並在一行
（4）程式碼換行，盒子會產生間距
（5）子元素是內聯塊元素，父元素可以用text-align屬性設定子元素水平對齊方式
這三種元素，可以通過display屬性來相互轉化，不過實際開發中，塊元素用得比較多，所有我們經常把內聯元素轉化為塊元素，少量轉化為內聯塊，而要使用內聯元素時，直接使用內聯元素，而不用塊元素轉化了。
.box a{
width: 40px;
height: 50px;
background-color: pink;
/margin: 20px 20px;/
padding: 0px 30px;
font-size: 16px;
display: inline-block;
}
例子：
head><meta charset="utf-8">
<title>導航欄</title>
<style type="text/css">
.meun{
width: 505px;
height: 48px;
font-size: 0px;
margin: 100px 50px;
/*background-color: pink;*/
/*border: 1px solid #000000;*/
/*text-align: center;*/
}
.meun a{
width: 100px;
height: 39px;
font-size: 16px;
border: 1px solid #000000;
padding-top: 9px; /*儘量不用*/
margin-left: -1px;
margin-top: -1px;
text-align: center; /*對齊方式*/
text-decoration: none; /*隱藏下劃線*/
font-family: "Microsorf Yahei";
display: inline-block; /*內聯塊*/
}
.meun a:hover{ /*偽類*/
background-color: gold; /*背景色*/
color: #FFFFFF; /*文字顏色*/
}
</style></head>
<body>
<div class="meun">
<a href="#">首頁</a>
<a href="#">公司簡介</a>
<a href="#">公司業務</a>
<a href="#">公司員工</a>
<a href="#">公司產品</a>
</div></body>
4.display屬性：使用來設定元素的型別及隱藏的，常用的屬性有：
（1）none 元素隱藏且不佔位置
（2）block元素以塊元素顯示
（3）inline元素以內聯元素顯示
（4）inline-block 元素以內聯塊元素顯示
5.浮動元素
（1）浮動元素有左浮動（float-left）和右浮動（float-right）
（2）浮動的元素會向左或向右浮動，碰到父元素邊界、其他元素才會停下來
（3）相鄰浮動的塊元素可以並在一行，超出父級寬度就換行
（4）浮動讓行內元素或塊元素自動轉化為行內塊元素（此時不會有行內塊元素間隙問題）
（5）浮動元素後面沒有浮動的元素會佔據浮動元素的位置，沒有浮動的元素內的文字會避開浮動的元素，形成文字繞圖的效果
（6）父元素如果沒有設定尺寸（一般是高度不設定），父元素內整體浮動的元素無法撐開父元素，父元素需要清除浮動
（7）浮動元素之間沒有垂直margin的合併
程式碼1
<head>
<meta charset="utf-8">
<title>新聞標題</title>
<style type="text/css">
.title{
width: 400px;
height: 40px;
margin: 50px auto;
border-bottom: 1px solid #ff8200;
}
.title h3{
width: 80px;
height: 40px;
margin: 0px;
background-color: #ff8200;
float: left;
font-size: 16px;
text-align: center;
line-height: 36px;
font-weight: normal;
}
.title a{
float: right;
line-height: 36px;
text-decoration: none;
/*font: normal 14px/36px 'Microsoft Yahei' 加粗，字號，行高，字型*/
}
.title a:hover{
color: #ff8200;
}
</style></head>
<body>
<div class="title">
<h3>新聞</h3>
<a href="#">更多</a>
</div></body>
程式碼2
<head>
<meta charset="utf-8">
<title>文字繞圖</title>
<style type="text/css">
.con{
width: 400px;
height: 400px;
border: 1px solid #000;
margin: 50px auto;
overflow: auto;
}
.pic{
width: 224px;
height: 205px;
background-color: aqua;
margin: 10px;
margin-bottom: 0px;
float: left;
}
.word{
height: 400px;
background-color: #FFF;
line-height: 24px;
}
/*.clearfix:before,.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
zoom:1;
}*/
</style></head>
<body>
<div class="con">
<div class="pic"><img src="image/路飛1.jpg" alt="路飛"></div>
<div class="word">
內聯塊元素，也叫行內塊元素，是新增的元素型別，現有元素沒有歸於此類別的，img和input元素的行為類似這種元素，但是也歸於類於內聯元素，我們可以用display屬性將塊元素或者內聯元素轉化成這種元素。它們在佈局中表現的行為：（1）支援全部樣式
（2）如果沒有設定寬高，寬高由內容決定
（3）盒子並在一行
（4）程式碼換行，盒子會產生間距
（5）子元素是內聯塊元素，父元素可以用text-align屬性設定子元素水平對齊方式
這三種元素，可以通過display屬性來相互轉化，不過實際開發中，塊元素用得比較多，所有我們經常把內聯元素轉化為塊元素，少量轉化為內聯塊，而要使用內聯元素時，直接使用內聯元素，而不用塊元素轉化了。
</div>
</div>
</body>
6.清除浮動
（1）父級上增加屬性overflow：hidden
（2）在最後一個子元素的後面加一個空的div，給它樣式屬性clear：both（不推薦）
（3）使用成熟的清除浮動樣式類，clearfix
程式碼
<head>
<meta charset="utf-8">
<title>清除浮動</title>
<style type="text/css">
.list{
width: 400px;
/*height: 400px;*/ /*浮動問題：不給高度，設定了浮動*/
margin: 50px auto;
border: 1px solid #000000;
list-style: none;
padding: 0;
/*overflow: hidden;*/ /*第一張清除浮動，*/
}
.list li{
width: 50px;
height: 50px;
background-color: yellow;
margin: 20px;
text-align: center;
float: left;
}
/*第三種清除浮動方法，相當於第二種，以插入的方式*/
/*.clearfix:after{
content: "";
display: table;
clear: both;
}*/
/*before解決塌陷問題，after解決浮動問題，zoom解決相容性問題*/
.clearfix:before,.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
zoom:1;
}
</style></head>
<body>
<ul class="list clearfix">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#">11</a></li>
<!--<div style="clear: both"></div>--> <!--第二種清除浮動-->
</ul></body>
