Henfy-Blog

专注以前端领域开发

CSS基础

发表于 更新于 分类于
本文字数： 37k 阅读时长 ≈ 34 分钟

介绍目前常见前端面试题，参考链接 https://interview2.poetries.top/

CSS基础

❤ 盒模型

content（元素内容） + padding（内边距） + border（边框） + margin（外边距）

延伸：box-sizing

  • content-box：默认值，总宽度 = margin + border + padding + width
  • border-box：盒子宽度包含 padding 和 border，总宽度 = margin + width
  • inherit：从父元素继承 box-sizing 属性
  • 有两种， IE盒子模型、W3C盒子模型；
  • 盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
  • 区 别： IE的content部分把 border 和 padding计算了进去;
  • IE8及其以下版本浏览器，未声明 DOCTYPE，内容宽高会包含内填充和边框，称为怪异盒模型(IE盒模型)
  • 标准(W3C)盒模型：元素宽度 = width + padding + border + margin
  • 怪异(IE)盒模型：元素宽度 = width + margin
  • 标准浏览器通过设置 css3 的 box-sizing: border-box 属性，触发“怪异模式”解析计算宽高

box-sizing 常用的属性有哪些？分别有什么作用

  • box-sizing: content-box; 默认的标准(W3C)盒模型元素效果
  • box-sizing: border-box; 触发怪异(IE)盒模型元素的效果
  • box-sizing: inherit; 继承父元素 box-sizing 属性的值
  • 得分点 标准盒模型、怪异盒模型、box-sizing:border-box、盒模型大小
  • 标准回答 CSS盒模型定义了盒的每个部分包含 margin, border, padding, content 。
    • 根据盒子大小的计算方式不同盒模型分成了两种，标准盒模型和怪异盒模型。
      • 标准模型，给盒设置 width 和 height，实际设置的是 content box。padding 和 border 再加上设置的宽高一起决定整个盒子的大小。
      • 怪异盒模型，给盒设置 width 和 height，包含了padding和border ，设置的 width 和 height就是盒子实际的大小 默认情况下，盒模型都是标准盒模型
        • 设置标准盒模型：box-sizing:content-box
        • 设置怪异盒模型：box-sizing:border-box

❤ 块级格式化上下文 BFC

BFC(Block Formatting Context)，块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响

触发条件 (以下任意一条)

  • float的值不为none
  • overflow的值不为visible，为absolute/fixed之一
  • display的值为table-cell、tabble-caption和inline-block之一
  • position的值不为static或则releative中的任何一个

在IE下, Layout,可通过zoom:1 触发

BFC布局与普通文档流布局区别 普通文档流布局:

  • 浮动的元素是不会被父级计算高度
  • 非浮动元素会覆盖浮动元素的位置
  • margin会传递给父级元素
  • 两个相邻元素上下的margin会重叠

BFC布局规则:

  • 浮动的元素会被父级计算高度(父级元素触发了BFC)
  • 非浮动元素不会覆盖浮动元素的位置(非浮动元素触发了BFC)
  • margin不会传递给父级(父级触发BFC)
  • 属于同一个BFC的两个相邻元素上下margin会重叠

开发中的应用

  • 阻止margin重叠
  • 可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个 div都位于同一个 BFC 区域之中)
  • 自适应两栏布局
  • 可以阻止元素被浮动元素覆盖
  • 得分点： 块级格式化上下文、独立的渲染区域、不会影响边界以外的元素、形成BFC条件、float、position、overflow、display
  • 标准回答： BFC(Block Formatting Context) 块级格式化上下文，是Web页面一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素。
    • BFC布局规则
      • 内部盒子会在垂直方向，一个接一个地放置。
      • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
      • 每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
      • BFC的区域不会与float box重叠。
      • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
      • 计算BFC的高度时，浮动元素也参与计算。
    • BFC形成的条件
      • float 设置成 left 或 right
      • position 是absolute或者fixed
      • overflow 不是visible，为 auto、scroll、hidden
      • display是flex或者inline-block 等
    • BFC能解决的问题：清除浮动
  • 加分回答： BFC的方式都能清除浮动，但是常使用的清除浮动的BFC方式只有overflow:hidden,原因是使用float或者position方式清除浮动，虽然父级盒子内部浮动被清除了，但是父级本身又脱离文档流了，会对父级后面的兄弟盒子的布局造成影响。如果设置父级为display:flex，内部的浮动就会失效。所以通常只是用overflow: hidden清除浮动。
    • IFC（Inline formatting contexts）：内联格式上下文。IFC的高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)，IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。
    • GFC（GrideLayout formatting contexts）：网格布局格式化上下文。当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域。
    • FFC（Flex formatting contexts）：自适应格式上下文。display值为flex或者inline-flex的元素将会生成自适应容器。

❤ 层叠上下文

元素提升为一个比较特殊的图层，在三维空间中 (z轴) 高出普通元素一等。

触发条件

  • 根层叠上下文(html)
  • position
  • css3属性
    • flex
    • transform
    • opacity
    • filter
    • will-change
    • webkit-overflow-scrolling

层叠等级：层叠上下文在z轴上的排序

  • 在同一层叠上下文中，层叠等级才有意义
  • z-index的优先级最高

img

居中

❤ 左右居中方案

  • 行内元素: text-align: center
  • 定宽块状元素: 左右 margin 值为 auto
  • 不定宽块状元素: table布局，position + transform
  • 使用flex-box布局，指定justify-content属性为center
  • display设置为tabel-ceil
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* 方案1 */
.wrap {
  text-align: center
}
.center {
  display: inline;
  /* or */
  /* display: inline-block; */
}
/* 方案2 */
.center {
  width: 100px;
  margin: 0 auto;
}
/* 方案2 */
.wrap {
  position: relative;
}
.center {
  position: absulote;
  left: 50%;
  transform: translateX(-50%);
}

❤ 上下垂直居中方案

  • 定高：margin，position + margin(负值)
  • 不定高：position + transform，flex，IFC + vertical-align:middle
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/* 定高方案1 */
.center {
  height: 100px;
  margin: 50px 0;
}
/* 定高方案2 */
.center {
  height: 100px;
  position: absolute;
  top: 50%;
  margin-top: -25px;
}
/* 不定高方案1 */
.center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
/* 不定高方案2 */
.wrap {
  display: flex;
  align-items: center;
}
.center {
  width: 100%;
}
/* 不定高方案3 */
/* 设置 inline-block 则会在外层产生 IFC，高度设为 100% 撑开 wrap 的高度 */
.wrap::before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.wrap {
  text-align: center;
}
.center {
  display: inline-block;
  vertical-align: middle;
}

