CSS 布局的基礎(chǔ)方法及css布局技巧

2020-11-16 10:08 更新

css 是一個(gè)網(wǎng)頁的外衣,網(wǎng)頁好不好看取決于 css 樣式,而布局是 css 中比較重要的部分,當(dāng)產(chǎn)品把一個(gè)需求設(shè)計(jì)交到手中,我首先要做的是一點(diǎn)點(diǎn)的解剖這些需求,首先想到的是 html 的結(jié)構(gòu),根據(jù)要兼容的瀏覽器,數(shù)據(jù)的拼接,代碼的可維護(hù)性,擴(kuò)展性來選擇 css 的布局方法。有時(shí)候,一個(gè)好的布局可以減少很多代碼,用 css 處理網(wǎng)頁布局的時(shí)候有很多技巧性的東西,下面就給大家介紹一些 css 布局技巧實(shí)例及 css 布局模型。


css的基礎(chǔ)布局方法

1.塊區(qū)域介紹

<body>

  <div>

   <p>這是一個(gè)段落.</p>

  </div>

 </body>

p 元素的包含塊是 div 元素,因?yàn)樽鳛閴K級元素,表單元格或行內(nèi)元素,這是最近的祖先元素,類似的,div 的包含塊是 body. 因此,p 的布局依賴于 div 的布局,而 div 的布局則依賴于 body 的布局。

塊級元素會自動重啟一行


2. 塊級元素
正常流布局

塊級元素

一般的,一個(gè)元素的width被定義為從左內(nèi)邊界右內(nèi)邊界,height則是從上內(nèi)邊界下內(nèi)邊界的距離。

不同的寬度,高度,內(nèi)邊距和外邊距相結(jié)合,就可以確定文檔的布局。


水平布局

簡單規(guī)則,正常流中塊級元素框的水平部分 總和 就等于父元素的 width . 假設(shè)一個(gè)div中有兩個(gè)段落,這兩個(gè)段落的外邊距設(shè)置為 1 em,段落內(nèi)容寬度 width 在加上其左,右內(nèi)邊距,邊框或外邊距加在一起正好是 div 內(nèi)容的 width.


7大屬性:margin-left, border-left, padding-left, width, padding-right, border-right, margin-right

這 7 個(gè)屬性的值加在一起必須是父塊元素的 width 值. ( 其中 margin-left, margin-right, width 可以設(shè)置成auto ) 設(shè)置成 auto, 會按照以上規(guī)則自動匹配到父塊的寬度,例如 7個(gè)屬性的和必須為 400像素,沒有設(shè)置內(nèi)邊距或邊距 ( 默認(rèn)為 0) 而右外邊距和width設(shè)置為100px, 左外邊距為  auto,那么左外邊距的寬度將是200px. 可以用 auto 彌補(bǔ)實(shí)際值與所需綜合的差距。注:如果3個(gè)可以設(shè)置 auto,都沒設(shè)置成 auto,而且寬度加在一起還不夠父塊區(qū)域的寬度的話,會默認(rèn)將 margin-right 設(shè)置成 auto 來滿足總和與父塊相等的要求。

如果兩個(gè)外邊距設(shè)置成 auto,那么,它們會是等長的,因此將元素在其父親元素中居中。

如果這3個(gè)屬性都設(shè)置成auto, 那么, 外邊距會是0,而讓 width  盡可能的長。

可以使用百分?jǐn)?shù),但是邊框的寬度不能是百分?jǐn)?shù)。

垂直布局
7大屬性:margin-top, border-top, padding-top, height, padding-bottom, border-bottom, margin-bottom , 同樣,這7個(gè)屬性的值的總和是父元素 height 值。

其中 , margin-top, height, margin-bottom 也可以設(shè)置成 auto. ( 如果 margin-top, margin-bottom設(shè)置成 auto, 那么它們就會自動設(shè)置成 0 ).

3.浮動與定位( 確認(rèn)基本布局 )

(1) 浮動
一個(gè)元素浮動時(shí),其他內(nèi)容會“環(huán)繞”該元素,浮動元素要設(shè)置一個(gè)width.

float ( left , right , none ) , none 的情況一般用在文檔內(nèi)部,用來覆蓋式樣表,一般很少使用 none.

浮動元素會自動生成一個(gè)塊級框。

浮動元素規(guī)則
浮動元素不能超過包含它的塊的左右邊界。(1,2 左右邊界受限 )

浮動元素規(guī)則

浮動元素之前如果出現(xiàn)浮動元素,則必須在該浮動元素之后(不能覆蓋 ) ( 2 左邊受限 )

左邊受限

如果浮動元素加一起太寬,會自動向下。。(寬度受限 )

寬度受限

