CSS格式化排版

1、字體

我們可以使用css樣式為網(wǎng)頁(yè)中的文字設(shè)置字體、字號(hào)、顏色等樣式屬性。下面我們來(lái)看一個(gè)例子，下面代碼實(shí)現(xiàn)：為網(wǎng)頁(yè)中的文字設(shè)置字體為宋體。

body{font-family:"宋體";}

這里注意不要設(shè)置不常用的字體，因?yàn)槿绻脩舯镜仉娔X上如果沒(méi)有安裝你設(shè)置的字體，就會(huì)顯示瀏覽器默認(rèn)的字體。（因?yàn)橛脩羰欠窨梢钥吹侥阍O(shè)置的字體樣式取決于用戶本地電腦上是否安裝你設(shè)置的字體。）
現(xiàn)在一般網(wǎng)頁(yè)喜歡設(shè)置“微軟雅黑”，如下代碼：
body{font-family:"Microsoft Yahei";}
或
body{font-family:"微軟雅黑";}
注意：第一種方法比第二種方法兼容性更好一些。
因?yàn)檫@種字體即美觀又可以在客戶端安全的顯示出來(lái)（用戶本地一般都是默認(rèn)安裝的）。

2、字號(hào)、顏色

可以使用下面代碼設(shè)置網(wǎng)頁(yè)中文字的字號(hào)為12像素，并把字體顏色設(shè)置為#666(灰色)：
body{font-size:12px;color:#666}
拓展：
font-family:設(shè)置字體；
font-size:字體大?。?br> font-weight:bold：設(shè)置為粗體樣式；
font-style:italic：設(shè)置為斜體樣式；
text-decoration:underline：文字設(shè)置下劃線；
text-decoration:line-through：刪除線；
text-indent:2em：縮進(jìn)；（注意：2em的意思就是文字的2倍大小。）
line-height:2em：行高；
word-spacing:50px：?jiǎn)卧~間距；
letter-spacing:20px:字母間距；
text-align:center：水平居中對(duì)齊；

3、粗體

我們還可以使用css樣式來(lái)改變文字的樣式：粗體、斜體、下劃線、刪除線，可以使用下面代碼實(shí)現(xiàn)設(shè)置文字以粗體樣式顯示出來(lái)。
p span{font-weight:bold;}
在這里大家可以看到，如果想為文字設(shè)置粗體是有單獨(dú)的css樣式來(lái)實(shí)現(xiàn)的，再不用為了實(shí)現(xiàn)粗體樣式而使用h1-h6或strong標(biāo)簽了。

4、斜體

以下代碼可以實(shí)現(xiàn)文字以斜體樣式在瀏覽器中顯示：
p a{font-style:italic;}
<p>三年級(jí)時(shí)，我還是一個(gè)<a>膽小如鼠</a>的小女孩。</p>

5、下劃線

有些情況下想為文字設(shè)置為下劃線樣式，這樣可以在視覺(jué)上強(qiáng)調(diào)文字，可以使用下面代碼來(lái)實(shí)現(xiàn)：
p a{text-decoration:underline;}
<p>三年級(jí)時(shí)，我還是一個(gè)<a>膽小如鼠</a>的小女孩。</p>

6、刪除線

如果想在網(wǎng)頁(yè)上設(shè)置刪除線怎么辦，這個(gè)樣式在電商網(wǎng)站上常會(huì)見(jiàn)到：

文本修飾拓展：
h1{text-decoration:overline}
underline 定義文本下的一條線。
overline 定義文本上的一條線。
line-through 定義穿過(guò)文本下的一條線。
blink 定義閃爍的文本。

7、段落排版--縮進(jìn)

中文文字中的段前習(xí)慣空兩個(gè)文字的空白，這個(gè)特殊的樣式可以用下面代碼來(lái)實(shí)現(xiàn)p標(biāo)簽的縮進(jìn)：
p{text-indent:2em;}
注意：2em的意思就是文字的2倍大小。

8、行間距（行高）

學(xué)習(xí)一下另一個(gè)在段落排版中起重要作用的行間距（行高）屬性（line-height），如下代碼實(shí)現(xiàn)設(shè)置段落行間距為1.5倍。
p{line-height:1.5em;}

9、中文字間距、字母間距

