這篇文章不是教程，也不是讓讀者能夠學會和掌握CSS,而是我的學習筆記。文章的目的是讓我實踐，系統的了解一下一些必備知識，僅此而已。
如果你需要這方面的知識詳細學習的話，推薦你看參考的連結。內容全部來源於此。
正文五種經典布局1.空間居中.parent{
display: grid;
place-items: center;
}
核心代碼是place-items屬性,那個是它的簡寫形式place-items: <align-items> <justify-items>; 兩者相同的話可以省略。
左上角 place-items: start;
右下角place-items: end;
2.並列式布局並列式布局就是多個項目並列。容器設置成 Flex 布局，內容居中（justify-content）可換行（flex-wrap）
.container{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
項目上面只用一行flex
.col{
flex: 1 1 300px;
}
flex屬性是flex-grow、flex-shrink、flex-basis這三個屬性的簡寫形式 flex: <flex-grow> <flex-shrink> <flex-basis>;
flex-grow：指定如果有多餘寬度，項目是否可以擴大。flex-shrink：指定如果寬度不足，項目是否可以縮小。flex: 0 1 300px; 表示項目初始寬度是300，寬度不夠的話可以縮小，但是不可以擴大。flex: 1 1 300px;，表示項目始終會佔滿所有寬度。
3.兩欄式布局.container{
display: grid;
grid-template-columns: minmax(100px,20%) 1fr;
}
grid-template-columns指定頁面分成兩列。第一列的寬度是minmax(150px, 25%)，即最小寬度為150px，最大寬度為總寬度的25%；第二列為1fr，即所有剩餘寬度。切記div作為容器，需要項目（div）。
4.三明治布局三明治布局指的是，頁面在垂直方向上，分成三部分：頁眉、內容區、頁腳。
.container{
display: grid;
grid-template-rows: auto 1fr auto;
}
grid-template-rows是指垂直方向。head和foot都是跟隨內容自動變化，中間區域為剩餘大小
5.聖杯布局聖杯布局是最常用的布局，所以被比喻為聖杯。它將頁面分成五個部分，除了頁眉和頁腳，內容區分成左邊欄、主欄、右邊欄。
body{
display: grid;
grid-template: auto 1fr auto/auto 1fr auto;
}
header{
grid-column: 1 / 4;
}
.main{
grid-column: 2 / 3;
}
.left{
grid-column: 1 / 2;
}
.right{
grid-column: 3 / 4;
}
footer{
grid-column: 1 / 4;
}
grid-template是grid-template-rows和grid-template-columns的簡寫，grid-template: <grid-template-rows> / <grid-template-columns>
grid-column是grid-column-start和grid-column-end的簡寫，grid-column: <start-line> / <end-line>表示垂直第幾根線。上面代碼的grid-column: 1 / 4代表從第1列到第4列。
CSS使用技巧高度100%有的時候，我們發現高度設置為100%不生效，這個是因為百分比相對於父元素，因為我們將所有的父元素都設置為height:100%
<style>
html,body{
height: 100%;
margin: 0px;
}
.parent{
background-color: lightskyblue;
width: 100%;
height: 100%;
}
</style>
<div></div>
當然使用100vh就沒有上面的問題。
文字的水平居中text-align:center;
容器的水平居中div#container {
width:760px;
margin:0 auto;
}
先為該容器設置一個明確寬度，然後將margin的水平值設為auto即可。
文字的垂直居中height: 35px; line-height: 35px;
如果有n行文字，那麼將行高設為容器高度的n分之一即可。
容器的垂直居中<div id="big">
<div id="small">
</div>
</div>
div#big{
position:relative;
height:480px;
}
div#small {
position: absolute;
top: 50%;
height: 240px;
margin-top: -120px;
}
將大容器的定位為relative。將小容器定位為absolute，再將它的左上角沿y軸下移50%，最後將它margin-top上移本身高度的50%即可。
容器水平垂直居中.container{
position: relative;
background-color: yellow;
height: 100vh;
width: 100vw;
}
.col{
background-color: red;
position:absolute;
top:50%;
left: 50%;
height: 200px;
width: 200px;
margin: -100px 0 0 -100px;
}
margin: top right bottom left
圖片寬度的自適應img {max-width: 100%}
3D按鈕div#button {
background: #888;
border: 1px solid;
border-color: #999 #777 #777 #999;
}
CSS的優先性行內樣式 > id樣式 > class樣式 > 標籤名樣式
禁止文字自動換行white-space:nowrap;
參考