垂直方向要頂頭不能超過塊區(qū)域,同樣不能超過在它上面的浮動元素。( 上邊界受限 )

上邊界受限

第一個(gè)浮動元素之后,第二個(gè)在它的下邊,因?yàn)樗麄?,?個(gè)在它的右邊。( 2 上邊受限 )


浮動元素的頂端,不能比之前所有浮動元素或塊級別元素的頂端更高 ( 頂端受限 )


頂端受限

浮動元素之間左右的邊界不能覆蓋,如下1,2,3, 之間不能覆蓋 ( 元素之間受限 )

元素之間受限

浮動元素會盡可能高的放置

浮動元素

浮動元素會盡可能向左向右

向左向右

clear , 可以防止指定了 clear 元素的兩邊存在浮動元素

(2) 定位
利用定位,可以準(zhǔn)確的定義元素框相對于其正常位置應(yīng)該出現(xiàn)在哪里,或者相對于父元素,另一個(gè)元素甚至瀏覽器窗口。

position : static | relative | absolute | fixed

static : 元素框正常生成

relative : 元素框偏移某個(gè)距離

absolute : 元素框從文檔流完全刪除,并相對于其包含塊定。包含塊可能是文檔中的另一個(gè)元素或初始包含塊。

fixed : 類似 absolute,不過其包含塊是視窗本身。

包含塊:
根元素( html或body ) , 初始包含塊是一個(gè)視窗大小的矩形.

非根元素 :

- 非根元素, 如果其 positionrelative 或  static, 則包含塊由最近的塊級框,表單元格或行內(nèi)塊構(gòu)成。

- 非根元素, 如果其 positionabsolute , 包含塊為最近的 position值不是 static的祖先元素

這里有一點(diǎn)很重要,元素可以定位到其包含塊的外面。

css布局技巧

1、多元素水平居中


效果: 

多元素水平居中

上圖顯示效果為多元素水平居中,即無論元素(小黑框)基數(shù)為多少,它們都能作為一個(gè)整體,水平居中。

在網(wǎng)站布局中,很多時(shí)候,子元素中使用行內(nèi)元素如span或塊元素li標(biāo)簽且標(biāo)簽個(gè)數(shù)不定,而我們又想讓這一塊不管個(gè)數(shù)有多少個(gè)(子元素的總體寬度不定),始終都能居中顯示。這就需要設(shè)置子元素display:inline-block。同時(shí),根據(jù)display:inline-block的屬性,子元素本身具備inline的特性,因此父元素需要設(shè)置text-align:center,來實(shí)現(xiàn)子元素作為一個(gè)整體在父元素中水平居中。

main{

  text-align:center;

}

div{

  display:inline-block;

  *display:inline;/*hack IE*/

  *zoom:1;/*hack IE*/

}

使用display:inline-block屬性,可以使行內(nèi)元素或塊元素能夠不加float屬性就可以定義自身的寬、高,同時(shí)又能使該元素在父元素居中顯示。

在內(nèi)聯(lián)元素上定義display:inline-block屬性,發(fā)現(xiàn)IE6、IE7中的顯示效果同其它瀏覽器一致,但事實(shí)是ie7及更低版本的ie瀏覽器不支持display:inline-block這個(gè)屬性。 

在IE下,display: inline-block只是觸發(fā)了元素的layout。比如將display: inline-block設(shè)置到div上,只能保證這個(gè)div擁有塊元素的特征(可以設(shè)置寬度,高度等),但還是會產(chǎn)生換行。接下來要設(shè)置display: inline,使其不產(chǎn)生換行。將display:inline-block;display:inline;寫在同一個(gè)樣式上,inline-block屬性是不會觸發(fā)元素的layout的,因此我們還要額外加上 zoom:1來觸發(fā)layout。

除了以上所提到的有效方法之外,還有另外一種方法:

先使用 display:inline-block 屬性觸發(fā)塊元素,然后再定義 display:inline,讓塊元素呈遞為內(nèi)聯(lián)對象(兩個(gè)display 要先后放在兩個(gè) CSS 樣式聲明中才有效果,這是 IE 的一個(gè)經(jīng)典 bug ,如果先定義了 display:inline-block,然后再將 display 設(shè)回 inlineblock,layout 不會消失)。

div {display:inline-block;...}div {*display:inline;}

但是要注意的是,display:inline-block元素間會產(chǎn)生多余空白。解決方法:父元素定義font-size:0 去掉行內(nèi)塊元素水平方向空白;子元素定義vertical-align 屬性去掉行內(nèi)塊元素垂直方向空白。


提示:如果您希望設(shè)置元素的水平垂直定位,那么您可以參考本站的“CSS如何使元素水平垂直定位”部分的內(nèi)容!

