前言
读者朋友,你好!欢迎阅读本篇文章。在读本文章之前,我们来想想为什么HTML要布局,以及好的布局给我们的网页带来了什么好处,说说你知道的经典布局有哪些,你是怎么实现这些布局的。
DIV+CSS布局的优点
- 大幅度缩减了页面页面代码,提高了页面的加载速度
- 优化代码结构,提高了代码的可维护性和可读性
- 拥有清晰的结构,容易被SEO优化
- 更好的控制页面,及时更新以及重制页面
- 兼容性好…
常见的布局有哪些
- 水平居中布局
- 垂直居中布局
- 居中布局
- 两列布局
- 三列布局
- 等分布局
- 圣杯布局
- 双飞翼布局
- 全屏布局
下面我带领大家一起学习这些布局,并使用代码将其实现,如果你有什么更好的实现方法,也欢迎在评论区留言,一起学习CSS布局。
水平居中布局
水平居中布局是几种布局最常见也最容易实现的布局,我总结一下,大概有一下几种方式
- 使用margin设置margin左右为auto
- 利用text-left设置文本对齐方式
- 开启定位,使用left和transform
<div id="parent">
<div id="child"></div>
</div>
/* 第一种方式 */
#parent {
width: 100%;
height: 200px;
background: #fff;
}
#child {
width: 200px;
height: 200px;
background: #000;
margin: 0 auto;
}
/* 第二种方式 */
<style>
#parent {
width: 100%;
height: 200px;
background: #fff;
text-align: center;
}
#child {
width: 200px;
height: 200px;
background: #000;
display: inline-block;
text-align: left;
}
</style>
/* 第三种方式 */
#parent {
width: 100%;
height: 200px;
background: #fff;
position: relative;
}
#child {
width: 300px;
height: 200px;
background: #000;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
</style>
垂直居中布局
- 设置display为table-cell设置vertical-align为middle
- 开启定位,使用left和transform
<style>
/* 第一种方式 */
#parent {
width: 200px;
height: 600px;
background: #fff;
vertical-align: middle;
}
#child {
width: 200px;
height: 200px;
background: #000;
}
</style>
<style>
/* 第二种方式 */
#parent {
width: 200px;
height: 600px;
background: #fff;
position: relative;
}
#child {
width: 200px;
height: 200px;
background: #000;
position: absolute;
top: 50%;
transform: translateY(-50%)
}
</style>
居中布局
- 使用table-cell属性,和margin设置居中
- 开启定位,设置left-top属性,以及transform
/* 第一种方式 */
<style>
/* 第一种方式 */
#parent {
width: 1000px;
height: 600px;
background: #fff;
display: table-cell;
vertical-align: middle;
}
#child {
width: 200px;
height: 200px;
background: #000;
display: block;
margin: 0 auto;
}
</style>
<style>
/* 第二种方式 */
#parent {
width: 1000px;
height: 600px;
background: #fff;
position: relative;
}
#child {
width: 200px;
height: 200px;
background: #000;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
两列布局
两列布局,设置左侧定宽,右侧为自适应,其他情况也类似
- 开启定位,设置浮动
<div id="left"></div>
<div id="right-fix">
<div id="right">
<div id="inner"></div>
</div>
</div>
<style>
#left,
#right {
height: 300px;
}
#left {
/* 定宽 */
width: 400px;
background-color: #c9394a;
float: left;
position: relative;
}
#right-fix {
float: right;
width: 100%;
margin-left: -400px;
background-color: hotpink;
}
#right {
background-color: #cccccc;
}
#inner {
background-color: green;
height: 300px;
clear: both;
}
</style>
- 开启BFC模式,当前元素的内部环境与外界完全隔离
<div id="left"></div>
<div id="right"></div>
<style>
#left,
#right {
height: 300px;
}
#left {
/* 定宽 */
width: 400px;
background-color: #c9394a;
float: left;
}
#right {
background-color: #cccccc;
overflow: hidden;
}
- 利用table属性,实现两列布局
<div id="parent">
<div id="left"></div>
<div id="right"></div>
</div>
#parent {
display: table;
table-layout: fixed;
width: 100%;
}
#left,
#right {
height: 300px;
display: table-cell;
}
#left {
width: 400px;
background-color: #c9394a;
}
#right {
background-color: #cccccc;
}
</style>
结尾
限于篇幅,就写到这里了,剩余的没完成的部分,我会在另一篇文章中继续书写,欢迎留言区指正和讨论,一起学习。哈哈哈哈