前端一面/面試常考題1-頁面佈局：假設高度已知，請寫出三欄佈局，其中左欄、右欄寬度各爲300px,中間自適應。
題目：假設高度已知，請寫出三欄佈局，其中左欄、右欄寬度各爲300px,中間自適應。
【題外話：平常宣讀個人目標===想要成爲一名優雅的程序媛】html
1、分析
1. 題目真的像咱們想得這麼簡單嗎？前端
其實否則，這道題能夠有多種方案，面試官想要經過這個題目考察面試者對CSS的掌握程度，是否善於思考、總結。面試
比較容易想到的兩種方法是：佈局
- 浮動
- 絕對定位
但若是隻給出這兩個答案，還沒到及格線。學習
2. 進階flex
- flex
- table cell
- 網格佈局---grid
【下文第二部分，有相應的代碼及實現效果演示】flexbox
3. 延伸。面試官極有可能就這個題目延伸出若干問題。code
- 這五種方案各自有什麼優勢和缺點？這幾種方案的兼容性如何，若是在作業務的時候，應該選擇哪種方案，哪一個是最實用的？
- 若是把【假設高度已知】去掉，這五種方案的效果？怎麼解決出現的問題？
【下文第三部分，有關於這幾個問題的參考答案】視頻
2、五種方法的代碼實現
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html * {
padding: 0;
margin: 0;
}
.layout {
margin-top: 20px;
}
.layout article div {
min-height: 100px;
}
</style>
</head>
<body>
<!-- 浮動解決方案 -->
<section class="layout float">
<style media="screen">
.layout.float .left {
float: left;
width: 300px;
background: #FFCCCC;
}
.layout.float .right {
float: right;
width: 300px;
background: #FF6666;
}
.layout.float .center {
background: #FFFFCC;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>浮動解決方案</h1>
1.這是三欄佈局中間部分
2.這是三欄佈局中間部分
</div>
</article>
</section>
<!-- 絕對定位解決方案 -->
<section class="layout absolute">
<style>
.layout.absolute .left{
position: absolute;
width: 300px;
left: 0;
background: red;
}
.layout.absolute .center{
position: absolute;
left: 300px;
right: 300px;
background: pink;
}
.layout.absolute .right{
position: absolute;
width: 300px;
right: 0;
background: blue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>絕對定位解決方案</h1>
1.這是三欄佈局絕對定位中間部分
2.這是三欄佈局絕對定位中間部分
</div>
<div class="right"></div>
</article>
</section>
<!-- flexbox 解決方案 -->
<section class="layout flexbox">
<style>
.layout.flexbox {
margin-top: 150px;
}
.layout.flexbox .left-center-right {
display: flex;
}
.layout.flexbox .left{
width: 300px;
background: #0000FF;
}
.layout.flexbox .center{
flex: 1;
background: greenyellow;
}
.layout.flexbox .right{
width: 300px;
background: blueviolet;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>flexbox 解決方案</h1>
1.這是三欄佈局flexbox中間部分
2.這是三欄佈局flexbox中間部分
</div>
<div class="right"></div>
</article>
</section>
<!-- 表格佈局 -->
<section class="layout table">
<style>
.layout.table .left-center-right{
width: 100%;
display: table;
height: 100px;
}
.layout.table .left-center-right>div{
display: table-cell;
}
.layout.table .left{
width: 300px;
background: #0000FF;
}
.layout.table .center{
background: #ADFF2F;
}
.layout.table .right{
width: 300px;
background: #008B8B;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>表格佈局 解決方案</h1>
1.這是三欄佈局 表格佈局 中間部分
2.這是三欄佈局 表格佈局 中間部分
</div>
<div class="right"></div>
</article>
</section>
<!-- 網格佈局 -->
<section class="layout grid">
<style>
.layout.grid .left-center-right{
display: grid;
width: 100%;
grid-template-rows: 100%;
grid-template-columns: 300px auto 300px;
}
.layout.grid .left{
background: #0000FF;
}
.layout.grid .center{
background: #ADFF2F;
}
.layout.grid .right{
background: #008B8B;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>網格佈局 解決方案</h1>
1.這是三欄佈局 網格佈局 中間部分
2.這是三欄佈局 網格佈局 中間部分
</div>
<div class="right"></div>
</article>
</section>
</body>
</html>
3、題目的延伸問題
1. 這五種方案各自有什麼優勢和缺點？這五種方案的兼容性如何，若是在作業務的時候，應該選擇哪種方案，哪一個是最實用的？htm
- 【浮動】
優勢 :兼容性比較好。
缺點 :浮動是脫離文檔流的，若是處理很差，會帶來不少問題。有些時候須要清除浮動，須要很好的處理浮動周邊元素的關係。
- 【絕對定位】
優勢：快捷。
缺點：佈局脫離文檔流，意味着下面的子元素也要脫離文檔流，致使這個方案的有效性是比較差的。
- 【flex】
優勢 :比較完美的解決了浮動和絕對定位的問題。在移動端比較經常使用。
缺點 :兼容性比較差，不兼容IE8及如下的版本。由於這個是CSS3中新增的display的屬性值。
- 【表格佈局】
優勢：兼容性比較好。
缺點：操做繁瑣，對SEO不友好；當某個單元格高度變化時，所在行的其它單元格也會變化。
- 【網格佈局】
優勢：代碼比較簡單。
缺點：兼容性比較差。
由於是較新的技術，若是在面試時回答出這種方法，能夠必定程度上體現出面試者對新技術的學習和渴望。
2. 若是把【假設高度已知】去掉，這五種方案的效果？怎麼解決出現的問題？
浮動
<!-- 浮動解決方案 -->
<section class="layout float">
<style media="screen">
.layout.float .left {
float: left;
width: 300px;
background: #FFCCCC;
}
.layout.float .right {
float: right;
width: 300px;
background: #FF6666;
}
.layout.float .center {
background: #FFFFCC;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>浮動解決方案</h1>
1.這是三欄佈局中間部分
2.這是三欄佈局中間部分
<p>增長高度</p>
<p>增長高度</p>
<p>增長高度</p>
<p>增長高度</p>
<p>增長高度</p>
<p>增長高度</p>
</div>
</article>
</section>
問題的緣由
由於浮動的基本原理，中間的內容向左浮動的時候，被左邊的塊擋住，因此在中間部分排，當文案超出之後，左側沒有遮擋物，就會溢出。
問題的解決
能夠經過建立BFC的方式解決。
.layout.float .center {
background: #FFFFCC;
overflow: hidden;
}
絕對定位
<!-- 絕對定位解決方案 -->
<section class="layout absolute">
<style>
.layout.absolute .left{
position: absolute;
width: 300px;
left: 0;
background: red;
}
.layout.absolute .center{
position: absolute;
left: 300px;
right: 300px;
background: pink;
}
.layout.absolute .right{
position: absolute;
width: 300px;
right: 0;
background: blue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>絕對定位解決方案</h1>
1.這是三欄佈局絕對定位中間部分
2.這是三欄佈局絕對定位中間部分
<p>增長高度</p>
<p>增長高度</p>
<p>增長高度</p>
<p>增長高度</p>
<p>增長高度</p>
<p>增長高度</p>
<p>增長高度</p>
</div>
<div class="right"></div>
</article>
</section>
flex、表格佈局、網格佈局
<!-- flexbox 解決方案 -->
<section class="layout flexbox">
<style>
.layout.flexbox {
margin-top: 280px;
}
.layout.flexbox .left-center-right {
display: flex;
}
.layout.flexbox .left{
width: 300px;
background: #0000FF;
}
.layout.flexbox .center{
flex: 1;
background: greenyellow;
}
.layout.flexbox .right{
width: 300px;
background: blueviolet;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>flexbox 解決方案</h1>
1.這是三欄佈局flexbox中間部分
2.這是三欄佈局flexbox中間部分
<p>增長高度</p>
<p>增長高度</p>
<p>增長高度</p>
<p>增長高度</p>
<p>增長高度</p>
<p>增長高度</p>
<p>增長高度</p>
</div>
<div class="right"></div>
</article>
</section>
<!-- 表格佈局 -->
<section class="layout table">
<style>
.layout.table .left-center-right{
width: 100%;
display: table;
height: 100px;
}
.layout.table .left-center-right>div{
display: table-cell;
}
.layout.table .left{
width: 300px;
background: #0000FF;
}
.layout.table .center{
background: #ADFF2F;
}
.layout.table .right{
width: 300px;
background: #008B8B;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>表格佈局 解決方案</h1>
1.這是三欄佈局 表格佈局 中間部分
2.這是三欄佈局 表格佈局 中間部分
<p>增長高度</p>
<p>增長高度</p>
<p>增長高度</p>
<p>增長高度</p>
<p>增長高度</p>
<p>增長高度</p>
<p>增長高度</p>
<p>增長高度</p>
<p>增長高度</p>
<p>增長高度</p>
<p>增長高度</p>
</div>
<div class="right"></div>
</article>
</section>
<!-- 網格佈局 -->
<section class="layout grid">
<style>
.layout.grid .left-center-right{
display: grid;
width: 100%;
grid-template-rows: 100%;
grid-template-columns: 300px auto 300px;
}
.layout.grid .left{
background: #0000FF;
}
.layout.grid .center{
background: #ADFF2F;
}
.layout.grid .right{
background: #008B8B;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>網格佈局 解決方案</h1>
1.這是三欄佈局 網格佈局 中間部分
2.這是三欄佈局 網格佈局 中間部分
<p>增長高度</p>
<p>增長高度</p>
<p>增長高度</p>
<p>增長高度</p>
<p>增長高度</p>
<p>增長高度</p>
<p>增長高度</p>
<p>增長高度</p>
<p>增長高度</p>
<p>增長高度</p>
<p>增長高度</p>
<p>增長高度</p>
<p>增長高度</p>
<p>增長高度</p>
</div>
<div class="right"></div>
</article>
</section>
4、頁面佈局小結
答題要點
- 語義化掌握到位
- 頁面佈局理解深入
- CSS基礎知識紮實
- 思惟靈活且積極上進
- 代碼書寫規範
題目的擴展
三欄佈局
- 左右寬度固定，中間自適應
- 上下高度固定，中間自適應
兩欄佈局
- 左寬度固定，右自適應
- 右寬度固定，左自適應
- 上寬度固定，下自適應
- 下寬度固定，上自適應
【說明：這是本人在看了某課網的前端面試視頻作的筆記，歡迎你們糾錯、補充答案】
【個人目標：想要成爲一名優雅的程序媛】
相關文章
- 1. 佈局：高度已知，佈局一個三欄佈局，左欄和右欄寬度爲200px，中間自適應
- 2. 前端一面/面試常考題1-頁面佈局：假設高度已知，請寫出三欄佈局，其中左欄、右欄寬度各爲300px,中間自適應。
- 3. 假設高度已知，請寫出三欄佈局，其中左欄右欄寬度各爲300px，中間自適應
- 4. 假設高度已知，請寫出三欄佈局，其中左欄、右欄各爲300px，中間自適應的五種方法
- 5. 前端經典面試題之CSS實現三欄佈局，左右寬度固定，中間寬度自適應
- 6. 三欄佈局（一）-------左右寬高固定，中間自適應
- 7. CSS實現三欄佈局，左右寬度固定，中間寬度自適應
- 8. 前端頁面佈局——三欄佈局
- 9. 三欄佈局-左右寬固定,中間自適應
- 10. css三欄佈局：左右固定寬中間自適應
- 更多相關文章...
- • ASP.NET Web Pages - 頁面佈局 - ASP.NET 教程
- • ASP.NET Web Pages - 全局頁面 - ASP.NET 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • IntelliJ IDEA中SpringBoot properties文件不能自動提示問題解決
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 佈局：高度已知，佈局一個三欄佈局，左欄和右欄寬度爲200px，中間自適應
- 2. 前端一面/面試常考題1-頁面佈局：假設高度已知，請寫出三欄佈局，其中左欄、右欄寬度各爲300px,中間自適應。
- 3. 假設高度已知，請寫出三欄佈局，其中左欄右欄寬度各爲300px，中間自適應
- 4. 假設高度已知，請寫出三欄佈局，其中左欄、右欄各爲300px，中間自適應的五種方法
- 5. 前端經典面試題之CSS實現三欄佈局，左右寬度固定，中間寬度自適應
- 6. 三欄佈局（一）-------左右寬高固定，中間自適應
- 7. CSS實現三欄佈局，左右寬度固定，中間寬度自適應
- 8. 前端頁面佈局——三欄佈局
- 9. 三欄佈局-左右寬固定,中間自適應
- 10. css三欄佈局：左右固定寬中間自適應