中文字間隔、字母間隔設(shè)置：
如果想在網(wǎng)頁(yè)排版中設(shè)置文字間隔或者字母間隔就可以使用 letter-spacing 來(lái)實(shí)現(xiàn)，如下面代碼：

h1{
    letter-spacing:50px;
}

注意：這個(gè)樣式使用在英文單詞時(shí)，是設(shè)置字母與字母之間的間距。

單詞間距設(shè)置：
如果我想設(shè)置英文單詞之間的間距呢？可以使用 word-spacing 來(lái)實(shí)現(xiàn)。如下代碼：

h1{
    word-spacing:50px;
}

10 -對(duì)齊

想為塊狀元素中的文本、圖片設(shè)置居中樣式嗎？可以使用text-align樣式代碼，如下代碼可實(shí)現(xiàn)文本居中顯示。

h1{
    text-align:center;
}

CSS盒模型

1、元素分類

在講解CSS布局之前，我們需要提前知道一些知識(shí)，在CSS中，html中的標(biāo)簽元素大體被分為三種不同的類型：塊狀元素、內(nèi)聯(lián)元素(又叫行內(nèi)元素)和內(nèi)聯(lián)塊狀元素。
常用的塊狀元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、
<table>、<address>、<blockquote> 、<form>

常用的內(nèi)聯(lián)元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的內(nèi)聯(lián)塊狀元素有：
<img>、<input>

2、塊級(jí)元素

什么是塊級(jí)元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是塊級(jí)元素。設(shè)置display:block就是將元素顯示為塊級(jí)元素。如下代碼就是將內(nèi)聯(lián)元素a轉(zhuǎn)換為塊狀元素，從而使a元素具有塊狀元素特點(diǎn)。
a{display:block;}
塊級(jí)元素特點(diǎn)：
1、每個(gè)塊級(jí)元素都從新的一行開(kāi)始，并且其后的元素也另起一行。（真霸道，一個(gè)塊級(jí)元素獨(dú)占一行）
2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。
3、元素寬度在不設(shè)置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設(shè)定一個(gè)寬度。

3.內(nèi)聯(lián)元素

在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的內(nèi)聯(lián)元素（行內(nèi)元素）（inline）元素。當(dāng)然塊狀元素也可以通過(guò)代碼display:inline將元素設(shè)置為內(nèi)聯(lián)元素。如下代碼就是將塊狀元素div轉(zhuǎn)換為內(nèi)聯(lián)元素，從而使 div 元素具有內(nèi)聯(lián)元素特點(diǎn)。

 div{
     display:inline;
 }

內(nèi)聯(lián)元素特點(diǎn)：
1、和其他元素都在一行上；
2、元素的高度、寬度及頂部和底部邊距不可設(shè)置；
3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。

4.內(nèi)聯(lián)塊狀元素

內(nèi)聯(lián)塊狀元素（inline-block）就是同時(shí)具備內(nèi)聯(lián)元素、塊狀元素的特點(diǎn)，代碼display:inline-block就是將元素設(shè)置為內(nèi)聯(lián)塊狀元素。(css2.1新增)，<img>、<input>標(biāo)簽就是這種內(nèi)聯(lián)塊狀標(biāo)簽。
inline-block 元素特點(diǎn)：
1、和其他元素都在一行上；
2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。

5、盒模型中的邊框

盒子模型的邊框就是圍繞著內(nèi)容及補(bǔ)白的線，這條線你可以設(shè)置它的粗細(xì)、樣式和顏色(邊框三個(gè)屬性)。

如下面代碼為 div 來(lái)設(shè)置邊框粗細(xì)為 2px、樣式為實(shí)心的、顏色為紅色的邊框：

div{
    border:2px  solid  red;
}

上面是 border 代碼的縮寫形式，可以分開(kāi)寫：

div{
    border-width:2px;
    border-style:solid;
    border-color:red;
}

注意：
1、border-style（邊框樣式）常見(jiàn)樣式有：
dashed（虛線）| dotted（點(diǎn)線）| solid（實(shí)線）。
2、border-color（邊框顏色）中的顏色可設(shè)置為十六進(jìn)制顏色，如:
border-color:#888;//前面的井號(hào)不要忘掉。
3、border-width（邊框?qū)挾龋┲械膶挾纫部梢栽O(shè)置為：
thin | medium | thick（但不是很常用），最常還是用象素（px）。

