css佈局大雜燴

時間 2019-11-16

標籤 css 佈局大雜燴欄目 CSS 简体版

原文原文鏈接

一，經常使用水平居中方法：css

1不定寬塊狀元素：對父元素設置text-align:center. 對子div設置display:inline-block.segmentfault

  <style>
        .parent{
            width:300px;
            height:400px;
            background-color: #8ec63f;
            text-align:center;
        }
       .child{
           width:100px;
           height:50px;
           display: inline-block;
           background-color: red;
       }
    </style>
</head>
<body>
<div class="parent">
    <div class="child">我是子元素</div>
</div>

2,定寬塊狀元素：對子元素設置左右margin值爲auto;瀏覽器

3，通用方案：flex佈局，對父元素設置display:flex; justify-content:center;佈局

二，垂直居中post

1，垂直居中對於子元素是當行內聯文本，多行內聯文本以及塊狀元素採起的方案是不一樣的。flex

1,父元素必定，子元素爲單行內聯文本：設置父元素的height等於行高line-height。spa

曾經有一種狀況讓我困惑，我覺得設置兩個子div的display:inline-block能夠利用父元素的line-height等於height讓兩個子元素垂直居中，可是實際狀況是不能夠：效果以下圖所示：兩個子div仍然在父div的頂部。code

 <style>
        .parent{
            width:300px;
            height:400px;
            line-height:400px;
            background-color: #8ec63f;
        }
       .child1{
           display:inline-block;
           height:50px;
           background-color:#ffed53;
       }
        .child2{
            display:inline-block ;
            height:50px;
            background-color:#0099cc;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child1">我是子元素1</div>
    <div class="child2">我是子元素2</div>

</div>

可是若是你不給兩個子div設置高度的話，去掉height:50px,其餘不變。倒是能夠達到「垂直居中的效果。blog

或者設置兩個子div--display:inline.文檔

2,父元素必定，子元素爲多行內聯文本：設置父元素的display:table-cell或inline-block,再設置vertical-align:middle;

子元素爲塊狀元素

 <style>
        .parent{
            width:300px;
            height:400px;
            display:table-cell;
            vertical-align:middle;
            background-color: #8ec63f;
        }
       .child1{
           width:100px;
           height:50px;
           background-color:#ffed53;
       }
        .child2{
            width:100px;
            height:50px;
            background-color:#0099cc;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child1">我是子元素1</div>
    <div class="child2">我是子元素2</div>
</div>

通用方案:flex佈局，給父元素設置{display:flex; align-items:center;}

1,單列布局

特徵：定寬，水平居中

常見的單列布局有兩種：

一種是header、content、footer寬度都相同，其通常不會佔滿瀏覽器的最寬寬度，但當瀏覽器寬度縮小低於其最大寬度時，寬度會自適應。
一種是header、footer寬度爲瀏覽器寬度，但content以及header和footer裏的內容卻不會佔滿瀏覽器寬度。
對於第一種，對header、content、footer統一設置width或max-width，並經過margin:auto實現居中。

DOM文檔：

<div class="layout">
  <div id="header">頭部</div>
  <div id="content">內容</div>
  <div id="footer">尾部</div>
</div>

css清單：

  .layout{
  /*   width: 960px; *//*設置width當瀏覽器窗口寬度小於960px時，單列布局不會自適應。*/
    max-width: 960px;
    margin: 0 auto;
  }

對於第二種：header、footer的內容寬度爲100%.但header、footer的內容以及content統一設置max-width,並經過margin:auto實現居中。

DOM文檔：

<div id="header">
    <div class="layout">頭部</div>
</div>
<div id="content" class="layout">內容</div>
<div id="footer">
    <div class="layout">尾部</div>
</div>

css清單：

.layout{
  /*   width: 960px; *//*設置width當瀏覽器窗口寬度小於960px時，單列布局不會自適應。*/
    max-width: 960px;
    margin: 0 auto;
  }

三，二列&三列布局

1，float+margin

原理說明：設置兩個側欄分別向左向右浮動，中間列經過外邊距給兩個側欄騰出空間，中間列的寬度根據瀏覽器窗口自適應。

DOM文檔：

<div id="content">
    <div class="sub">sub</div>
    <div class="extra">extra</div>
    <div class="main">main</div>
</div>

css清單：

.sub{
    width: 100px;
    float: left;
}
.extra{
    width: 200px;
    float: right;
}
.main{
    margin-left: 100px; 
    margin-right: 200px;
}

一些說明:

*　注意DOM文檔的書寫順序，先寫兩側欄，再寫主面板，更換後則側欄會被擠到下一列（聖盃佈局和雙飛翼佈局都會用到）。
*　這種佈局方式比較簡單明瞭，但缺點是渲染時先渲染了側邊欄，而不是比較重要的主面板。

2，position+margin

原理說明：經過絕對定位將兩個側欄固定，一樣經過外邊距給兩個側欄騰出空間，中間列自適應。

<div class="sub">sub</div>
    <div class="main">main</div>
    <div class="extra">right</div>

佈局步驟：

1，對兩邊側欄分別設置寬度，設置定位方式爲絕對定位。

2，設置兩側欄的top值都爲0,設置左側欄的left值爲0,右側欄的right值爲0.

3,對主面板設置左右外邊距，margin-left的值爲左側欄的寬度,margin-right的值爲右側欄的寬度

css清單：

.sub, .extra {
    position: absolute;
    top: 0; 
    width: 200px;
}
.sub { 
    left: 0;
}
.extra { 
    right: 0; 
}
.main { 
    margin: 0 200px;
}

一些說明:

與上一種方法相比，本種方法是經過定位來實現側欄的位置固定。
若是中間欄含有最小寬度限制，或是含有寬度的內部元素，則瀏覽器窗口小到必定程度，主面板與側欄會發生重疊

3，聖盃佈局(float+負margin+padding+position)

　　主面板設置寬度爲100%,主面板與兩個側欄都設置浮動，常見爲左浮動，這時兩個側欄會被主面板擠下去。經過負邊距將浮動的側邊欄拉上來，左邊欄的負邊距爲100%,恰好是窗口的寬度，所以會從主面板下面的左邊跑到與主面板對齊的左邊，右側欄此時浮動在主面板下面的左邊，設置負邊距爲負的自身寬度恰好浮動到主面板對齊的右邊。爲了不側欄遮擋主面板內容，在外層設置左右padding值爲左右側欄的寬度，給側欄騰出空間，此時主面板的寬度減少。因爲側欄的負margin都是相對主面板的，兩個側欄並不會像咱們理想中的停靠在左右兩邊，而是跟着縮小的主面板一塊兒向中間靠攏，此時使用相對佈局，調整兩個側欄到相應的位置。

DOM文檔：

<title>聖盃佈局</title>
    <style>
        .main{
            float:left;
            width:100%;
            background-color: #8ec63f;
            height:600px;
        }
        .sub{
            float:left;
            width:190px;
            margin-left:-100%;
            position:relative;
            left:-190px;
            background-color: #ffed53;
            height:600px;
        }
        .extra{
            float:left;
            width:230px;
            margin-left:-230px;
            position:relative;
            right:-230px;
            background-color:#0099cc;
            height:600px;
        }

        #bd{
            padding:0 230px 0 190px;
        }

    </style>
</head>
<body>
<div id="bd">
    <div class="main"></div>
    <div class="sub"></div>
    <div class="extra"></div>
</div>

佈局步驟：

1，三者都設置向左浮動

2，設置main寬度爲100%,設置兩側欄的寬度

3，設置負邊距，sub設置負左邊距爲100%,extra設置負左邊距爲負的自身寬度。

4，設置main的padding值給左右兩個子面板留出空間

5，設置兩個子面板爲相對定位，sub到left值爲負的sub寬度，extra的right值爲負的extra寬度。

一些說明

DOM元素的書寫順序不得更改。
當面板的main內容部分比兩邊的子面板寬度小的時候，佈局就會亂掉。能夠經過設置main的min-width屬性或使用雙飛翼佈局避免問題。

4，雙飛翼佈局(float+負margin+margin)

原理說明：

雙飛翼佈局和聖盃佈局的思想有些類似，都利用了浮動和負邊距，但雙飛翼佈局在聖盃佈局上作了改進，在main元素上加了一層div,並設置margin,因爲兩側欄的負邊距都是相對於main-wrap而言，main的margin值變化便不會影響兩個側欄，所以省掉了對兩側欄設置相對佈局的步驟。

DOM文檔：

<div id="main-wrap" class="column">
      <div id="main">#main</div>
</div>
<div class="sub"></div>        
<div class="extra"></div>

佈局步驟：

1，三者都設置向左浮動

2，設置main-wrap寬度爲100%，設置兩個側欄的寬度。

3，設置負邊距，sub設置負左邊距爲100%,extra設置負左邊距爲負的自身寬度。

4，設置main的margin值給左右兩個子面板留出空間。

css清單：

.main-wrap {        
    float: left;       
    width: 100%;   
 }  
 .sub {       
    float: left;        
    width: 190px;        
    margin-left: -100%;   
}   
.extra {        
    float: left;        
    width: 230px;        
    margin-left: -230px; 
 }
.main {    
    margin: 0 230px 0 190px;
}

一些說明

聖盃採用的是padding，而雙飛翼採用的margin，解決了聖盃佈局main的最小寬度不能小於左側欄的缺點。
雙飛翼佈局不用設置相對佈局，以及對應的left和right值。
經過引入相對佈局，能夠實現三欄佈局的各類組合，例如對右側欄設置position: relative; left: 190px; ,能夠實現sub+extra+main的佈局。

原文連接：

CSS佈局十八般武藝都在這裏了

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。