CSS布局

布局#

CSS 布局#

• CSS知识体系的重中之重
• 早期以table为主（简单）
• 后来以技巧性布局为主（难）
• 现在有flexbox/grid（偏简单）
• 响应式布局是必备知识

常用布局方法#

• table 表格布局
• float 浮动+margin
• inline-block 布局
• flexbox 布局

布局属性#

盒子模型

设置布局的两个基本属性 display/position#

• 确定元素的显示类型
  • block(块级元素)/inline(内联元素或者叫行内元素)/inline-block(行内块级元素)
• 确定元素位置
  • static/relative/absolute/fixed

position:

• relative: 根据元素原来的位置进行偏移
• absolute: 脱离文档流，不会对其他元素造成影响 相对于最近的 absolute或relative进行偏移
• fixed: 脱离文档流，是相对于屏幕 可视区域 固定的

z-index: 定义层级 设置谁显示在最上方，越大就越在最上，对设置了relative,absolute,fixed的有用

flexbox布局#

• 弹性盒子
• 盒子本来就是并列的
• 指定宽度即可

.container {
  display: flex;
}
.flex {
  flex: 2
}

//如果想设置固定的宽度
.xxx {
  width: 50px;
  flex: none;
}

<div class="container">
  <div class="flex">
      xxxx
  </div>
</div>

float布局#

• 元素浮动
• 脱离文档流
• 但不会脱离文本流

float#

• 对自身的影响

  • 形成“块” （BFC）
  • 位置尽量靠上
  • 位置尽量靠左(右) 在靠上的前提下

• 对兄弟的影响

  • 上面贴非float元素
  • 旁边贴float元素
  • 不影响其他块级元素位置
  • 影响其他块级元素内部文本

• 对父级元素的影响

  • 从布局上“消失”
  • 高度塌陷

• 清除浮动

  • overflow: hidden(auto)

 .container2::after{
            content: 'ffff';
            clear: both;
            display: block;
            height: 0;
            visibility: hidden;
        }

2栏布局#

<style>
        .container{
            width: 800px;
            height: 200px;
        }
        .left{
            background: blue;
            float: left;
            height: 100%;
            width: 200px;
        }
        .right{
            background: red;
            margin-left: 200px;
            height: 100%;
        }
</style>
<div class="container">
        <div class="left">
            left
        </div>
        <div class="right">
            right
        </div>
</div>

3栏布局#

    <style>
        .container{
            width: 800px;
            height: 200px;
        }
        .left{
            background: blue;
            float: left;
            height: 100%;
            width: 200px;
        }
        .right{
            background: red;
            float: right;
            width: 200px;
            height: 100%;
        }
        .middle{
            margin-left: 200px;
        }

    </style>

    <div class="container">
        <div class="left">
            left
        </div>
        <div class="right">
                right
            </div>
        <div class="middle">
            middle
        </div>
    </div>