CSS 布局

布局分类

两种

• 固定宽度布局，一般宽度为 960/1000/1024px
• 不固定宽度布局，主要靠文档流的原理来布局（文档流本来就是自适应的，不需要加额外的样式）

第三种布局

• 响应式布局
• PC上固定宽度，手机上不固定宽度
• 一种混合布局

布局的两种思路

从大到小（老手）

• 先定下大局
• 然后完善各个部分的小布局

从小到大（新手）

• 先完成小布局
• 然后组合成大布局

用什么CSS布局

需要兼容 IE9

• 使用 float 布局
• 左浮两个，固定宽度，不要响应式
• 给父元素添加 clearfix
• 必要时候采用 负margin

不需要兼容 IE9 只兼容最新浏览器

• grid 布局

不需要兼容 IE9 和 兼容旧手机

• 用 flex 布局
• 必要时候采用 负margin

float 布局

步骤

• 去掉默认布局

*{margin:0; padding:0; box-sizing:border-box}

• 子元素上加 float: left 和 width
• 在父元素上加 .clearfix

.clearfix::after{
  content: '';
  display: block;
  clear: both;
}

• 如果图片下面有多余的东西加上下面代码

vertical-align: middle;

border 之外的另一个调试方法

• outline 用法与border相同，并且不会占宽度

布局的居中设置

margin: 0 auto;   // 不够好

// 最好用下面这两句
margin-left: auto;
margin-right: auto;

• 平均布局用 负 margin

技巧

• 留一些空间或者最后一个不设 width
• 不需要做响应式，因为手机上没有 IE，这个布局是为 IE 准备的
• IE 6/7 存在双倍 margin bug，解决办法：
• 一是针对 IE 6/7 把 margin 减半
• 二是再加一个 display: inline-block

flex 布局

容器 container

• container （容器）
• items（内部元素）

让一个元素变成 flex 容器

.container{
    display: flex; /* or inline-flex */
}

• display: flex（元素会占一行）
• display: inlin-flex（元素会并在一行）

改变 items 流动方向（主轴）

.container{
    flex-direction: row | row-reverse | column | column-reverse;
}

改变折行

.container{
    flex-wrap: nowrap | wrap | wrap-reverse;
}

主轴对齐方式

.container{
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
}

• 小技巧：用 margin-left: auto 也可以使元素靠右

次轴对齐

• 默认次轴是纵轴

.container{
    align-items: stretch | flex-start | flex-end | center
}

多行内容

• 如何分布

.container{
    align-content: flex-start | flex-end | center | stretch | space-between | space-around
}

flex item 有哪些属性

item 上面加 order

• 默认 order 都是 0
• 设置 order 可以按小到大顺序排列

item 上面加 flex-grow

• 控制自己如何长胖

flex-grow: 1/2/3/0/...

flex-shrink 控制如何变瘦

• 一般写 flex-shrink:0 防止变瘦，默认是1
• 有宽度的时候会出现

flex-basis 控制基准宽度

• 默认是 auto

flex-grow 和 flex shrink 一起写

• flex: flex-grow flex-shrink px

align-self 定制 align-items

• 在某一个 item 上加上 align-self

重点

工作中常用代码

display: flex
flex-direction: row/column
flex-wrap: wrap
just-content: center/space-between
align-items: center

注意

• 不要把 width 和 height 写死，除非特殊说明
• 用 min-width / max-width / min-height / max-height
• flex 可以基本满足所有需求
• flex 和 margin-xxx: auto 配合有意外效果

Grid 布局

Grid 也分 container 和 items

• 成为 container

.container{
    display: grid | inline-grid;
}

• 行和列

.container{
    grid-template-columns: 40px 50px auto 50px 40px;
    grid-template-rows: 25% 100px auto;
}

• 可以给线取名字

.container{
    grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 50px [end];
    grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

• 可以给 item 设置范围

.item-a {
    grid-column-start: 2;
    grid-column-end: five;
    grid--start: row1-start;
    grid-row-end: 3;
}

fr - free space

.container{
    grid-template-columns: 1fr 1fr 1fr;
}

.container{
    grid-template-columns: 1fr 50px 1fr 1fr;
}

分区 grid-template-areas

.team-a{
    grid-area: header;
}

.team-b{
    grid-area: main;
}

.team-c{
    grid-area: sidebar;
}

.team-d{
    grid-area: footer;
}

.container{
display: grid;
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer"
}

空隙 gap

.container{
    grid-template-columns: 100px 50px repeate(4, 100px);
    grid-template-rows: 80px auto 80px;
    grid-column-gap: 10px;
    grid-row-gap: 15px;
}