CSS布局

布局

• 布局是什么——是指把页面分成一块一块，按左中下，上中下排列；
• 布局分类
  • 固定宽度布局，一般宽度为960/1000/1024px(8的倍数)，用于PC;
  • 不固定宽度布局，主要靠文档流的原理来布局，由于手机；
  • 响应式布局，就是手机上不固定，PC端固定，就是一种混合布局；
• 布局思路
  • 从大布局到小布局（熟练后使用）
  • 从小布局到大布局（新手使用）
• 布局需要用到的属性

float布局

• 步骤
  • 子元素加上float：left;和width；
  • 父元素上加.clearfix，为了消除float带来的脱离文档流的影响。

.clearfix{
    content:"";
    display:block;
    clear:both;
}

• 经验
  • 一行中最后要留一些空间或者最后一个不设width，可设max-width；
  • float布局是专门为IE准备的，而手机上没有IE，所以不需要做响应式
  • 随便看看就好，因为兼容IE以前版本比较少
    • IE6/7有一个双倍margin bug，解决方法有两个，一个是把margin减半，一个是加dispaly：inline-block；
• 能做的布局
  • 两栏布局（如顶部条）
  • 三栏布局（如内容区）
  • 四栏布局（如导航）
  • 评价布局（如产品展示区），中间加入一个div，使用负margin。
• 缺点 需要自己计算宽度，不灵活，更适合给IE布局

flex布局

`

    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>

    .container{
        display:flex;/*or inline-flex */
        /* flex设置属性
        flex-direction/flex-wrap/justify-content/align-items/align-content
        */
    }
    .item{
        border:1px solid red;
    

• flex-direction属性，控制items的主轴及流动方向； flex-direction: row(默认属性值，主轴行，items从左到右排列) | row-reverse(item从右往左排列) | column(主轴列，itmes从上到下排列) | column-reverse（items从下到上排列）
• flex-wrap，改变换行方式 flex-wrap: nowrap(默认值，无论父元素多小，都不换行) | wrap（当父元素width比子元素的width和小时换行）| wrap-reverse(父元素width < 子元素width和时，换行且头-尾顺序调换)
• justify-content,主轴对齐方式 justify-content: flex-start(默认值，items靠最左边) | flex-end(items靠右边) | center（items在中间) | space-between(头尾分别靠左右两边，多余width平均分配给中间内容间的空隙) | space-around(多余width平均分配给每个item两边) | space-evenly(items间的空闲width是一样的)
• align-items,次轴对齐方式 aling-items:flex-start(默认值，itmes在父元素上边对齐) | flex-end(items在父元素下边对齐) | center(items在父元素中间对齐) | stetch（将items在次轴上的width拉满) | baseline（仅了解，以items的baseline线对齐）
• align-content，多行内容如何分布，很少用到 align-content: flex-strat(默认值，即在开头位置) | flex-end(在结束位置) | center(在中间) | stetch(除靠近左右两边边框的内容，中间内容之间的空隙是平均分配的) | space-between(均匀分布项目，第一项与起始点齐平，最后一项与终止点齐平) | space-around(每个项目的两端有相等的空间)
• items中
  • 加order，默认值0，数值越小（可为负数）item越靠前，控制items的顺序
  • 加flex-grow，控制item变胖，默认值0，数值是指将父元素剩余width的分配，数值越大，分配越多，item的width越大
  • 加flex-shrink，控制item变瘦，默认值0，数值是指当父元素小于子元素width和时，优先减少谁的width，数值越大，越优先减少。
  • flex-basis,控制基准宽度，默认auto；
  • align-self，控制一个item在次轴的位置，属性值：flex-stard，flex-end。
  • 缩写，`flex: flex-grow flex-shrink flex-basis;
• 其中，常用代码为

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

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

grid布局

如今grid布局虽然功能强大，但兼容性并不好，所以不适合经常用，适用于不规则布局，。

<div class="container">
        <div class="item-1">1</div>
        <div class="item-2">2</div>
        <div class="item-3">3</div>
        <div class="item-4">4</div>
</div>

css
.container{
    display: grid | inline-grid;/*变成grid容器*/
    /*以下就设置了五列三行的布局，也就是有纵线6条，横线4条*/
    grid-template-columns:20px 20px auto 20%;/*设置了五列及其宽度，也可在宽度后写该线的名字，如20px[first]*/
    grid-template-rows: 50% 40px auto;/*设置了三行及其宽度,也可以写线的名字*/
    /*
    grid-template-columns: 1fr 2fr 1fr;
    fr（free space）代表将宽度分成四份，三列各占给的份数，rows也是一样设置。可以将像素百分比fr写在一起。
    */
}
.item-1{
    grid-column-start: 1;
    grid-column-end:3;/*纵线从第一条线开始到第三条线之间就是item-1在column占的范围，也可以写线的名字*/
    grid-row-start :2;
        grid-row-end: 3;/*横线从第二条线开始到第三条线之间是item-1在row上的范围，也可以写线的名字*/
    }

• 下图中，grid-template-areas就是将分好的每个区域命名，然后可以直接给item使用，即item-a占据了名为header的区域，也就是分好的第一行。
• gap是用来是设置item之间的空隙

内容中的图片均来源于：饥人谷。