国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS三欄布局的經典實現方法

Forelax / 2032人閱讀

摘要:經典方法三欄布局的方法有很多種,其中最經典的方法莫過于圣杯布局和雙飛翼布局。而雙飛翼布局方法無需相對位置屬性,而是采用為中欄內容創建的方式,通過來實現布局。文章第二部分闡述了流行的圣杯布局方法和雙飛翼布局方法的細節和異同。

三欄是CSS布局中常見的一種布局模式,顧名思義,就是將網頁內容以三列的形式呈現。通常,三欄布局中的左欄和右欄是固定寬度的,中欄隨著窗口寬度的變化而變化。本文探討欄三欄的基本實現思路和經典方法,對其中涉及到的知識點進行梳理。

目的:實現一個左欄和右欄寬300px,中間欄寬度自適應的三欄布局

基本實現思路

首先,常規思路,我們寫出3個div的HTML和CSS,分別是leftColumn(左欄)、middleColumn(中欄)和rightColumn(右欄)。

HTML:

    
    
左欄
中欄
右欄

CSS:

#leftDiv {
    height: 300px;  /*高度設為300像素,下同*/
    background-color: rgb(60,139,176);  /*設置背景顏色*/
}

#middleDiv {
    height: 300px;
    background-color: rgb(225,236,214);
}

#rightDiv {
    height: 300px;
    background-color: rgb(122,122,122);
}

此時,得到的網頁如下圖所示:

這是因為div的特性:默認寬度最大化(頁面的100%),默認高度最小化(根據內容自適應)。

上面的CSS中,只指定欄高度height:300px,未指定寬度,所以每個div都以寬度width:100%填滿所在行。

注意:此時若嘗試指定每個div的寬度,例如給每個div的CSS添加語句:

width: 100px;

得到的頁面如下圖左圖,而非右圖。

這是因為div屬于塊級(block)元素,默認情況下,塊級元素總是會另起一行。

為了使塊級元素能位于同一行,最簡單的方法是使用float屬性。我們對每個div的CSS新增語句:

#leftDiv,#middleDiv,#rightDiv {
    float: left;  /*向左浮動*/
    height: 300px;  
}

使其向左浮動,得到的效果如下圖所示:

可以看到,對CSS設置float:left屬性后,三欄位于了同一行,寬度為其內容的適應寬度。此時,我們將左欄和右欄寬度設置為300px:

#leftDiv,#rightDiv {
    width: 300px;  /*設置寬度為300像素*/
    ... 
}
#middleDiv {
    ...
}

得到的效果如下圖所示:

此時,中欄的寬度仍為其內容的適應寬度,我們為middleDiv添加如下語句:

width: calc(100% - 600px);  /*設置middleDiv寬度*/
calc()的作用為動態計算長度值,允許各種單位混合運算,運算符前后需有空格。

于是我們得到了最終效果。左欄和右欄各300px寬,中欄根據瀏覽器窗口大小進行動態調整。但需要注意的是,當瀏覽器窗口寬度小于600px時,中欄的寬度將小于0。為此,我們可以為瀏覽其設置最小調整寬度,避免頁面混亂:

body {
    min-width: 700px;
}

至此,一個三欄布局就完成了。這種實現思路比較符合人的思維定勢,但也存在一定的缺陷:瀏覽器加載和渲染頁面遵循從上到下的原則,這種方法中,HTML的middleDiv(中欄)位列于leftDiv(左欄)之后,所以會在leftDiv之后加載,而middleDiv往往是頁面的核心,需要優先加載展示給用戶。

于是,我們思考將middleDiv放在HTML中的首位:

    
    
中欄
左欄
右欄

CSS中,我們仍然設置middleDiv(中欄)的寬度為100% - 600px:

#middleDiv {
    width: calc(100% - 600px);
    ...
}

此時的界面如圖所示:

可以看到,由于我們在HTML中將middleDiv(中欄)放在欄首位,所以瀏覽器窗口中,中欄顯示在最前面。這時,我們需要為leftDiv(左欄)騰出空間,可以使用margin-left或padding-left。

