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

文章轉載自公眾號：小丑的小屋

前言

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

單列布局

單列布局是最常見也是最常用的布局方式,一般設置一個最大或者最小的寬度和居中就可以實現(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ǒng)。這種布局當屏幕縮小的時候，或者寬度不夠的時候,右邊撐滿的部分就變成了單列布局,左邊的部分改為垂直方向的顯示或者隱藏。

<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%;
    }
}

三列布局

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

• 圣杯布局

<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ū)別見下圖

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

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

將header和main放到一個容器中,讓容器的高度撐滿整個屏幕,下面預留出一定的高度,給footer設置外邊距使它插入到容器底部實現(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布局

父級app使用flex布局高度撐滿容器,讓子容器垂直排列,header和footer設置固定高度,讓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;
}

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

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

• grid布局

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

<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;
}

總結

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

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

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