SHARECLUB

文章目录简介1、BFC规则条件作用2、IFC规则3、块盒，行盒（行内元素），行块盒（行内块元素）的区别块盒元素行盒（行内元素)行块盒（行内块元素)特殊元素参考简介BFC（Block Formatting Contexts），块级格式化上下文。IFC （Inline Formatting Contexts），行内格式化上下文。1、BFC规则属于同一个BFC的两个相邻Box垂直排列属于同一个BFC的两个相邻Box的margin会发生重叠BFC的区域不会与float的元素区域重叠计算BFC的

分类基本选择器层次选择器伪类选择器动态伪类选择器目标伪类选择器

简介支持在布局中建立列（column）的数量，以及内容如何在列之间流动（flow），列之间的间距（gap）大小，以及列的分隔线（column rules）属性column-count指定列的数量num: 正整数，表示列数量auto: 表示列数量由其他CSS属性决定，例如column-widthinherit: 表示继承父元素的列数量column-gap指定列间间隔， 设置值可以为nomal，百分比，绝对单位column-fill指定如何填充列balance: 表

简介Flex布局时一维的布局，即水平或垂直方向的布局。而Grid布局则划分成“行”和“列”，产生单元格，可以看作是二维的布局。Grid布局远比Flex布局强大容器定义网格布局，定义网格布局后，容器子元素的float、display：inline-block、display：table-cell、vertical-align和column-*都将失效。.div { display: grid； display: inline-grid; //容器元素可以是块元素或行内元素}容器属性

简介：Flexible Box的缩写，弹性布局，为盒模型提供最大的灵活性容器:任何容器都可以指定Flex布局，设置后，子元素的float,clear,vertical-align都失效.box { display: flex; display: inline-flex; //行内元素也可以使用Flex布局}容器属性flex-direction定义容器的子元素的排列方向row（默认值）: 水平方向，起点为左边row-reverse: 水平方向，起点为右边colum