塊級元素(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ū)別：
- 塊級元素可以包含塊級元素和行內(nèi)元素，行內(nèi)元素只能包含文本和行內(nèi)元素；
- 塊級元素可以占據(jù)一整行的空間，行內(nèi)元素只能占據(jù)自身寬度的空間；
- 塊級元素可以設(shè)置寬高，而行內(nèi)元素設(shè)置無效
- 塊級元素的display屬性值為block;行內(nèi)元素的display屬性值為inline;可以通過修改display屬性來切換塊級元素和行內(nèi)元素；
塊級元素水平居中效果
對于塊級元素，設(shè)置margin: 0 auto;可以達(dá)到劇中的效果
示例：
.box {
margin: 0 auto;
/*
這個代碼,實際上為下面代碼的簡寫
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
*/
}
行內(nèi)元素水平居中效果
對于行內(nèi)元素，設(shè)置text-align: center可以到達(dá)居中效果
但是有個缺點，由于 text-align: center; 是可繼承屬性，即父元素內(nèi)部所有元素都會繼承這個屬性，從而它在元素內(nèi)部的文本都會居中顯示。因此需要對子元素的文本居中樣式單獨設(shè)定
示例：
<style>
.box{
text-align: center;
}
</style>
<div class="box">
<a href="www.google.com" >google</a>
</div>
inline-block 元素水平居中
僅inline-block屬性是無法讓元素水平居中，他的關(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="#">項目1</a></li>
<li><a class="btn" href="#">項目2</a></li>
<li><a class="btn" href="#">項目3</a></li>
<li><a class="btn" href="#">項目4</a></li>
</ul>
</body>
</html>
