2020-11-03 css面试题集合

2、BFC布局
块级格式上下文，是一个独立的渲染区域，并且有一定的布局规则
特性：
同一个BFC下，元素外边距会重叠
BFC可以清除浮动
BFC可以阻止浮动元素被覆盖

触发BFC的元素：
根元素
float除none的元素
position为fixed和absolute的元素
display为inline-block,table-cell,flex的元素
overflow不为visible的元素

3、垂直居中方法
1）position:absolute margin负边距
2）position:absolue margin:auto top:0…
3）position:absolue transform:translate(-50%,-50%)
4）display:flex align-item:center
5）display:table-cell vertical-align:middle

4、display:none与visibility:hidden和opacity:0的区别
是否继承属性：display不是继承属性
是否占据空间：display不占据
是否重新渲染：display重新渲染
并且opacity绑定事件，点击该区域会触发，visibility不会触发

5、回流与重绘
一句话，回流一定会重绘，重绘不一定会回流
回流：当元素的尺寸、结构或某些属性发生变化时，浏览器会重新渲染文档
重绘：当元素的样式的改变不影响它在文档流中的位置如color，visibility等属性，浏览器将新样式赋予元素的过程

6、清除浮动的方式
1）使用带clear属性的空元素，clear:both
2）使用BFC，如给父元素添加overflow:hidden或auto
3）使用CSS的:after伪元素
4）使用fixed和absolute脱离文档流的方式

7、CSS的选择器有哪些，优先级
id选择器，class选择器，标签选择器，伪元素选择器，伪类选择器等
样式选择器的类型不同时，优先级顺序：id选择器>class选择器>标签选择器
带有!important标记的样式优先级最高
总的来说：内联样式>内部样式>外部样式

8、Flex布局
分为容器属性和元素属性
容器的属性：
flex-direction:row|row-reverse|column|column-reverse决定主轴的方向
flex-wrap:nowrap|wrap|wrap-reverse决定换行规则
flex-flow:上面两个属性的简写
justify-content:主轴对齐方式
align-items:交叉轴对齐方式
align-content:定义多根轴线的对齐方式

项目属性：
order:定义项目排列顺序，数值越小，越靠前
flex-grow:定义项目放大比例，默认为0
flex-shrink:定义项目缩小比例，默认为1
flex-basis:定义占据空间，默认auto
flex:前面三个缩写，默认0 1 auto
align-self:允许单个项目与其他项目不一样的对齐方式

例子：
两个元素，左边固定，右边自适应
左：flex:none 右：flex:auto

三个元素平分空间flex:1

持续更新…