html布局复习

html常用布局

三列布局

1. 左右浮动，中间容器margin-left，margin-right设置为左右的宽度；注意：中间容器要放在最后，就是html顺序：left+right+center
2. flex布局，左右固定宽度，中间设置flex：1；不能单独设置flex-grow:1；
3. 双飞翼布局，中间的宽度百分之一百，全部左浮动，因为中间为百分之一百左右会换行到下一行显示，所以左右通过设置margin-left负值来让左右和中间在同一行，中间通过设置margin-left、margin-right让内容不被左右覆盖；

两列布局

将页面分为header、wrapper>leftSide+rightSide、footer；
就是：页面分为上中下，中又分为左右
leftSide和rightSide分别设置左右浮动;给wrapper设置overflow：hidden|auto；
将wrapper设为inline-block wrapper可以被撑开；结果在底部会多出一些空间，或许与float元素自动转为块元素有关？

====================更新分隔==================

给父元素添加overflow:hidden | auto；是清除浮动影响的方法之一。让父元素对于溢出的元素自动调整自身宽高，缺点就是无法显示溢出部分；
清除浮动影响的方法有两种：
1、给父元素添加overflow：auto；
2、对于父元素使用after伪元素添加clear清除浮动
::after{
content:“”;
display:block;
clear:both;
}

单列布局

将页面分为header、wrapper、footer；
每个容器由容器内元素高度撑开；每个容器也可以不单独设置宽度，默认就是body的100%

flex布局

flex容器内的元素会自动转为inline-block
主轴方向：flex-direction:row|column|row-reverse|column-reverse
主轴对其方式：justify-content:flex-start|flex-end|center|space-around|space-between
交叉轴对其方式：align-items:flex-start|flex-end|center|stretch(默认值，没高度时自动占满容器高度)
换行方式：flex-wrap:wrap|nowarp|wrap-reverse
多个主轴时对其方式：align-content:flex-start|flex-end|center|space-between|space-around|stretch

单独为元素设置，鹤立鸡群
覆盖align-items交叉轴对其方式：align-self:flex-start|flex-end|center|stretch