目录:
1、flex布局
2、垂直居中
3、经典css三栏布局
PS:持续更新中
1、flex布局
简述:
背景:传统布局:display+position+float布局,复杂麻烦,尤其垂直居中比较困难。
元素词:
1.容器:指进行处理布局的代码块,管理全部小块(项目)
.block {
display: flex; // inline-flex行内
}
2.项目:容器内部的元素,管理每个小块内部及小块间的关系
属性(各6个):
1.容器
// 布局换行类
flex-direction: row; // row row-reverse column column-reverse
flex-wrap: nowrap; // nowrap wrap wrap-reverse
flex-flow: <flex-direction> <flex-wrap>; // 两者结合
// 对齐类
justify-content: flex-start; // 水平(主轴)对齐 flex-start flex-end center space-between space-around;
align-items: stretch; // 垂直(交叉轴)对齐 flex-start flex-end center baseline(第一行文本) stretch(占满容器);
align-content: stretch; // 多轴情况下,指垂直(交叉轴)对齐(个人理解) flex-start flex-end center space-between space-around stretch(占满容器);
2.项目
order: 0; // 排序,越小越靠前,可为负值;
flex-grow: 0; // 是否变大,相同1等分; 其他为1,某为2,则后者翻倍
flex-shrink: 1; // 是否缩小,1为不缩小;相同为1,等比缩小;其他为1,某为0,后者不缩小。
flex-basis: <length> | auto; // 占据主轴的空间大小;
flex: <flex-grow> <flex-shrink> <flex-basis>; // 三者结合,后两者可选;快捷auto: 1 1 auto、none: 0 0 auto;
align-self: auto; // 可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
// auto flex-start flex-end center baseline stretch;
2、垂直居中
参考
简述:
1.使用绝对定位和负外边距对块级元素进行垂直居中
2.使用绝对定位和transform
3.绝对定位结合margin:auto
4.使用padding实现子元素的垂直居中
5.使用flex弹性布局
6.使用line-height对单行文本进行垂直居中
7.使用 display:table-cell 和 vertical-align 对容器里的文字进行垂直居中
3、经典css三栏布局
参考
圣杯布局:中间固定大小两边自适应;两边自适应中间固定;
双飞翼布局:圣杯布局的中间结构体再加一层inner用于放置元素;
简单来讲,主要是自适应为中间还是两边的问题。(或者说是,中间100%,inner margin空出两边大小)
中间固定大小两边自适应
传统思路:
定位 + 浮动:
1、父元素设置高度
2、三个元素均设置浮动
3、中间main部分定宽100%:width: 100%,左右两边按产品需求设置宽高
4、左边设置margin-left: -100%;右边设置margin-right: -右盒子宽
5、父元素设置padding-left: 左盒子宽;padding-right: 右盒子宽
6、左右盒子相对定位
(当浏览器屏幕缩小的一定程度时,左右两侧的内容会掉下来,或发生重叠现象。解决方案,给body加一个最小宽度(大于左右两侧宽度之和))
纯浮动:
1、左盒子左浮动,右盒子右浮动
2、中间部分设置margin或padding值
还可以有:纯定位、表格布局、网格布局(不大熟悉)参考
flex布局:
1、父元素设置宽度为100%,display: flex;
2、main中间部分设置flex: 1;
3、左右两则按产品需求设置宽高;
4、left设置order: -1;
两边自适应中间固定
传统思路:
1、左右两边各占50%的宽度
2、左边负边距 margin-left 占中间div宽度的一半
3、右边负边距 margin-right 也占中间div宽度的一半
flex布局:
1、父元素设置display: flex;flex-direction: row;
2、左右设置flex-grow: 1,平分剩余空间
补充:CSS3特性 calc(四则运算)
用于动态计算长度值
1、父元素设置100%宽;
2、左右设置width: calc(50%, - 中间宽/2)