現(xiàn)在有一個(gè)問(wèn)題，如果有想為 p 標(biāo)簽單獨(dú)設(shè)置下邊框，而其它三邊都不設(shè)置邊框樣式怎么辦呢？css 樣式中允許只為一個(gè)方向的邊框設(shè)置樣式：
div{border-bottom:1px solid red;}
同樣可以使用下面代碼實(shí)現(xiàn)其它三邊(上、右、左)邊框的設(shè)置：
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;

6盒模型--寬度和高度

盒模型寬度和高度和我們平常所說(shuō)的物體的寬度和高度理解是不一樣的，css內(nèi)定義的寬（width）和高（height），指的是填充以里的內(nèi)容范圍。
因此一個(gè)元素實(shí)際寬度（盒子的寬度）=左邊界+左邊框+左填充+內(nèi)容寬度+右填充+右邊框+右邊界。

7、盒模型--填充(padding)

元素內(nèi)容與邊框之間是可以設(shè)置距離的，稱之為“填充”。填充也可分為上、右、下、左(順時(shí)針)。如下代碼：
div{padding:20px 10px 15px 30px;}
如果上、右、下、左的填充都為10px;可以這么寫
div{padding:10px;}
如果上下填充一樣為10px，左右一樣為20px，可以這么寫：
div{padding:10px 20px;}

8、盒模型--邊界（margin）

元素與其它元素之間的距離可以使用邊界（margin）來(lái)設(shè)置。邊界也是可分為上、右、下、左。如下代碼：
div{margin:20px 10px 15px 30px;}

css布局模型

清楚了CSS 盒模型的基本概念、 盒模型類型， 我們就可以深入探討網(wǎng)頁(yè)布局的基本模型了。布局模型與盒模型一樣都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基礎(chǔ)之上，又不同于我們常說(shuō)的 CSS 布局樣式或 CSS 布局模板。如果說(shuō)布局模型是本，那么 CSS 布局模板就是末了，是外在的表現(xiàn)形式。
CSS包含3種基本的布局模型，用英文概括為：Flow、Layer 和 Float。
在網(wǎng)頁(yè)中，元素有三種布局模型：
1、流動(dòng)模型（Flow）
2、浮動(dòng)模型 (Float)
3、層模型（Layer）

1.流動(dòng)模型

先來(lái)說(shuō)一說(shuō)流動(dòng)模型，流動(dòng)（Flow）是默認(rèn)的網(wǎng)頁(yè)布局模式。也就是說(shuō)網(wǎng)頁(yè)在默認(rèn)狀態(tài)下的 HTML 網(wǎng)頁(yè)元素都是根據(jù)流動(dòng)模型來(lái)分布網(wǎng)頁(yè)內(nèi)容的。
流動(dòng)布局模型具有2個(gè)比較典型的特征：
第一點(diǎn)，塊狀元素都會(huì)在所處的包含元素內(nèi)自上而下按順序垂直延伸分布，因?yàn)樵谀J(rèn)狀態(tài)下，塊狀元素的寬度都為100%。實(shí)際上，塊狀元素都會(huì)以行的形式占據(jù)位置。
第二點(diǎn)，在流動(dòng)模型下，內(nèi)聯(lián)元素都會(huì)在所處的包含元素內(nèi)從左到右水平分布顯示。（內(nèi)聯(lián)元素可不像塊狀元素這么霸道獨(dú)占一行）
右側(cè)代碼編輯器中內(nèi)聯(lián)元素標(biāo)簽a、span、em、strong都是內(nèi)聯(lián)元素。

2.浮動(dòng)模型

塊狀元素這么霸道都是獨(dú)占一行，如果現(xiàn)在我們想讓兩個(gè)塊狀元素并排顯示，怎么辦呢？不要著急，設(shè)置元素浮動(dòng)就可以實(shí)現(xiàn)這一愿望。
任何元素在默認(rèn)情況下是不能浮動(dòng)的，但可以用 CSS 定義為浮動(dòng)，如 div、p、table、img 等元素都可以被定義為浮動(dòng)。如下代碼可以實(shí)現(xiàn)兩個(gè) div 元素一行顯示。
div{ width:200px; height:200px; border:2px red solid; float:left;}<div id="div1"></div><div id="div2"></div>
效果圖

