十大HTML+CSS特征布局技巧

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

一、各種居中

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

二、單行文字超過寬度顯示省略號

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

.overtext{

width: 165px;

overflow: hidden;

text-overflow:ellipsis;

white-space:nowrap

}

它的效果如下：

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

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

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

.pop{

width: 400px;

height:300px;

position:fixed;

left:50%;

top:50%;

margin-left:-200px;

margin-top:-150px;

}

四、多元素浮動兩端頂格

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

碰到這種情況，我們可以將子元素和容器之間再套一層div，把這個div的寬度設(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;

}

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

五、清除浮動

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

特征代碼如下：

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

.clearfix:after{ clear:both;}

.clearfix{zoom:1;}

將clearfix這個類給父級就可以了。

六、多元素水平居中

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

七、多元素右浮動順序顛倒

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

起始效果：

包div的效果：

八、邊線合并

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

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

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

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

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

十、流體布局與border-box

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

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

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