CSS布局--CC中不可忽視的部分

文章轉(zhuǎn)載自公眾號(hào)：小丑的小屋

前言

CSS 布局是一個(gè)前端必備的技能, HTML 如果說是結(jié)構(gòu)之美, CSS 就是視覺之美可以給用戶不一樣的體驗(yàn)的效果和視覺沖擊。如果一個(gè)大方美觀的布局,用戶第一眼看到會(huì)很舒服,不僅提高了用戶的視覺效果也提高了用戶的體驗(yàn)效果。隨著現(xiàn)在設(shè)備種類的增多,各種大小不一,奇形怪狀的設(shè)備使得前端開發(fā)的壓力不斷增大,越來越多的UI框架層出不群,我們就會(huì)忽略了最基本的 CSS, 下面總結(jié)了一些經(jīng)常用到的 CSS 布局,一起學(xué)習(xí)和進(jìn)步。

單列布局

單列布局是最常見也是最常用的布局方式,一般設(shè)置一個(gè)最大或者最小的寬度和居中就可以實(shí)現(xiàn)了。

<div id="app"></div>

#app{
    border:1px solid red;
    margin:0 auto;
    height: 500px;
    width: 100%;
    max-width: 960px;
    min-width: 500px;
    box-sizing: border-box;
}

兩列布局

兩列布局將頁面分割成左右寬度不一樣的兩部分,一般情況下都是左邊寬度固定,右邊寬度撐滿剩余寬度,常用于api網(wǎng)站和后臺(tái)管理系統(tǒng)。這種布局當(dāng)屏幕縮小的時(shí)候，或者寬度不夠的時(shí)候,右邊撐滿的部分就變成了單列布局,左邊的部分改為垂直方向的顯示或者隱藏。

<div id="app">
    <div id="main">main</div>
    <div id="side">side</div>
</div>

#main{
    background:orange;
    flex:1;
}
#side{
    width:200px;
    background:greenyellow;
}
#main,#side{
    height: 200px;
}
#app{
    display: flex;
    flex-direction:row-reverse;
    flex-wrap: wrap;
}
@media only screen and (max-width:1000px){
    #app{
        flex-direction: row;
    }
    #main{
        flex:100%;
    }
}

三列布局

三列布局是將頁面分為左中右水平方向的三個(gè)部分比如github。也有可能是水平方向上的兩列布局中右邊撐滿的部分嵌套一個(gè)兩列布局組成。

• 圣杯布局

<div id="app">
    <div id="main">main</div>
    <div id="side">side1</div>
    <div id="foot">side2</div>
</div>

*{
    margin:0px;
    padding:0px;
}
#app{
    padding:0px 200px 0px 300px;
}
#app::after{
    content: "";
    display: block;
    clear: both;
}
#main,#side,#foot{
    float: left;
}
#main{
    background:orange;
    width:100%;
}
#side{
    background:greenyellow;
    width: 300px;
    position: relative;
    margin-left:-100%;
    left: -300px;
}
#foot{
    background:palevioletred;
    width: 200px;
    position: relative;
    margin-left:-200px;
    right:-200px;


}
@media only screen and (max-width:1000px){
    #app{
        padding:0px;
    }
   #side{
      margin-left:0px;
      left:0px;
   }
   #foot{
    margin-left:0px;
    right:0px;
 }
}

• 雙飛翼布局

<div id="app">
    <main>
        <div id="container">main</div>
    </main>
    <header>header</header>
    <footer>footer</footer>
</div>

*{
    margin:0px;
    padding:0px;
}
#app::after{
    content: "";
    display: block;
    clear: both;
}
main,header,footer{
    float: left;
}
main{
    background:orange;
    width: 100%;
}
header{
    background:greenyellow;
    width: 300px;
    margin-left: -100%;
}
footer{
    background:palevioletred;
    width: 200px;
    margin-left: -200px;
}
#container{
    margin: 0px 200px 0px 300px;
}
@media only screen and (max-width:1000px){
   header{
      margin-left:0px;
   }
   footer{
    margin-left:0px;
 }
}

• 圣杯和雙飛翼的區(qū)別見下圖

還有一種布局是垂直方向上的分為上中下三個(gè)部分,上和下兩部分固定高度,中間部分高度不定,當(dāng)頁面高度小于瀏覽器高度時(shí),下部分應(yīng)該固定在瀏覽器的底部,但是當(dāng)頁面的高度超出瀏覽器高度的時(shí)候,下部分應(yīng)該隨中間部分被撐開,顯示在頁面的最底部即sticky footer。

• 傳統(tǒng)布局的方法

將header和main放到一個(gè)容器中,讓容器的高度撐滿整個(gè)屏幕,下面預(yù)留出一定的高度,給footer設(shè)置外邊距使它插入到容器底部實(shí)現(xiàn)功能。

<div id="app">
    <header></header>
    <main>
        <div id="container"></div>
    </main>
</div>
<footer></footer>

*{
    margin:0px;
    padding:0px;
}
#app{
    box-sizing: border-box;
    min-height: 100vh;
    padding-bottom: 100px;
}


header,footer{
    height: 100px;
    background: burlywood;
}
main{
    background: cadetblue;
}
footer{
    margin-top:-100px ;
}

• flex布局

父級(jí)app使用flex布局高度撐滿容器,讓子容器垂直排列,header和footer設(shè)置固定高度,讓main撐滿剩余的容器

<div id="app">
    <header></header>
    <main>
        <div id="container"></div>
    </main>
    <footer></footer>
</div>

*{
    margin:0px;
    padding:0px;
}
#app{
    display: flex;
    flex-direction: column;
    height: 100%;
}


header,footer{
    background: burlywood;
    height: 100px;
}
main{
    background: cadetblue;
    flex: 1;
}

這里有的面試會(huì)問到flex:1的原理是什么?**flex**是flex-grow, flex-shrink 和 flex-basis的縮寫

flex-grow:1; //放大比例
flex-shrink:1;  //  縮小比例
flex-basis；0%;  // 分配剩余空間

• grid布局

grid布局就一句話,設(shè)置第一行和最后一行高為固定值,中間部分由瀏覽器自己決定長(zhǎng)度

<div id="app">
    <header></header>
    <main>
        <div id="container"></div>
    </main>
    <footer></footer>
</div>

*{
    margin:0px;
    padding:0px;
}
#app{
    display: grid;
    height: 100%;
    grid-template-rows:100px auto 100px;
}


header,footer{
    background: burlywood;
}
main{
    background: cadetblue;
}

總結(jié)

經(jīng)典永遠(yuǎn)都是經(jīng)典,框架再多選擇再多,基礎(chǔ)永遠(yuǎn)是我們需要掌握的,所謂萬變不離其中,有了這些基礎(chǔ)知識(shí)我們只需要靈活的運(yùn)用即可

• 1.首先將我們需要布局的大框架寫出來,即頁面容器的主層次,一般主容器放到次容器的上面。
• 2.將布局容器進(jìn)行水平排列。
• 3.設(shè)置容器的寬度。
• 4.消除布局的副作用,比如浮動(dòng)造成的高度塌陷。
• 5.為了適配不同機(jī)型,通過媒體查詢進(jìn)行優(yōu)化。

以上就是W3Cschool編程獅關(guān)于CSS布局--CC中不可忽視的部分的相關(guān)介紹了，希望對(duì)大家有所幫助。