div{ width:200px; 
  height:200px; 
  border:2px red solid;}
  #div1{float:left;}
  #div2{float:right;}

3.層模型

如何讓html元素在網(wǎng)頁(yè)中精確定位，就像圖像軟件PhotoShop中的圖層一樣可以對(duì)每個(gè)圖層能夠精確定位操作。CSS定義了一組定位（positioning）屬性來(lái)支持層布局模型。

層模型有三種形式：
1、絕對(duì)定位(position: absolute)
2、相對(duì)定位(position: relative)
3、固定定位(position: fixed)

絕對(duì)定位
如果想為元素設(shè)置層模型中的絕對(duì)定位，需要設(shè)置position:absolute(表示絕對(duì)定位)，這條語(yǔ)句的作用將元素從文檔流中拖出來(lái)，然后使用left、right、top、bottom屬性相對(duì)于其最接近的一個(gè)具有定位屬性的父包含塊進(jìn)行絕對(duì)定位。如果不存在這樣的包含塊，則相對(duì)于body元素，即相對(duì)于瀏覽器窗口。
如下面代碼可以實(shí)現(xiàn)div元素相對(duì)于瀏覽器窗口向右移動(dòng)100px，向下移動(dòng)50px。
div{ width:200px; height:200px; border:2px red solid; position:absolute; left:100px; top:50px;}<div id="div1"></div>
效果如下：

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:relative;
    left:100px;
    top:50px;
}
<div id="div1"></div>

效果圖：

什么叫做“偏移前的位置保留不動(dòng)”呢？
大家可以做一個(gè)實(shí)驗(yàn)，在右側(cè)代碼編輯器的19行div標(biāo)簽的后面加入一個(gè)span標(biāo)簽，在標(biāo)并在span標(biāo)簽中寫入一些文字。如下代碼：

<body> <div id="div1"></div>
<span>偏移前的位置還保留不動(dòng)，覆蓋不了前面的div沒(méi)有偏移前的位置</span></body>

效果圖：

固定定位
fixed：表示固定定位，與absolute定位類型類似，但它的相對(duì)移動(dòng)的坐標(biāo)是視圖（屏幕內(nèi)的網(wǎng)頁(yè)窗口）本身。由于視圖本身是固定的，它不會(huì)隨瀏覽器窗口的滾動(dòng)條滾動(dòng)而變化，除非你在屏幕中移動(dòng)瀏覽器窗口的屏幕位置，或改變?yōu)g覽器窗口的顯示大小，因此固定定位的元素會(huì)始終位于瀏覽器窗口內(nèi)視圖的某個(gè)位置，不會(huì)受文檔流動(dòng)影響，這與background-attachment:fixed?屬性功能相同。以下代碼可以實(shí)現(xiàn)相對(duì)于瀏覽器視圖向右移動(dòng)100px，向下移動(dòng)50px。并且拖動(dòng)滾動(dòng)條時(shí)位置固定不變。

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    left:100px;
    top:50px;
}
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。
</p>

Relative與Absolute組合使用
小伙伴們學(xué)習(xí)了12-6小節(jié)的絕對(duì)定位的方法：使用position:absolute可以實(shí)現(xiàn)被設(shè)置元素相對(duì)于瀏覽器（body）設(shè)置定位以后，大家有沒(méi)有想過(guò)可不可以相對(duì)于其它元素進(jìn)行定位呢？答案是肯定的，當(dāng)然可以。使用position:relative來(lái)幫忙，但是必須遵守下面規(guī)范：
1、參照定位的元素必須是相對(duì)定位元素的前輩元素：

<div id="box1"><!--參照定位的元素-->
    <div id="box2">相對(duì)參照元素進(jìn)行定位</div><!--相對(duì)定位元素-->
</div>

從上面代碼可以看出box1是box2的父元素（父元素當(dāng)然也是前輩元素了）。
2、參照定位的元素必須加入position:relative;

#box1{
    width:200px;
    height:200px;
    position:relative;        
}

3、定位元素加入position:absolute，便可以使用top、bottom、left、right來(lái)進(jìn)行偏移定位了。

#box2{
    position:absolute;
    top:20px;
    left:30px;         
}

