css中的那些布局

2021-09-19 04:40:29 字數 1796 閱讀 1401

因為最近心血來潮,就總結了一下css中的幾種常見的多列布局。

兩列自適應布局

兩列自適應布局算是css布局裡面最基礎的一種布局了,不少**在使用。

這種布局通常是左側固定,右邊自適應,當然也有反過來的,道理一樣,這裡有好幾種方法。

(張鑫旭老師的部落格是左邊流式布局,右邊固定寬度)
因為浮動會導致元素脫離文件流,所以下面的元素會佔據浮動元素原來的位置。

這個時候只要對右邊元素設定margin-left:左邊div寬度 就可以實現自適應布局。

**:左浮動實現兩列布局

這個原理類似浮動,因為絕對定位會脫離文件流,只需要設定右div的margin-left就能實現布局。
**:絕對定位實現兩列布局

flex布局一直挺好用,無奈相容性捉急,ie10+才支援。  

注意,設為flex布局以後,子元素的float、clear和vertical-align屬性將失效。

flex布局預設專案是主軸為水平方向,最主要的是flex屬性。flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫,預設值為0 1 auto。

大概就是給左邊的div乙個固定值,然後給右邊設定flex:auto;來實現兩列布局。

這裡不多對flex布局介紹,有興趣的可以看一下

阮一峰老師的這篇部落格:flex布局

這是css3裡面的新屬性,相容性還可以,在ie9+、ff4.0+、chrome19+、safari6+都得到了支援。  

通過calc可以使用百分比、em、px和rem單位值計算出其寬度或者高度,這樣就不用考慮div值到底是多少。所以可以對右邊div設定width:calc(100%-100px);來實現自適應布局。

這是之前寫ife任務的時候在一篇部落格上看到的。

實現方法是給右邊的div外面再套上乙個父div,然後讓父div的寬度設為100%。

對父div和左邊的div都設定左浮動,再讓左div的margin-left:-100%,右div設定margin-left:左div的寬度。

這樣就實現了自適應布局,當然左右div的前後順序要反過來。

具體看**:margin負值實現自適應

三列自適應布局

除了常見的兩列布局,我們也經常能夠見到三列布局,左右固定,中間自適應。

(這裡只是拿這張圖舉個例子,w3school官網是三列固定布局)
這個類似兩列布局的浮動,對左右div分別設定左右浮動,中間div設定margin-left和margin-right來實現,當然在html中的順序應該是左右中。

原理同margin負值實現兩列布局,不多說了。
直接上**:margin負值實現三列布局

和flex兩列布局乙個原理,對兩邊設定flex:0 0 100px,中間設定flex:auto。
****:flex實現三列布局

css中的那些布局

因為最近心血來潮,就總結了一下css中的幾種常見的多列布局。兩列自適應布局 兩列自適應布局算是css布局裡面最基礎的一種布局了,不少 在使用。這種布局通常是左側固定,右邊自適應,當然也有反過來的,道理一樣,這裡有好幾種方法。張鑫旭老師的部落格是左邊流式布局,右邊固定寬度 因為浮動會導致元素脫離文件流...

css中div的布局

在靜態網頁的編寫中基本上都對布局的應用。概念問題說著容易,在實際操作的情況中網頁比較複雜,考慮的問題應該比較全面。可以先畫乙個框架圖,對各個板塊的長寬踐行計算再寫起來會更容易些。1.對div的位置和大小進行布局 我們可以將其假想為乙個矩形格式的模型,矩形模型如下圖所示 矩形模型主要包括三大屬性,正如...

css中的Sticky footer 布局

什麼叫sticky footer 布局呢?我們所見到的大部分 頁面,都會把乙個頁面分為頭部區塊 內容區塊和頁尾區塊,當頭部區塊和內容區塊內容較少時,頁尾能固定在螢幕的底部,而非隨著文件流排布。當頁面內容較多時,頁尾能隨著文件流自動撐開,顯示在頁面的最底部,這就是sticky footer布局。一般網...