圣杯布局
三栏布局,左右两栏宽度固定,中间一栏宽度随屏幕宽度自适应1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46<body>
<div id="header">#header</div>
<div id="container">
<div id="center" class="column">#center</div>
<div id="left" class="column">#left</div>
<div id="right" class="column">#right</div>
</div>
<div id="footer">#footer</div>
</body>
<style type="text/css">
body {
min-width: 550px; /* 2x LC width + RC width */
}
#container {
padding-left: 200px; /* LC width */
padding-right: 150px; /* RC width */
}
#container .column {
position: relative;/* 让左右两栏进行相对位移，位移到container的内边距位置 */
min-height: 200px;/* 高度自适应*/
float: left;
}
#center {
width: 100%;
background-color: #e9e9e9;
}
#left {
width: 200px; /* LC width */
right: 200px; /*LC width *//*相对于 container 的右边线向左偏移 200px 将自己位移到container内边距 */
margin-left: -100%;/*浮动到与中间平行 */
background-color: red;
}
#right {
width: 150px; /* RC width */
margin-right: -150px; /* RC width */
background-color: blue;
}
#footer {
clear: both;/*清除 footer 的上下环境，以免遭跟上面三栏一起浮动*/
}
#header,
#footer {
background-color: #c9c9c9;
}
</style>
flex 实现 圣杯布局1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66<!doctype html>
<html>
<head>
</head>
<body>
<header>header</header>
<section>
<nav>nav</nav>
<article>article</article>
<aside>aside</aside>
</section>
<footer>footer</footer>
</body>
<style>
body{
display: flex;
flex-flow: column wrap;
justify-content:flex-start;
}
header,section,nav,aside,footer{
display: block;
}
header{
order: 1;
width: 100%;
min-height: 100px;
padding: 10px 20px;
background-color: antiquewhite;
}
section{
flex: 1;
order: 2;
min-width: 100%;
margin: 20px 0;
display: flex;
}
footer{
order: 3;
min-height: 60px;
min-width: 100%;
padding: 1%;
background-color: burlywood;
}
nav{
order:1;
width: 220px;
padding: 1%;
background-color: aquamarine;
}
article{
flex: 1;/* 可伸缩 */
order:2;
padding: 1%;
margin:0 2%;
background-color: blue;
word-break: break-all;
}
aside{
order:3;
width:220px;
padding: 1%;
background-color: aqua;
}
</style>
</html>
双飞翼布局
效果同圣杯布局，只是写法上DOM在center里面新增加了div,css不再使用relative定位，只是用float和外边距1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44<div id="header">header</div>
<div id="container">
<div id="center" class="column">
<div id="innerCenter">center</div>
</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>
</div>
<div id="footer">footer</div>
<style type="text/css">
body {
min-width: 351px; /* LC width + RC width +1*/
}
#container .column {
min-height: 200px;
float: left;
}
#innerCenter { /*代替圣杯container的padding处理*/
margin-left: 200px;
margin-right: 150px;
}
#center {
width: 100%;
background-color: #e9e9e9;
}
#left {
width: 200px;
margin-left: -100%;
background-color: red;
}
#right {
width: 150px;
margin-left: -150px;
background-color: blue;
}
#footer {
clear: both;
}
#header, #footer {
background-color: #c9c9c9;
}
</style>
7种垂直居中
1 | 1.tabel自带 |
清除浮动
1.在父元素上添加样式overflow:hidden/auto
2.给父元素设置高度或者添加float属性（使之成为浮动元素）
3.在子元素结尾添加空div标签或者br标签，或者给父元素添加:after伪类，设置属性clear：both1
2
3
4
5
6.clearfix::after{
content: ''; display: block; clear:both;
}
.clearfix{
zoom: 1; /* IE 兼容 */
}
多列布局
column-width —— 列宽,不设置时由其他属性决定
column-count —— 列数,不设置时由其他属性决定
columns —— column-width column-count
column-gap —— 列间距
column-rule —— 间距线，位于列间距中间，介于background和content之间，宽度大于列间距时消失
宽度 样式 颜色
column-fill —— 各列宽度
auto 随内容自动调整 |balance 以内容最多一列统一高度
column-span —— 子元素是否合并列
none/all
静态布局：尺寸不变，布局不变
自适应布局：为不同尺寸屏幕设计不同静态布局
流式布局：通过更改模块大小，保证整体布局
响应式布局：针对不同尺寸屏幕，设计不同流式布局
弹性布局：可以设置模块大小放缩保证布局，也可以固定模块大小，更改布局
各种布局概念区分
react涉及布局
相关资料
CSS布局 ——从display，position， float属性谈起