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

資訊專欄INFORMATION COLUMN

HTML+CSS的兩欄、三欄布局以及垂直居中

nidaye / 2291人閱讀

摘要:因為個人所學有限所以可能不會羅列出所有的實現方法,不過我會繼續努力查漏補缺。兩欄布局左固定,右適應先寫出初始樣式和結構。因為是主要的顯示區域,所以我們應該先加載它再加載其它的地方。

這一次我想講解一下HTML+CSS的兩欄、三欄布局以及垂直居中的實現方式。因為個人所學有限所以可能不會羅列出所有的實現方法,不過我會繼續努力查漏補缺。

1.兩欄布局(左固定,右適應)

先寫出初始樣式和結構。

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
div { height: 200px; color: #fff; }

float+margin實現方式

.left {
    float: left;
    width: 300px;
    background-color: #5616;
}
.right {
    width: 100%;
    margin-left: 300px;
    background-color: #438;    
}

position實現方式

.left {
    position: absolute;
    left:  0;
    width: 300px;
    background-color: #5616;
}
.right {
    width: 100%;
    margin-left: 300px;
    background-color: #438;    
}

flex

.container {
    display: flex;
}
.left {
    flex:  0 0 300px;
    background-color: #5616;
}
.right {
    flex:  1 1;
    background-color: #438;    
}


右固定,左適應同理。

2.三欄布局

float + margin方式

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
div { height: 200px; color: #fff; } .main { width: 100%; margin-left: 300px; margin-right: 100px; background-color: #554; } .left { float: left; width: 300px; background-color: #5616; } .right { float: right; width: 100px; background-color: #438; }

position實現方式

.main {
    width: 100%;
    margin-left: 300px;
    margin-right: 100px;
    background-color: #554;
}
.left {
    position: absolute;
    left: 0px;
    width: 300px;
    background-color: #5616;
}
.right {
    position: absolute;
    right: 0px;
    width: 100px;
    background-color: #438;    
}


以上這些實現方式,雖然實現了但還不夠好。因為main是主要的顯示區域,所以我們應該先加載它再加載其它的地方。

grid實現方式

.container {
    display: grid;
    grid-template-columns: 300px auto 100px;    //列的寬度
}
.main {
    grid-row: 1;    //第幾行
    background-color: #554;
}
.left {
    grid-row: 1;    //第幾行
    background-color: #5616;
}
.right {
    grid-row: 1;     //第幾行
    background-color: #438;    
}

圣杯布局

.container {
    padding: 0 100px 0 300px;
    overflow: hidden;
}
.main {
    float: left;
    width: 100%;
    background-color: #554;
}
.left {
    position: relative;
    float: left;            
    width: 300px;
    left: -300px;
    margin-left: -100%;
    background-color: #5616;
}
.right {
    position: relative;
    float: left;
    right: -100px;
    margin-left: -100px;
    width: 100px;
    background-color: #438;    
}

雙飛翼布局

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
div { height: 200px; color: #fff; } .wrap { float: left; width: 100%; } .main { margin: 0 100px 0 300px; overflow: hidden; background-color: #554; } .left { float: left; width: 300px; margin-left: -100%; background-color: #5616; } .right { float: left; width: 100px; margin-left: -100px; background-color: #438; }

兩種布局方式的不同之處在于如何處理中間主列的位置:

圣杯布局是利用父容器的左、右內邊距+兩個從列相對定位;
雙飛翼布局是把主列嵌套在一個新的父級塊中利用主列的左、右外邊距進行布局調整

3.垂直居中

position + margin實現(1)

.container { position: relative; width: 500px; height: 500px; background-color: #5465; } .content { position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; margin-left: -100px; margin-top: -100px; background-color: #6465; }

position + margin實現(2)

.container {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: #5465;
}
.content {
    position: absolute;
    left: 0;
    top:  0;
    bottom: 0;
    right: 0;
    width: 200px;
    height: 200px;
    margin: auto;
    background-color: #6465;
}

position + transform實現

.container {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: #5465;
}
.content {
    position: absolute;
    left: 50%;
    top:  50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%);
    background-color: #6465;
}

flex實現

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 500px;
    height: 500px;
    background-color: #5465;
}
.content {
    width: 200px;
    height: 200px;
    background-color: #6465;
}

inline-block實現

.container {
    display: inline-block;
    width: 500px;
    height: 500px;
    text-align: center;
    background-color: #5465;
}
.content {
    display: inline-block;
    width: 200px;
    height: 200px;
    vertical-align: middle;
    background-color: #6465;
}
.container::after{
    content: "";
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
}

效果都如下

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

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

相關文章

  • HTML+CSS兩欄三欄布局以及垂直居中

    摘要:因為個人所學有限所以可能不會羅列出所有的實現方法,不過我會繼續努力查漏補缺。兩欄布局左固定,右適應先寫出初始樣式和結構。因為是主要的顯示區域,所以我們應該先加載它再加載其它的地方。 這一次我想講解一下HTML+CSS的兩欄、三欄布局以及垂直居中的實現方式。因為個人所學有限所以可能不會羅列出所有的實現方法,不過我會繼續努力查漏補缺。 1.兩欄布局(左固定,右適應) 先寫出初始樣式和結構。...

    kun_jian 評論0 收藏0
  • CSS入門指南-4:頁面布局

    摘要:屬性是中最重要的用于控制布局的屬性。布局的高度多數情況下,布局中結構化元素乃至任何元素的高度是不必設定的。更新效果如圖以上措施使布局有了明顯改觀。 這是《CSS設計指南》的讀書筆記,用于加深學習效果。 display 屬性 display是 CSS 中最重要的用于控制布局的屬性。每個元素都有一個默認的 display 值。對于大多數元素它們的默認值通常是 block 或 inline ...

    ethernet 評論0 收藏0
  • CSS入門指南-4:頁面布局

    摘要:屬性是中最重要的用于控制布局的屬性。布局的高度多數情況下,布局中結構化元素乃至任何元素的高度是不必設定的。更新效果如圖以上措施使布局有了明顯改觀。 這是《CSS設計指南》的讀書筆記,用于加深學習效果。 display 屬性 display是 CSS 中最重要的用于控制布局的屬性。每個元素都有一個默認的 display 值。對于大多數元素它們的默認值通常是 block 或 inline ...

    Stardustsky 評論0 收藏0
  • CSS布局說——可能是最全的

    摘要:元素框相對于之前正常文檔流中的位置發生偏移,并且原先的位置仍然被占據。這些相對于布局來說是基礎的,同時也是非常重要的。可以看到,浮動元素,其實對于布局來說,是特別危險的。 前言 現在,我們被稱為前端工程師。然而,早年給我們的稱呼卻是頁面仔。或許是職責越來越大,整體的前端井噴式的發展,使我們只關注了js,而疏遠了css和html。 其實,我們可能經常在聊組件化,咋地咋地。但是,回過頭來思...

    hearaway 評論0 收藏0

發表評論

0條評論

nidaye

|高級講師

TA的文章

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