❤ 未知宽高元素水平垂直居中方法

  • 得分点 position transform flex justify-content align-items vertical-align text-align
  • 标准回答
    未知宽高元素水平垂直都居中的实现方法：

    1. 利用绝对定位，设置 left: 50% 和 top: 50% 现将子元素左上角移到父元素中心位置，然后再通过 translate 来调整子元素的中心点到父元素的中心。该方法可以不定宽高

      1
      2
      3
      4
      5
      6
      7
      8
      9
      .father {
        position: relative;
      }
      .son {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }

    2. 利用绝对定位，子元素所有方向都为 0 ，将 margin 设置为 auto ，由于宽高固定，对应方向实现平分，该方法必须盒子有宽高

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      .father {
        position: relative;
      }
      .son {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0px;
        margin: auto;
        height: 100px;
        width: 100px;
      }

    3. 利用绝对定位，设置 left: 50% 和 top: 50% 现将子元素左上角移到父元素中心位置，然后再通过 margin-left 和 margin-top 以子元素自己的一半宽高进行负值赋值。该方法必须定宽高

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      .father {
        position: relative;
      }
      .son {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 200px;
        height: 200px;
        margin-left: -100px;
        margin-top: -100px;
      }

    4. 利用 flex ，这种方式代码简洁，但是兼容性ie 11以上支持，由于目前ie版本都已经很高，很多网站现在也使用这种方式实现水平垂直居中

      1
      2
      3
      4
      5
      .father {
        display: flex;
        justify-content: center;
        align-items: center;
      }

    5. 设置元素的父级为网格元素display: grid，设置父级和盒子内部子元素水平垂直都居中justify-content:center; align-items:center ，这种方式代码简介，但是兼容性ie 10以上支持

    6. 设置元素的父级为表格元素display: table-cell，其内部元素水平垂直都居中text-align: center;vertical-align: middle; ，设置子元素为行内块display: inline-block; ，这种方式兼容性较好

      1
      2
      3
      4
      5
      #container {    /**<img>的容器设置如下**/
          display:table-cell;
          text-align:center;
          vertical-align:middle;
      }
  • 加分回答
    • 京东的移动端顶部京东logo，使用的是display:flex第四种模式

垂直居中的方法

  • 将显示方式设置为表格，display:table-cell,同时设置vertial-align：middle

  • 使用flex布局，设置为align-item：center

  • 绝对定位中设置bottom:0,top:0,并设置margin:auto

  • 绝对定位中固定高度时设置top:50%，margin-top值为高度一半的负值

  • 文本垂直居中设置line-height为height值

  • 如果是单行文本, line-height 设置成和 height 值

1
2
3
4
.vertical {
    height: 100px;
    line-height: 100px;
  }
  • 已知高度的块级子元素，采用绝对定位和负边距
1
2
3
4
5
6
7
8
9
.container {
  position: relative;
}
.vertical {
  height: 300px;  /*子元素高度*/
  position: absolute;
  top:50%;  /*父元素高度50%*/
  margin-top: -150px; /*自身高度一半*/
}
  • 未知高度的块级父子元素居中，模拟表格布局
  • 缺点：IE67不兼容，父级 overflow：hidden 失效
1
2
3
4
5
6
7
.container {
    display: table;
  }
  .content {
    display: table-cell;
    vertical-align: middle;
  }
  • 新增 inline-block 兄弟元素，设置 vertical-align
    • 缺点：需要增加额外标签，IE67不兼容
1
2
3
4
5
6
7
8
9
10
.container {
  height: 100%;/*定义父级高度，作为参考*/
}
.extra .vertical{
  display: inline-block;  /*行内块显示*/
  vertical-align: middle; /*垂直居中*/
}
.extra {
  height: 100%; /*设置新增元素高度为100%*/
}
  • 绝对定位配合 CSS3 位移
1
2
3
4
5
.vertical {
  position: absolute;
  top:50%;  /*父元素高度50%*/
  transform:translateY(-50%, -50%);
}
  • CSS3弹性盒模型
1
2
3
4
5
.container {
  display:flex;
  justify-content: center; /*子元素水平居中*/
  align-items: center; /*子元素垂直居中*/
}

❤ 三栏布局的实现方案

  • 得分点 圣杯布局、双飞翼布局、三栏高度不定、中间栏内容多先渲染
  • 标准回答 三栏布局，要求左右两边盒子宽度固定，中间盒子宽度自适应，盒子的高度都是随内容撑高的，一般都是中间盒子内容较多，为了保证页面渲染快，在写结构的时候，需要把中间盒子放在左右盒子的前面。 实现三栏布局的方法通常是圣杯布局和双飞翼布局。
  • 圣杯布局的实现方案：三个元素放在同一个父级元素中，代表中间盒子的元素放在最前面，父级盒子设置左右padding，三个盒子全部浮动，设置中间盒子宽度100%，左右盒子设置固定宽度，设置左边盒子左边距-100%同时相对自身定位，右边平移自身宽度，右边盒子设置右边距-自身宽度，最后设置父级盒子清除浮动，否则父级盒子的高度无法被撑开
  • 双飞翼布局的实现方案：三个盒子对应三个元素，其中中间盒子套了两层，中间盒子内部盒子设置margin,三个盒子全部浮动，设置中间盒子宽度100%，左右盒子设置固定宽度,设置左边盒子左边距-100%,右边盒子设置右边距-自身宽度，最后设置父级盒子清除浮动，否则父级盒子的高度无法被撑开
  • 加分回答
    • 圣杯布局:
      • 优点：不需要添加dom节点
      • 缺点：正常情况下是没有问题的，但是特殊情况下就会暴露此方案的弊端，当middle部分的宽小于left部分时就会发生布局混乱。
    • 双飞翼布局：
      • 优点：不会像圣杯布局那样变形，CSS样式代码更简洁
      • 缺点：多加了一层dom节点

❤ 选择器权重计算方式

!important > 内联样式 = 外联样式 > ID选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 元素选择器 = 伪元素选择器 > 通配选择器 = 后代选择器 = 兄弟选择器

  1. 属性后面加!import会覆盖页面内任何位置定义的元素样式
  2. 作为style属性写在元素内的样式
  3. id选择器
  4. 类选择器
  5. 标签选择器
  6. 通配符选择器（*）
  7. 浏览器自定义或继承

同一级别：后写的会覆盖先写的

css选择器的解析原则：选择器定位DOM元素是从右往左的方向，这样可以尽早的过滤掉一些不必要的样式规则和元素

  • 得分点： !important、行内样式、嵌入样式、外链样式、id选择器、类选择器、标签选择器、复合选择器、通配符、继承样式
  • 标准回答： CSS样式的优先级应该分成四大类
    • 第一类!important，无论引入方式是什么，选择器是什么，它的优先级都是最高的。
    • 第二类引入方式，行内样式的优先级要高于嵌入和外链，嵌入和外链如果使用的选择器相同就看他们在页面中插入的顺序，在后面插入的会覆盖前面的。
    • 第三类选择器，选择器优先级：id选择器 >（类选择器 | 伪类选择器 | 属性选择器 ）> （后代选择器 | 伪元素选择器 ）> （子选择器 | 相邻选择器） > 通配符选择器 。
    • 第四类继承样式，是所有样式中优先级比较低的。
    • 第五类浏览器默认样式优先级最低。
  • 加分回答： 使用!important要谨慎

    • 一定要优先考虑使用样式规则的优先级来解决问题而不是 !important

    • 只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important

    • 永远不要在你的插件中使用 !important

    • 永远不要在全站范围的 CSS 代码中使用 !important 优先级的比较指的是相同的样式属性，不同样式属性优先级比较失效，比如：在设置max-width时注意，已经给元素的max-width设置了!important但是还不生效，很有可能就是被width覆盖了

    • 举例：div最终的宽度还是200px 

      1
      2
      3
      4
      5
      6
      div { 
          max-width: 400px !important; 
          height: 200px;
          background-color: tomato; 
          width: 200px; 
      }

CSS选择符有哪些？哪些属性可以继承

  • id选择器（ #myid）
  • 类选择器（.myclassname）
  • 标签选择器（div, h1, p）
  • 相邻选择器（h1 + p）
  • 子选择器（ul > li）
  • 后代选择器（li a）
  • 通配符选择器（ * ）
  • 属性选择器（a[rel = "external"]）
  • 伪类选择器（a:hover, li:nth-child）

