css grid随页面大小_CSS布局笔记

本资料来源于饥人谷

布局是什么

把页面分成一块一块，按左中右、上中下等排列

布局种类

1. 固定宽度布局，一般宽度为960/1000/1024 px
2. 不固定宽度布局，主要靠文档流的原理来布局，文档流本来就是自适应的，不需要增加额外的样式。
3. 响应式布局，即PC上固定宽度，手机上不固定宽度，说白了就是混合布局。

布局的两种思路

1. 从大到小：先定下大局，然后完善每个部分的小布局。
2. 从小到大：先完成小布局，然后组成大布局。

布局需要用到哪些属性

float布局

步骤

1. 在子元素上加float:left和width(脱离文档流)
2. 在父元素上加.clearfix(重新包裹住子元素)

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

第一次写CSS代码，记录一下reset

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

经验

1. 有经验者会留一些空间或者最后一个不设width
2. 不需要做响应式，因为手机上没有IE，而这个布局是专门为IE准备的
3. IE6/7存在双倍margin bug,解决方法：
   1. 针对IE6/7把margin减半
      margin-left:10px;/*普通浏览器*/
      _margin-left:5px;/*IE浏览器*/
   2. 神来一笔:再加一个display：inline-block

实践

不同布局

1. 用float做四栏布局（如导航）

JS Bin​js.jirengu.com

2.用float做平均布局（如产品展示区）

JS Bin​js.jirengu.com

outline可以用来代替border 因为其不占宽度

经验

1. 加上头尾，即可满足所有PC页面需求
2. 手机页面不用float
3. float要程序员自己计算宽度，不灵活
4. float用来应付IE足矣

flex布局

容器container

flex container的样式

让一个元素变成flex容器

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

改变items流动方向（主轴）

.container{
    flex-direction:row(默认)/row-reverse/column/colunmn-reverse;
}

改变折行

.container{
    flex-wrap:nowrap（默认）/wrap/wrap-reverse;
}

主轴对齐方式

默认主轴是横轴 除非你改变了flex-direction方向

.container{
    justify-content:flex-start（默认）/flex-end/space-between/space-around/space-evenly
}

次轴对齐

默认次轴是纵轴

.container{
    align-items:stretch(默认）/flex-start/flex-end/center/baseline(很少用)
}

多行内容

.container{
    justify-content:flex-start（默认）/flex-end/space-between/space-around/center/stretch
}

flex item

item上面加order的属性

order默认是0 可以通过改变order改变item排列顺序

.item:first-child/*这段代码不能有空格*/{order:100;}
.item:nth-child(2){order:1;}
.item:nth-child(3){order:3;}
.item:nth-child(4){order:4;}
.item:last-child{order:5;}
​

item上面加flex-grow

flex-grow默认是0 可以通过改变flex-grow改变item空间分配

.item:first-child{
    flex-grow:1;
}
.item:nth-child(2){
    flex-grow:2;
}
.item:nth-child(3){
    flex-grow:1;
}

flex-shrink控制如何变瘦

空间小于原始宽度时才会起作用

.item{
    height:50px;
    width:150px;
}
.item:first-child{
    flex-shrink:1;
}
.item:nth-child(2){
    flex-shrink:5;
}
.item:first-child(3){
    flex-shrink:1;
}

一般写flex-shrink：0防止变瘦，默认是1

flex-basis控制基准宽度

默认是auto

flex:flex-grow flex-shrink flex-basis

缩写：空格隔开

.item:first-child{
    flex:1 1 100px;
}
.item:nth-child(2){
    flex:1 0 100px；
}
.item:nth-chils(3){
    flex:1 1 100px;
}

align-self定制align-items

可以让某一个item特立独行 不能放在container里

.item:nth-child(4){
    align-self:flex-end;
}

重点(工作基本只用这些)

1. display:flex
2. flex-direction:row/column
3. flex-wrap:wrap
4. just-content:center/space-between
5. align-items:center

经验

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

写死

width:100px

不写死

width:50%

max-width:100px

width:30vw

min-width:80%

特点：不使用px，或者加min man前缀

前端戒律

• 必须先给设计稿
• 两套界面必须两套设计稿

如何在两套布局中切换

Grid布局

功能最强大的布局，二维布局用Grid，一维布局用Flex

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]40px[end];
    grid-template-rows:[row1-start]25%[row1-end]100px[third-line]auto[last-line];
}

取名结果

取名有啥用

item可以设置范围

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

fr-free space巧计：份fr（主要用来做平均布局）

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

分区grid-template-areas

.item-a{
    grid-area:header;
}
.item-b{
    grid-area:main;
}
item-c{
    grid-area:sidebar;
}
item-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"
}

分区grid-template-areas

空隙gap

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

grid属性太多

实践

布局

Grid尤其适合不规则布局

经验

等到Grid普及后，前端对CSS要求会进一步降低