元素就是標籤，佈局中常用的有三種標籤，塊元素、內聯元素、內聯塊元素，瞭解這三種元素的特性，才能熟練的進行頁面佈局。
1.塊元素
塊元素，也可以稱爲行元素，佈局中常用的標籤如：div、p、ul、li、h1~h6、dl、dt、dd等等都是塊元素，它在佈局中的行爲：
- 支持全部的樣式
- 如果沒有設置寬度，默認的寬度爲父級寬度100%
盒子佔據一行、即使設置了寬度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
margin:0;
}
.box{ /*如果不設置高寬 ，默認是父類的寬度*/
background-color:gold;
width:300px;
height:200px;
}
.box2{
background-color:green;
width:300px;
height:200px;
}
</style>
</head>
<body>
<div class="box">div元素</div>
<p class="box2">p元素</p>
</body>
</html>
2.內聯元素
內聯元素，也可以稱爲行內元素，佈局中常用的標籤如：a、span、em、b、strong、i等等都是內聯元素，它們在佈局中的行爲：
- 支持部分樣式（不支持寬、高、margin上下、padding上下）
- 寬高由內容決定
- 盒子並在一行
- 代碼換行，盒子之間會產生間距
- 子元素是內聯元素，父元素可以用text-align屬性設置子元素水平對齊方式
解決內聯元素間隙的方法
1、去掉內聯元素之間的換行
2、將內聯元素的父級設置font-size爲0，內聯元素自身再設置font-size
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width:500px;
height:300px;
border:1px solid #000;
margin:50px auto 0;
font-size: 0;
}
.box a{
background-color:gold;
/* width:300px;
height:200px; */ /*這裏設置內聯元素的高寬也是無效的，不支持*/
/* margin:100px 20px; */
padding:0 10px;
font-size:16px;
}
.box2{
width:500px;
height:100px;
border:1px solid #000;
margin:50px auto 0;
text-align:center;
}
</style>
</head>
<body>
<div class="box">
<a href="#">鏈接文字一鏈接文字一</a>
<a href="#">鏈接文字二</a>
<a href="#">鏈接文字三</a>
<a href="#">鏈接文字四</a>
<a href="#">鏈接文字五</a>
</div>
<div class="box2">
<a href="#">鏈接文字</a>
</div>
</body>
</html>
3. 內聯塊元素
內聯塊元素，也叫行內塊元素，是新增的元素類型，現有元素沒有歸於此類別的，img和input元素的行爲類似這種元素，但是也歸類於內聯元素，我們可以用display屬性將塊元素或者內聯元素轉化成這種元素。它們在佈局中表現的行爲：
- 支持全部樣式
- 如果沒有設置寬高，寬高由內容決定
- 盒子並在一行
- 代碼換行，盒子會產生間距
- 子元素是內聯塊元素，父元素可以用text-align屬性設置子元素水平對齊方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width:500px;
height:300px;
border:1px solid #000;
margin:50px auto 0;
font-size: 0;
}
.box a{
background-color:gold;
width:100px;
height:50px;
margin:20px;
padding:10px;
font-size:16px;
display:inline-block;
}
</style>
</head>
<body>
<div class="box">
<a href="#">鏈接文字一</a>
<a href="#">鏈接文字二</a>
<a href="#">鏈接文字三</a>
<a href="#">鏈接文字四</a>
<a href="#">鏈接文字五</a>
</div>
</body>
</html>
這三種元素，可以通過display屬性來相互轉化，不過實際開發中，塊元素用得比較多，所以我們經常把內聯元素轉化爲塊元素，少量轉化爲內聯塊，而要使用內聯元素時，直接使用內聯元素，而不用塊元素轉化了。
display屬性
display屬性是用來設置元素的類型及隱藏的，常用的屬性有：
- 1、none 元素隱藏且不佔位置
- 2、block 元素以塊元素顯示
- 3、inline 元素以內聯元素顯示
- 4、inline-block 元素以內聯塊元素顯示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.menu{
width:694px;
height:50px;
/* background-color:cyan; */
margin:50px auto 0;
font-size:0;
}
.menu a{
width:98px;
height:48px;
background-color:#fff;
display:inline-block; /*注意這裏display不同屬性值的顯示結果block ，inlineblock,none等*/
border:1px solid gold;
font-size:16px;
margin-left:-1px;
text-align:center;
line-height:48px;
text-decoration:none;
color:pink;
font-family:'Microsoft Yahei'
}
.menu a:hover{
background-color:gold;
color:#fff;
}
</style>
</head>
<body>
<div class="menu">
<a href="#">首頁</a>
<a href="#">公司簡介</a>
<a href="#">公司簡介</a>
<a href="#">公司簡介</a>
<a href="#">公司簡介</a>
<a href="#">公司簡介</a>
<a href="#">公司簡介</a>
</div>
</body>
</html>