CSS哪些属性可以继承？哪些属性不可以继承

  • 可继承的样式： font-size font-family color, UL LI DL DD DT
  • 不可继承的样式：border padding margin width height

❤ 浮动和清除浮动

  1. 在浮动元素后面添加 clear:both的空 div 元素
1
2
3
4
5
<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div style="clear:both"></div>
</div>
  1. 给父元素添加 overflow:hidden 或者 auto 样式，触发BFC
1
2
3
4
5
6
7
8
9
10
11
12
<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>
<style>
.container{
    width: 300px;
    background-color: #aaa;
    overflow:hidden;
    zoom:1;   /*IE6*/
}
</style>
  1. 使用伪元素，也是在元素末尾添加一个点并带有 clear: both 属性的元素实现的。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="container clearfix">
    <div class="left"></div>
    <div class="right"></div>
</div>
<style>
.clearfix{
    zoom: 1; /*IE6*/
}
.clearfix:after{
    content: ".";
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
}
</style>

推荐使用第三种方法，不会在页面新增div，文档结构更加清晰

  • 得分点： 脱离文档流、盒子塌陷、 影响其他元素排版、伪元素 、overflow:hidden 、标签插入法

  • 标准回答： 浮动的作用，设置浮动的图片，可以实现文字环绕图片，设置了浮动的块级元素可以排列在同一行，设置了浮动的行内元素可以设置宽高，同时可以按照浮动设置的方向对齐排列盒子。

    • 设置浮动元素的特点：

      • 设置了浮动，该元素脱标。元素不占位置
      • 浮动可以进行模式转换（行内块元素） 浮动造成的影响，使盒子脱离文档流，如果父级盒子没有设置高度，需要被子盒子撑开，那么这时候父级盒子的高度就塌陷了，同时也会造成父级盒子后面的兄弟盒子布局受到影响。如果浮动元素后面还有其他兄弟元素，其他兄弟元素的布局也会受到影响。

    • 清除浮动的方法：

      • 伪元素清除浮动：上面三种

  • 加分回答： 三种清除浮动的特点和影响

    • 伪元素清除浮动：不会新增标签，不会有其他影响，是当下清除浮动最流行的方法
    • overflow：hidden：不会新增标签，但是如果父级元素有定位元素超出父级，超出部分会隐藏，在不涉及父级元素有超出内容的情况，overflow：hidden比较常用，毕竟写法方便简洁
    • 标签插入法：清除浮动的语法加在新增标签上，由于新增标签会造成不必要的渲染，所以这种方法目前不建议使用

几种常见的CSS布局

圣杯布局

  • 要求：三列布局；中间主体内容前置，且宽度自适应；两边内容定宽
    • 好处：重要的内容放在文档流前面可以优先渲染
    • 原理：利用相对定位、浮动、负边距布局，而不添加额外标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
  .container {
      padding-left: 150px;
      padding-right: 190px;
  }
  .main {
      float: left;
      width: 100%;
  }
  .left {
      float: left;
      width: 190px;
      margin-left: -100%;
      position: relative;
      left: -150px;
  }
  .right {
      float: left;
      width: 190px;
      margin-left: -190px;
      position: relative;
      right: -190px;
  }
<div class="container">
	<div class="main"></div>
	<div class="left"></div>
	<div class="right"></div>
</div>

双飞翼布局

  • 双飞翼布局：对圣杯布局（使用相对定位，对以后布局有局限性）的改进，消除相对定位布局
  • 原理：主体元素上设置左右边距，预留两翼位置。左右两栏使用浮动和负边距归位，消除相对定位。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.container {
    /*padding-left:150px;*/
    /*padding-right:190px;*/
}
.main-wrap {
    width: 100%;
    float: left;
}
.main {
    margin-left: 150px;
    margin-right: 190px;
}
.left {
    float: left;
    width: 150px;
    margin-left: -100%;
    /*position: relative;*/
    /*left:-150px;*/
}
.right {
    float: left;
    width: 190px;
    margin-left: -190px;
    /*position:relative;*/
    /*right:-190px;*/
}
<div class="content">
    <div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>

link与@import的区别

  1. link是HTML方式， @import是CSS方式
  2. link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC(文档样式短暂失效)
  3. link可以通过rel="alternate stylesheet"指定候选样式
  4. 浏览器对link支持早于@import，可以使用@import对老浏览器隐藏样式
  5. @import必须在样式规则之前，可以在css文件中引用其他文件
  6. 总体来说：link优于@import
  • link功能较多，可以定义 RSS，定义 Rel 等作用，而@import只能用于加载 css
  • 当解析到link时，页面会同步加载所引的 css，而@import所引用的 css 会等到页面加载完才被加载
  • @import需要 IE5 以上才能使用
  • link可以使用 js 动态引入，@import不行

❤ CSS3 的新特性

  • 新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}
  • 弹性盒模型 display: flex;
  • 多列布局 column-count: 5;
  • 媒体查询 @media (max-width: 480px) {.box: {column-count: 1;}}
  • 个性化字体 @font-face{font-family: BorderWeb; src:url(BORDERW0.eot);}
  • 颜色透明度 color: rgba(255, 0, 0, 0.75);
  • 圆角 border-radius: 5px;
  • 渐变 background:linear-gradient(red, green, blue);
  • 阴影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
  • 倒影 box-reflect: below 2px;
  • 文字装饰 text-stroke-color: red;
  • 文字溢出 text-overflow:ellipsis;
  • 背景效果 background-size: 100px 100px;
  • 边框效果 border-image:url(bt_blue.png) 0 10;
  • 转换
    • 旋转 transform: rotate(20deg);
    • 倾斜 transform: skew(150deg, -10deg);
    • 位移 transform: translate(20px, 20px);
    • 缩放 transform: scale(.5);
  • 平滑过渡 transition: all .3s ease-in .1s;
  • 动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;

CSS3新增伪类有那些？

  • p:first-of-type 选择属于其父元素的首个<p>元素的每个<p> 元素。
  • p:last-of-type 选择属于其父元素的最后 <p> 元素的每个<p> 元素。
  • p:only-of-type 选择属于其父元素唯一的 <p>元素的每个 <p> 元素。
  • p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
  • p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
  • :after 在元素之前添加内容,也可以用来做清除浮动。
  • :before 在元素之后添加内容。
  • :enabled 已启用的表单元素。
  • :disabled 已禁用的表单元素。
  • :checked 单选框或复选框被选中。

CSS3的新特性

  • transition：过渡
  • transform: 旋转、缩放、移动或倾斜
  • animation: 动画
  • gradient: 渐变
  • box-shadow: 阴影
  • border-radius: 圆角
  • word-break: normal|break-all|keep-all; 文字换行(默认规则|单词也可以换行|只在半角空格或连字符换行)
  • text-overflow: 文字超出部分处理
  • text-shadow: 水平阴影，垂直阴影，模糊的距离，以及阴影的颜色。
  • box-sizing: content-box|border-box 盒模型
  • 媒体查询 @media screen and (max-width: 960px) {}还有打印print

transition和animation的区别

Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition需要触发一个事件才能改变属性，而animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition为2帧，从from .... to，而animation可以一帧一帧的

