CSS布局中不可忽視的內容有哪些

今天小編給大家分享一下CSS布局中不可忽視的內容有哪些的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

前言

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

單列布局

單列布局是最常見也是最常用的布局方式,一般設置一個最大或者最小的寬度和居中就可以實現了。

<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網站和后臺管理系統。這種布局當屏幕縮小的時候，或者寬度不夠的時候,右邊撐滿的部分就變成了單列布局,左邊的部分改為垂直方向的顯示或者隱藏。

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

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

• 傳統布局的方法

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

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

以上就是“CSS布局中不可忽視的內容有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。