2、欄柵化布局

效果:

欄柵化布局

display: flex;

flex-direction: column;//上面兩行等同于flex-flow:colomn

flex-wrap: wrap;// 顯示 wrap一行顯示不完的時(shí)候換行

height: 440px;

width: 660px;

一個(gè)Flexbox布局是由一個(gè)伸縮容器(flex containers)和在這個(gè)容器里的伸縮項(xiàng)目(flex items)組成。

伸縮方向與換行(flex-flow)

伸縮容器有一個(gè)CSS屬性“flex-flow”用來決定伸縮項(xiàng)目的布局方式。

如果伸縮容器設(shè)置了“flex-flow”值為“row”,伸縮項(xiàng)目排列由左向右排列。

flex-flow

如果flex-flow值設(shè)置為column,伸縮項(xiàng)目排列由上至下排列。

column

制作一個(gè)20%、60%、20%網(wǎng)格布局

.main-content {

      width: 60%;

}

.main-nav,.main-sidebar {

     -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */

      -moz-box-flex: 1;         /* OLD - Firefox 19- */

      width: 20%;               /* For old syntax, otherwise collapses. */

      -webkit-flex: 1;          /* Chrome */

      -ms-flex: 1;              /* IE 10 */

      flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */ }


3、未知高度多行文本垂直居中


方法一,使用display:inline-block+偽元素:http://codepen.io/floralam/pen/WbBrwV?editors=110

未知高度多行文本垂直居中

.container{

   position: fixed;

    left: 0;

    top:0;

    height: 100%;

    width: 100%;

    text-align: center;

}

.mask:after{

    content: " ";

    display: inline-block;

    vertical-align: middle;

    height: 100%

}

.dialog{

    display: inline-block;

    border: 3px solid lightblue;

}

box 容器通過after或者before 生成一個(gè)高度 100% 的「備胎」,他的高度和容器的高度是一致的,相對于「備胎」垂直居中,在視覺上表現(xiàn)出來也就是相對于容器垂直居中了。


 方法二(感謝超級課程表胡晉哥哥的提示),使用display:table-cell:


http://codepen.io/floralam/pen/yNeMPg

通過display轉(zhuǎn)化成為表格的形式,再采用垂直居中的方法得到需要的結(jié)果。

display:table    此元素會作為塊級表格來顯示(類似 <table>),表格前后帶有換行符。    

display:table-cell 此元素會作為一個(gè)表格單元格顯示(類似<td> <th>


方法三(感謝超級課程表胡晉哥哥的提示),flexbox布局:


http://codepen.io/floralam/pen/yNeMvM

flexbox屬性:

伸縮容器:一個(gè)設(shè)有display:flexdisplay:inline-flex的元素
伸縮項(xiàng)目:伸縮容器的子元素
主軸、主軸方向:用戶代理沿著一個(gè)伸縮容器的主軸配置伸縮項(xiàng)目,主軸是主軸方向的延伸。
主軸起點(diǎn)、主軸終點(diǎn):伸縮項(xiàng)目的配置從容器的主軸起點(diǎn)邊開始,往主軸終點(diǎn)邊結(jié)束。
主軸長度、主軸長度屬性:伸縮項(xiàng)目的在主軸方向的寬度或高度就是項(xiàng)目的主軸長度,伸縮項(xiàng)目的主軸長度屬性是widthheight屬性,由哪一個(gè)對著主軸方向決定。
側(cè)軸、側(cè)軸方向:與主軸垂直的軸稱作側(cè)軸,是側(cè)軸方向的延伸。
側(cè)軸起點(diǎn)、側(cè)軸終點(diǎn):填滿項(xiàng)目的伸縮行的配置從容器的側(cè)軸起點(diǎn)邊開始,往側(cè)軸終點(diǎn)邊結(jié)束。
側(cè)軸長度、側(cè)軸長度屬性:伸縮項(xiàng)目的在側(cè)軸方向的寬度或高度就是項(xiàng)目的側(cè)軸長度,伸縮項(xiàng)目的側(cè)軸長度屬性是「width」或「height」屬性,由哪一個(gè)對著側(cè)軸方向決定。


另外,對于單行文本,設(shè)置line-height=height代碼更加簡潔:


http://codepen.io/floralam/pen/eNJvyE

父元素設(shè)置寬度高度,然后設(shè)置屬性

text-align:center; /* 水平居中 */
line-height: 300px; /* line-height = height */


提示:如果你想要深入了解flexbox布局,請參考“CSS3 Flexbox屬性與彈性盒模型”部分的內(nèi)容。

4、多欄自適應(yīng)布局


對于移動設(shè)備瀏覽器:http://codepen.io/floralam/pen/NPVwgz?editors=110

.container{

  display:-webkit-box;

}

.left{

  -webkit-box-flex:1;

}

.right{

  -webkit-box-flex:1;

}

實(shí)現(xiàn)左右兩側(cè)元素,右側(cè)元素的文字不會溢出到左側(cè)位置。
多欄自適應(yīng)布局

1)讓左邊的圖片左浮動或者絕對定位,

