塊級(jí)元素(block-level)
div,h1,h2,h3,h4,h5,h6,p,hr,form,ul,ol,dl,pre,table,li,dt,dd,tr,td,th;
行內(nèi)元素(inline level)
em,strong,span,a,br,img,button,input,label,select,code,script,textarea;
特性區(qū)別：
- 塊級(jí)元素可以包含塊級(jí)元素和行內(nèi)元素，行內(nèi)元素只能包含文本和行內(nèi)元素；
- 塊級(jí)元素可以占據(jù)一整行的空間，行內(nèi)元素只能占據(jù)自身寬度的空間；
- 塊級(jí)元素可以設(shè)置寬高，而行內(nèi)元素設(shè)置無(wú)效
- 塊級(jí)元素的display屬性值為block;行內(nèi)元素的display屬性值為inline;可以通過(guò)修改display屬性來(lái)切換塊級(jí)元素和行內(nèi)元素；
塊級(jí)元素水平居中效果
對(duì)于塊級(jí)元素，設(shè)置margin: 0 auto;可以達(dá)到劇中的效果
示例：
.box {
margin: 0 auto;
/*
這個(gè)代碼,實(shí)際上為下面代碼的簡(jiǎn)寫(xiě)
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
*/
}
行內(nèi)元素水平居中效果
對(duì)于行內(nèi)元素，設(shè)置text-align: center可以到達(dá)居中效果
但是有個(gè)缺點(diǎn)，由于 text-align: center; 是可繼承屬性，即父元素內(nèi)部所有元素都會(huì)繼承這個(gè)屬性，從而它在元素內(nèi)部的文本都會(huì)居中顯示。因此需要對(duì)子元素的文本居中樣式單獨(dú)設(shè)定
示例：
<style>
.box{
text-align: center;
}
</style>
<div class="box">
<a href="www.google.com" >google</a>
</div>
inline-block 元素水平居中
僅inline-block屬性是無(wú)法讓元素水平居中，他的關(guān)鍵之處要在元素的父容器中設(shè)置text-align的屬性為“center”，這樣才能達(dá)到效果
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body{
text-align: center;
}
.tab-ct>li{
display:inline-block;
margin: 0 4px;
}
</style>
</head>
<body>
<ul class="tab-ct">
<li><a class="btn" href="#">項(xiàng)目1</a></li>
<li><a class="btn" href="#">項(xiàng)目2</a></li>
<li><a class="btn" href="#">項(xiàng)目3</a></li>
<li><a class="btn" href="#">項(xiàng)目4</a></li>
</ul>
</body>
</html>
