人工智能+Python：十大HTML+CSS特征布局技巧

更新時間:2017-12-20 來源:黑馬程序員瀏覽量:

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

一、各種居中

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

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

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

.overtext{

width: 165px;

overflow: hidden;

text-overflow:ellipsis;

white-space:nowrap

}

它的效果如下：

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

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

特征設置代碼如下：

.pop{

width: 400px;

height:300px;

position:fixed;

left:50%;

top:50%;

margin-left:-200px;

margin-top:-150px;

}

四、多元素浮動兩端頂格

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

碰到這種情況，我們可以將子元素和容器之間再套一層div，把這個div的寬度設寬一點，讓它的寬度能容下上面四個元素的寬度加上外邊距，此時，這div的寬度肯定比最外層容器的寬度還寬，不過最外層容器可以設置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;

}

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

五、清除浮動

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

特征代碼如下：

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

.clearfix:after{ clear:both;}

.clearfix{zoom:1;}

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

六、多元素水平居中

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

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

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

起始效果：

包div的效果：

八、邊線合并

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

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

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

九、使用CSS圖標字體

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

十、流體布局與border-box

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