一二面_页面布局
Posted 煜成'Studio
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一二面_页面布局相关的知识，希望对你有一定的参考价值。
一二面_页面布局
题目：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应
写代码时注意：
语义化要到位（不要通篇div）
页面布局理解深刻
CSS基础知识扎实
思维灵活且积极上进（思维灵活：每个方案的优缺点以及对比；积极上进：一定要掌握网格布局的解决方案，因为这是最新的，在面试中要体现出来）
代码书写要规范（该缩进的地方要缩进，类名要清晰，可以通过类名快速掌握这段代码的含义）
题目延伸：
1.这五种方案各自有什么优缺点
浮动解决方案
缺点：浮动是脱离文档流的，常见的就是清除浮动（如何清除浮动以及清除浮动方面的问题）；
优点：兼容性比较好（浮动的话，把清除浮动和浮动周边的元素的关系处理好）
绝对定位解决方案
缺点：布局已经脱离文档流了，那么下面的子元素也就意味着脱离了文档流，导致了这个方案的可使用性比较差； 优点：快捷，而且也不容易出问题
flex布局
CSS3中新出现的布局方式，是为了解决上述两个布局方式的不足出现的，比较完美。
表格布局
很多人说不要用table布局，说他比较麻烦，操作比较繁琐，多SEO不友好，其实这是对表格布局的一种误解，表格布局在很多场景中还是比较适用的，就比如这里表格布局就轻易做到了，而且表格布局的兼容性很好，flex解决不了的问题，同时还要考虑兼容性的问题，PC上IE8是不支持flex的， 还想实现同样效果的话，这时就可以考虑一下表格布局；
缺点：除了刚刚前面说的缺点以外，还有就是想这道题的table-cell三列并排，其中一个单元格内的内容过多，其他两个单元格也会自动撑高，有时是不需要这样效果的
网格布局
优点：代码量少
2.假设把高度已知这个条件去掉，考虑纵向的话，可能有一侧的高度撑开了比较高，刚刚写的五种方案哪个还可以适用，哪个不可以用了
flex布局和表格布局还可以用，其他三个不能用，分别为什么
对于浮动布局，内容超出以后，发现没有遮挡物了，所以会排在最左边的下面，浮动的解决方案（BFC，这就牵引到BFC的知识了）
3.这五种方案的兼容性如何，如果现在就写业务中的布局的话，最优的方案你会选择哪一个
4.页面布局的变通问题
三栏布局：
左右宽度固定，中间自适应
上下高度固定，中间自适应（适用于移动端）除了浮动其他四种都能用
两栏布局
左宽度固定，右自适应
右宽度固定，左自适应
上高度固定，下自适应
下高度固定，上自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layout</title>
<style>
/* 进行布局之前，将整个页面的样式初始化，因为每个浏览器对HTML标签都有一个初始样式 */
html *{
padding: 0;
margin: 0;
}
/* 这句的作用是将每次的方法呈现的效果隔开，不让他紧挨着，没有其他作用
.layout{
margin-top: 20px;
} */
/* 统一设置高度 */
.layout article div{
min-height: 100px;
}
</style>
</head>
<body>
<!-- 五种方法：1.浮动布局 2.绝对定位 3.flexbox 4.table-cell 5.网格布局 -->
<!-- 每个方案作为区分采用section标签来划分 -->
<!-- 第一种方法：浮动 -->
<!-- 使用article标签作为容器把左右中三块包裹起来 -->
<section class="layout float">
<!-- HTML5标准建议，section标签内部必须要有标题，也就是必须要有header标签 -->
<header>浮动解决方案</header>
<style>
.layout.float .left{
float: left;
width: 300px;
background: red;
}
.layout.float .right{
float: right;
width: 300px;
background: blue;
}
.layout.float .center{
/* 因为是块状元素，在水平方向上按照他的包容块自动撑开 */
background: yellow;
}
</style>
<article class="left-right-center">
<!-- HTML5标准建议，article标签内部应该要有一个header元素 -->
<header>浮动解决方案的三块区域</header>
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>浮动解决方案</h1>
1.这是三栏布局的中间部分
2.这是三栏布局的中间部分
</div>
</article>
</section>
<!-- 第二种方法：绝对定位 -->
<section class="layout absolute">
<header>浮动解决方案</header>
<style>
.layout.absolute .left-center-right>div{
/* A>B 表示A元素之下的第一级的B元素 */
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>
<article class="left-center-right">
<header>绝对定位解决方案的三块区域</header>
<div class="left"></div>
<div class="center">
<h2>绝对定位解决方案</h2>
1.这是三栏布局中间部分
2.这是三栏布局中间部分
</div>
<div class="right"></div>
</article>
</section>
<!-- 第三种方法：flexbox -->
<section class="layout flexbox">
<header>flexbox解决方案</header>
<style>
/* 因为上面的第二种方法是绝对定位，使用下面的语句进行分隔 */
.layout.flexbox{
margin-top: 140px;
}
.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>
<article class="left-center-right">
<!-- <header>flexbox解决方案的三块区域</header> -->
<!-- 加入上面的header元素之后，因为flex将header元素也算在内 -->
<div class="left"></div>
<div class="center">
<h2>flexbox解决方案</h2>
1.这是三栏布局中间部分
2.这是三栏布局中间部分
</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: red;
}
.layout.table .center{
background: yellow;
}
.layout.table .right{
width: 300px;
background: blue;
}
</style>
<header>表格布局解决方案</header>
<article class="left-center-right">
<!-- <header>表格布局的三个区域</header> -->
<!-- 加上上面的语句，同样也是将header看做一个table-cell，不能达到预期效果 -->
<div class="left"></div>
<div class="center">
<h2>表格布局</h2>
1.这是三栏布局中间部分
2.这是三栏布局中间部分
</div>
<div class="right"></div>
</article>
</section>
<!-- 第五种方法：网格布局 -->
<section class="layout grid">
<style>
.layout.grid .left-center-right{
display: grid;
width: 100%;
/* 行高100px */
grid-template-rows: 100px;
/* 列数为三列，左右300px，中间自适应 */
grid-template-columns: 300px auto 300px;
}
.layout.grid .left{
background: red;
}
.layout.grid .center{
background: yellow;
}
.layout.grid .right{
background: blue;
}
</style>
<header>网格布局解决方案</header>
<article class="left-center-right">
<!-- 在这里就不加header元素了，因为根据上面两个出现的问题，这里加的话同样也会出现问题 -->
<div class="left"></div>
<div class="center">
<h2>网格布局</h2>
1.这是三栏中间部分
2.这是三栏中间部分
</div>
<div class="right"></div>
</article>
</section>
</body>
</html>
以上是关于一二面_页面布局的主要内容，如果未能解决你的问题，请参考以下文章