首頁技術(shù)文章正文

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

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

前端開發(fā)發(fā)展到至今,“DIV+CSS”布局的一些技巧也已成熟,“DIV+CSS”這種叫法是歷史遺留下來的叫法,不是太規(guī)范,規(guī)范叫法應該是“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將文字擠下來居中,不過高度要減去padding值,比較麻煩,我們可以設(shè)置元素“l(fā)ine-height”,將它的值設(shè)置為元素的“height”值,從而讓文字在元素中垂直居中。

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

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

.overtext{

width: 165px;

overflow: hidden;

text-overflow:ellipsis;

white-space:nowrap

}

它的效果如下:

人工智能+Python

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

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

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

.pop{

width: 400px;

height:300px;

position:fixed;

left:50%;

top:50%;

margin-left:-200px;

margin-top:-150px;

}

四、多元素浮動兩端頂格

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

人工智能+Python

碰到這種情況,我們可以將子元素和容器之間再套一層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;

}

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

人工智能+Python

五、清除浮動

當父元素沒有設(shè)置高度,如果它子元素浮動,子元素就無法撐開父級,父級就需要清除浮動,父級清除浮動有一個最簡便的方法就是加上“overflow:hidden”屬性,這樣做可以達到目的,不過如果子元素里面有相對或者絕對定位的元素,定位超過父級范圍的部分會被裁切掉,其實有更成熟的方法,就是使用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右浮動,多個元素左浮動,從而讓它們看上去是右浮動,但是左右順序是對的,如圖:

起始效果:

人工智能+Python

包div的效果:

人工智能+Python

八、邊線合并

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

人工智能+Python

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

人工智能+Python

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

九、使用CSS圖標字體

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

人工智能+Python

十、流體布局與border-box

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

人工智能+Python

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

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


本文版權(quán)歸黑馬程序員人工智能+Python學院所有,歡迎轉(zhuǎn)載,轉(zhuǎn)載請注明作者出處。謝謝!


作者:黑馬程序員人工智能+Python培訓學院


首發(fā):http://python.itheima.com/


分享到:
在線咨詢 我要報名
和我們在線交談!