面试题

display有哪些属性

none —— 不展示
block —— 块类型
inline —— 行内
inline-block —— 默认行内块状
list-item | table
inherit —— 继承

inline 和 inline-block的区别

inline: 共享一行行内概念
block: 独占一行
inline-block: 共享一行，内容作为block对象呈现

行内元素和块状元素有什么区别？

行内元素：

无法设置宽高
水平方向可设置margin + padding , 垂直方向则无法设置
不会自动换行

块级元素：

可以设置宽高
水平垂直方向都可设置margin + padding
可以自动换行
多个块状元素是默认从上往下换行排列的

有哪些行内和块状元素

块状元素：div form h1 pre table ul... 行内元素： a br code em img i input strong textarea...

块级元素和内联元素有哪几种转换方式？

display: block 转换为块状元素 display: inline 转换为内联元素
float : left/right 给元素默认加上了display: block 去除了行内元素之间的空白问题
position: absolute / fixed 脱离了文档流

选择器 & 优先级

选择器	例子	权重
内联样式	style=""	1000
id选择器	#id	100
类选择器	class	10
属性选择器	a[ref="link"]	10
标签选择器	div	1
伪类选择器	li:last-child	10
伪元素选择器	li:before	1
兄弟选择器	div + p	0
子选择器	ul > li	0
后代选择器	li a	0
选择器	*	0

特殊场景的优先级如何判断?

!important 优先级最高
如果优先级相同，则后者高于前者
继承得到的样式，优先级最低

可继承的样式有哪些？

字体
- font-family 、 font-weight 、font-size 、 font-style
文本
- text-indent 、text-align 、 line-height 、 word-spacing 、 letter-spacing 、 color
元素
- visibility
列表布局
- list-style
光标
- cursor

隐藏和显示

有哪些可以隐藏一个元素的方法？有什么区别？

方法	区别（是否占位）
display: none	不占位
visibility: hidden;	占位
opacity: 0	占位
position: absolute	不占原本位置
z-index: 负数	占位
clip	占位
transform: scale(0, 0)	占位

display VS visibility 有什么区别？

都是让元素隐藏和展示

区别： 1.浏览器渲染时， display不占据空间，渲染树中会不存在;visibility会占据一根树枝。visibility 显示或隐藏元素而不更改文档的布局 2. 继承属性来说，display 不会被继承， visibility 会被继承 3. 性能影响上，display 会造成文档的重排，但是修改visibility 只会导致文档的重绘

盒模型及其特性

标准盒模型、IE盒模型分别是什么? 怎么转换？

盒模型特点： content + padding + border + margin

区别：

标准盒模型 —— width和height只包含content的部分
IE盒模型 —— width和height 包含了 content + padding + border部分

转换： box-sizing: content-box（标准盒模型）/ border-box（IE盒模型）

伪元素和伪类是什么？如何使用？区别是什么？

伪元素：只出现在css样式表中，不存在文档中伪类: 已有的元素上加上特殊的类型，特殊状态，不产生新的元素

图片格式以及CSS-sprites

图片格式有哪些？怎么应用？如何选择？

BMP, 无损，没有压缩。通常体积较大
GIF, 无损，采用了LZW压缩算法。仅支持8bit索引色，支持动图
JPEG，有损，直接色存储，适合还原度要求较高的图片
PNG-8, 无损，使用索引色。体积更优秀，并且支持透明度调节
PNG-24, 无损，使用直接色，压缩
SVG, 无损，svg放大矢量图，所以适合logo, icon
webP, 有损+无损，直接色，支持透明度，压缩。 chrome、opera 支持

css-sprites 精灵图，雪碧图怎么处理？

所有涉及到的图片，放到一张大图中去 background-image backgroung-repeat background-position

像素密度与图片应用

经典设备宽高：414px * 896px; 物理像素： 1242px * 2688px

1242 / 414 = 3

所以逻辑像素与物理像素的比是 1:3; 像素密度是 3

如何在图片的加载上应用动态密度

比如设计师提供 @2x, @3x, @4x

利用媒体查询

css

  image{
    background-image: ('1x.png')
  }

  @media only screen and (min-divce-pixel-ratio:3) {
    image{
      background-image:('3x.png')
    }
  }

css工程化与预处理

css类库与工程化的理解

预处理器：less 、scss、 stylus

利用编译库提供能力，提供层级、mixin、变量、循环、函数

后处理器：postCss

利用后处理编译，属性增加前缀，实现跨浏览器兼容

单行多行文本超出

css

  /* 当行文本超出 */
  overflow:hidden; //  bfc
  text-overflow: ellipsis; // 超出省略号
  white-space: nowrap; // 不换行

  /* 多行文本超出 */
  overflow:hidden;
  text-overflow: ellipsis;
  display: -webkit-box; // 弹性伸缩盒子模型
  -webkit-box-orient: vertical; // 从上往下垂直排列
  -webkit-line-clamp: 3 // 显示的行数

  /* 兼容性方案 */
  p {
    position: relative;
    line-height: 18px;
    height: 40px;
    overflow: hidden;
  }
  P::after {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
  }

px rem em

多种单位的差别

百分比：子元素的百分比相对于直接父元素的对应属性
em：相对于父元素的字体大小倍数
rem：相对于根元素字体大小的倍数
vw：视图宽度，满视图宽度为100vw
vh：视图高度，满视图高度为100vh
vmin：vw和vh中较小值
vmax：vw和vh中较大值

面试题 #

display有哪些属性 #

inline 和 inline-block的区别 #

行内元素和块状元素有什么区别？ #

有哪些行内和块状元素 #

块级元素和内联元素有哪几种转换方式？ #

选择器 & 优先级 #

隐藏和显示 #

有哪些可以隐藏一个元素的方法？有什么区别？ #

display VS visibility 有什么区别？ #

盒模型及其特性 #

标准盒模型、IE盒模型分别是什么? 怎么转换？ #

伪元素和伪类是什么？如何使用？区别是什么？ #

图片格式以及CSS-sprites #

图片格式有哪些？怎么应用？如何选择？ #

css-sprites 精灵图，雪碧图怎么处理？ #

像素密度与图片应用 #

如何在图片的加载上应用动态密度 #

css工程化与预处理 #

css类库与工程化的理解 #

预处理器：less 、scss、 stylus #

后处理器：postCss #

单行多行文本超出 #

px rem em #

多种单位的差别 #

如何利用rem实现响应式? 项目如何实现响应式的？ #

面试题