首页手记【学习打卡】第1天 CSS水平居中布局

【学习打卡】第1天 CSS水平居中布局

标签：

Html/CSS

一、课程信息

课程名称：一课全面掌握主流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%);
}