CSS前端面试题（持续更新）_css前端面试题csdn-CSDN博客

什么是BFC

BFC：块级格式化上下文，属于普通流，规定了元素的布局方式。元素按照先后顺序自上而下布局，行内元素水平排列，块级元素单独成行

什么情况会触发BFC
body根元素
float不是none
overflow不是visible
position：absolute/ fixed
display：inline-block/ table-cells/ flex

BFC的作用
解决外边距折叠
清除浮动，解决浮动导致的高度塌陷
设置两栏布局一边固定宽度另一边自适应
避免文字环绕

实现水平垂直居中

水平居中
块级元素：margin:0 auto
内联块：text-align:center
内联元素：text-align:center

垂直居中
内联块：父元素line-height，子元素vertical-align
内联元素：父元素line-height

同时实现水平垂直剧居中
子元素设置position：absolute，设置上下左右
设置上下左右均为0，之后再设置margin: 0 auto也可以实现水平居中
使用flex布局

简述flex弹性布局

容器相关属性
主轴排列方向 flex-direction
是否折行 flex-wrap
以上两个的简写 flex-flow
主轴对齐方式 justify-content
交叉轴对齐方式 align-items

项目相关属性
放大比例 flex-grow
缩小比例 flex-shrink
原本的比例 flex-basis
以上三个的简写 flex
单独对齐方式 align-self/justify-self

简述动画

animation: 动画名，时长，速度，延迟，次数
不需要动作触发
需要搭配keyframe，keyframe可以使用百分比和from/to两种形式

transition: 过渡属性，时长，速度，延迟
需要动作触发
transition只有开始和结束两种状态，多次执行需要多次触发

step(分割段数，开始帧)逐帧动画
参数end表示动画开始先执行第一帧，start表示动画开始第一帧已执行完毕

float和position:absolute的区别

float浮动是脱离文档流，相对于原来的位置浮动，还在父容器内
position:absolute脱离文档流后，相对于最近的一个设置了position的父元素定位，有可能根本不在原来的父容器内了

CSS选择器有哪些

通用选择器( * )：所有标签都起作用
类型选择器( 标签 )：一类标签起作用，如只对p标签起作用
类选择器( class )：class设置为该值的标签起作用
ID选择器( ID )：只对ID设置为该值的标签起作用，且一个页面中只有有一个id为该值的标签
子元素选择器( > )：如对a标签的父元素均为p标签的a标签起作用
后代选择器( 空格 ) ：如对p标签下所有的所有a标签起作用
相邻兄弟选择器( + )：如对p标签后同级的第一个a标签起作用
普通兄弟选择器( ~ )：如对p标签后同级的所有a标签起作用