十大HTML+CSS特征布局技巧

前端開發(fā)發(fā)展到至今，“DIV+CSS”布局的一些技巧也已成熟，“DIV+CSS”這種叫法是歷史遺留下來的叫法，不是太規(guī)范，規(guī)范叫法應(yīng)該是“HTML+CSS”，下面針對(duì)一些特征布局中常用的技巧做一個(gè)歸納：

一、各種居中

居中技巧已經(jīng)在布局中比較成熟，最常見的是針對(duì)已定義寬的塊元素設(shè)置水平居中，可以將這個(gè)塊元素設(shè)置上下“margin”為“0”，左右“magin”為“auto”就可以實(shí)現(xiàn)塊元素在父級(jí)容器中水平居中，設(shè)置方法為: “margin:0 auto”;如何元素沒有設(shè)置寬度，可以把元素轉(zhuǎn)化為內(nèi)聯(lián)塊元素，方法為：“display:inline-block”，然后通過設(shè)置元素父級(jí)“text-align:center”來讓元素水平居中;我們同樣可以用設(shè)置元素“text-align:center”來讓元素中的文字水平居中;元素中的文字垂直居中，可以使用padding將文字?jǐn)D下來居中，不過高度要減去padding值，比較麻煩，我們可以設(shè)置元素“line-height”，將它的值設(shè)置為元素的“height”值，從而讓文字在元素中垂直居中。

二、單行文字超過寬度顯示省略號(hào)

要讓單行文字在文字過寬時(shí)自動(dòng)截去多的字，然后顯示省略號(hào)，首先需要設(shè)置文字容器的寬度，然后強(qiáng)制讓文字不換行，最后設(shè)置元素的文字溢出屬性，特征設(shè)置代碼如下：

.overtext{

width: 165px;

overflow: hidden;

text-overflow:ellipsis;

white-space:nowrap

}

它的效果如下：

三、已知寬高的元素相對(duì)瀏覽器水平居中

已知寬高的元素相對(duì)瀏覽器水平垂直居中，這種一般是用來做彈出框的，可以將此元素設(shè)置固定定位，定位的偏移值使用百分比50%，讓元素的左上角對(duì)齊瀏覽器視口的中心，然后用margin的負(fù)值，將偏移距離分別設(shè)置為寬高的一半，從而將元素的中心對(duì)齊瀏覽器的中心，從而達(dá)到水平和垂直居中。

特征設(shè)置代碼如下：

.pop{

width: 400px;

height:300px;

position:fixed;

left:50%;

top:50%;

margin-left:-200px;

margin-top:-150px;

}

四、多元素浮動(dòng)兩端頂格

我們來看下面這種情況，在等間距浮動(dòng)多個(gè)元素時(shí)，最后一個(gè)元素由于有向右的外邊距，所以無法靠最右顯示，從而換行顯示，如何在不給最后一個(gè)元素加多個(gè)樣式的前提下，讓最后一個(gè)元素靠右顯示呢?如圖：

碰到這種情況，我們可以將子元素和容器之間再套一層div，把這個(gè)div的寬度設(shè)寬一點(diǎn)，讓它的寬度能容下上面四個(gè)元素的寬度加上外邊距，此時(shí)，這div的寬度肯定比最外層容器的寬度還寬，不過最外層容器可以設(shè)置overflow:hidden，將它裁剪掉就行了。

特征代碼如下：

Html：

CSS：

.con{

width:380px;

height:120px;

border:1px solid #000;

margin:50px auto;

overflow:hidden;

}

.con .con2{width:400px}

.con .con2 div{

width:80px;

height:20px;

margin:20px 20px 20px 0;

background:gold;

float:left;

}

最后效果如下，最后一個(gè)元素靠右頂格顯示：

五、清除浮動(dòng)

