摘要:因為個人所學有限所以可能不會羅列出所有的實現(xiàn)方法,不過我會繼續(xù)努力查漏補缺。兩欄布局左固定,右適應先寫出初始樣式和結(jié)構(gòu)。因為是主要的顯示區(qū)域,所以我們應該先加載它再加載其它的地方。
這一次我想講解一下HTML+CSS的兩欄、三欄布局以及垂直居中的實現(xiàn)方式。因為個人所學有限所以可能不會羅列出所有的實現(xiàn)方法,不過我會繼續(xù)努力查漏補缺。
1.兩欄布局(左固定,右適應)
先寫出初始樣式和結(jié)構(gòu)。
div { height: 200px; color: #fff; }Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
float+margin實現(xiàn)方式
.left { float: left; width: 300px; background-color: #5616; } .right { width: 100%; margin-left: 300px; background-color: #438; }
position實現(xiàn)方式
.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方式
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; }Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet
position實現(xiàn)方式
.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; }
以上這些實現(xiàn)方式,雖然實現(xiàn)了但還不夠好。因為main是主要的顯示區(qū)域,所以我們應該先加載它再加載其它的地方。
grid實現(xiàn)方式
.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; }
雙飛翼布局
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; }Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet
兩種布局方式的不同之處在于如何處理中間主列的位置:
圣杯布局是利用父容器的左、右內(nèi)邊距+兩個從列相對定位; 雙飛翼布局是把主列嵌套在一個新的父級塊中利用主列的左、右外邊距進行布局調(diào)整
3.垂直居中
position + margin實現(xiàn)(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實現(xiàn)(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實現(xiàn)
.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實現(xiàn)
.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實現(xiàn)
.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; }
效果都如下
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/53512.html
摘要:因為個人所學有限所以可能不會羅列出所有的實現(xiàn)方法,不過我會繼續(xù)努力查漏補缺。兩欄布局左固定,右適應先寫出初始樣式和結(jié)構(gòu)。因為是主要的顯示區(qū)域,所以我們應該先加載它再加載其它的地方。 這一次我想講解一下HTML+CSS的兩欄、三欄布局以及垂直居中的實現(xiàn)方式。因為個人所學有限所以可能不會羅列出所有的實現(xiàn)方法,不過我會繼續(xù)努力查漏補缺。 1.兩欄布局(左固定,右適應) 先寫出初始樣式和結(jié)構(gòu)。...
摘要:屬性是中最重要的用于控制布局的屬性。布局的高度多數(shù)情況下,布局中結(jié)構(gòu)化元素乃至任何元素的高度是不必設定的。更新效果如圖以上措施使布局有了明顯改觀。 這是《CSS設計指南》的讀書筆記,用于加深學習效果。 display 屬性 display是 CSS 中最重要的用于控制布局的屬性。每個元素都有一個默認的 display 值。對于大多數(shù)元素它們的默認值通常是 block 或 inline ...
摘要:屬性是中最重要的用于控制布局的屬性。布局的高度多數(shù)情況下,布局中結(jié)構(gòu)化元素乃至任何元素的高度是不必設定的。更新效果如圖以上措施使布局有了明顯改觀。 這是《CSS設計指南》的讀書筆記,用于加深學習效果。 display 屬性 display是 CSS 中最重要的用于控制布局的屬性。每個元素都有一個默認的 display 值。對于大多數(shù)元素它們的默認值通常是 block 或 inline ...
摘要:元素框相對于之前正常文檔流中的位置發(fā)生偏移,并且原先的位置仍然被占據(jù)。這些相對于布局來說是基礎的,同時也是非常重要的??梢钥吹?,浮動元素,其實對于布局來說,是特別危險的。 前言 現(xiàn)在,我們被稱為前端工程師。然而,早年給我們的稱呼卻是頁面仔?;蛟S是職責越來越大,整體的前端井噴式的發(fā)展,使我們只關(guān)注了js,而疏遠了css和html。 其實,我們可能經(jīng)常在聊組件化,咋地咋地。但是,回過頭來思...
閱讀 3043·2021-11-25 09:43
閱讀 1626·2021-11-24 11:15
閱讀 2359·2021-11-22 15:25
閱讀 3501·2021-11-11 16:55
閱讀 3240·2021-11-04 16:10
閱讀 2773·2021-09-14 18:02
閱讀 1685·2021-09-10 10:50
閱讀 1070·2019-08-29 15:39