CSS3新增伪类有那些

  • :root 选择文档的根元素，等同于 html 元素
  • :empty 选择没有子元素的元素
  • :target 选取当前活动的目标元素
  • :not(selector) 选择除 selector 元素意外的元素
  • :enabled 选择可用的表单元素
  • :disabled 选择禁用的表单元素
  • :checked 选择被选中的表单元素
  • :after 在元素内部最前添加内容
  • :before 在元素内部最后添加内容
  • :nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n
  • :nth-last-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n，从后向前数
  • :nth-child(odd)
  • :nth-child(even)
  • :nth-child(3n+1)
  • :first-child
  • :last-child
  • :only-child
  • :nth-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n
  • :nth-last-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n，从后向前数
  • :nth-of-type(odd)
  • :nth-of-type(even)
  • :nth-of-type(3n+1)
  • :first-of-type
  • :last-of-type
  • :only-of-type
  • ::selection 选择被用户选取的元素部分
  • :first-line 选择元素中的第一行
  • :first-letter 选择元素中的第一个字符

❤ CSS动画和过渡

animation / keyframes

  • animation-name: 动画名称，对应@keyframes
  • animation-duration: 间隔
  • animation-timing-function: 曲线
  • animation-delay: 延迟
  • animation-iteration-count: 次数
    • infinite: 循环动画
  • animation-direction: 方向
    • alternate: 反向播放
  • animation-fill-mode: 静止模式
    • forwards: 停止时，保留最后一帧
    • backwards: 停止时，回到第一帧
    • both: 同时运用 forwards / backwards
  • 常用钩子: animationend

动画属性: 尽量使用动画属性进行动画，能拥有较好的性能表现

  • translate
  • scale
  • rotate
  • skew
  • opacity
  • color

transform

  • 位移属性 translate( x , y )
  • 旋转属性 rotate()
  • 缩放属性 scale()
  • 倾斜属性 skew()

transition

  • transition-property（过渡的属性的名称）。
  • transition-duration（定义过渡效果花费的时间,默认是 0）。
  • transition-timing-function:linear(匀速) ease(慢速开始，然后变快，然后慢速结束)（规定过渡效果的时间曲线，最常用的是这两个）。
  • transition-delay（规定过渡效果何时开始。默认是 0）

般情况下，我们都是写一起的，比如：transition： width 2s ease 1s

关键帧动画animation

一个关键帧动画，最少包含两部分，animation 属性及属性值（动画的名称和运行方式运行时间等）。@keyframes（规定动画的具体实现过程）

animation 属性可以拆分为

  • animation-name 规定@keyframes 动画的名称。
  • animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
  • animation-timing-function 规定动画的速度曲线。默认是 “ease”，常用的还有linear，同transtion 。
  • animation-delay 规定动画何时开始。默认是 0。
  • animation-iteration-count 规定动画被播放的次数。默认是 1，但我们一般用infinite，一直播放

而@keyframes的使用方法，可以是from->to（等同于0%和100%），也可以是从0%->100%之间任意个的分层设置。我们通过下面一个稍微复杂点的demo来看一下，基本上用到了上面说到的大部分知识

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
eg:
   @keyframes mymove
  {
      from {top:0px;}
      to {top:200px;}
  }
/* 等同于： */
@keyframes mymove
{
 0%   {top:0px;}
 25%  {top:200px;}
 50%  {top:100px;}
 75%  {top:200px;}
 100% {top:0px;}
}

用css3动画使一个图片旋转

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
#loader {
    display: block;
    position: relative;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

CSS3动画（简单动画的实现，如旋转等）

  • 依靠CSS3中提出的三个属性：transition、transform、animation
  • transition：定义了元素在变化过程中是怎么样的，包含transition-property、transition-duration、transition-timing-function、transition-delay。
  • transform：定义元素的变化结果，包含rotate、scale、skew、translate。
  • animation：动画定义了动作的每一帧（@keyframes）有什么效果，包括animation-name，animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction

如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

  • 多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60*1000ms ＝ 16.7ms

说一说css3的animation

  • css3的animation是css3新增的动画属性，这个css3动画的每一帧是通过@keyframes来声明的，keyframes声明了动画的名称，通过from、to或者是百分比来定义
  • 每一帧动画元素的状态，通过animation-name来引用这个动画，同时css3动画也可以定义动画运行的时长、动画开始时间、动画播放方向、动画循环次数、动画播放的方式，
  • 这些相关的动画子属性有：animation-name定义动画名、animation-duration定义动画播放的时长、animation-delay定义动画延迟播放的时间、animation-direction定义 动画的播放方向、animation-iteration-count定义播放次数、animation-fill-mode定义动画播放之后的状态、animation-play-state定义播放状态，如暂停运行等、animation-timing-function
  • 定义播放的方式，如恒速播放、艰涩播放等。

❤ css 中可继承和不可继承的元素

  • 不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align

可继承的只有：颜色、文字、字体间距、行高对齐方式，列表样式。

所有元素可继承：visibility和cursor。

  • 内联元素可继承：
    • letter-spacing
    • word-spacing
    • white-space
    • line-height
    • color
    • font
    • font-family
    • font-size
    • font-style
    • font-variant
    • font-weight
    • text-decoration
    • text-transform
    • direction
  • 块状：text-indent和text-align。
  • 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image

transition和animation的区别

Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition需要触发一个事件才能改变属性，而animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition为2帧，从from .... to，而animation可以一帧一帧的

CSS有哪些继承属性

  • 关于文字排版的属性如：
    • font
      • word-break
      • letter-spacing
      • text-align
      • text-rendering
      • word-spacing
      • white-space
      • text-indent
      • text-transform
      • text-shadow
    • line-height
    • color
    • visibility
    • cursor

❤ 重绘和回流（重排）是什么，如何避免？

  • 重绘：当渲染树中的元素外观（如：颜色）发生改变，不影响布局时，产生重绘
  • 回流：当渲染树中的元素的布局（如：尺寸、位置、隐藏/状态状态）发生改变时，产生重绘回流
  • 注意：JS获取Layout属性值（如：offsetLeft、scrollTop、getComputedStyle等）也会引起回流。因为浏览器需要通过回流计算最新值
  • 回流必将引起重绘，而重绘不一定会引起回流

**如何最小化重绘(repaint)和回流(reflow)**：

  • 需要要对元素进行复杂的操作时，可以先隐藏(display:"none")，操作完成后再显示
  • 需要创建多个DOM节点时，使用DocumentFragment创建完后一次性的加入document
  • 缓存Layout属性值，如：var left = elem.offsetLeft; 这样，多次使用 left 只产生一次回流
  • 尽量避免用table布局（table元素一旦触发回流就会导致table里所有的其它元素回流）
  • 避免使用css表达式(expression)，因为每次调用都会重新计算值（包括加载页面）
  • 尽量使用 css 属性简写，如：用 border 代替 border-width, border-style, border-color
  • 批量修改元素样式：elem.className 和 elem.style.cssText 代替 elem.style.xxx
  • 得分点 改变元素尺寸、重新计算布局树、重排必定重绘、重绘避开了重建布局树和分层、GPU加速、脱离文档流、样式集中改变
  • 标准回答
    • 重排 ：当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。
    • 重绘：当一个元素的外观发生改变，但没有改变布局，重新把元素外观绘制出来的过程，所以重绘跳过了创建布局树和分层的阶段。 重排需要重新计算布局树，重绘不需要，重排必定发生重绘，但是涉及到重绘不一定要重排。涉及到重排对性能的消耗更多一些。
    • 触发重排的方法：
      • 页面初始渲染，这是开销最大的一次重排
      • 添加/删除可见的DOM元素
      • 改变元素位置 -改变元素尺寸，比如边距、填充、边框、宽度和高度等
      • 改变元素内容，比如文字数量，图片大小等 -改变元素字体大小 -改变浏览器窗口尺寸，比如resize事件发生时
      • 激活CSS伪类（例如：:hover）
      • 设置 style 属性的值，因为通过设置style属性改变结点样式的话，每一次设置都会触发一次reflow
      • 查询某些属性或调用某些计算方法：offsetWidth、offsetHeight等 避免重排的方式
      • 样式集中改变
      • 使用 absolute 或 fixed 脱离文档流
      • 使用GPU加速:transform
  • 加分回答
    • GPU的过程是以下这几步 : 1. 获取DOM并将其分割成多个层(renderLayer) 2. 将每个层栅格化，并独立的绘制进位图中 3. 将这些位图作为纹理上传至GPU 4. 复合多个层来生成最终的屏幕图像(最后的layer) 开启了GPU加速的元素被独立出来，不会再影响其他dom的布局，因为它改变之后，只是相当于被贴上了页面。

