1 布局
单列布局
单列布局是将头部、内容区、底部在页面上垂直排列，是非常实用的一种布局方式。主要对三个区域的宽度进行统一，然后通过设置自动外边距进行居中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 500px;
}
header,
section,
footer {
margin: 10px auto;
width: 360px;
border: 1px solid black;
}
header,
footer {
height: 32px;
}
</style>
</head>
<body>
<header></header>
<section><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></section>
<footer></footer>
</body>
</html>
双列布局
BFC
- 什么是BFC：具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
- 什么可以使元素具有BFC特性：
- body 根元素
- 浮动元素：float 除 none 以外的值
- 绝对定位元素：position (absolute、fixed)
- display 为 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
- BFC 可以包含浮动的元素（清除浮动）
-
子元素没有浮动时
-
子元素浮动、父元素没有触发BFC
-
子元素浮动、父元素触发BFC
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.out {
border: 1px solid #000;
overflow: hidden;
}
.in {
width: 100px;
height: 100px;
background-color: #eee;
float: left;
}
</style>
</head>
<body>
<div class="out">
<div class="in"></div>
</div>
</body>
</html>
- 实现两列布局-BFC
- 父元素触发BFC
- 子元素1浮动，子元素2不浮动，父元素高度取两个子元素中高的一个
- 如下例，子元素1会覆盖子元素2，可对子元素2使用margin-left: 100px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
border: 1px solid black;
overflow: hidden;
}
.left {
border: 1px solid black;
float: left;
width: 100px;
background-color: pink;
}
.right {
margin-left: 100px;
background-color: greenyellow;
}
</style>
</head>
<body>
<section class="container">
<article class="left"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></article>
<article class="right"><br /></article>
</section>
</body>
</html>
- 实现两列布局-绝对定位
- 父元素需要设置定位属性
- 父元素高度无法被撑开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
}
.left {
border: 1px solid black;
position: absolute;
left: 0;
width: 100px;
}
.right {
border: 1px solid black;
position: absolute;
right: 0;
left: 100px;
}
</style>
</head>
<body>
<section class="container">
<article class="left"><br /><br /><br /><br /></article>
<article class="right"><br /><br /><br /></article>
</section>
</body>
</html>
- 实现两列布局-flex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
border: 1px solid black;
display: flex;
}
.left {
border: 1px solid black;
width: 100px;
}
.right {
border: 1px solid greenyellow;
flex: 1;
}
</style>
</head>
<body>
<section class="container">
<article class="left"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></article>
<article class="right"></article>
</section>
</body>
</html>
- 实现两列布局-grid
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
border: 1px solid black;
display: grid;
grid-template-columns: 100px 1fr;
}
.left {
border: 1px solid black;
}
</style>
</head>
<body>
<section class="container">
<article class="left"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></article>
<article class="right"></article>
</section>
</body>
</html>
- 实现三列布局-浮动
- 浮动元素要写在内容元素之前，否则布局是混乱的
- 优点：兼容性好、实现简单
- 缺点：要清除浮动
- 为防止内容元素被遮挡，需要给内容元素添加margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
border: 1px solid black;
overflow: hidden;
}
.left {
border: 1px solid black;
background-color: pink;
float: left;
width: 100px;
}
.right {
border: 1px solid black;
background-color: greenyellow;
float: right;
width: 100px;
}
.center {
background-color: skyblue;
margin: 0 100px;
}
</style>
</head>
<body>
<section class="container">
<article class="left"><br /><br /><br /></article>
<article class="right"><br /><br /><br /></article>
<article class="center">aaaaaaaaaaaaaa</article>
</section>
</body>
</html>
- 实现三列布局-绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
}
.left {
position: absolute;
border: 1px solid black;
left: 0;
width: 100px;
}
.center {
position: absolute;
border: 1px solid black;
left: 100px;
right: 100px;
}
.right {
position: absolute;
border: 1px solid black;
right: 0;
/* width: 100px; */
}
</style>
</head>
<body>
<section class="container">
<article class="left"><br /><br /></article>
<article class="center"><br /><br /><br /></article>
<article class="right"><br /><br /><br /><br /></article>
</section>
</body>
</html>
- 实现三列布局-flex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
}
.left {
border: 1px solid black;
width: 100px;
}
.center {
border: 1px solid black;
flex: 1;
}
.right {
border: 1px solid black;
width: 100px;
}
</style>
</head>
<body>
<section class="container">
<article class="left"><br /><br /></article>
<article class="center"><br /><br /><br /></article>
<article class="right"><br /><br /><br /><br /></article>
</section>
</body>
</html>
- 实现三列布局-grid
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: grid;
grid-template-columns: 100px 1fr 100px;
}
.left {
border: 1px solid black;
/* width: 100px; */
}
.center {
border: 1px solid black;
/* flex: 1; */
}
.right {
border: 1px solid black;
/* width: 100px; */
}
</style>
</head>
<body>
<section class="container">
<article class="left"><br /><br /></article>
<article class="center"><br /><br /><br /></article>
<article class="right"><br /><br /><br /><br /></article>
</section>
</body>
</html>
三列布局-圣杯布局
这篇讲的很清楚,圣杯布局就是将基本布局之后使用向左浮动，middle栏留出两边位置，然后使用相对定位将左右两栏通过margin-left定位到相应位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.content {
overflow: hidden;
padding: 0 100px;
}
.header {
background-color: pink;
}
.left {
background-color: greenyellow;
width: 100px;
float: left;
position: relative;
margin-left: -100%;
right: 100px;
}
.middle {
background-color: darkorange;
width: 100%;
float: left;
min-width: 100px;
}
.right {
background-color: darkgreen;
width: 100px;
float: left;
margin-right: -100px;
}
.footer {
background-color: skyblue;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="content wrapper">
<div class="middle">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
双飞翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.header {
background-color: pink;
}
.left {
background-color: greenyellow;
width: 100px;
float: left;
margin-left: -100%;
}
.middle {
background-color: darkorange;
float: left;
width: 100%;
}
/* 直接在.middle上设置padding，布局会乱 */
.main-wrapper {
padding: 0 100px;
}
.right {
background-color: darkgreen;
width: 100px;
float: left;
margin-left: -100px;
}
.footer {
background-color: skyblue;
clear: both;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="main middle"><div class="main-wrapper">middle</div></div>
<div class="left">left</div>
<div class="right">right</div>
<div class="footer">footer</div>
</body>
</html>