課程思維導圖
Q：三欄佈局，高度已知，左右兩欄固定，中間自適應的三欄佈局有幾種實現方式，各自的優缺點是什麼？
<!--
float實現
優點：相容性好
缺點：脫離文件流，DOM節點順序錯誤
-->
<section class="float">
<style>
.float .left {
float: left;
width: 300px;
background: green;
}
.float .center {
background: yellow;
}
.float .right {
width: 300px;
float: right;
background: red;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</article>
</section>
<!--
absolute實現
優點：快捷
缺點：脫離文件流
-->
<section class="absolute">
<style>
.absolute article > div {
position: absolute;
}
.absolute .left {
left: 0;
width: 300px;
background: green;
}
.absolute .center {
left: 300px;
right: 300px;
background: yellow;
}
.absolute .right {
width: 300px;
right: 0;
background: red;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</article>
</section>
<!--
margin負值實現
優點：相容性好
缺點：節點順序錯誤，需要多一層額外的div，出問題難以排查
-->
<section class="margin">
<style>
.absolute .center {
width:100%;
float:left;
}
.absolute .main {
margin: 0 100px;
background:yellow;
}
.absolute .left {
float:left;
width: 300px;
margin-left: -100%;
background: green;
}
.absolute .right {
width: 300px;
float:right;
margin: -300px;
background: red;
}
</style>
<article class="left-center-right">
<div class="center">
<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</article>
</section>
<!--
flex實現
優點：新佈局方式，解決以上兩種佈局方式的缺陷
缺點：相容性較差
-->
<section class="flex">
<style>
.flex {
margin-top: 110px;
}
.flex .left-center-right {
display: flex;
}
.flex .left {
width: 300px;
background: green;
}
.flex .center {
flex:1;
background: yellow;
}
.flex .right {
width: 300px;
background: red;
}
</style>
<arctile class="left-center-right">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</arctile>
</section>
<!--
table實現
優點：相容性好、快捷
缺點：單元格限制，當某個單元格高度調整時，其他單元格也會被調整
-->
<section class="table">
<style>
.table .left-center-right {
width: 100%;
height: 100px;
display: table;
}
.table .left-center-right div {
display: table-cell;
}
.table .left {
width: 300px;
background: green;
}
.table .center {
background: yellow;
}
.table .right {
width: 300px;
background: red;
}
</style>
<arctile class="left-center-right">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</arctile>
</section>
<!--
grid實現
優點：將網格佈局標準化，將複雜問題簡單化
缺點：相容性差
-->
<section class="grid">
<style>
.grid .left-center-right {
display: grid;
width: 100%;
grid-template-rows : 100px;
grid-template-columns : 300px auto 300px;
}
.grid .left {
background: green;
}
.grid .center {
background: yellow;
}
.grid .right {
background: red;
}
</style>
<arctile class="left-center-right">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</arctile>
</section>
複製程式碼Q：三欄佈局，高度未知，以上佈局哪些仍可用，哪些不可用？
- float：不可用
- absolute：不可用
- flex：可用
- table：可用
- grid：不可用
Q：三欄佈局，高度已知，左中固定，右自適應
與左右固定，中自適應的三欄佈局
Q：三欄佈局，上下固定，中自適應
<body>
<style>
* {
margin:0;
padding: :0;
}
article {
width: 100%;
}
.top{
height: 200px;
background: red;
position: absolute;
top: 0;
left: 0;
}
.bottom {
height: 200px;
background: blue;
position: absolute;
bottom: 0;
left: 0;
}
.center {
background: yellow;
position: absolute;
height: auto;
top: 200px;
bottom: 200px;
}
</style>
<article class="top"></article>
<article class="center"></article>
<article class="bottom"></article>
</body>
複製程式碼Q：CSS居中佈局有哪些，適用於什麼場景，舉例說明？
一、CSS居中：margin設為auto
- 做法：把要居中的元素的margin-left和margin-right都設為auto
- 場景：只能進行水平的居中，且對浮動元素或絕對定位元素無效。
二、CSS居中：使用 text-align:center
- 場景：只能對圖片，按鈕，文字等行內元素(display為inline或inline-block等)進行水平居中。但要說明的是在IE6、7這兩個奇葩的瀏覽器中，它是能對任何元素進行水平居中的。
三、CSS居中：使用line-height讓單行的文字垂直居中
- 做法：把文字的line-height設為文字父容器的高度
- 場景：適用於只有一行文字的情況。
四、CSS居中：使用表格
- 做法：td/th元素設定align="center"、valign="middle"即可處理單元格里面內容的水平和垂直居中問題
- 場景：必須是table
五、CSS居中：使用display:table-cell來居中
- 做法：通過display:table-cell 模擬表格單元格，這樣就可以利用表格那很方便的居中特性了。
- 場景：IE6、IE7都無效。
六、CSS居中：使用絕對定位進行居中
-
場景：只適用於寬度或高度已知的元素。
-
原理：通過把這個絕對定位元素的left或top的屬性設為50%,這個時候元素並不是居中的，而是比居中的位置向右或向左偏了這個元素寬度或高度的一半的距離，所以需要使用一個負的margin-left或margin-top的值來把它拉回到居中的位置，這個負的margin值就取元素寬度或高度的一半。
七、CSS居中：使用絕對定位進行居中
-
場景：只適用於寬度或高度已知的元素。且只支援IE9+,谷歌，火狐等符合w3c標準的現代瀏覽器。
-
原理：這裡如果不定義元素的寬和高的話，那麼他的寬就會由left,right的值來決定，高會由top,bottom的值來決定，所以必須要設定元素的高和寬。同時如果改變left，right , top , bottom的值還能讓元素向某個方向偏移。
八、CSS居中：使用浮動配合相對定位來進行水平居中
-
場景：不用知道要居中的元素的寬度，缺點是需要一個多餘的元素來包裹要居中的元素。
-
原理：把浮動元素相對定位到父元素寬度50%的地方，但這個時候元素還不是居中的，而是比居中的那個位置多出了自身一半的寬度，這時就需要他裡面的子元素再用一個相對定位，把那多出的自身一半的寬度拉回來，而因為相對定位正是相對於自身來定位的，所以自身一半的寬度只要把left 或 right 設為50%就可以得到了，因而不用知道自身的實際寬度是多少。
Q：CSS佈局時需要注意哪些方面？
- 語義化掌握到位
- 頁面佈局理解深刻
- CSS基礎知識紮實
- 程式碼書寫規範