伪类和伪元素

css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素都是用来修饰不在文档树中的部分

伪类

伪类存在的意义是为了通过选择器找到那些不存在DOM树中的信息以及不能被常规CSS选择器获取到的信息

  1. 获取不存在与DOM树中的信息。比如a标签的:link、visited等，这些信息不存在与DOM树结构中，只能通过CSS选择器来获取；
  2. 获取不能被常规CSS选择器获取的信息。比如：要获取第一个子元素，我们无法用常规的CSS选择器获取，但可以通过 :first-child 来获取到。

img

伪元素

伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。常见的伪元素有：::before，::after，::first-line，::first-letter，::selection、::placeholder等

因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素

::after和:after的区别

  • 在实际的开发工作中，我们会看到有人把伪元素写成:after，这实际是 CSS2 与CSS3新旧标准的规定不同而导致的。
  • CSS2 中的伪元素使用1个冒号，在 CSS3 中，为了区分伪类和伪元素，规定伪元素使用2个冒号。所以，对于 CSS2 标准的老伪元素，比如:first-line，:first-letter，:before，:after，写一个冒号浏览器也能识别，但对于 CSS3 标准的新伪元素，比如::selection，就必须写2个冒号了

CSS3新增伪类有那些？

  • p:first-of-type 选择属于其父元素的首个<p>元素的每个<p> 元素。
  • p:last-of-type 选择属于其父元素的最后 <p> 元素的每个<p> 元素。
  • p:only-of-type 选择属于其父元素唯一的 <p>元素的每个 <p> 元素。
  • p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
  • p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
  • :after 在元素之前添加内容,也可以用来做清除浮动。
  • :before 在元素之后添加内容
  • :enabled
  • :disabled 控制表单控件的禁用状态。
  • :checked 单选框或复选框被选中

❤ 尺寸设置的单位

  • 得分点 px、rem、em、vw、vh
  • 标准回答
    • px：pixel像素的缩写，绝对长度单位，它的大小取决于屏幕的分辨率，是开发网页中常常使用的单位。
    • em：相对长度单位，在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小（浏览器默认字体是16px），如 width。如当前元素的字体尺寸未设置，由于字体大小可继承的原因，可逐级向上查找，最终找不到则相对于浏览器默认字体大小。
    • rem：相对长度单位，可理解为 ”root em”，相对于根元素的字体大小，根元素字体大小未设置，使用浏览器默认字体大小。CSS3新加属性，chrome/firefox/IE9+支持
    • vw：相对长度单位，相对于视窗宽度的1%。
    • vh：相对长度单位，相对于视窗高度的1%。
  • 加分回答
    • rem应用：在移动端网页开发中，页面要做成响应式的，可使用rem配合媒体查询或者flexible.js实现。
      • 原理是通过媒体查询或者flexible.js，能够在屏幕尺寸发生改变时，重置html根元素的字体大小，页面中的元素都是使用rem为单位设置的尺寸，因此只要改变根元素字体大小，页面中的其他元素的尺寸就自动跟着修改
    • vw应用：由于vw被更多浏览器兼容之后，在做移动端响应式页面时，通常使用vw配合rem。
      • 原理是使用vw设置根元素html字体的大小，当窗口大小发生改变，vw代表的尺寸随着修改，无需加入媒体查询和flexible.js，页面中的其他元素仍使用rem为单位，就可实现响应式。

在移动端中怎样初始化根元素的字体大小

一个简易版的初始化根元素字体大小。

页面开头处引入下面这段代码，用于动态计算font-size：

(假设你需要的1rem = 20px)

1
2
3
4
5
6
7
8
(function () {
  var html = document.documentElement;
  function onWindowResize() {
    html.style.fontSize = html.getBoundingClientRect().width / 20 + 'px';
  }
  window.addEventListener('resize', onWindowResize);
  onWindowResize();
})();
  • document.documentElement：获取document的根元素
  • html.getBoundingClientRect().width：获取html的宽度(窗口的宽度)
  • 监听window的resize事件

一般还需要配合一个meta头：

1
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-sacle=1.0, maximum-scale=1.0, user-scalable=no" />

如何实现小于12px的字体效果

transform:scale()这个属性只可以缩放可以定义宽高的元素，而行内元素是没有宽高的，我们可以加上一个display:inline-block;

1
transform: scale(0.7);

css的属性，可以缩放大小

CSS 弹性布局 flex

很多时候我们会用到 flex: 1 ，它具体包含了以下的意思

  • flex-grow: 1 ：该属性默认为 0 ，如果存在剩余空间，元素也不放大。设置为 1 代表会放大。
  • flex-shrink: 1 ：该属性默认为 1 ，如果空间不足，元素缩小。
  • flex-basis: 0% ：该属性定义在分配多余空间之前，元素占据的主轴空间。浏览器就是根据这个属性来计算是否有多余空间的。默认值为 auto ，即项目本身大小。设置为 0% 之后，因为有 flex-grow 和 flex-shrink 的设置会自动放大或缩小。在做两栏布局时，如果右边的自适应元素 flex-basis 设为auto 的话，其本身大小将会是 0

flex 布局 align-content 和 align-item 的区别

最明显的区别是align-content 适用于多行，align-item 则是适用于单行。

line-height 如何继承

  • 父元素的 line-height 写了具体数值，比如 30px，则子元素 line-height 继承该值。
  • 父元素的 line-height 写了比例，比如 1.5或 2，则子元素 line-height 也是继承该比例。
  • 父元素的 line-height 写了百分比，比如 200%，则子元素 line-height 继承的是父元素 font-size * 200% 计算出来的值

有哪些方式（CSS）可以隐藏页面元素

  • opacity:0：本质上是将元素的透明度将为0，就看起来隐藏了，但是依然占据空间且可以交互 CSS3属性
  • visibility:hidden: 与上一个方法类似的效果，占据空间，但是不可以交互了
  • overflow:hidden: 这个只隐藏元素溢出的部分，但是占据空间且不可交互
  • display:none: 这个是彻底隐藏了元素，元素从文档流中消失，既不占据空间也不交互，也不影响布局
  • z-index:-9999: 原理是将层级放到底部，这样就被覆盖了，看起来隐藏了
  • transform: scale(0,0): 平面变换，将元素缩放为0，但是依然占据空间，但不可交互
  • 少用：
    • position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外
    • height: 0; 将元素高度设为 0 ，并消除边框
    • filter: blur(0); CSS3属性，将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中
    • <div hidden="hidden"> HTML5属性,效果和display:none;相同，但这个属性用于记录一个元素的状态

display: none; 与 visibility: hidden;的区别

  • 联系：它们都能让元素不可见
  • 区别：
    • display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见
    • display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility: hidden;是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式
    • 修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘。
    • 读屏器不会读取display: none;元素内容；会读取visibility: hidden;元素内容

