负边距的用处，圣杯布局，双飞翼布局
摘要：前台页面的开发属于前端吗|小红书社招面试题 前端开发|前端开发的面试的自我介绍 写下几个经典的布局圣杯布局，先渲染center区域，再渲染left区域，最后渲染right区域 代码片段 1 <!DOCTYPE html> <html……
前台页面的开发属于前端吗|小红书社招面试题 前端开发|前端开发的面试的自我介绍
写下几个经典的布局圣杯布局，先渲染center区域，再渲染left区域，最后渲染right区域
代码片段 1
<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″>
<title></title>
<style>
* {
margin: 0;
padding: 0px;
}
.wrapper {
padding: 0 200px 0 150px;
border: 1px solid black;
overflow: hidden;
}
.wrapper .center {
float: left;
width: 100%;
background: #F90;
}
.wrapper .left {
float: left;
margin-left: -100%;
width: 150px;
position: relative;
left: -150px;
background: #6C0;
}
.wrapper .right {
float: left;
margin-left: -200px;
width: 200px;
position: relative;
right: -200px;
background: #F9F;
}
</style>
</head>
<body>
<div class=”wrapper”>
<div class=”center”>
<p>main-wrap</p>
<p>main-wrap</p>
</div>
<div class=”left”>
<p>sub</p>
<p>sub</p>
<p>sub</p>
</div>
<div class=”right”>
<p>extra</p>
<p>margin-left:350px; background:#CC0;margin-left:350px; background:#CC0;</p>
</div>
</div>
</body>
</html>
双飞翼布局，先渲染center区域，再渲染left区域，最后渲染right区域。相比圣杯布局，center区域多了一个标签
代码片段 2
<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″>
<title></title>
<style>
* {
margin: 0;
padding: 0px;
}
.wrapper {
border: 1px solid black;
overflow: hidden;
}
.wrapper .center {
float: left;
width: 100%;
background: #F90;
}
.wrapper .center-wrapper {
margin: 0 200px 0 150px;
}
.wrapper .left {
float: left;
margin-left: -100%;
width: 150px;
background: #6C0;
}
.wrapper .right {
float: left;
margin-left: -200px;
width: 200px;
background: #F9F;
}
</style>
</head>
<body>
<div class=”wrapper”>
<div class=”center”>
<div class=”center-wrapper”>
<p>main-wrap</p>
<p>main-wrap</p>
</div>
</div>
<div class=”left”>
<p>sub</p>
<p>sub</p>
<p>sub</p>
</div>
<div class=”right”>
<p>extra</p>
<p>margin-left:350px; background:#CC0;margin-left:350px; background:#CC0;</p>
</div>
</div>
</body>
</html>
用普通的float实现圣杯布局和双飞翼布局的效果，只是先渲染left区域，再渲染right区域，最后渲染center区域
代码片段 3
<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″>
<title></title>
<style>
* {
margin: 0;
padding: 0px;
}
.wrapper {
border: 1px solid black;
overflow: hidden;
}
.wrapper .center {
width: 100%;
background: #F90;
}
.wrapper .center-wrapper {
margin: 0 200px 0 150px;
}
.wrapper .left {
float: left;
width: 150px;
background: #6C0;
}
.wrapper .right {
float: right;
width: 200px;
background: #F9F;
}
</style>
</head>
<body>
<div class=”wrapper”>
<div class=”left”>
<p>sub</p>
<p>sub</p>
<p>sub</p>
</div>
<div class=”right”>
<p>extra</p>
<p>margin-left:350px; background:#CC0;margin-left:350px; background:#CC0;</p>
</div>
<div class=”center”>
<div class=”center-wrapper”>
<p>main-wrap</p>
<p>main-wrap</p>
</div>
</div>
</div>
</body>
</html>
这里附个等高“效果”（实际上并不是真正意义的等高）的用法，用普通的float实现圣杯布局和双飞翼布局的效果
代码片段 4
<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″>
<title></title>
<style>
* {
margin: 0;
padding: 0px;
}
.wrapper {
border: 1px solid black;
overflow: hidden;
}
.wrapper .center {
width: 100%;
background: #F90;
}
.wrapper .center-wrapper {
margin: 0 200px 0 150px;
}
.wrapper .left {
float: left;
width: 150px;
background: #6C0;
}
.wrapper .right {
float: right;
width: 200px;
background: #F9F;
}
.wrapper .left,
.wrapper .center,
.wrapper .right {
padding-bottom: 2000px;
margin-bottom: -2000px;
}
</style>
</head>
<body>
<div class=”wrapper”>
<div class=”left”>
<p>sub</p>
<p>sub</p>
<p>sub</p>
</div>
<div class=”right”>
<p>extra</p>
<p>margin-left:350px; background:#CC0;margin-left:350px; background:#CC0;</p>
</div>
<div class=”center”>
<div class=”center-wrapper”>
<p>main-wrap</p>
<p>main-wrap</p>
</div>
</div>
</div>
</body>
</html>
页面前端开发与设计的区别吗|web前端开发面试题 校招|web前端常用开发软件下载
» 本文来自：前端开发者 » 《负边距的用处，圣杯布局，双飞翼布局》
» 本文链接地址：https://www.rokub.com/5229.html
» 您也可以订阅本站：https://www.rokub.com
近期评论