margin和padding分別為盒模型的外邊距和內邊距,此處使用兩者皆可,此處唯一的區別是padding會被底色填充而margin不會。因為background-color的填充區域為content+padding+border。

還有一點需要注意的是,padding值不能為負,對于需要取負值時,僅可使用margin。

為middleDiv(中欄)添加以下語句:

margin-left: 300px;

此時效果如下圖所示:

可以看到,由于增加了300px的外邊距,第一行的橫向空間被middleDiv(中欄)和leftDiv(左欄)填滿,rightDiv(右欄)被迫位列第二行。

此時,我們使用relative屬性對左欄和右欄進行處理:

#leftDiv {
    position: relative;  /*相對定位*/
    left: calc(300px - 100%);  /*左移*/
    ...
}

#rightDiv {
    position: relative;
    top: -300px;  /*上移*/
    left: calc(100% - 300px);  /*右移*/
    ...
}

至此,我們在保證middleDiv(中欄)先行加載渲染的條件下,完成了三欄布局。基本思路為通過相對定位實現。

經典方法

CSS三欄布局的方法有很多種,其中最經典的方法莫過于圣杯布局和雙飛翼布局。圣杯布局因形似圣杯而得名,即中欄為杯身,左右兩欄為杯耳。雙飛翼布局則是圣杯布局的一種改進,去掉了relative屬性,并為主體部分增加了內容嵌套。

圣杯布局(In Search of the Holy Grail)

圣杯布局和雙飛翼布局都需要在HTML中為div增加一層“容器(container)”。這個容器的目的主要是為了利用padding對中欄進行調整。

  
    
中欄
左欄
右欄

首先,仍然設置float:left屬性使div浮動,使其位于一行。

#leftDiv,#middleDiv,#rightDiv {
   float: left;
   ...
}

然后,將middleDiv(中欄)的寬度width設為100%:

#middleDiv {
    width: 100%;
    ...
}

得到如下圖所示的布局:

此時,需要將leftDiv置于第一行左側:

margin-left: -100%;  /* 左側邊界前移100% */

這樣處理的結果是leftDiv(左欄)被置于第一行最左端,但會覆蓋middleDiv(中欄)的部分內容。我們需要將中欄的內容從被覆蓋的地方拉出來。一個簡便的方法是對父容器container使用margin:

#container {
    margin: 0 300px 0 300px;
}
此處使用padding:0 300px 0 300px; 效果相同。

此時,leftDiv(左欄)也會受父容器的影響向右移動300px,仍然覆蓋著middleDiv(中欄)的一部分,所以我們使用相對定位讓其向左移動:

#leftDiv {
    position: relative;
    left: -300px;
    ...
}

此時的布局如下圖所示:

對rightDiv(右欄)作類似處理:

#rightDiv {
    margin-left: -300px;  /*左側邊界前移300px*/
    position: relative;
    right: -300px;  /*右側邊界右移300px*/
    ...   
}

不要忘記為body設定最小寬度:

body {
    min-width: 800px;
}

至此完成。

可以看到,圣杯布局的實現思想是給div套上一個父容器,通過調整父容器的padding和div左右欄的相對定位來實現三欄布局。

雙飛翼布局

雙飛翼布局,源于淘寶UED,是圣杯布局的一種改進,或者說是另一種三欄實現思路。其創新點在于額外為middleDiv(中欄)增加一個子div存放其內容。

  
    
中欄
左欄
右欄

仍然使用float屬性來對div進行浮動:

#leftDiv,#middleDiv,#rightDiv {
   float: left;
   ...
}

與圣杯類似,設置middleDiv(中欄)寬度為100%,且將leftDiv(左欄)拉到最左側,將rightDiv(右欄)作類似處理:

#middleDiv {
    width: 100%;
    ...
}

#leftDiv {
    margin-left: -100%;
}

#rightDiv {
    margin-left: -300px;
}

到這一步為止,雙飛翼布局方法和圣杯CSS方法并不不同。

