前言:
搞前端必须知道的布局,工作中必会用到,面试必会考到!
流式布局:
页面划分份数时候使用百分比,页面上各种元素的宽也都使用百分比,同时搭配 max-width、min-width使用。这种布局用于早期移动端,屏幕尺寸差异不大
缺点:页面元素宽度是百分比,但是页面的字体等元素大小是固定的px,导致屏幕如果过大的话,虽然元素被拉伸边长了,但是字体没有变大,导致页面显示非常不协调。
圣杯布局
两侧宽度固定,中间宽度自适应的“三栏布局”
实现步骤:
编写DOM代码:
<body>
<header>header</header>
<div id="container">
<div id="center">center</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
<footer>footer</footer>
</body>
- 为了保证中间区域优先显示,所以将 id 为center的div优先放到前边,优先加载
- 其中 container 容器中 包裹着 center 、 left 、right 容器
样式代码:
- 将 center、left、right 全部浮动
- 同时设置container宽度为100%,设置左右padding值,为了给 left 和 right 留出位置
- 因为container浮动会导致 footer 位置异常,所以需要清除浮动
#container,#left,#right{
float:left;
}
#container{
width:100%;
padding:0,200px;
}
footer{
clear:both;
}
- 开始调整 left 的位置,首先将其 设置 负边距 调整到和 center 相同的位置
- 然后 通过 设置 position:relative ,在设置 right 属性,使其 到达屏幕左侧位置
- 设置margin-left 为 负值 可以将元素往前拖动,达到 center的位置!
- margin-left :-100%, 移动的距离 根据 父级元素的宽度计算,移动的宽度就是父级元素的宽度
#left{
width:200px;
margin-left:-100%;
position:relative;
right:200px;
}
- 给 right 元素进行位置的赋值
- margin-right:-200px
- 这里 大家不要搞混,其实 left 、right、center 在一条线上,因为 container宽度 不够所有的元素都在一条直线上,因此left 和right 会被挤下来
- 所以,想让 right 跑到屏幕右侧,只需要将其拉扯到 屏幕右侧即可,就是 margin-right:-200px对其进行位置的设置即可
#right {
margin-right:-200px;
}
最终代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
header,
footer {
width: 100%;
background-color: aqua;
}
#container {
padding: 0 200px;
}
#center {
height: 300px;
width: 100%;
float: left;
background-color: green;
}
#left {
height: 300px;
width: 200px;
float: left;
position: relative;
margin-left: -100%;
right: 200px;
background-color: yellow;
}
#right {
height: 300px;
width: 200px;
float: left;
margin-right: -200px;
background-color: blue;
}
footer {
clear: both;
}
</style>
<body>
<header>header</header>
<div id="container">
<div id="center">center</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
<footer>footer</footer>
</body>
</html>
双飞翼布局
两侧宽度固定,中间宽度自适应的“三栏布局”
实现步骤:
编写DOM代码:
- 和圣杯布局不同的是,container 容器只是包裹 center 元素,且 container 容器进行浮动
- left 和 right 都在 container 容器外部浮动
<body>
<header>header</header>
<div id="container">
<div id="center">center</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
<footer>footer</footer>
</body>
样式代码:
- container 、 left 、righ 都进行浮动
- container 容器内的 center 设置 margin-left 和 margin-right 预留 左右 的空隙
- left 元素 设置 margin-left : -100% ,将其移动到 屏幕最左侧
- right 元素 设置 margin-left:-200px 将其移动到屏幕最右侧
<style>
header,
footer {
width: 100%;
background-color: aqua;
}
#container {
float: left;
width: 100%;
}
#center {
height: 300px;
margin: 0 200px 0;
background-color: red;
}
#left {
height: 300px;
width: 200px;
float: left;
margin-left: -100%;
background-color: blue;
}
#right {
height: 300px;
width: 200px;
float: left;
margin-left: -200px;
background-color: yellow;
}
footer {
clear: both;
}
</style>
最终代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
header,
footer {
width: 100%;
background-color: aqua;
}
#container {
float: left;
width: 100%;
}
#center {
height: 300px;
margin: 0 200px 0;
background-color: red;
}
#left {
height: 300px;
width: 200px;
float: left;
margin-left: -100%;
background-color: blue;
}
#right {
height: 300px;
width: 200px;
float: left;
margin-left: -200px;
background-color: yellow;
}
footer {
clear: both;
}
</style>
<body>
<header>header</header>
<div id="container">
<div id="center">center</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
<footer>footer</footer>
</body>
</html>
flex 实现 三栏布局
实现结构和圣杯布局相似,但是更加简单
最终代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
header,
footer {
width: 100%;
background-color: aqua;
}
#container {
display: flex;
}
#center {
/* 默认占满整个空间 */
flex:1;
height: 300px;
background-color: red;
}
#left{
/*不放大,不缩小,宽度为200px*/
flex:0 0 200px;
/*越小的项目越靠前*/
order: -1;
height: 300px;
background-color: blue;
}
#right{
/*不放大,不缩小,宽度为200px*/
flex:0 0 200px;
height: 300px;
background-color: yellow;
}
</style>
<body>
<header>header</header>
<div id="container">
<div id="center">center</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
<footer>footer</footer>
</body>
</html>
感谢观看,如有疑问,请在评论区中,回复!