rgba() 和 opacity 的透明效果有什么不同？

  • rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，
  • 而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

css sprite是什么,有什么优缺点

  • 概念：将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。
  • 优点：
    • 减少HTTP请求数，极大地提高页面加载速度
    • 增加图片信息重复度，提高压缩比，减少图片大小
    • 更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现
  • 缺点：
    • 图片合并麻烦
    • 维护麻烦，修改一个图片可能需要从新布局整个图片，样式

什么是 FOUC?如何避免

  • Flash Of Unstyled Content：用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再从新显示文档，造成页面闪烁。
  • 解决方法：把样式表放到文档的<head>

display、float、position的关系

  • 如果display取值为none，那么position和float都不起作用，这种情况下元素不产生框
  • 否则，如果position取值为absolute或者fixed，框就是绝对定位的，float的计算值为none，display根据下面的表格进行调整。

img

  • 否则，如果float不是none，框是浮动的，display根据下表进行调整
  • 否则，如果元素是根元素，display根据下表进行调整
  • 其他情况下display的值为指定值
  • 总结起来：绝对定位、浮动、根元素都需要调整display

为什么要初始化CSS样式?

  • 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
  • 当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化

display 有哪些值？说明他们的作用

  • block 转换成块状元素。
  • inline 转换成行内元素。
  • none 设置元素不可见。
  • inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
  • list-item 象块类型元素一样显示，并添加样式列表标记。
  • table 此元素会作为块级表格来显示
  • inherit 规定应该从父元素继承 display 属性的值

position 的值， relative和absolute 定位原点是

  • absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位
  • fixed：生成绝对定位的元素，相对于浏览器窗口进行定位
  • relative：生成相对定位的元素，相对于其正常位置进行定位
  • static 默认值。没有定位，元素出现在正常的流中
  • inherit 规定从父元素继承 position 属性的值

display:inline-block 什么时候不会显示间隙？(携程)

  • 移除空格
  • 使用margin负值
  • 使用font-size:0
  • letter-spacing
  • word-spacing

PNG、GIF、JPG的区别及如何选

  • GIF
    • 8位像素，256色
    • 无损压缩
    • 支持简单动画
    • 支持boolean透明
    • 适合简单动画
  • JPEG
    • 颜色限于256
    • 有损压缩
    • 可控制压缩质量
    • 不支持透明
    • 适合照片
  • PNG
    • 有PNG8和truecolor PNG
    • PNG8类似GIF颜色上限为256，文件小，支持alpha透明度，无动画
    • 适合图标、背景、按钮

浏览器如何判断是否支持 webp 格式图片

  • 宽高判断法。
    • 通过创建image对象，将其src属性设置为webp格式的图片，然后在onload事件中获取图片的宽高，如果能够获取，则说明浏览器支持webp格式图片。如果不能获取或者触发了onerror函数，那么就说明浏览器不支持webp格式的图片
  • canvas判断方法。
    • 我们可以动态的创建一个canvas对象，通过canvas的toDataURL将设置为webp格式，然后判断返回值中是否含有image/webp字段，如果包含则说明支持WebP，反之则不支持

行内元素float:left后是否变为块级元素？

行内元素设置成浮动之后变得更加像是inline-block（行内块级元素，设置成这个属性的元素会同时拥有行内和块级的特性，最明显的不同是它的默认宽度不是100%），这时候给行内元素设置padding-top和padding-bottom或者width、height都是有效果的

CSS在性能优化方面的实践

  • css压缩与合并、Gzip压缩
  • 避免使用@import引入多个css文件，可以使用CSS工具将CSS合并为一个CSS文件，例如使用Sass\Compass等
  • css文件放在head里、不要用@import
  • 尽量用缩写、避免用滤镜、合理使用选择器

CSS加载问题

根据页面渲染流程可得知：

  • css加载不会阻塞DOM树的解析;
  • css加载会阻塞DOM树的渲染；
  • css加载会阻塞后面js语句的执行

CSS优化、提高性能的方法有哪些

  • 多个css合并，尽量减少HTTP请求
  • 将css文件放在页面最上面
  • 移除空的css规则
  • 避免使用CSS表达式
  • 选择器优化嵌套，尽量避免层级过深
  • 充分利用css继承属性，减少代码量
  • 抽象提取公共样式，减少代码量
  • 属性值为0时，不加单位
  • 属性值为小于1的小数时，省略小数点前面的0
  • css雪碧图

base64的原理及优缺点

  • 优点可以加密，减少了HTTP请求
  • 缺点是需要消耗CPU进行编解码

stylus/sass/less区别

  • 均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性
  • Scss和LESS语法较为严谨，LESS要求一定要使用大括号“{}”，Scss和Stylus可以通过缩进表示层次与嵌套关系
  • Scss无全局变量的概念，LESS和Stylus有类似于其它语言的作用域概念
  • Sass是基于Ruby语言的，而LESS和Stylus可以基于NodeJS NPM下载相应库后进行编译；

postcss 的作用

  • 可以直观的理解为：它就是一个平台。为什么说它是一个平台呢？因为我们直接用它，感觉不能干什么事情，但是如果让一些插件在它上面跑，那么将会很强大
  • PostCSS 提供了一个解析器，它能够将 CSS 解析成抽象语法树
  • 通过在 PostCSS 这个平台上，我们能够开发一些插件，来处理我们的CSS，比如热门的：autoprefixer
  • postcss可以对sass处理过后的css再处理 最常见的就是autoprefixer

如何美化 CheckBox

  • <label> 属性 for 和 id
  • 隐藏原生的 <input>
  • :checked + <label>

base64的使用

  • 用于减少 HTTP 请求
  • 适用于小图片
  • base64的体积约为原图的4/3

什么是外边距重叠？重叠的结果是什么？

外边距重叠就是margin-collapse

  • 在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

折叠结果遵循下列计算规则：

  • 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
  • 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
  • 两个外边距一正一负时，折叠结果是两者的相加的和。

外边距折叠(collapsing margins)

  • 毗邻的两个或多个margin会合并成一个margin，叫做外边距折叠。规则如下：
    • 两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠
    • 浮动元素或inline-block元素或绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠
    • 创建了块级格式化上下文的元素，不会和它的子元素发生margin折叠
    • 元素自身的margin-bottom和margin-top相邻时也会折

可以让文字在垂直和水平方向上重叠的两个属性是什么？

  • 垂直方向：line-height
  • 水平方向：letter-spacing

Sass、LESS是什么？大家为什么要使用他们？

  • 他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。
  • 例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)

为什么要使用它们？

  • 结构清晰，便于扩展。
  • 可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对- 浏览器语法差异的重复处理，减少无意义的机械劳动。
  • 可以轻松实现多重继承。
  • 完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只- 是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译

知道css有个content属性吗？有什么作用？有什么应用？

css的content属性专门应用在 before/after伪元素上，用于来插入生成内容。最常见的应用是利用伪类清除浮动。

1
2
3
4
5
6
7
8
9
10
11
/**一种常见利用伪类清除浮动的代码**/
.clearfix:after {
    content:".";       //这里利用到了content属性
    display:block;
    height:0;
    visibility:hidden;
    clear:both;
 }
.clearfix {
    *zoom:1;
}

CSS 实现硬件加速(GPU 加速)

硬件加速是指通过创建独立的复合图层，让GPU来渲染这个图层，从而提高性能，

  • 一般触发硬件加速的CSS属性有transform、opacity、filter，为了避免2D动画在 开始和结束的时候的repaint操作，一般使用tranform:translateZ(0)