此時,由于雙飛翼布局方法為middleDiv(中欄)多帶帶添加了一個div存放其內容,所以對于中欄的處理,可以使用該div的margin屬性:

#content {
    margin: 0 300px 0 300px;
}
此處使用padding:0 300px 0 300px; 效果相同。

同樣,不要忘記為body設定最小寬度:

body {
    min-width: 800px;
}

至此完成。

可見,圣杯布局方法與雙飛翼布局方法的區別在于圣杯布局采用相對位置屬性(position:relative)來調整左欄和右欄位置,并使用margin/padding屬性調整中欄。而雙飛翼布局方法無需相對位置屬性,而是采用為中欄內容創建div的方式,通過margin/padding來實現布局。

總結

本文探討了三欄布局的CSS基本實現方法,首先以基本思路對三欄布局進行實現,發現不足,進行調整。文章第二部分闡述了流行的圣杯布局方法和雙飛翼布局方法的細節和異同。除本文所述布局方法外,還存在絕對定位法、table布局法、網格布局法,以及十分方便的flex布局法等多種方法,各有利弊。

本文僅探討了三欄布局的基本實現思路與方法,詳細的實現過程希望能夠幫助大家深入理解CSS。關于其他方法的討論將在以后實際應用時進行總結。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/53854.html

相關文章

  • CSS三欄布局經典實現方法

    摘要:經典方法三欄布局的方法有很多種,其中最經典的方法莫過于圣杯布局和雙飛翼布局。而雙飛翼布局方法無需相對位置屬性,而是采用為中欄內容創建的方式,通過來實現布局。文章第二部分闡述了流行的圣杯布局方法和雙飛翼布局方法的細節和異同。 三欄是CSS布局中常見的一種布局模式,顧名思義,就是將網頁內容以三列的形式呈現。通常,三欄布局中的左欄和右欄是固定寬度的,中欄隨著窗口寬度的變化而變化。本文探討欄三...

    neuSnail 評論0 收藏0
  • CSS 布局經典問題初步整理

    摘要:布局經典問題初步整理標簽前端本文主要對布局中常見的經典問題進行簡單說明,并提供相關解決方案的參考鏈接,涉及到三欄式布局,負,清除浮動,居中布局,響應式設計,布局,等等。 CSS 布局經典問題初步整理 標簽 : 前端 [TOC] 本文主要對 CSS 布局中常見的經典問題進行簡單說明,并提供相關解決方案的參考鏈接,涉及到三欄式布局,負 margin,清除浮動,居中布局,響應式設計,Fl...

    Amos 評論0 收藏0
  • CSS三欄布局——多種方法詳解,比較兼容性

    摘要:題目假設高度已知,請寫出三欄布局,其中左欄右欄寬度各為,中間自適應三欄布局的種方案這是一道經典的面試題,下面記錄了布局的種方法。 題目:假設高度已知,請寫出三欄布局,其中左欄、右欄寬度各為300px,中間自適應. 三欄布局的5種方案 這是一道經典的面試題,下面記錄了css布局的5種方法。 三欄布局 * { margin: 0; ...

    馬忠志 評論0 收藏0
  • 面試寶典

    摘要:有談談面試與面試題對于前端面試的一些看法。動態規劃算法的思想及實現方法幫大家理清動態規劃的解決思路以及原理方法前端經典面試題從輸入到頁面加載發生了什么這是一篇開發的科普類文章,涉及到優化等多個方面。極客學院前端練習題道練習題,面試季練練手。 由數據綁定和排序引入的幾個 JavaScript 知識點 在 JavaScript 的數據綁定和做簡單的表格排序中遇到的幾個知識點 [[JS 基礎...

    neu 評論0 收藏0
  • CSS布局

    摘要:經過半年的打磨,正式發布,主要是新增了一些常用組件,并使用命名,為接下來的微信小程序開發做好準備。這兩種方式實現的瀑布流式布局均支持首屏和網頁窗口大小改變時的列數自適應。主要是對于標準里的布局方式草案中的布局方式進行一些總結。 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題:怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候,看...

    jaysun 評論0 收藏0

發表評論

0條評論

Forelax

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<