當(dāng)父元素沒有設(shè)置高度，如果它子元素浮動(dòng)，子元素就無法撐開父級(jí)，父級(jí)就需要清除浮動(dòng)，父級(jí)清除浮動(dòng)有一個(gè)最簡(jiǎn)便的方法就是加上“overflow:hidden”屬性，這樣做可以達(dá)到目的，不過如果子元素里面有相對(duì)或者絕對(duì)定位的元素，定位超過父級(jí)范圍的部分會(huì)被裁切掉，其實(shí)有更成熟的方法，就是使用after偽元素的方法，可以很好地解決這個(gè)問題

特征代碼如下：

.clearfix:after,.clearfix:before{ content: "";display: table;}

.clearfix:after{ clear:both;}

.clearfix{zoom:1;}

將clearfix這個(gè)類給父級(jí)就可以了。

六、多元素水平居中

多元素水平居中，其實(shí)可以用內(nèi)聯(lián)塊元素的特性，將多個(gè)元素轉(zhuǎn)化為內(nèi)聯(lián)塊，方法為：“display:inline-block”，然后在它們的父級(jí)上設(shè)置“text-align:center”來讓這些內(nèi)聯(lián)塊水平居中，這些內(nèi)聯(lián)塊之間會(huì)有不必要的小空白，可以通過讓這些內(nèi)聯(lián)塊的代碼不換行來解決，然后再用margin設(shè)置自定義的間距。

七、多元素右浮動(dòng)順序顛倒

多個(gè)元素在父級(jí)內(nèi)右浮動(dòng)，它們浮動(dòng)后，左右的順序是顛倒的，我們的解決方法是在多個(gè)元素和父級(jí)之間再包一層div，讓這個(gè)div右浮動(dòng)，多個(gè)元素左浮動(dòng)，從而讓它們看上去是右浮動(dòng)，但是左右順序是對(duì)的，如圖：

起始效果：

包div的效果：

八、邊線合并

邊線合并指的是如果元素都設(shè)置了四周的邊框，那么元素之間如果不設(shè)置margin間距的話，它們之間的間隔就是兩個(gè)邊框的距離，如果想達(dá)到讓它們之間的距離是一個(gè)邊框的寬度效果應(yīng)該怎么設(shè)置呢?其實(shí)用margin的負(fù)值就可以了，如圖：

如果將它們的margin-right都設(shè)為-1，就可以讓它們的邊線合并，如圖：

這樣就達(dá)到我們想要的效果了，其實(shí)還有邊線合并的場(chǎng)景，就是關(guān)于table的邊線合并的例子，我們可以將table的樣式屬性設(shè)為：“border-collapse:collapse”,這樣，在表格的table標(biāo)簽，td標(biāo)簽和th標(biāo)簽上設(shè)置的四周的邊線都會(huì)合并成一條邊線。

九、使用CSS圖標(biāo)字體

我們可以通過css中的@font-face將外部制作好的圖標(biāo)字體庫導(dǎo)入樣式中，這樣我們?cè)陧撁嫔现谱鞯膱D標(biāo)可以按照文字的方式插入，常用的字體庫為fontawesome(http://fontawesome.dashgame.com/)圖標(biāo)字體庫，以及iconfont(http://www.iconfont.cn/)網(wǎng)站上提供的圖標(biāo)字體庫，如圖：

十、流體布局與border-box

這里所說的流體布局，是指的用百分比來做寬度的布局，這種布局一般用在移動(dòng)端，PC端一般使用固定寬度的布局，移動(dòng)端的設(shè)備屏幕種類非常多，為了應(yīng)對(duì)不同的寬度，可以用百分比來動(dòng)態(tài)適應(yīng)，這就是流體布局，既然用百分比來做單位，如果盒子增加border或者padding，那么盒子還得減去設(shè)置的border和padding，才能保持它的寬高不變，但是減去這些border和padding是非常麻煩的，這里有一個(gè)CSS屬性就是“box-sizing”，把這個(gè)屬性設(shè)置為“border-box”，那么盒子的真實(shí)尺寸的計(jì)算就從盒子邊界開始，這樣就可以解決剛剛說的問題，如圖：

以上就是三個(gè)設(shè)置了寬度是33.3333%的盒子在一個(gè)容器里面剛好排列在一起的情況。

以上就是特征布局中一些常用的技巧，希望對(duì)您在布局中有所幫助。