浏览器在处理下面的 css 的时候，会使用 GPU 渲染

  • transform（当 3D 变换的样式出现时会使用 GPU 加速）
  • opacity
  • filter
  • will-change
  • 采用 transform: translateZ(0)
  • 采用 transform: translate3d(0, 0, 0)
  • 使用 CSS 的 will-change属性。 will-change 可以设置为opacity、transform、top、left、bottom、right`

注意！层爆炸，由于某些原因可能导致产生大量不在预期内的合成层，虽然有浏览器的层压缩机制，但是也有很多无法进行压缩的情况，这就可能出现层爆炸的现象（简单理解就是，很多不需要提升为合成层的元素因为某些不当操作成为了合成层）。

解决层爆炸的问题，最佳方案是打破 overlap 的条件，也就是说让其他元素不要和合成层元素重叠。

简单直接的方式：使用 3D 硬件加速提升动画性能时，最好给元素增加一个 z-index 属性，人为干扰合成的排序，可以有效减少创建不必要的合成层，提升渲染性能，移动端优化效果尤为明显。

说说 will-change

will-change是CSS3新增的标准属性，它的作用很单纯，就是"增强页面渲染性能"，当我们在通过某些行为触发页面进行大面积绘制的时候，浏览器往往是没有准备，只能被动的使用CPU去计算和重绘，由于事先没有准备，对于一些复杂的渲染可能会出现掉帧、卡顿等情况。而will-change则是在真正的行为触发之前告诉浏览器可能要进行重绘了，相当于浏览器把CPU拉上了，能从容的面对接下来的变形。

常用的语法主要有：

  • whil-change: scroll-position; 即将开始滚动
  • will-change: contents; 内容要动画或者变化了
  • will-transform; transform相关的属性要变化了(常用)

注意：

  • will-change虽然可以开启加速，但是一定要适度使用
  • 开启加速的代价为手机的耗电量会增加
  • 使用时遵循最小化影响原则，可以对伪元素开启加速，独立渲染
  • 可以写在伪类中，例如hover中，这样移出元素的时候就会自动remove掉will-change了
  • 如果使用JS添加了will-change，注意要及时remove掉，方式就是style.willChange = 'auto'

css hack原理及常用hack

  • 原理：利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器样式。
  • 常见的hack有
    • 属性hack
    • 选择器hack
    • IE条件注释

编程题

画一条 0.5px 的线

  • 采用 meta viewport 的方式 <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  • 采用 border-image 的方式
  • 采用 transform: scale() 的方式

CSS 画一个三角形

三角形原理:边框的均分原理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* 把上、左、右三条边隐藏掉（颜色设为 transparent） */
#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
  /* 顺序：上右下左 */
}

div {
  width:0px;
  height:0px;
  border-top:10px solid red; 
  border-right:10px solid transparent; 
  border-bottom:10px solid transparent;
  border-left:10px solid transparent;
}

圆？半圆？椭圆？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
div {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-top: 20px;
}
.box1 { /* 圆 */
  /* border-radius: 50%; */
  border-radius: 50px;
}
.box2 { /* 半圆 */
  height: 50px;
  border-radius: 50px 50px 0 0;
}
.box3 { /* 椭圆 */
  height: 50px;
  border-radius: 50px/25px; /* x轴/y轴 */
}

左边定宽，右边自适应方案

流体布局

float + margin，float + calc

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 方案1 */
.left {
  width: 120px;
  float: left;
}
.right {
  margin-left: 120px;
}
/* 方案2 */
.left {
  width: 120px;
  float: left;
}
.right {
  width: calc(100% - 120px);
  float: left;
}

左右两边定宽，中间自适应

float，float + calc, 圣杯布局（设置BFC，margin负值法），flex

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
.wrap {
  width: 100%;
  height: 200px;
}
.wrap > div {
  height: 100%;
}
/* 方案1 */
.left {
  width: 120px;
  float: left;
}
.right {
  float: right;
  width: 120px;
}
.center {
  margin: 0 120px;
}
/* 方案2 */
.left {
  width: 120px;
  float: left;
}
.right {
  float: right;
  width: 120px;
}
.center {
  width: calc(100% - 240px);
  margin-left: 120px;
}
/* 方案3 */
.wrap {
  display: flex;
}
.left {
  width: 120px;
}
.right {
  width: 120px;
}
.center {
  flex: 1;
}

左边宽度固定，右边自适应

左侧固定宽度，右侧自适应宽度的两列布局实现

1
2
3
4
<div class="outer">
    <div class="left">固定宽度</div>
    <div class="right">自适应宽度</div>
</div>

在外层div（类名为outer）的div中，有两个子div，类名分别为left和right，其中left为固定宽度，而right为自适应宽度

方法1：左侧div设置成浮动：float: left，右侧div宽度会自动拉升适应

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.outer {
    width: 100%;
    height: 500px;
    background-color: yellow;
}
.left {
    width: 200px;
    height: 200px;
    background-color: red;
    float: left;
}
.right {
    height: 200px;
    background-color: blue;
}

方法2：对右侧:div进行绝对定位，然后再设置right=0，即可以实现宽度自适应

绝对定位元素的第一个高级特性就是其具有自动伸缩的功能，当我们将 width设置为 auto 的时候（或者不设置，默认为 auto ），绝对定位元素会根据其 left 和 right 自动伸缩其大小

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.outer {
    width: 100%;
    height: 500px;
    background-color: yellow;
    position: relative;
}
.left {
    width: 200px;
    height: 200px;
    background-color: red;
}
.right {
    height: 200px;
    background-color: blue;
    position: absolute;
    left: 200px;
    top:0;
    right: 0;
}

方法3：将左侧div进行绝对定位，然后右侧div设置margin-left: 200px

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.outer {
    width: 100%;
    height: 500px;
    background-color: yellow;
    position: relative;
}
.left {
    width: 200px;
    height: 200px;
    background-color: red;
    position: absolute;
}
.right {
    height: 200px;
    background-color: blue;
    margin-left: 200px;
}

方法4：使用flex布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.outer {
    width: 100%;
    height: 500px;
    background-color: yellow;
    display: flex;
    flex-direction: row;
}
.left {
    width: 200px;
    height: 200px;
    background-color: red;
}
.right {
    height: 200px;
    background-color: blue;
    flex: 1;
}

两种以上方式实现已知或者未知宽度的垂直水平居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/** 1 **/
.wraper {
  position: relative;
  .box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
  }
}

/** 2 **/
.wraper {
  position: relative;
  .box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

/** 3 **/
.wraper {
  .box {
    display: flex;
    justify-content:center;
    align-items: center;
    height: 100px;
  }
}

/** 4 **/
.wraper {
  display: table;
  .box {
    display: table-cell;
    vertical-align: middle;
  }
}

CSS画圆半圆扇形三角梯形

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
div{
    margin: 50px;
    width: 100px;
    height: 100px;
    background: red;
}
/* 半圆 */
.half-circle{
    height: 50px;
    border-radius: 50px 50px 0 0;
}
/* 扇形 */
.sector{
    border-radius: 100px 0 0;
}
/* 三角 */
.triangle{
    width: 0px;
    height: 0px;
    background: none;
    border: 50px solid red;
    border-color: red transparent transparent transparent;
}
/* 梯形 */
.ladder{
    width: 50px;
    height: 0px;
    background: none;
    border: 50px solid red;
    border-color: red transparent transparent transparent;
}

页面变灰

1
2
3
body {
	filter: grayscale(100%); /* 百分比或者 0~1 */
}

文字单超出显示省略号

1
2
3
4
5
6
div {
	width: 200px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

文字多行超出显示省略号

1
2
3
4
5
6
7
div {
	width: 200px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

该方法适用于WebKit浏览器及移动端。

跨浏览器兼容方案：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
p {
    position:relative;
    line-height:1.4em;
    /* 3 times the line-height to show 3 lines */
    height:4.2em;
    overflow:hidden;
}
p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
}

一个满屏 品 字布局 如何设计?

  • 简单的方式：
    • 上面的div宽100%，
    • 下面的两个div分别宽50%，
    • 然后用float或者inline使其不换行即可

全屏滚动的原理是什么？ 用到了CSS的那些属性

  • 原理类似图片轮播原理，超出隐藏部分，滚动时显示
  • 可能用到的CSS属性：overflow:hidden; transform:translate(100%, 100%); display:none;

请用CSS写一个简单的幻灯片效果页面

知道是要用CSS3。使用animation动画实现一个简单的幻灯片效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/**css**/
.ani{
  width:480px;
  height:320px;
  margin:50px auto;
  overflow: hidden;
  box-shadow:0 0 5px rgba(0,0,0,1);
  background-size: cover;
  background-position: center;
  -webkit-animation-name: "loops";
  -webkit-animation-duration: 20s;
  -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes "loops" {
    0% {
        background:url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg) no-repeat;
    }
    25% {
        background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) no-repeat;
    }
    50% {
        background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no-repeat;
    }
    75% {
        background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no-repeat;
    }
    100% {
        background:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) no-repeat;
    }
}

如何修改Chrome记住密码后自动填充表单的黄色背景

  • 产生原因：由于Chrome默认会给自动填充的input表单加上 input:-webkit-autofill 私有属性造成的
  • 解决方案1：在form标签上直接关闭了表单的自动填充：autocomplete="off"
  • 解决方案2：input:-webkit-autofill { background-color: transparent; }

input [type=search] 搜索框右侧小图标如何美化？

1
2
3
4
5
6
7
8
input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance: none;
  height: 15px;
  width: 15px;
  border-radius: 8px;
  background:url("images/searchicon.png") no-repeat 0 0;
  background-size: 15px 15px;
}

iOS safari 如何阻止“橡皮筋效果”

1
2
3
4
5
6
7
$(document).ready(function(){
    var stopScrolling = function(event) {
        event.preventDefault();
    }
    document.addEventListener('touchstart', stopScrolling, false);
    document.addEventListener('touchmove', stopScrolling, false);
});

网站图片文件，如何点击下载？而非点击预览

<a href="logo.jpg" download>下载</a> <a href="logo.jpg" download="网站LOGO" >下载</a>

li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法

行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了

为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异

经常遇到的浏览器的JS兼容性有哪些？解决方法是什么

  • 当前样式：getComputedStyle(el, null) VS el.currentStyle
  • 事件对象：e VS window.event
  • 鼠标坐标：e.pageX, e.pageY VS window.event.x, window.event.y
  • 按键码：e.which VS event.keyCode
  • 文本节点：el.textContent VS el.innerText

在网页中的应该使用奇数还是偶数的字体

  • 在网页中的应该使用“偶数”字体：
    • 偶数字号相对更容易和 web 设计的其他部分构成比例关系
    • 使用奇数号字体时文本段落无法对齐
    • 宋体的中文网页排布中使用最多的就是 12 和 14

抽离样式模块怎么写，说出思路

  • CSS可以拆分成2部分：公共CSS 和 业务CSS：
    • 网站的配色，字体，交互提取出为公共CSS。这部分CSS命名不应涉及具体的业务
    • 对于业务CSS，需要有统一的命名，使用公用的前缀。可以参考面向对象的CSS

元素竖向的百分比设定是相对于容器的高度吗

元素竖向的百分比设定是相对于容器的宽度，而不是高度

什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE

  • 响应式设计就是网站能够兼容多个终端，而不是为每个终端做一个特定的版本
  • 基本原理是利用CSS3媒体查询，为不同尺寸的设备适配不同样式
  • 对于低版本的IE，可采用JS获取屏幕宽度，然后通过resize方法来实现兼容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(window).resize(function () {
  screenRespond();
});
screenRespond();
function screenRespond(){
    var screenWidth = $(window).width();
    if(screenWidth <= 1800){
      $("body").attr("class", "w1800");
    }
    if(screenWidth <= 1400){
      $("body").attr("class", "w1400");
    }
    if(screenWidth > 1800){
      $("body").attr("class", "");
    }
}

什么是视差滚动效果，如何给每页做不同的动画

  • 视差滚动是指多层背景以不同的速度移动，形成立体的运动效果，具有非常出色的视觉体验
  • 一般把网页解剖为：背景层、内容层和悬浮层。当滚动鼠标滚轮时，各图层以不同速度移动，形成视差的
  • 实现原理
    • 以 “页面滚动条” 作为 “视差动画进度条”
    • 以 “滚轮刻度” 当作 “动画帧度” 去播放动画的
    • 监听 mousewheel 事件，事件被触发即播放动画，实现“翻页”效果

a标签上四个伪类的执行顺序是怎么样的

1
link > visited > hover > active
  • L-V-H-A love hate 用喜欢和讨厌两个词来方便记忆

::before 和 :after 中双冒号和单冒号有什么区别

  • 在 CSS 中伪类一直用 : 表示，如 :hover, :active 等
  • 伪元素在CSS1中已存在，当时语法是用 : 表示，如 :before 和 :after
  • 后来在CSS3中修订，伪元素用 :: 表示，如 ::before 和 ::after，以此区分伪元素和伪类
  • 由于低版本IE对双冒号不兼容，开发者为了兼容性各浏览器，继续使使用 :after 这种老语法表示伪元素
  • 综上所述：::before 是 CSS3 中写伪元素的新语法； :after 是 CSS1 中存在的、兼容IE的老语法

line-height 是如何理解的

  • line-height 指一行字的高度，包含了字间距，实际上是下一行基线到上一行基线距离
  • 如果一个标签没有定义 height 属性，那么其最终表现的高度是由 line-height 决定的
  • 一个容器没有设置高度，那么撑开容器高度的是 line-height 而不是容器内的文字内容
  • 把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中
  • line-height 和 height 都能撑开一个高度，height 会触发 haslayout，而 line-height 不会

line-height 三种赋值方式有何区别？（带单位、纯数字、百分比）

  • 带单位：px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高
  • 纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px
  • 百分比：将计算后的值传递给后代

让页面里的字体变清晰，变细用CSS怎么做？（IOS手机浏览器字体齿轮设置）

1
-webkit-font-smoothing: antialiased;

display:inline-block 什么时候会显示间隙

  • 相邻的 inline-block 元素之间有换行或空格分隔的情况下会产生间距
  • 非 inline-block 水平元素设置为 inline-block 也会有水平间距
  • 可以借助 vertical-align:top; 消除垂直间隙
  • 可以在父级加 font-size：0; 在子元素里设置需要的字体大小，消除垂直间隙
  • 把 li 标签写到同一行可以消除垂直间隙，但代码可读性差

一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度

  • 方案1：
    • .sub { height: calc(100%-100px); }
  • 方案2：
    • .container { position:relative; }
    • .sub { position: absolute; top: 100px; bottom: 0; }
  • 方案3：
    • .container { display:flex; flex-direction:column; }
    • .sub { flex:1; }

未解决问题：

CSS 弹性布局几种方式

相关文章