這樣box2就可以相對(duì)于父元素box1定位了（這里注意參照物就可以不是瀏覽器了，而可以自由設(shè)置了）。

CSS代碼縮寫，占用更少的帶寬

1.盒模型代碼簡(jiǎn)寫

還記得在講盒模型時(shí)外邊距(margin)、內(nèi)邊距(padding)和邊框(border)設(shè)置上下左右四個(gè)方向的邊距是按照順時(shí)針?lè)较蛟O(shè)置的：上右下左。具體應(yīng)用在margin和padding的例子如下：

margin:10px 15px 12px 14px;
/*上設(shè)置為10px、右設(shè)置為15px、下設(shè)置為12px、左設(shè)置為14px*/

通常有下面三種縮寫方法:
1、如果top、right、bottom、left的值相同，如下面代碼：
margin:10px 10px 10px 10px;
可縮寫為：
margin:10px;
2、如果top和bottom值相同、left和 right的值相同，如下面代碼：
margin:10px 20px 10px 20px;
可縮寫為：
margin:10px 20px;
3、如果left和right的值相同，如下面代碼：
margin:10px 20px 30px 20px;
可縮寫為：
margin:10px 20px 30px;
注意：padding、border的縮寫方法和margin是一致的。

2.顏色值縮寫

關(guān)于顏色的css樣式也是可以縮寫的，當(dāng)你設(shè)置的顏色是16進(jìn)制的色彩值時(shí)，如果每?jī)晌坏闹迪嗤?，可以縮寫一半。
例子1：
p{color:#000000;}
可以縮寫為：
p{color: #000;}
例子2：
p{color: #336699;}
可以縮寫為：
p{color: #369;}

3.字體縮寫

網(wǎng)頁(yè)中的字體css樣式代碼也有他自己的縮寫方式，下面是給網(wǎng)頁(yè)設(shè)置字體的代碼：

body{

   font-style:italic;  //設(shè)置字體為斜體
   font-variant:small-caps; //區(qū)分大小寫，瀏覽器會(huì)顯示小型大寫字母的字體
   font-weight:bold; //設(shè)置粗體
   font-size:12px;  //字號(hào)是12像素
   line-height:1.5em;  //行間距（行高）1.5個(gè)行倍
   font-family:"宋體",sans-serif;//設(shè)置中文字體為宋體，英文字體為sans-serif}
}

這么多行的代碼其實(shí)可以縮寫為一句：

body{
    font:italic  small-caps  bold  12px/1.5em  "宋體",sans-serif;
    /*前三個(gè)順序沒(méi)影響可無(wú)，后兩個(gè)順序固定且必須有*/
}

注意：
1、使用這一簡(jiǎn)寫方式你至少要指定 font-size 和 font-family 屬性，其他的屬性(如 font-weight、font-style、font-variant、line-height)如未指定將自動(dòng)使用默認(rèn)值。
2、在縮寫時(shí) font-size 與 line-height 中間要加入“/”斜扛。
一般情況下因?yàn)閷?duì)于中文網(wǎng)站，英文還是比較少的，所以下面縮寫代碼比較常用：

body{
    font:12px/1.5em  "宋體",sans-serif;
}

只是有字號(hào)、行間距、中文字體、英文字體設(shè)置。

單位和值

1.顏色值

在網(wǎng)頁(yè)中的顏色設(shè)置是非常重要，有字體顏色（color）、背景顏色（background-color）、邊框顏色（border）等，設(shè)置顏色的方法也有很多種：
1、英文命令顏色
前面幾個(gè)小節(jié)中經(jīng)常用到的就是這種設(shè)置方法：
p{color:red;}
2、RGB顏色
這個(gè)與 photoshop 中的 RGB 顏色是一致的，由 R(red)、G(green)、B(blue) 三種顏色的比例來(lái)配色。
p{color:rgb(133,45,200);}
每一項(xiàng)的值可以是 0~255 之間的整數(shù)，也可以是 0%~100% 的百分?jǐn)?shù)。如：
p{color:rgb(20%,33%,25%);}
3、十六進(jìn)制顏色
這種顏色設(shè)置方法是現(xiàn)在比較普遍使用的方法，其原理其實(shí)也是 RGB 設(shè)置，但是其每一項(xiàng)的值由 0-255 變成了十六進(jìn)制 00-ff。
p{color:#00ffff;}
配色表：

2.長(zhǎng)度值

長(zhǎng)度單位總結(jié)一下，目前比較常用到px（像素）、em、% 百分比，要注意其實(shí)這三種單位都是相對(duì)單位。
1、像素
像素為什么是相對(duì)單位呢？因?yàn)橄袼刂傅氖秋@示器上的小點(diǎn)（CSS規(guī)范中假設(shè)“90像素=1英寸”）。實(shí)際情況是瀏覽器會(huì)使用顯示器的實(shí)際像素值有關(guān)，在目前大多數(shù)的設(shè)計(jì)者都傾向于使用像素（px）作為單位。
2、em
就是本元素給定字體的 font-size 值，如果元素的 font-size 為 14px ，那么 1em = 14px；如果 font-size 為 18px，那么 1em = 18px。如下代碼：
p{font-size:12px;text-indent:2em;}
上面代碼就是可以實(shí)現(xiàn)段落首行縮進(jìn) 24px（也就是兩個(gè)字體大小的距離）。
下面注意一個(gè)特殊情況：
但當(dāng)給 font-size 設(shè)置單位為 em 時(shí)，此時(shí)計(jì)算的標(biāo)準(zhǔn)以 p 的父元素的 font-size 為基礎(chǔ)。如下代碼：
html:
<p>以這個(gè)<span>例子</span>為例。</p>
css:

