前端常问面试题之CSS篇

49 阅读2分钟

C3 的新特性有哪些?

  • border-radius:圆角边框
  • box-shadow:盒子阴影
  • background-size:背景图片大小
  • transition:过渡
  • transform:转换(位移 旋转 缩放)
  • animation:动画
  • linear-gradient:线性渐变
  • box-sizing:css3 盒子模型

BFC 是什么

BFC 的中文意思是块级格式化上下文,是用于布局块级盒子的独立渲染区域,一个创建了新的 BFC 的盒子是独立布局的,盒子内元素的布局 不会影响盒子外面的元素。简单来说就是 BFC 就是 css 的一个布局概念,是一个独立的区域(容器)

说说 flexbox(弹性盒布局模型),以及适用场景?

flexbox 是一种布局模型,让网页布局更简单灵活,基于 Flex 精确灵活控制块级盒子的布局方式,避免浮动布局中脱离文档流现象发生.

我们能够通过flex简单粗暴的实现元素水平垂直方向的居中,以及在两栏三栏自适应布局中通过flex完成

css 选择器有哪些?优先级?哪些属性可以继承?

  • css 选择器非常多,可以分为基础选择器 复合选择器,伪类选择器;伪元素选择器
  • 基础选择器: id 选择器 ,class 类选择器,标签选择器,
  • 复合选择器: 后代选择器,子代选择器,并集选择器,交集选择器

优先级:!Important>行内样式>ID选择器>类选择器>标签>通配符>继承

可以简单记忆法:通配符和继承权重为0,标签选择器为1,类(伪类)选择器为10,id选择器100,行内样式表为1000,!important无穷大.

关于继承属性,可以分成:

  • 字体系列属性
font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
font-variant:偏大或偏小的字体
  • 文本系列属性
text-indent:文本缩进
text-align:文本水平对刘
line-height:行高
word-spacing:增加或减少单词间的空白
letter-spacing:增加或减少字符间的空白
text-transform:控制文本大小写
direction:规定文本的书写方向
color:文本颜色
  • 元素可见性
visibility
  • 表格布局属性
caption-side:定位表格标题位置
border-collapse:合并表格边框
border-spacing:设置相邻单元格的边框间的距离
empty-cells:单元格的边框的出现与消失
table-layout:表格的宽度由什么决定
  • 列表属性
list-style-type:文字前面的小点点样式
list-style-position:小点点位置
list-style:以上的属性可通过这属性集合
  • 引用
quotes:设置嵌套引用的引号类型
  • 光标属性
cursor:箭头可以变成需要的形状