CSS面试题

- 1.说说flexbox（弹性盒布局模型）,以及适用场景？
- - - - flex-direction
      - flex-wrap
      - flex-flow
      - justify-content
      - align-items
      - align-content
- 2.让Chrome支持小于12px 的文字方式有哪些？区别？
- 3.css选择器有哪些? 优先级? 哪些属性可以继承?
- - - - 选择器
      - 优先级
      - 继承属性
      - 无继承的属性

1.说说flexbox（弹性盒布局模型）,以及适用场景？

属性：flex-direction flex-wrap flex-flow align-items align-content

flex-direction

row（默认值）：主轴为水平方向，起点在左端
row-reverse：主轴为水平方向，起点在右端
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿

flex-wrap

nowrap（默认值）：不换行
wrap：换行，第一行在下方
wrap-reverse：换行，第一行在上方

flex-flow

是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

justify-content

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等
space-around：两个项目两侧间隔相等

align-items

flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline: 项目的第一行文字的基线对齐
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

align-content

flex-start：与交叉轴的起点对齐
flex-end：与交叉轴的终点对齐
center：与交叉轴的中点对齐
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch（默认值）：轴线占满整个交叉轴

2.让Chrome支持小于12px 的文字方式有哪些？区别？

Zoom 非标属性，有兼容问题，缩放会改变了元素占据的空间大小，触发重排
-webkit-transform:scale() 大部分现代浏览器支持，并且对英文、数字、中文也能够生效，缩放不会改变了元素占据的空间大小，页面布局不会发生变化
-webkit-text-size-adjust对谷歌浏览器有版本要求，在27之后，就取消了该属性的支持，并且只对英文、数字生效

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

选择器

id选择器（#box），选择id为box的元素
类选择器（.one），选择类名为one的所有元素
标签选择器（div），选择标签为div的所有元素
后代选择器（#box div），选择id为box元素内部所有的div元素
子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素
相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素
群组选择器（div,p），选择div、p的所有元素
伪类选择器