p{font-size:14px}
span{font-size:0.8em;}

結(jié)果 span 中的字體“例子”字體大小就為 11.2px（14 * 0.8 = 11.2px）。
3、百分比
p{font-size:12px;line-height:130%}
設(shè)置行高（行間距）為字體的130%（12 * 1.3 = 15.6px）。

css樣式設(shè)置小技巧

1.水平居中設(shè)置-行內(nèi)元素

我們?cè)趯?shí)際工作中常會(huì)遇到需要設(shè)置水平居中的場(chǎng)景，比如為了美觀，文章的標(biāo)題一般都是水平居中顯示的。
這里我們又得分兩種情況：行內(nèi)元素 還是 塊狀元素 ，塊狀元素里面又分為定寬塊狀元素，以及不定寬塊狀元素。今天我們先來(lái)了解一下行內(nèi)元素怎么進(jìn)行水平居中？
如果被設(shè)置元素為文本、圖片等行內(nèi)元素時(shí)，水平居中是通過(guò)給父元素設(shè)置text-align:center來(lái)實(shí)現(xiàn)的。(父元素和子元素：如下面的html代碼中，div是“我想要在父容器中水平居中顯示”這個(gè)文本的父元素。反之這個(gè)文本是div的子元素 )如下代碼：
html代碼：
<body> <div class="txtCenter">我想要在父容器中水平居中顯示。</div></body>
css代碼：
<style> .txtCenter{ text-align:center; }</style>

2.水平居中設(shè)置-定寬塊狀元素

當(dāng)被設(shè)置元素為 塊狀元素 時(shí)用 text-align：center 就不起作用了，這時(shí)也分兩種情況：定寬塊狀元素和不定寬塊狀元素。
滿足定寬和塊狀兩個(gè)條件的元素是可以通過(guò)設(shè)置“左右margin”值為“auto”來(lái)實(shí)現(xiàn)居中的。我們來(lái)看個(gè)例子就是設(shè)置 div 這個(gè)塊狀元素水平居中：
html代碼：

<body>
  <div>我是定寬塊狀元素，哈哈，我要水平居中顯示。</div>
</body>

css代碼：

<style>
div{
    border:1px solid red;/*為了顯示居中效果明顯為 div 設(shè)置了邊框*/
    
    width:200px;/*定寬*/
    margin:20px auto;/* margin-left 與 margin-right 設(shè)置為 auto */
}
</style>

也可以寫成：
margin-left:auto;
margin-right:auto;
注意：元素的“上下 margin” 是可以隨意設(shè)置的。

3 不定寬塊狀元素方法

不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都很多）：

1.加入 table 標(biāo)簽
2.設(shè)置 display: inline 方法：與第一種類似，顯示類型設(shè)為 行內(nèi)元素，進(jìn)行不定寬元素的屬性設(shè)置
3.設(shè)置 position:relative 和 left:50%：利用 相對(duì)定位 的方式，將元素向左偏移 50% ，即達(dá)到居中的目的

