CSS面试题
-
- 1.说说flexbox(弹性盒布局模型),以及适用场景?
- [2.让Chrome支持小于12px 的文字方式有哪些?区别?](#2.让Chrome支持小于12px 的文字方式有哪些?区别?)
- [3.css选择器有哪些? 优先级? 哪些属性可以继承?](#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的所有元素
伪类选择器
优先级
内联 > ID选择器 > 类选择器 > 标签选择器
继承属性
字体系列属性
文本系列属性
元素可见性
表格布局属性
列表属性
引用
光标属性
继承中比较特殊的几点:
a 标签的字体颜色不能被继承
h1-h6标签字体的大下也是不能被继承的
无继承的属性
display
文本属性:vertical-align、text-decoration
盒子模型的属性:宽度、高度、内外边距、边框等
背景属性:背景图片、颜色、位置等
定位属性:浮动、清除浮动、定位position等
生成内容属性:content、counter-reset、counter-increment
轮廓样式属性:outline-style、outline-width、outline-color、outline
页面样式属性:size、page-break-before、page-break-after