CSS 布局

这篇文章，咱们来整理一下 CSS 布局相关内容

布局是什么

布局是把页面分红一块一块，按左中右、上中下等排列。

布局分类

1. 固定宽度布局，通常宽度为 960 / 1000 / 1024px
2. 不固定宽度布局，主要靠文档流的原理布局
3. 响应式布局，在PC上固定宽度，在手机上不固定宽度的一种混合布局

布局思路

1. 从大到小，先定下大局，而后晚上每一个部分的小布局
2. 从小到大，先完成小布局，而后组成大布局

用什么 CSS 布局

1. 若是须要兼容 IE9 ，那咱们使用 float 布局
2. 若是不须要兼容 IE9 。那么，若是只兼容最新浏览器，那咱们使用 grid 布局
3. 若是不止兼容最新浏览器，那咱们使用 flex 布局。

注意： 使用 float 布局 和 flex 布局时，必要时采用负 margin 。

float 布局

步骤

1. 子元素上加 float: left 和 width
2. 父元素上加 .clearfix

.clearfix{
    content: '';
    display:block;
    clear: both;
}
复制代码

使用 float 布局，通常会留一些空间或者最后一个不设 width。

注意: IE 6/7 存在双倍 margin 的bug，经过以下办法解决

1. 针对 IE 6/7 ，把 margin 减半，使用 _margin
2. 给元素再加一个 display: inline-block

tips:

• 有时候 border 会干扰宽度，能够用 outline 替换
• 经过 margin: 0 auto; 能够设置居中。能够优化为 margin-left: auto; margin-right: auto; 。若是是一个块级元素，左右外边距 auto 能够直接让元素居中

flex 布局

关于 flex 布局，咱们经过两部分样式来介绍

container 容器，为包裹区域

.container{/* 让元素变成一个 flex 容器 */
    display: flex | inline-block; 
}
复制代码

.container{/* 改变 item 流动方向(主轴)，默认 row */
    flex-direction: row | row-reverse | column | column-reverse;
}
复制代码

.container{/* 改变折行，默认 nowrap 。折行不会把元素断开 */
    flex-wrap: nowrap | wrap | wrap-reverse;
}
复制代码

.container{/* 主轴对齐方式，默认 flex-start */
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
复制代码

.container{/* 次轴对齐方式，默认 stretch ，子元素拉到最长的元素同样高 */
    align-items: stretch | flex-start | flex-end | center | baseline;
}
复制代码

.container{/*多行内容，决定了行之间的间隔*/
    align-content: flex-start | flex-end | center | stretch | space-between | space-around;
}
复制代码

补充：flex-flow 能够合并 flex-direction 和 flex-wrap 使用

items 为容器内的每个元素

• order ，默认是 0 ，若是把 order 改为一个数，就会按 order 从小到大排列
• flex-grow ，控制变胖，若是有多余的空间，按照值分配宽度，不写就不分配。例如导航栏，只设置导航栏 flex-grow: 1，宽度剩余全给导航栏
• flex-shrink，控制变瘦，通常写 flex-shrink: 0 防止变瘦，默认是 1
• flex-basis，控制基准宽度，默认是 auto ，能够直接用宽度代替
• flex: flex-grow flex-shrink flex-basis
• align-self，定制父元素的 align-items

items 设置 margin-left: auto，效果和 justify-content: space-between 同样，可使 items 靠右，推荐使用 margin-left

注意：永远不要把高度和宽度写死

Grid 布局

Grid 也分为 container 和 items

.container{
    display: grid | inline-grid;
}
复制代码

.container{/*行和列*/
    grid-template-columns: 40px 50px auto 50px 40px;
    gird-template-rows: 25% 100px auto;
}
复制代码

.container{/*等比分布局*/
    grid-template-columns: 1fr 1fr 1fr;
}
复制代码

.container{/*固定一块布局列宽，其他等比分配剩余宽度*/
    grid-template-columns: 1fr 50px 1fr 1fr;
}
复制代码

.container{/*还能够给每条线设置名字*/
    grid-template-columns:[first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
    grid-template-rows:[row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}
复制代码

.item-a{/*针对上述设置，item能够设置范围*/
    grid-column-start: line2;
    grid-column-end: five;
    grid-row-start: row1-start;
}
复制代码

经过 grid-template-areas 设置分区

.container{
    display: grid;
    grid-template-columns: repeat(4, 50);/*重复设置*/
    gird-template-rows: auto;
    grid-template-areas:
        "header header header header"
        "main main sider"
        ". footer footer footer";/*不但愿出现内容的区域，一般用 . 命名*/
}
.item-a{
    grid-area: header;
}
.item-b{
    grid-area: main;
}
.item-c{
    grid-area: sider;
}
复制代码

空隙 gap

.container{
    grid-template-columns: 100px 50px 100px;
    grid-template-rows: 80px auto 80px;
    grid-column-gap: 10px;
    grid-row-gap: 15px;
}
复制代码

结语：一维布局选 Flex ，二维布局选Grid，Grid 尤为适合不规则的布局。