重慶分公司
重慶分公司
css布局方式是什么
這篇文章主要介紹“css布局方式是什么”，在日常操作中，相信很多人在css布局方式是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css布局方式是什么”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！
按需規(guī)劃網(wǎng)站可以根據(jù)自己的需求進(jìn)行定制，成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)構(gòu)思過程中功能建設(shè)理應(yīng)排到主要部位公司成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)的運(yùn)用實(shí)際效果公司網(wǎng)站制作網(wǎng)站建立與制做的實(shí)際意義
一、單列布局
常見的單列布局有兩種：
header,content和footer等寬的單列布局
header與footer等寬,content略窄的單列布局
1.如何實(shí)現(xiàn)
對于第一種，先通過對header,content,footer統(tǒng)一設(shè)置width：1000px;或者max-width：1000px(這兩者的區(qū)別是當(dāng)屏幕小于1000px時(shí)，前者會出現(xiàn)滾動(dòng)條，后者則不會，顯示出實(shí)際寬度);然后設(shè)置margin:auto實(shí)現(xiàn)居中即可得到。
對于第二種，header、footer的內(nèi)容寬度不設(shè)置，塊級元素充滿整個(gè)屏幕，但header、content和footer的內(nèi)容區(qū)設(shè)置同一個(gè)width，并通過margin:auto實(shí)現(xiàn)居中。
.header{
margin:0 auto;
max-width: 960px;
height:100px;
background-color: blue;
}
.content{
margin: 0 auto;
max-width: 960px;
height: 400px;
background-color: aquamarine;
}
.footer{
margin: 0 auto;
max-width: 960px;
height: 100px;
background-color: aqua;
}二、兩列自適應(yīng)布局
兩列自適應(yīng)布局是指一列由內(nèi)容撐開，另一列撐滿剩余寬度的布局方式
1.float+overflow:hidden
如果是普通的兩列布局，浮動(dòng)+普通元素的margin便可以實(shí)現(xiàn)，但如果是自適應(yīng)的兩列布局，利用float+overflow:hidden便可以實(shí)現(xiàn)，這種辦法主要通過overflow觸發(fā)BFC,而BFC不會重疊浮動(dòng)元素。由于設(shè)置overflow:hidden并不會觸發(fā)IE6-瀏覽器的haslayout屬性，所以需要設(shè)置zoom:1來兼容IE6-瀏覽器。具體代碼如下：
left
right
right
.parent {
overflow: hidden;
zoom: 1;
}
.left {
float: left;
margin-right: 20px;
}
.right {
overflow: hidden;
zoom: 1;
}注意點(diǎn):如果側(cè)邊欄在右邊時(shí)，注意渲染順序。即在HTML中，先寫側(cè)邊欄后寫主內(nèi)容
2.Flex布局
Flex布局，也叫彈性盒子布局，區(qū)區(qū)簡單幾行代碼就可以實(shí)現(xiàn)各種頁面的的布局。
//html部分同上
.parent {
display:flex;
}
.right {
margin-left:20px;
flex:1;
}3.grid布局
Grid布局，是一個(gè)基于網(wǎng)格的二維布局系統(tǒng)，目的是用來優(yōu)化用戶界面設(shè)計(jì)。
//html部分同上
.parent {
display:grid;
grid-template-columns:auto 1fr;
grid-gap:20px
}三、三欄布局
特征：中間列自適應(yīng)寬度，旁邊兩側(cè)固定寬度
1.圣杯布局
① 特點(diǎn)
比較特殊的三欄布局，同樣也是兩邊固定寬度，中間自適應(yīng)，唯一區(qū)別是dom結(jié)構(gòu)必須是先寫中間列部分，這樣實(shí)現(xiàn)中間列可以優(yōu)先加載。
.container {
padding-left: 220px;//為左右欄騰出空間
padding-right: 220px;
}
.left {
float: left;
width: 200px;
height: 400px;
background: red;
margin-left: -100%;
position: relative;
left: -220px;
}
.center {
float: left;
width: 100%;
height: 500px;
background: yellow;
}
.right {
float: left;
width: 200px;
height: 400px;
background: blue;
margin-left: -200px;
position: relative;
right: -220px;
}
圣杯布局
② 實(shí)現(xiàn)步驟
三個(gè)部分都設(shè)定為左浮動(dòng)，否則左右兩邊內(nèi)容上不去，就不可能與中間列同一行。然后設(shè)置center的寬度為100%(實(shí)現(xiàn)中間列內(nèi)容自適應(yīng))，此時(shí)，left和right部分會跳到下一行
通過設(shè)置margin-left為負(fù)值讓left和right部分回到與center部分同一行
通過設(shè)置父容器的padding-left和padding-right，讓左右兩邊留出間隙。
通過設(shè)置相對定位，讓left和right部分移動(dòng)到兩邊。
③ 缺點(diǎn)
center部分的最小寬度不能小于left部分的寬度，否則會left部分掉到下一行
如果其中一列內(nèi)容高度拉長(如下圖)，其他兩列的背景并不會自動(dòng)填充。(借助等高布局正padding+負(fù)margin可解決，下文會介紹)
2.雙飛翼布局
① 特點(diǎn)
同樣也是三欄布局，在圣杯布局基礎(chǔ)上進(jìn)一步優(yōu)化，解決了圣杯布局錯(cuò)亂問題，實(shí)現(xiàn)了內(nèi)容與布局的分離。而且任何一欄都可以是最高欄，不會出問題。
.container {
min-width: 600px;//確保中間內(nèi)容可以顯示出來，兩倍left寬+right寬
}
.left {
float: left;
width: 200px;
height: 400px;
background: red;
margin-left: -100%;
}
.center {
float: left;
width: 100%;
height: 500px;
background: yellow;
}
.center .inner {
margin: 0 200px; //新增部分
}
.right {
float: left;
width: 200px;
height: 400px;
background: blue;
margin-left: -200px;
}
雙飛翼布局
② 實(shí)現(xiàn)步驟(前兩步與圣杯布局一樣)
三個(gè)部分都設(shè)定為左浮動(dòng)，然后設(shè)置center的寬度為100%，此時(shí)，left和right部分會跳到下一行；
通過設(shè)置margin-left為負(fù)值讓left和right部分回到與center部分同一行；
center部分增加一個(gè)內(nèi)層div，并設(shè)margin: 0 200px；
③ 缺點(diǎn)
多加一層 dom 樹節(jié)點(diǎn)，增加渲染樹生成的計(jì)算量。
3.兩種布局實(shí)現(xiàn)方式對比:
兩種布局方式都是把主列放在文檔流最前面，使主列優(yōu)先加載。
兩種布局方式在實(shí)現(xiàn)上也有相同之處，都是讓三列浮動(dòng)，然后通過負(fù)外邊距形成三列布局。
兩種布局方式的不同之處在于如何處理中間主列的位置：圣杯布局是利用父容器的左、右內(nèi)邊距+兩個(gè)從列相對定位；
雙飛翼布局是把主列嵌套在一個(gè)新的父級塊中利用主列的左、右外邊距進(jìn)行布局調(diào)整
四、等高布局
等高布局是指子元素在父元素中高度相等的布局方式。接下來我們介紹常見幾種實(shí)現(xiàn)方式：
1.利用正padding+負(fù)margin
我們通過等布局便可解決圣杯布局的第二點(diǎn)缺點(diǎn)，因?yàn)楸尘笆窃?padding 區(qū)域顯示的，設(shè)置一個(gè)大數(shù)值的 padding-bottom，再設(shè)置相同數(shù)值的負(fù)的 margin-bottom，并在所有列外面加上一個(gè)容器，并設(shè)置 overflow:hidden 把溢出背景切掉。這種可能實(shí)現(xiàn)多列等高布局，并且也能實(shí)現(xiàn)列與列之間分隔線效果，結(jié)構(gòu)簡單，兼容所有瀏覽器。新增代碼如下：
.center,
.left,
.right {
padding-bottom: 10000px;
margin-bottom: -10000px;
}
.container {
padding-left: 220px;
padding-right: 220px;
overflow: hidden;//把溢出背景切掉
}
2.利用背景圖片
這種方法是我們實(shí)現(xiàn)等高列最早使用的一種方法，就是使用背景圖片，在列的父元素上使用這個(gè)背景圖進(jìn)行Y軸的鋪放，從而實(shí)現(xiàn)一種等高列的假象。實(shí)現(xiàn)方法簡單，兼容性強(qiáng)，不需要太多的css樣式就可以輕松實(shí)現(xiàn),但此方法不適合流體布局等高列的布局。
在制作樣式之前需要一張類似下面的背景圖：
.container {
background: url("column.png") repeat-y;
width: 960px;
margin: 0 auto;
}
.left {
float: left;
width: 220px;
}
.content {
float: left;
width: 480px;
}
.right {
float: left;
width: 220px;
}3.模仿表格布局
這是一種非常簡單，易于實(shí)現(xiàn)的方法。不過兼容性不好，在ie6-7無法正常運(yùn)行。
....
...
...
.table {
width: auto;
min-width: 1000px;
margin: 0 auto;
padding: 0;
display: table;
}
.tableRow {
display: table-row;
}
.tableCell {
display: table-cell;
width: 33%;
}
.cell1 {
background: #f00;
height: 800px;
}
.cell2 {
background: #0f0;
}
.cell3 {
background: #00f;
}4.使用邊框和定位
這種方法是使用邊框和絕對定位來實(shí)現(xiàn)一個(gè)假的高度相等列的效果。結(jié)構(gòu)簡單，兼容各瀏覽器，容易掌握。假設(shè)你需要實(shí)現(xiàn)一個(gè)兩列等高布局，側(cè)欄高度要和主內(nèi)容高度相等。
#wrapper {
width: 960px;
margin: 0 auto;
}
#mainContent {
border-right: 220px solid #dfdfdf;
position: absolute;
width: 740px;
height: 800px;
background: green;
}
#sidebar {
background: #dfdfdf;
margin-left: 740px;
position: absolute;
height: 800px;
width: 220px;
}五、粘連布局
1.特點(diǎn)
有一塊內(nèi)容
當(dāng)
具體代碼如下：
main
main
main
footer
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;//高度一層層繼承下來
}
#wrap {
min-height: 100%;
background: pink;
text-align: center;
overflow: hidden;
}
#wrap .main {
padding-bottom: 50px;
}
#footer {
height: 50px;
line-height: 50px;
background: deeppink;
text-align: center;
margin-top: -50px;
}2.實(shí)現(xiàn)步驟
(1)footer必須是一個(gè)獨(dú)立的結(jié)構(gòu)，與wrap沒有任何嵌套關(guān)系
(2)wrap區(qū)域的高度通過設(shè)置min-height，變?yōu)橐暱诟叨?/p>
(3)footer要使用margin為負(fù)來確定自己的位置
(4)在main區(qū)域需要設(shè)置 padding-bottom。這也是為了防止負(fù) margin 導(dǎo)致 footer 覆蓋任何實(shí)際內(nèi)容。
到此，關(guān)于“css布局方式是什么”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！
文章標(biāo)題：css布局方式是什么
轉(zhuǎn)載源于：http://weahome.cn/article/gjedgj.html
-
在線咨詢
微信咨詢
電話咨詢
-
028-86922220（工作日）
18980820575（7×24）
-
提交需求
-
返回頂部