3.1不定寬塊狀元素方法（一）

為什么選擇方法一加入table標(biāo)簽? 是利用table標(biāo)簽的長(zhǎng)度自適應(yīng)性---即不定義其長(zhǎng)度也不默認(rèn)父元素body的長(zhǎng)度（table其長(zhǎng)度根據(jù)其內(nèi)文本長(zhǎng)度決定），因此可以看做一個(gè)定寬度塊元素，然后再利用定寬度塊狀居中的margin的方法，使其水平居中。
第一步：為需要設(shè)置的居中的元素外面加入一個(gè) table 標(biāo)簽 ( 包括 <tbody>、<tr>、<td> )。
第二步：為這個(gè) table 設(shè)置“左右 margin 居中”（這個(gè)和定寬塊狀元素的方法一樣）。
舉例如下：
html代碼：

<div>
 <table>
  <tbody>
    <tr><td>
    <ul>
        <li>我是第一行文本</li>
        <li>我是第二行文本</li>
        <li>我是第三行文本</li>
    </ul>
    </td></tr>
  </tbody>
 </table>
</div>

css代碼：

<style>
table{
    border:1px solid;
    margin:0 auto;
}
</style>

3.2不定寬塊狀元素方法（二）

除了上一節(jié)講到的插入table標(biāo)簽，可以使不定寬塊狀元素水平居中之外，本節(jié)介紹第2種實(shí)現(xiàn)這種效果的方法，改變?cè)氐膁isplay類型為行內(nèi)元素，利用其屬性直接設(shè)置。
第二種方法：改變塊級(jí)元素的 display 為 inline 類型（設(shè)置為 行內(nèi)元素 顯示），然后使用 text-align:center
來(lái)實(shí)現(xiàn)居中效果。如下例子：
html代碼：

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>

css代碼：

<style>
.container{
    text-align:center;
}
/* margin:0;padding:0（消除文本與div邊框之間的間隙）*/
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;
}
/* margin-right:8px（設(shè)置li文本之間的間隔）*/
.container li{
    margin-right:8px;
    display:inline;
}
</style>

這種方法相比第一種方法的優(yōu)勢(shì)是不用增加無(wú)語(yǔ)義標(biāo)簽，但也存在著一些問(wèn)題：它將塊狀元素的 display 類型改為 inline，變成了行內(nèi)元素，所以少了一些功能，比如設(shè)定長(zhǎng)度值。

3.3不定寬塊狀元素方法（三）

除了前兩節(jié)講到的插入table標(biāo)簽，以及改變?cè)氐膁isplay類型，可以使不定寬塊狀元素水平居中之外，本節(jié)介紹第3種實(shí)現(xiàn)這種效果的方法，設(shè)置浮動(dòng)和相對(duì)定位來(lái)實(shí)現(xiàn)。

方法三：通過(guò)給父元素設(shè)置 float，然后給父元素設(shè)置 position:relative 和 left:50%，子元素設(shè)置 position:relative 和 left: -50% 來(lái)實(shí)現(xiàn)水平居中。

我們可以這樣理解：假想ul層的父層（即下面例子中的div層）中間有條平分線將ul層的父層（div層）平均分為兩份，ul層的css代碼是將ul層的最左端與ul層的父層（div層）的平分線對(duì)齊；而li層的css代碼則是將li層的平分線與ul層的最左端（也是div層的平分線）對(duì)齊，從而實(shí)現(xiàn)li層的居中。

代碼如下：

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>

css代碼：

<style>
.container{
    float:left;
    position:relative;
    left:50%
}

