21年5月面试题

5.26

css伪元素

• ::first-letter 选择元素首字母；
• ::first-line 选择元素首行；
• ::before 在元素之前插入内容；
• ::after 在元素之后插入内容；
• ::selection 选择用户选择的元素部分。

css实现垂直水平居中(高频)

• flex布局 dispaly：flex
• position 注：已知宽度
  父元素：position: relative
  子元素：position: absolute
• position transform:translate(-50%,-50%) 注：元素未知宽度
• margin: 0 auto 注：在有宽度的前提下
• min-height min-width max-height max-width重绘

css的奇数和偶数

• 奇数:odd 偶数:even

css3新特性(高频)

属性	说明
border-radius	边框圆角
box-shadow	边框阴影
border-image	边框图像
background-clip	背景绘制
background-size	背景图大小
background-origin	背景图位置
text-shadow	设置文本阴影
text-overflow	文本溢出
text-align-last	对齐最后一行或紧挨强制换行符之前行
text-wrap	规定文本换行规则
text-wrap	文本对齐
@keyframes	创建动画
transition	过渡
gradients	渐变
transform	2D或3D转换元素
column-count	指定元素被分割的列数
display	指定盒子类型
@media	媒体查询

css盒子模型

• 标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
• 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

css优先级

• !important
• 行内样式style
• id选择器
• class类选择器
• 标签（div,p,span,a）
• 通配符*
• 继承
• 浏览器默认样式

css border-box和content-box的区别

content-box为标准模式盒模型即width不包括padding和border
border-box为怪异盒模型即width包括padding和border

响应式布局有几种方法(高频)

• 方法一：媒体查询 @media
• 方法二：rem适用移动端
• 方法三：flex弹性布局
• 方法四：vm/vh百分比布局

常见行内元素(内联元素)和块级元素有哪些，区别是什么？

行内元素：a，b，big，br，em，i，q，small，span，label，font，strong
块级元素：div，dir，dl，form，h1-h6，menu，ol，p，pre，hr，table，ul，header，aside，footer，nav，tbody，thead，tr，button，img，input，select，textarea
行内元素是紧挨着的一行从左到右显示不会单独占一行，高度不可改，宽度就是内容的宽度不可以以更改
块级元素是从新行开始，相邻的元素不在同行显示，高度可控制，没有宽度的情况下容器是百分百的