## 浮動布局
```html
<section class="layout float">
<style media="screen">
.layout.float .left{
float:left;
width:300px;
background: red;
}
.layout.float .center{
background: yellow;
}
.layout.float .right{
float:right;
width:300px;
background: blue;
}
</style>
<h1>三欄布局</h1>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h2>浮動解決方案</h2>
1.這是三欄布局的浮動解決方案;
2.這是三欄布局的浮動解決方案;
3.這是三欄布局的浮動解決方案;
4.這是三欄布局的浮動解決方案;
5.這是三欄布局的浮動解決方案;
6.這是三欄布局的浮動解決方案;
</div>
</article>
</section>
```
優點:兼容性好
缺點:浮動元素脫離文檔流,要做清除浮動,這個處理不好的話,會帶來很多問題,比如父容器高度塌陷等
## 絕對定位布局
```html
<section class="layout absolute">
<style>
.layout.absolute .left-center-right>div{
position: absolute;
}
.layout.absolute .left{
left:0;
width: 300px;
background: red;
}
.layout.absolute .center{
left: 300px;
right: 300px;
background: yellow;
}
.layout.absolute .right{
right:0;
width: 300px;
background: blue;
}
</style>
<h1>三欄布局</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>絕對定位解決方案</h2>
1.這是三欄布局的浮動解決方案;
2.這是三欄布局的浮動解決方案;
3.這是三欄布局的浮動解決方案;
4.這是三欄布局的浮動解決方案;
5.這是三欄布局的浮動解決方案;
6.這是三欄布局的浮動解決方案;
</div>
<div class="right"></div>
</article>
</section>
```
優點:快捷,設置很方便,而且也不容易出問題。
缺點:容器脫離了文檔流,后代元素也脫離了文檔流,高度未知的時候,會有問題,這就導致了這種方法的有效性和可使用性是比較差的。
## flexbox布局
```html
<section class="layout flexbox">
<style>
.layout.flexbox{
margin-top: 110px;
}
.layout.flexbox .left-center-right{
display: flex;
}
.layout.flexbox .left{
width: 300px;
background: red;
}
.layout.flexbox .center{
flex:1;
background: yellow;
}
.layout.flexbox .right{
width: 300px;
background: blue;
}
</style>
<h1>三欄布局</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>flexbox解決方案</h2>
1.這是三欄布局的浮動解決方案;
2.這是三欄布局的浮動解決方案;
3.這是三欄布局的浮動解決方案;
4.這是三欄布局的浮動解決方案;
5.這是三欄布局的浮動解決方案;
6.這是三欄布局的浮動解決方案;
</div>
<div class="right"></div>
</article>
</section>
```
優點:css3里新出的一個,它就是為了解決上述兩種方式的不足出現的,是比較完美的一個。
缺點:IE10開始支持,但是IE10的是`-ms`形式的
## 表格布局
```html
<section class="layout table">
<style>
.layout.table .left-center-right{
width:100%;
height: 100px;
display: table;
}
.layout.table .left-center-right>div{
display: table-cell;
}
.layout.table .left{
width: 300px;
background: red;
}
.layout.table .center{
background: yellow;
}
.layout.table .right{
width: 300px;
background: blue;
}
</style>
<h1>三欄布局</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>表格布局解決方案</h2>
1.這是三欄布局的浮動解決方案;
2.這是三欄布局的浮動解決方案;
3.這是三欄布局的浮動解決方案;
4.這是三欄布局的浮動解決方案;
5.這是三欄布局的浮動解決方案;
6.這是三欄布局的浮動解決方案;
</div>
<div class="right"></div>
</article>
</section>
```
優點:兼容性很好,在flex布局不兼容的時候,可以嘗試表格布局。當內容溢出時會自動撐開父元素。
缺點:無法設置欄邊距;對seo不友好;當其中一個單元格高度超出的時候,兩側的單元格也是會跟著一起變高的,然而有時候這并不是我們想要的效果。
## 網格布局
```html
<section class="layout grid">
<style>
.layout.grid .left-center-right{
width:100%;
display: grid;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.layout.grid .left-center-right>div{
}
.layout.grid .left{
width: 300px;
background: red;
}
.layout.grid .center{
background: yellow;
}
.layout.grid .right{
background: blue;
}
</style>
<h1>三欄布局</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>網格布局解決方案</h2>
1.這是三欄布局的浮動解決方案;
2.這是三欄布局的浮動解決方案;
3.這是三欄布局的浮動解決方案;
4.這是三欄布局的浮動解決方案;
5.這是三欄布局的浮動解決方案;
6.這是三欄布局的浮動解決方案;
</div>
<div class="right"></div>
</article>
</section>
```
優點:CSS新標準,創建網格布局最強大和最簡單的工具
缺點:兼容性不好。IE10+上支持,而且也僅支持部分屬性
*****
內容來自慕課網《前端跳槽面試必備技巧》
- 說明
- CSS與HTML
- BFC的特性及其常見應用
- CSS深入理解之margin
- CSS深入理解之line-height
- CSS盒模型相關知識
- CSS知識總結
- HTML知識總結
- 三欄布局五種方式
- JavaScript內置對象
- 1.循環
- 2.數組方法對比
- 3.字符串實用常操紀要
- JavaScript核心
- var、let、const定義變量
- this 的指向問題詳解
- 箭頭函數
- ES6部分知識歸納
- ES6的Class
- Promise和Async/await
- 面向對象的概念及JS中的表現
- 創建對象的九種方式
- JS的繼承
- 閉包總結
- 構造函數與作用域
- 原型與原型鏈
- 函數的四種調用模式
- apply、call、bind詳解
- JavaScript應用
- 1.JavaScript實現深拷貝與淺拷貝
- 2.函數防抖與節流
- 3.無阻塞腳本加載技術
- DOM
- 如何寫出高性能DOM?
- 事件探秘
- 事件委托
- 操作DOM常用API詳解
- 重排和重繪
- 運行機制與V8
- 瀏覽器的線程和進程
- Vue.js
- Vue.js知識點總結
- Vue-Router知識點總結
- 父子組件之間通信的十種方式
- 優化首屏加載
- 關于Vuex
- 前端路由原理及實現
- 在Vue.js編寫更好的v-for循環的6種技巧
- 12個Vue.js開發技巧和竅門
- 網絡協議
- HTTP緩存機制
- UDP協議
- TCP協議
- HTTPS協議
- HTTPS的背景知識、協議的需求、設計的難點
- HTTPS與HTTP的區別
- 框架與架構
- MVC、MVP、MVVM
- Gulp與Webpack的區別
- Angular React 和 Vue的比較
- 虛擬DOM和實際的DOM有何不同?
- 架構問題
- 工程化
- npm link命令
- npm scripts 使用指南
- 前端工程簡史
- 常見的構建工具及其對比
- Webpack基本配置與概念
- 設計模式
- 工廠設計模式
- 單例設計模式
- 適配器模式
- 裝飾器模式