【学习打卡】第4天 CSS两列布局

一、课程信息

课程名称：一课全面掌握主流CSS布局

课程章节：第5章 两列布局

主讲老师：KingJ

---

二、课程内容

• 多列布局的概念和分类
• 两列布局的概念和实现方式
• 两列布局的三种方式及优缺点

---

三、课程收获

通过学习掌握了CSS两列布局的三种方式，通过代码演示和对比三种方式的优缺点，更加深刻认识到了CSS两列布局的使用情景。

1 什么是多列布局

概念

简单来说，就是几个元素呈现水平方式排列的效果

多列布局的分类

• 两列布局（定宽+自适应）
• 三列布局
• 圣杯布局
• 双飞翼布局
• 等分布局
• 等高布局
• CSS3多列布局

2 什么是两列布局

概念

两列布局一般情况下是指定宽与自适应布局，两列中左列是确定的宽度，右列是自动填满剩余所有空间的一种布局效果。

实现方式

• float + margin属性配合使用
• float + overflow属性配合使用
• display属性的table相关值使用

3 两列布局之方案一

示例

<!-- 定义父级元素 -->
<div class="parent">
    <div class="left">左：定宽</div>
    <div class="right">右：自适应</div>
</div>

CSS代码实现垂直方向居中布局：

.parent{
  width: 1000px;
  height: 600px;
  background: #ccc;
  
}
.left,.right{
  height: 300px;
}
.left{
  width: 300px;
  background: #c9394a;
  /* 设置浮动，当前元素脱离文档流 */
  float: left;

}
.right{
  background: #cccccc;
  margin-left: 300px;
}

优点

实现方式简单

缺点

自适应元素margin属性值与定宽元素的width属性值保持一致

定宽元素浮动与自适应元素不浮动导致浏览器兼容性不好

优化版

<!-- 定义父级元素 -->
<div class="parent">
    <div class="left">左：定宽</div>
    <div class="right-fix">
        <div class="right">右：自适应</div>
    </div>
</div>

CSS代码实现垂直方向居中布局：

.parent{
  width: 1000px;
  height: 600px;
  background: #ccc;
}
.left,.right{
  height: 300px;
}
.left{
  width: 300px;
  background: #c9394a;
  /* 设置浮动，当前元素脱离文档流 */
  float: left;
  /* 设置显示层级更高 */
  position: relative;
}
.right-fix{
  float: right;
  background: #fcfcfc;
  width： 100%;
  margin-left: -300px;
}
.right{
  background: #cccccc;
}

4 两列布局之方案二

示例

<!-- 定义父级元素 -->
<div class="parent">
    <div class="left">左：定宽</div>
    <div class="right">右：自适应</div>
</div>

CSS代码实现垂直方向居中布局：

.left,.right{
  height: 300px;
}
.left{
  width: 400px;
  background: #c9394a;
  /* 设置浮动，当前元素脱离文档流 */
  float: left;

}
.right{
  background: #cccccc;
  /* 开启BFC模式 - 当前元素的内部环境与外界环境隔离 */
  overflow： hidden;
}

优点

上述解决方案中的问题在此解决方案中都没有

缺点

overflow属性不仅解决了两列布局，同时设置了内容溢出的情况

兼容性？？？非常好，BFC模式

5 两列布局之方案三

示例

<!-- 定义父级元素 -->
<div class="parent">
    <div class="left">左：定宽</div>
    <div class="right">右：自适应</div>
</div>

CSS代码实现垂直方向居中布局：

.parent{
  /* 表格的单元格的宽度会自动分配 */
  display: table;
  width: 100%;
  table-layout: fixed;
}
.left,.right{
  height: 300px;
  display: table-cell;
}
.left{
  width: 400px;
  background: #c9394a;
}
.right{
  background: #cccccc;
}

优点

浏览器兼容性比较好

缺点

将所有元素的display属性设置为table相关值，收到相应制约

---

四、学习截图