.container ul{
    list-style:none;
    margin:0;
    padding:0;
    
    position:relative;
    left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>

這三種方法使用得都非常廣泛，各有優(yōu)缺點(diǎn)，具體選用哪種方法，可以視具體情況而定。

4 垂直居中-父元素高度確定的單行文本

我們?cè)趯?shí)際工作中也會(huì)遇到需要設(shè)置垂直居中的場(chǎng)景，比如好多報(bào)紙的文章標(biāo)題在左右一側(cè)時(shí)，常常會(huì)設(shè)置為垂直居中，為了用戶體驗(yàn)性好。
這里我們又得分兩種情況：父元素高度確定的單行文本，以及父元素高度確定的多行文本。
本節(jié)我們先來(lái)看第一種父元素高度確定的單行文本, 怎么設(shè)置它為垂直居中呢？
父元素高度確定的單行文本的豎直居中的方法是通過(guò)設(shè)置父元素的 height 和 line-height 高度一致來(lái)實(shí)現(xiàn)的。(height: 該元素的高度，line-height: 顧名思義，行高（行間距），指在文本中，行與行之間的 基線間的距離 )。
line-height 與 font-size 的計(jì)算值之差，在 CSS 中成為“行間距”。分為兩半，分別加到一個(gè)文本行內(nèi)容的頂部和底部。

這種文字行高與塊高一致帶來(lái)了一個(gè)弊端：當(dāng)文字內(nèi)容的長(zhǎng)度大于塊的寬時(shí)，就有內(nèi)容脫離了塊。
如下代碼：

<div class="container">
    hi,imooc!
</div>

css代碼：

<style>
.container{
    height:100px;
    line-height:100px;
    background:#999;
}
</style>

5父元素高度確定的多行文本（方法一）

父元素高度確定的多行文本、圖片等的豎直居中的方法有兩種：

方法一：使用插入 table (包括tbody、tr、td)標(biāo)簽，同時(shí)設(shè)置 vertical-align：middle。

css 中有一個(gè)用于豎直居中的屬性 vertical-align，在父元素設(shè)置此樣式時(shí)，會(huì)對(duì)inline-block類型的子元素都有用。下面看一下例子：

html代碼：

<body>
<table><tbody><tr><td class="wrap">
<div>
    <p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>

css代碼：

table td{height:500px;background:#ccc}

因?yàn)?td 標(biāo)簽?zāi)J(rèn)情況下就默認(rèn)設(shè)置了 vertical-align 為 middle，所以我們不需要顯式地設(shè)置了。

6父元素高度確定的多行文本（方法二）

除了上一節(jié)講到的插入table標(biāo)簽，可以使父元素高度確定的多行文本垂直居中之外，本節(jié)介紹另外一種實(shí)現(xiàn)這種效果的方法。但這種方法兼容性比較差，只是提供大家學(xué)習(xí)參考。

在 chrome、firefox 及 IE8 以上的瀏覽器下可以設(shè)置塊級(jí)元素的 display 為 table-cell（設(shè)置為表格單元顯示），激活 vertical-align 屬性，但注意 IE6、7 并不支持這個(gè)樣式, 兼容性比較差。
html代碼：

<div class="container">
    <div>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
    </div>
</div>

css代碼：

<style>
.container{
    height:300px;
    background:#ccc;
    display:table-cell;/*IE8以上及Chrome、Firefox*/
    vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>

這種方法的好處是不用添加多余的無(wú)意義的標(biāo)簽，但缺點(diǎn)也很明顯，它的兼容性不是很好，不兼容 IE6、7而且這樣修改display的block變成了table-cell，破壞了原有的塊狀元素的性質(zhì)。

7 .隱性改變display類型

有一個(gè)有趣的現(xiàn)象就是當(dāng)為元素（不論之前是什么類型元素，display:none 除外）設(shè)置以下 2 個(gè)句之一：

1. position : absolute
2. float : left 或 float:right
   簡(jiǎn)單來(lái)說(shuō)，只要html代碼中出現(xiàn)以上兩句之一，元素的display顯示類型就會(huì)自動(dòng)變?yōu)橐?display:inline-block（塊狀元素）的方式顯示，當(dāng)然就可以設(shè)置元素的 width 和 height 了，且默認(rèn)寬度不占滿父元素。

如下面的代碼，小伙伴們都知道 a 標(biāo)簽是 行內(nèi)元素 ，所以設(shè)置它的 width 是 沒(méi)有效果的，但是設(shè)置為 position:absolute 以后，就可以了。

<div class="container"> <a href="#" title="">進(jìn)入課程請(qǐng)單擊這里</a></div>

css代碼

<style>.container a{ position:absolute; width:200px; background:#ccc;}</style>

想不起 display:inline-block 是做什么的小伙伴們，單擊“元素分類--內(nèi)聯(lián)塊狀元素”可返回到前面小節(jié)進(jìn)行復(fù)習(xí)。