摘要:因為個人所學有限所以可能不會羅列出所有的實現方法,不過我會繼續努力查漏補缺。兩欄布局左固定,右適應先寫出初始樣式和結構。因為是主要的顯示區域,所以我們應該先加載它再加載其它的地方。
這一次我想講解一下HTML+CSS的兩欄、三欄布局以及垂直居中的實現方式。因為個人所學有限所以可能不會羅列出所有的實現方法,不過我會繼續努力查漏補缺。
1.兩欄布局(左固定,右適應)
先寫出初始樣式和結構。
div { height: 200px; color: #fff; }Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
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方式
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實現方式
.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; }
雙飛翼布局
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
兩種布局方式的不同之處在于如何處理中間主列的位置:
圣杯布局是利用父容器的左、右內邊距+兩個從列相對定位; 雙飛翼布局是把主列嵌套在一個新的父級塊中利用主列的左、右外邊距進行布局調整
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的兩欄、三欄布局以及垂直居中的實現方式。因為個人所學有限所以可能不會羅列出所有的實現方法,不過我會繼續努力查漏補缺。 1.兩欄布局(左固定,右適應) 先寫出初始樣式和結構。...
摘要:屬性是中最重要的用于控制布局的屬性。布局的高度多數情況下,布局中結構化元素乃至任何元素的高度是不必設定的。更新效果如圖以上措施使布局有了明顯改觀。 這是《CSS設計指南》的讀書筆記,用于加深學習效果。 display 屬性 display是 CSS 中最重要的用于控制布局的屬性。每個元素都有一個默認的 display 值。對于大多數元素它們的默認值通常是 block 或 inline ...
摘要:屬性是中最重要的用于控制布局的屬性。布局的高度多數情況下,布局中結構化元素乃至任何元素的高度是不必設定的。更新效果如圖以上措施使布局有了明顯改觀。 這是《CSS設計指南》的讀書筆記,用于加深學習效果。 display 屬性 display是 CSS 中最重要的用于控制布局的屬性。每個元素都有一個默認的 display 值。對于大多數元素它們的默認值通常是 block 或 inline ...
摘要:元素框相對于之前正常文檔流中的位置發生偏移,并且原先的位置仍然被占據。這些相對于布局來說是基礎的,同時也是非常重要的。可以看到,浮動元素,其實對于布局來說,是特別危險的。 前言 現在,我們被稱為前端工程師。然而,早年給我們的稱呼卻是頁面仔。或許是職責越來越大,整體的前端井噴式的發展,使我們只關注了js,而疏遠了css和html。 其實,我們可能經常在聊組件化,咋地咋地。但是,回過頭來思...
閱讀 3968·2021-11-23 10:09
閱讀 1338·2021-11-23 09:51
閱讀 2939·2021-11-23 09:51
閱讀 1585·2021-09-07 09:59
閱讀 2354·2019-08-30 15:55
閱讀 2292·2019-08-30 15:55
閱讀 2948·2019-08-30 15:52
閱讀 2559·2019-08-26 17:04