html常用布局
三列布局
- 左右浮动,中间容器margin-left,margin-right设置为左右的宽度;注意:中间容器要放在最后,就是html顺序:left+right+center
- flex布局,左右固定宽度,中间设置flex:1;不能单独设置flex-grow:1;
- 双飞翼布局,中间的宽度百分之一百,全部左浮动,因为中间为百分之一百左右会换行到下一行显示,所以左右通过设置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