小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
路难行，行路难，一身汗水，满心长。脚下百里路，头顶艳阳天。坚定如磐石，信念似火烧。好男儿，人穷志不缺，天道也酬勤。四方走，走四方，一身是胆，豪气壮。前方坎坷途，千难万般阻。心若有明灯，身似般若行。好男儿，大志存高远，四海皆为家。
什么是布局
所谓的布局, 就是 HTML 页面的结构。实现布局是要通过 HTML 元素和 CSS 样式结合。
布局特别想盖楼的时候的设计图纸。
布局的分类
目前比较流行的布局:
- 居中布局: 水平方向居中布局、垂直方向居中布局以及水平和垂直都居中的布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>居中布局</title>
<style>
.q {
width: 1662px;
height: 300px;
background-color: blueviolet;
vertical-align: middle;
display: table-cell;
}
.q1 {
width: 300px;
height: 300px;
background-color: burlywood;
display: table;
margin: 0 auto;
}
.a {
width: 1000px;
height: 600px;
background-color: chartreuse;
position: relative;
}
.a1 {
width: 200px;
height: 200px;
background-color: coral;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="q">
<div class="q1"></div>
</div>
<div class="a">
<div class="a1"></div>
</div>
</body>
</html>
-
多列布局: 两列布局和三列布局、等分布局和等高布局(圣杯布局和双飞翼布局)
-
全屏布局
从技术角度分化的话:
-
CSS3 新增的弹性(flex)盒子模型
-
CSS3 新增的网格(grid)布局
根据场景不同, 也可以这样划分:
-
响应式布局: 一个 HTML 既可以在 PC 电脑端浏览器打开, 也可以在移动端浏览器打开
-
移动端布局: 在手机端或平板电脑端浏览器打开
之前比较流行的布局:
-圣杯布局(三行三列布局)
-
双飞翼布局(优化版的圣杯布局, 淘宝前端团队推出的)
-
瀑布流布局
两列布局
所谓的两列布局, 并不是简单将两个元素水平排列, 而是一列是定宽的, 另一列是自适应的。
-
其中一列是定宽: 将该元素的宽度设置为固定的宽度
-
其中一列是自适应: 除了定宽之外所有的宽度都为第二列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>两列布局</title>
<style>
.q {
width: 800px;
height: 300px;
border: 1px solid #000;
}
.q1 {
width: 200px;
height: 300px;
background-color: indianred;
float: left;
}
.q2 {
height: 300px;
background-color: indigo;
margin-left: 200px;
}
</style>
</head>
<body>
<div class="q">
<div class="q1"></div>
<div class="q2"></div>
</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>三列布局</title>
<style>
.q {
width: 800px;
height: 300px;
border: 1px solid #000;
display: table;
table-layout: fixed;
}
.q1,
.q2,
.q3 {
display: table-cell;
}
.q2,
.q3 {
width: 200px;
height: 300px;
}
.q2 {
background-color: indianred;
}
.q3 {
background-color: lightgrey;
}
.q1 {
height: 300px;
background-color: indigo;
}
</style>
</head>
<body>
<div class="q">
<div class="q1"></div>
<div class="q2"></div>
<div class="q3"></div>
</div>
</body>
</html>