http://codepen.io/floralam/pen/wBbPPj

.right{

    margin-left: 150px;

}


2)讓左邊的圖片左浮動或者絕對定位,

http://codepen.io/floralam/pen/gbJogQ

.right{

  overflow:hidden;/*讓右側(cè)文字和左側(cè)圖片自動分欄*/

}


3)左側(cè)圖片設(shè)置為左浮動,

http://codepen.io/floralam/pen/bNyaaX?editors=110

.right{

  display: table-cell;/*讓右側(cè)文字和左側(cè)圖片自動分欄*/

}


兩欄或多欄自適應(yīng)布局的通用類語句是(block水平標(biāo)簽,需配合浮動):

http://codepen.io/floralam/pen/vEwpjV

.cell{

  padding-right:10px;

  display: table-cell;

  *display: inline-block;

  *width: auto;

}


浮動

5、強(qiáng)制不換行

white-space:nowrap;

自動換行

word-wrap: break-word; //性允許長單詞或 URL 地址換行到下一行

word-break: normal; //讓瀏覽器實(shí)現(xiàn)在任意位置的換行

word-wrap是控制換行的。break-word 是控制是否斷詞的。


強(qiáng)制英文單詞斷行

div{

  word-break:break-all;

}

 

6、li超過一定長度,以省略號顯示

http://codepen.io/floralam/pen/zxQjrK

nowrap li{

   white-space:nowrap;

   width:100px;

   overflow:hidden;

   text-overflow: ellipsis;

}


7、左側(cè)導(dǎo)航

左側(cè)導(dǎo)航

.nav{

  position:relative;

  float:left;width:190px;

  margin-right:-190px;

  background:lightblue;

}

.container{

  float:right;

  width:100%;

  background:pink;

}

.content{

  margin-left:200px;

}


8、 修復(fù)側(cè)邊欄

在外容器的添加導(dǎo)航和主內(nèi)容,當(dāng)導(dǎo)航和主內(nèi)容的寬度加上內(nèi)外邊距的數(shù)值大于外容器的寬度減去內(nèi)邊距的值,會導(dǎo)致導(dǎo)航和主內(nèi)容(其中一個(gè),html代碼排后面的元素)被擠下。

修復(fù)側(cè)邊欄

http://codepen.io/floralam/pen/XJLRYq?editors=110


解決方案:

1) Section元素上使用box-sizing:border-box;模擬IE6中,使得內(nèi)元素的寬度為width的值,而非width加上paddingmargin的值。


2)width:-moz-calc(75% -1rem * 2);width:-webkit-calc(75% - 1rem * 2); width: calc(75% - 1rem * 2); width屬性中減去padding


3)http://codepen.io/floralam/pen/yydPOE

在元素內(nèi)部增加一個(gè)額外的容器,并將padding放在這個(gè)新增的內(nèi)部容器中,這是一種修復(fù)方法,而且得到眾多瀏覽器支持。


9、css描繪三角形

http://codepen.io/floralam/pen/azgGmZ

很多關(guān)于使用css3來描繪特定圖像,使用代碼而非圖片實(shí)現(xiàn)(多座小山包,返回頂部)的題目,都離不開描繪三角形。


10、清除浮動的技巧

清除浮動
在非IE瀏覽器(如Firefox)下,當(dāng)容器的高度為auto,且容器的內(nèi)容中有浮動(floatleftright)的元素,在這種情況下,容器的高度不能自動伸長以適應(yīng)內(nèi)容的高度,使得內(nèi)容溢出到容器外面而影響(甚至破壞)布局的現(xiàn)象。這個(gè)現(xiàn)象叫浮動溢出,為了防止這個(gè)現(xiàn)象的出現(xiàn)而進(jìn)行的CSS處理,就叫CSS清除浮動。

1)添加最后一個(gè)元素<div style ="clear:both"></div>


2) 父元素設(shè)置overflow: hidden;


3) 使用CSS的:after偽元素

通過CSS偽元素在容器的內(nèi)部元素最后添加了一個(gè)看不見的空格"020"或點(diǎn)".",并且賦予clear屬性來清除浮動。需要注意的是為了IE6和IE7瀏覽器,要給clearfix這個(gè)class添加一條zoom:1;觸發(fā)haslayout。


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號