一、课程信息
课程名称:一课全面掌握主流CSS布局
课程章节:
- 第1章 从概念讲起
- 第2章 水平居中布局
主讲老师:KingJ
二、课程内容
- 布局的概念
- 居中布局的分类
- 水平居中布局的三种方式及优缺点
三、课程收获
通过学习掌握了CSS水平居中布局的三种方式,通过代码演示和对比三种方式的优缺点,更加深刻认识到了CSS水平居中布局的使用情景。
1.什么是布局
- HTML页面的整体结构或骨架,类似传统报纸或杂志中的排版
- 布局不是某个技术内容,而是一种设计思想
2.居中布局的分类
-
水平居中布局
-
垂直居中布局
-
居中布局(水平+垂直)
3.水平居中布局
- 水平居中布局就是指当前元素在父级元素容器中,水平方向是居中显示的
水平居中布局实现方式
- inline-bllock + text-align属性配合使用
- table + margin属性配合使用
- absolute + transform属性配合使用
- 其他方式(自己探索)
4.水平居中布局的第一种解决方案
<!-- 定义父级元素 -->
<div class="parent">
<!-- 定义子级元素 -->
<div class="child">
慕课网
</div>
</div>
CSS代码实现水平方向居中布局:
.parent{
width: 100%;
height:200px;
background: #ccc;
/*
text-align属性:为文本内容设置对齐方式
* left: 左对齐
* center: 居中对齐
* right: 右对齐
*/
text-align: center;
}
.child{
width: 200px;
height:200px;
background: #c9394a;
/**
display属性:
* block:块级元素
* inline: 内联元素
* inline-block: 行内块级元素(块级+内联)
*/
display: inline-block;
}
优点
浏览器兼容性比较好
缺点
text-align属性具有继承性,导致子级元素的文本也是居中显示的
5.水平居中布局的第二种解决方案
<!-- 定义父级元素 -->
<div class="parent">
<!-- 定义子级元素 -->
<div class="child">
慕课网
</div>
</div>
CSS代码实现水平方向居中布局:
.parent{
width: 100%;
height:200px;
background: #ccc;
}
.child{
width: 200px;
height:200px;
background: #c9394a;
/* display值为table,block都可以,div元素默认为block */
display: table;
/**
margin属性:
* 一个值:上右下左
* 两个值:第一个表示上下,第二个表示左右
* auto: 根据浏览器自动分配
* 三个值: 第一个表示上,第二个表示左右,第三个表示下
* 四个值:上右下左
*/
margin:0 auto;
}
优点
只需要对子级元素进行设置就可以实现水平方向居中
缺点
如果子级元素脱离文档流,导致margin属性的值无效
注意:如何脱离文档流(3个):
- 元素设置为浮动,float 左浮动或右浮动
- 元素设置为绝对定位,absolute
- 元素设置为固定定位
6.水平居中布局的第三种解决方案
<!-- 定义父级元素 -->
<div class="parent">
<!-- 定义子级元素 -->
<div class="child">
慕课网
</div>
</div>
CSS代码实现水平方向居中布局:
.parent{
width: 100%;
height:200px;
background: #ccc;
/* 开启定位 */
position: relative;
}
.child{
width: 200px;
height:200px;
background: #c9394a;
/**
当把当前元素设置为绝对定位后:
* 如果父级元素没有开启定位,当前元素相对页面定位
* 如果父级元素开启定位,当前元素相对父级元素定位
*/
position: absolute;
left: 50%;
transform: translateX(-50%);
}
优点
父级元素是否脱离文档流,不影响子级元素水平居中效果
缺点
transform属性是CSS3中新增属性,浏览器支持情况不好