BFC(单独的块)规范:(块级格式化上下文)
- 使用浮动
- 绝对定位
- Display:inline-block table-cells单元格 flex
- Overflow除了visible以外的值
BFC会解决
- margin叠加问题
- margin的传值问题 子边距给了父.给一个边框/浮动/定位..
- 清除浮动
- 解决覆盖问题
布局方式
1.)表格不做布局是因为:表格标签做布局比其他标签做布局 表格的标签更多,占用更多流量资源,加载速度变慢,一般不使用。
2.)浮动缺点:
对自身影响,使用浮动的块可以设置宽和高。
对父级来说,造成父容器坍塌(父级高度变为0)
对兄弟来说,在同一行能放下浮动与兄弟的情况下,兄弟元素发生变化。
3.)定位
4.)多列(并不常用)
Columns: Column-width;
5.)弹性盒子
任何一个容器都可以指定为Flex布局,flex实现子元素在父元素中自动伸缩,适合移动端布局。
弹性布局
父容器变成弹性盒模型之后。子元素会成为行内块元素。子元素在主轴上会忽略自身宽度,自适应父容器。
flex-direction(决定主轴的方向(即项目的排列方向))
属性值有:
column-reverse:主轴为垂直方向,下到上。
column :主轴为垂直方向,上到下。
row(默认值) :主轴为水平方向,从左到右。
row-reverse :主轴为水平方向,从右到左。
flex-wrap(定义子元素是否换行以及如何换行)换行时按照子元素的宽度进行换行
属性值有:
Nowrap:不换行
Wrap :换行在第一行下面起一行
wrap-reverse 换行在第一行上当面起一行
综合写法: flex-flow:row wrap;
justify-content(定义子元素在主轴上的对齐方式)
属性值有
flex-start(默认值):左对齐
flex-end:右对齐
center:居中
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个子元素两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。(分散对齐)
align-items(定义子元素在竖直方向上对齐方式)
它的属性值有:
flex-start:交叉轴的起点对齐。
flex-end :交叉轴的终点对齐。
Center :交叉轴的中点对齐。
Baseline : 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度
align-center:flex-start (子元素多行对齐方式)