web前端HTML5和CSS3面试题

web前端HTML5和CSS3面试题

第一章 HTML入门

1、你常用的浏览器有哪些?

​ 1: Chrome 内核 Webkit —> Blink
​ 2: FireFox 火狐 内核 Gecko 开源
​ 3: IE Trident
​ 4: Safari webkit
​ 5:Oprea 欧朋 Presto

2、谈谈你对语义化的理解?

​ 1、去掉或者丢失样式的时候能够让页面呈现出清晰的结构；

​ 2、有利于SEO（搜索引擎优化）：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依 赖于标签来确定上下文和各个关键字的权重；

​ 3、方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

​ 4、便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循 这个标准，可以减少差异化。

概念：

用合理的HTML标签及其特有的属性去格式化文档内容。如标题用h1-h6、段落用p，合理地设置图片的alt属性。

好处：

• 在没有css的情况下，页面也能呈现出很好的内容结构。
• 使代码更具可读性，便于开发和后期维护。
• 有利于用户体验。如title、label标签、alt属性的灵活运用。
• 有利于SEO。网页和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息。爬虫依赖于标签来确定上下文和各个字段关键字的权重。

3、严格模式和混杂模式-如何区分这两种模式 区分他们有何意义？

定义：DOCTYPE是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。支持html5标准的主流浏览器都认识这个声明。

声明必须是 HTML 文档的第一行，位于 标签之前。

作用：告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面。

4、b和strong，i和em标签的区别？

b、i属于修饰类标签属于物理标签，没有做到结构与样式分离。

strong、em属于内容类标签属于逻辑标签，做到了结构与样式分离。

strong和em都表示HTML语义为强调，strong比em语气更强烈。

在搜索引擎优化strong和em比b和i重要的多。

5、物理标签和逻辑标签区别

物理元素：所强调的是一种物理行为

是告诉浏览器应该以何种格式显示文字

逻辑元素：是强调文档逻辑的

是告诉浏览器这些文字有怎样的重要性

6、浏览器渲染流程

1.解析HTML生成DOM树

2.解析CSS生成CSSOM规则树

3.将DOM树与CSSOM规则树合并在一起生成渲染树

4.遍历渲染树开始布局，计算每个节点的位置和大小

5.将渲染树的每个节点绘制到屏幕

回流（reflow）和重绘（repaint）

回流：当某个部分发生了点变化影响布局（如：尺寸、位置、隐藏/显示等），需要倒回去重新渲染，这个回退的过程叫回流。

重绘：是在一个元素的外观被改变，但是没有改变布局的情况下发生。如果只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，将只会引起浏览器屏幕的一部分要重画。

注意：回流必将引起重绘，而重绘不一定会引起回流

7、浏览器同源策略

同源策略：两个页面地址中的协议、域名、端口号相同，则表示同源

目的：设置同源策略的主要目的是为了安全，如果没有同源限制，在浏览器中的cookie等其他数据可以任意读取，不同域下的DOM任意操作，ajax任意请求其他网站的数据，包括隐私数据。

8、跨域解决方案

1.postMessage跨域
2.跨域资源共享（CORS）
3.nginx代理跨域
4.nodejs中间件代理跨域
5.WebStocket协议跨域

第二章 CSS入门

1、CSS引入方式

行内样式：使用style属性引入css样式

内部样式表（内嵌式）：在style标签中书写CSS代码。style标签写在head标签中。

外部样式表（外链式）： 链接式–优先加载CSS文件到页面

​ 导入式@import–先加载HTML结构再加载CSS文件

样式优先级：行内样式>内部样式>外部样式（后两者符合就近原则）

2、CSS选择器有哪些

通配符选择器：匹配所有标签

标签选择器：决定标签采用相应的CSS样式

类选择器：根据类名来选择

id选择器：根据ID来选择（具有唯一性）

优先级：！important>行内样式>id选择器>类选择器>标签选择器>通配符选择器>继承>浏览器默认属性

3、如何合并表格单元格？

跨行合并rowspan、跨列合并colspan

补充：边框合并border-collapse:collapse;

4、caption、thead、tbody、tfoot有什么用？

这些标签能增强语义化，让表格结构更加清晰，对布局不会产生影响。

第三章 盒子模型

1、常见的表单元素有哪些？

input标签(text、password、button、radio、checkbox、submit、reset、file、image)，

select标签、

textarea标签、

button标签

2、请简述一下盒模型的组成？

content、padding、border、margin

width=content+padding+boder

height=content+padding+border

3、两种盒模型

W3C标准盒模型：width指content部分的宽度

IE的盒模型：width表示content+padding+border这三部分的宽度

切换盒模型可借助CSS3的boder-sizing属性

• box-sizing: content-box 是W3C盒子模型
• box-sizing: border-box 是IE盒子模型

box-sizing的默认属性是content-box

4、CSS复合选择器

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择元素后代	是选择所有的子孙后代	较多	符号是空格 .nav a
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是> .nav>p
交集选择器	选择两个标签交集的地方	既是 又是	较少	没有符号 p.one
并集选择器	选择某些相同样式的选择器	可以用于集体声明	较多	符号是逗号 .nav,.header
连接伪类选择器	给链接更改状态		较多	a:hover

第四章 浮动

1、块级标签、行内块标签、行内标签的区别？

块级标签:div、p、h1-h6、ul、ol、li、dl、dt、dd、hr、form

• 独占一行，上下排列。
• 默认宽度占满父级，默认高度是本身内容的高度。
• 可以设置宽高及所有盒模型属性。

行内标签:label、span、a、b、strong、i、em、sub、sup、del

• 默认并排，宽高由内容撑开。
• 行内元素只能容纳文本或其他内联元素(行内元素)，不能镶嵌块级元素。
• 行标签之间有间隙、不能设置上下内外边距，可以设置左右内外边距。

行内块标签:input、img、select、textarea、button

• 默认并排，可以设置宽高。
• 中间有间距，可以设置盒模型的所有属性。

2、浮动产生的问题？清除浮动的方案？*

产生的问题（浮动是为了实现文字环绕图片而产生）

子元素脱离文档流不占位，父元素的高度撑不起来，下面的元素会往上移动(高度塌陷)。

清楚浮动的方法

• 给浮动的父标签固定高度（不够灵活）。

• 给父标签加overflow属性，overflow为visible以外的其他值时（即把父标签设置成BFC）可以帮助实现。

• 给浮动标签的最后加一个空块标签，标签本身不浮动，且添加样式clear:both;(代码冗余，不建议)

• (推荐方法)给浮动标签的父标签添加.clearfix（不会在结构上产生代码冗余，可多次重复使用）。

• .clearfix::after{
      content:"";
      clear:both;
      display:block; 
  } 
  .clearfix{
      *zoom:1; //为了兼容ie7及以下。 
  }
  

• 给浮动元素的父元素也加浮动。 （常用）

3、伪类和伪元素的区别

本质区别：是否创建了新元素

伪类（只能使用“：”）：

用于向某些选择器添加特殊的效果

存在DOM文档中，逻辑上存在但在文档树中却无须标识的“幽灵”分类。

伪元素（既可以使用“:”，也可以使用“::”）：

用于将特殊效果添加到选择器上

不存在DOM文档中，是虚拟的元素，是创建新元素。

代表某个元素的子元素，这个子元素虽然在逻辑上存在，单却不实际存在于DOM文档中。

注意：伪类是类似于添加类所以可以是多个，而伪元素在一个选择器中只能出现一次，并且只能出现在末尾

相关问题：:after/::after和:before/::before的异同

第五章 定位

1、盒子的水平居中

• 简单的水平居中

文本/行内块居中：

text-align: center;

文本/行内块垂直居中：

line-height:height;

块元素水平居中：

margin: 0 auto;  */\*需要固定宽度\*/*

块元素垂直居中：

调节margin、padding

• 水平垂直居中

  • 方法一：

    绝对定位（父元素尺寸变化，子元素尺寸固定）

     .parent{    
         position:relative;  
     }  
    .child{    
        width:200px;    
        height:200px;    
        position:absolute;    
        left:50%；    
        top：50%；    
        */\* 再移动子元素宽度和高度的一半 \*/*    
        margin-left:-100px;    
        margin-top:-100px;  
    }
    

  • 方法二：

    绝对定位（父元素和子元素的尺寸都是可变的）

      .parent{
        position:relative;
      }
      .child{
        position:absolute;
        top:0;
        bottom:0;
        margin:auto;
        /*如果还想实现水平居,可以加上:*/
        right:0;
        left:0;
      }
    

  • 方法三：

    采用Flex弹性布局 （该方法适用于行内、行内块、块级标签）
    父元素设置display:flex;
    align-items: center;（子元素对齐方式）
    justify-content:center; (水平居中)

  • 方法四

    采用表格布局（该方法适用于行内、行内块、块级标签,但不常用）
    设置父标签display:table;
    子标签display:table-cell;vertical:middle;

    <div class="wrapper">
        <p>我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a</p>
    </div>
    
    .wrapper{
       display:table;
    }
    .wrapper p{
      display:table-cell;/*该属性使该元素成为单元格，宽高无效，margin无效，宽度由内容撑开*/
      vertical-align:middle;
      /*如果还想实现水平居中,加上:*/
      text-align:center;
    }
    

第六章 布局技巧

1、图片下方空白间隙如何解决？

原因：图片默认是文字，而文字默认与基线对齐。

水平空白

• 图片浮动（不建议）
• 父元素设置font-size: 0;

垂直间隙

• 图片浮动(不建议)
• 父元素设置font-size:0或line-height:0;
• 图片设置vertical-align:middle; //改变垂直对齐方式: （ 推荐：默认以基线 baseline对齐 改为 以其他三条线任意一条对齐即可 top middle bottom ）
• 图片设置display:block;

2、简述等高布局、圣杯布局、双飞翼布局的实现原理

等高布局

• 伪等高

• 边框模拟

  原理：因为元素边框和元素高度始终是相同高度，用元素的边框颜色来伪装左右两个兄弟元素的背景色。然后将左右两个透明背景的元素使用absolute覆盖在中间元素的左右边框上，实现视觉上的等高效果。

  注意：左右两侧元素的内容高度不能大于中间元素内容高度，否则无法撑开容器高度。

• 内外边距相消

  原理：因为背景是在padding区域显示的，设置一个大数值的padding-bottom，再设置相同数值的负的margin-bottom，使背景色铺满元素区域，又符合元素的盒模型的计算公式（实际宽高=内容+内边距+边框+外边距），实现视觉上的等高效果。

  注意：父元素要设置overflow:hidden。如果页面中使用a锚点跳转时，将会隐藏部分文字信息。如果页面中的背景图片定位到底部，将会看不到背景图片。

• 真等高

• 背景嵌套

  利用内容撑开父元素的特点，给每一列添加一个背景容器，并且相互嵌套，等高元素在最里层的背景容器中且同级。背景容器使用相对定位往外移，相应的等高元素也利用margin移到对应的容器里，只要有一个等高元素的高度发生变化，就会撑开套在最里层的背景容器，其他套在外层的背景容器高度也随之变化。

• 绝对定位

  所有子元素设置绝对定位，各元素通过绝对定位移到父元素的左中右位置，子元素由于脱离了文档流不占位，无法撑开父元素高度，需要设置父元素的固定高度，并且所有子元素的top:0;bottom:0;(这两个设置才是使子元素高度与父元素同高的关键。)，就可以使得所有子元素的高度都和父元素的高度相同，实现等高效果

• 表格布局

  table元素中的table-cell元素默认是等高的，将父元素设置成display:table;等高子元素设置成display:table-cell;即可。

• Flex弹性盒布局

  flex弹性盒中的项目如果未设置高度或高度为auto，则交叉轴方向默认占满容器的高度，再配合justify-content属性调整项目位置，即可实现等高效果。

• Grid网格布局

  grid网格布局在不设置行数（默认一行）时，设置grid-auto-flow:column;(先列后行)，每列项目默认占满一列的高度即父容器的高度，即可实现等高布局。

圣杯布局、双飞翼布局

共同点:
中间栏放最前面，左右标签固定宽度，中间标签宽度百分百，三个标签左浮动，左边元素margin:-100%移到第一行最左边，右边元素利用marigin:-自身宽度 移到第一行最右边。

圣杯解决方案：

三个标签的父容器左右分别设置等于左右元素宽度的padding，再利用相对定位移动左右元素。

双飞翼解决方案：

给中间栏加一个内层inner，并给inner添加等于左右两栏宽度的外边距（其实内边距也可以）。

（不能直接给中间栏设置内外边距，因为中间栏设置了width:100%,直接给中间栏加内外边距会导致界面宽度加大。）

第七章 CSS技巧

1、简述css精灵图原理，及优缺点？

原理:
css sprites，通常被解释为"CSS图像拼合"或"CSS贴图定位"，就是把网页中一些背景图片整合到一张图片文件中，再利用background-image、background-repeat、background-position等属性的组合进行背景定位，background-position用数字能精确地定位出来背景图片的位置，一般适用于小图标，不适合大背景。

优点：

• 减少网页的http请求，从而大大提高网页的性能；
• 减少图片命名上的困扰；
• 更换风格方便。

缺点：

• 必须要限定容器的大小符合背景图元素，需要计算；
• 需要测量背景图所在的位置。

2、简述BFC规则及解决的问题？

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

创建：

• 1、float的值不是none。
• 2、position的值不是static或者relative。
• 3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
• 4、overflow的值不是visible

规则：

• 内部的标签会在垂直方向上一个接一个地放置。
• 垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的margin会发生重叠。
• 每个标签的左外边距与包含块的左边相接触，即使浮动标签也是如此。
• BFC的区域不会与float的标签域重叠。
• 计算BFC的高度时，浮动子标签也参与计算。
• BFC就是页面上的一个隔离的独立容器，容器里的子标签不会影响到外面标签，反之亦然

解决的问题

• 外边距塌陷（只有垂直方向会发生塌陷，水平方向不会。）
  由于BFC是一个独立的容器里面的子标签不会影响外面的标签，外面的标签也不会影响BFC内的标签。所以兄弟盒子之间垂直外边距塌陷可以给其中一个盒子套一个父盒子，把父盒子设为BFC即可。父子垂直外边距塌陷，可以把父元素设置成BFC，父级成为了一个独立区域，子标签的边距就无法塌陷到外面。为了不影响布局一般用overflow:hidden;解决外边距塌陷的问题。

• 两栏或三栏布局（这里的情况是将左边盒子或左右两边的盒子写在前面，且必须将自适应的盒子写在后面，与圣杯、双飞翼布局不同。）

• 将左边固定宽度的盒子左浮动，右边盒子设置overflow:hidden;即可将右边盒子设置成BFC，不会覆盖左边元素，并且右边盒子不设宽度就可以实现自适应两栏布局。

• 将左右两边固定宽度的盒子左右浮动，中间盒子不设置宽度且设置overflow:hidden;即可实现三栏自适应布局。 （中间栏写在最后的情况下，还可以中间栏不设宽度，且设置左右外边距等于左右两栏的宽度，由于左右两栏浮动不占位，中间栏可以与之同行，也实现了自适应三栏布局。）

3、文本溢出显示省略号如何实现？

单行文本溢出

p{
   width:200px;
   overflow:hidden;
   text-overflow:ellipsis;/*显示省略号*/
   white-space:nowrap;/*文本不换行*/
}

多文本溢出

• 利用webkit的css拓展属性（只有webkit内核才有用）

p{
    width:200px;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;/*将对象设置成弹性伸缩盒子模型显示*/
    -webkit-line-clamp:2;/*用来限制在一个块元素显示的文本的行数，这是一个不规范属性，它没有出现							在css规范草案中。*/
    -webkit-box-orient:vertical;/*设置伸缩盒子对象的子元素的排列方式*/
}

• 利用伪元素模拟溢出显示省略号的效果（兼容性比较好）
  实现步骤:将height设置为line-height的整数倍，防止超出的文字露出。给伪元素p::after添加渐变背景，避免文字之显示一半。

p{
    position:relative;
    width:200px;
    line-height:30px;
    height:60px;
    overflow:hidden;
}
p::after{
    position:absolute;
    right:0;
    bottom:0;
    content:'...';
    display:block;
    padding-left:48px;
    background:-webkit-linear-gradient(left,transparent 0,transparent 60%,#fff 60%);
    background:-ms-linear-gradient(left,transparent 0,transparent 60%,#fff 60%);
    background:-o-linear-gradient(left,transparent 0,transparent 60%,#fff 60%);
    background:linear-gradient(left,transparent 0,transparent 60%,#fff 60%);
}

第八章 项目切图及规范

1、为什么要初始化css样式？哪些样式需要初始化？

因为浏览器兼容问题，不同浏览器对某些标签默认的解析是不同的，如果没有对css初始化，往往会出现不同浏览器之间的页面显示差异，为了避免这种差异需要使用样式重置。
ul、li、dv等自带的边距，a链接的自带样式，列表自带的列表样式，em、i自带的斜体样式等。

2、display:none和visibility:hidden的区别？

display:none是将元素的显示设为无，即在网页中看不见也不占位。

visibility:hidden则是将元素隐藏不可见，但是元素本身宽高都存在并且占位。

3、你能想出几种方法让元素在页面中消失？

• display:none;
• visibility:hidden;
• position:absolute或fixed,用z-index覆盖，数值越小，越在后面，默认为0；
• overflow:hidden;将要隐藏的元素移除父元素的范围。
• opacity:0;将元素设置成透明。
• 将font-size,line-height,width,height设置为0;
• transform:translate(-100%,-100%);
• position: absolute;top: -9999px;left: -9999px;将元素移出可视区。

4、标签应该如何合理嵌套？

• 行内标签里面不能放块级标签（a里面可以放块标签）。
• 块级标签里面可以放块级标签、行内标签、行内块标签（特殊：p、h1-h6里面不能再放块级）。
• ul、ol和li事固定嵌套，ul、ol的直接子元素必须是li。dl和dt、dd是固定嵌套，tr和td、th是固定嵌套。
• p标签不允许嵌套p标签，a标签不允许嵌套a标签和其他交互性元素如button。
• 尽可能地控制元素嵌套层级，不合理地嵌套会影响页面性能。

5、简述网页中常见图片格式及特点？

格式	优点	缺点	使用场景
jpg	色彩丰富，文件小	有损压缩，反复保存图片质量会明显下降	色彩丰富地图片/渐变图像/照片
gjf	文件小，支持动画，无兼容性问题	只支持支持256种颜色	色彩简单地logo/icon/动图
png	无损压缩、支持透明、简单图片尺寸小	不支持动画，色彩丰富的图片尺寸大	logo/icon/透明图

第九章 PC端项目-兼容问题

1、说说你了解的浏览器兼容问题有哪些？

• 图片间隙问题

• 水平空白

• 图片浮动
• 图片父元素设置font-size:0;

• 垂直空白

• 图片设置vertical-align:middle;
• 图片设置display:block;
• 图片父元素设置font-size:0;line-height:0;
• 图片浮动

• ie中图片边框问题
  ie中图片放在a标签中显示边框。解决方法：图片设置border:none;

• ie8中背景复合属性写法问题
  background:url(“images/bg.jpg”)no-repeat;在标准浏览器中均能正常显示背景图片，但是在ie中显示异常。解决方法：在url和no-repeat之间加上空格。

• 其他ie低版本兼容性问题
• 在ie6及更早版本浏览器中，定义小高度的容器。

#test{
    overflow:hidden;
    height:1px;
    font-size:0;
    line-height:0;
}

• ie6及更早版本浏览器下，浮动时产生双倍边距的bug。
  解决方案:针对ie6设置该标签的display属性为inline即可。

#test{
    float:left;
    _display:inline;
}

• ie7及更早版本浏览器下，子标签相对定位时，父标签overflow属性的auto|hidden失效的问题。
  解决方案：给父标签也设置相对定位position:relative;

• ie7及以下块转行内块不在一行显示的问题，解决方案如下:

div{
    display:inline-block;
    *display:inline;
    *zoom:1;/*设置或检索对象的缩放比例，1或100%时表示不缩放，更大更小表示放大缩小，不支持负数，兼容		性不好。*/
}

• ie7及以下浏览器中，当li中出现浮动子元素时，li之间产生的空白间隙。
  解决方案：将垂直对齐方式vertical设置为top/middle/bottom。

2、什么是CSSHack？

由于不同厂商的浏览器或同一厂商不同版本的浏览器，对css的解析认识不完全一样，因此会导致生成的页面效果不一样，这时候就需要针对不同的浏览器去写不同的css，让它能同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

第十章 PC端项目-测试检查

1、在项目中你是如何做图片优化的？

• 使用base64编码代替图片。

Base64编码是一种图片处理格式，通过特定的算法将图片编码成一长串字符串，在页面上显示时，可以用该字符串来代替图片的url属性。

优点：

• 减少HTTP网络请求。网页上的图片资源如果采用http形式的url的话都会额外发送一次请求，网页发送的http请求次数越多，会造成页面加载速度越慢。采用base64格式的编码，将图片转化为字符串后，图片文件会随着html元素一并加载。这样就可以减少http请求的次数，对于网页优化时一种较好的手段。
• 采用base64编码的图片是随着页面一起加载的，不会造成跨域请求的问题。
• 没有图片，更新要重新上传，不会造成清理图片缓存的问题。

缺点：

• 浏览器支持问题，IE6/IE7均不支持base64编码。
• 增加了css文件的尺寸。将图片转化为base64格式编码，生成的字符串往往会大于图片源文件的大小。如果将其写在一个css文件中，这样的一个css文件大小会剧增，造成代码不可读，还会造成请求传输的数据量增加。
• 造成数据库数据量巨大。将base64编码的图片存入数据库中会造成数据库数据量增大，这样的效果还不如将图片存至图片服务器而只在数据库中存入url字段。

• 使用精灵图，减少页面请求次数。
• 在保证图片不失真的情况下合适地压缩图片。 https://tinify.cn/
• 图片延迟加载(懒加载)：延迟加载图片或者符合某些条件时加载某些图片。
• 图片预加载：在网页全部加载之前，提前加载图片，当用户需要查看时直接从本地缓存中渲染，以提供给用户更好的体验，减少等待的时间。
• 使用css、svg、canvas、或iconfont代替图片。
• 根据不同的终端需求加载对应尺寸的图片。
• 根据图片特性和需求选择合适格式的图片。

第十一章 HTML5基础

1、HTML有哪些新特性？

语义化标签、

多媒体（音视频）（用于媒介回放的video和audio）、

智能表单（新的表单控件，比如article、footer、header、nav、section）、

canvas画布（用于绘画）、

web存储（对本地存储有更好的支持）、

地理定位…

2、如何处理HTML5新标签的浏览器兼容问题？

• 通过js创建出新增的标签，再在css中将新增标签转为块级，才能使宽高生效。

<script>
    document.creatElement('header');
    ...
</script>

<style>
    header,footer{
        display:block;
    }
</style>

• 使用封装好的插件html5shiv.js解决兼容性问题。

<!--[if lt ie 9]>
    <script type="text/javascript" src="./js/html5shiv.min.js"></script>
<![endif]-->

第十二章 CSS3基础

1、CSS3有哪些新特性？

新增选择器、

文本样式、

边框属性（阴影、圆角）、

多背景、变形、渐变、动画、过渡、

多列布局、

弹性盒布局、

用户界面等等。

2、css3新增选择器有哪些？

属性选择器、

结构伪类选择器、

状态伪类选择器

第十三章 CSS3过渡、变换与动画

1、css3中过渡和动画的区别和各自的适用场景？

过渡

• 不能自动运行
• 只有两种状态
• 触发一次，运行一次

动画

• 可以自动运行
• 可以定义多种状态
• 可以多次或无限运行

适用场景

• transition：适用于当元素从一种样式变换为另一种样式时为元素添加效果
• animation：可以在网页中取代动画图片、Flash及需要灵活定制多个帧以及循环的动画中

第十四章 弹性盒子和预处理

1、解释一下CSS3的flexbox(弹性盒布局模型),以及适用场景？

弹性盒模型布局是css3中的新的布局方式，把父元素设置成弹性盒容器，可以更加方便地去规定子元素地排列方式、对齐方式、剩余空间。

对居中对齐，规则布局（如两栏、三栏布局）非常高效。

2、什么是less？less有什么好处？

定义：less是css的一种预处理语言，提供了一套新的语法，类似于编程语言，简化css代码，并且提供了一个编译器，用来把写好的less文件编译成css文件，在编译之后才能被浏览器识别使用。

优点：使css代码更简洁，适应性强，可读性好，有利于代码的维护。

第十五章 移动端项目-布局方案

1、常见的移动端布局解决方案有哪些？原理如何？

rem布局

rem是指相对于根元素的字体大小的单位。

原理：利用rem作为布局单位，不同设备访问页面时，通过js脚本动态计算出一个最新的font-size值设置给html标签，从而达到界面整体缩放效果。

vw+rem布局

vw是一个相对视口宽度的一个单位，视口被分为100vw。

假设750px的设备中，font-size=100px，则设置html{font-size：13.33333vm;}，然后可以直接以rem为单位布局，不需借助插件。

第十六章 移动端项目-拓展知识

1、如何处理小于12px的字体？

将容器元素转成块级或者行内块，

利用-webkit-transform:scale()属性将容器缩小，

再用-webkit-transform-orign-X:left center;

将变形原点靠右居中，可以使字体左对齐并居中。

第十八章 响应式布局

1、什么是响应式？

响应式布局是在不同的设备上网页可以呈现不同的布局。

一套代码可以兼容pc端、移动端。

(不适应复杂网站，适合一些简单的展示网站，如企业官网、后台管理系统。)

页面应该有能力去自动响应用户的设备环境，响应式网页设计就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。

2、响应式项目中常用到哪些核心技术？

媒体查询

@media screen and (max-width:750px){
   ···
}

百分比布局

宽度不固定，可以使用百分比，内外边距也可以使用百分比。

弹性盒布局

container{
   display:flex;
   flex-direction:row/row-reverse/column/colunm-reverse;
   justify-content:flex-start/flex-end/center/space-between/space-around/space-		    enenly;
   align-items:stretch/flex-start/flex-end/center/baseline;
   flex-wrap:nowrap/wrap/wrap-reverse;/*wrap-reverse表示主轴方向向下的情况下，换行且第一行在    下方*/
   align-content:stretch/flex-start/flex-end/center/space-around/space-between/space-    evenly;/*表示多行项目在交叉轴上的对齐，可参考justify-content*/
}
items{
   order:0;/*定义项目的排列顺序，数值越小，排列越靠前，默认为0*/
   flex-grow:0;/*定义项目的放大比例，默认为0，即如果存在剩余空间也不放大。*/
   flex-shrink:1;/*定义项目缩小比例，默认为1，即如果空间不足，该项目将缩小。*/
   align-self:auto/stretch/center/flex-start/flex-end/baseline/inherit;/*定义该子项目单    独在交叉轴上的对齐方式，与align-items属性作用相同，但该属性用于项目。*/
}

响应式图片

img{
   width:100%;
   height:auto;/*保证图片保持原始的宽高比。*/
}
/*为了防止图片宽度过大而使图片失真，需要用max-width属性设置图片最大宽度不超过图片原始宽度。*/
img{
   max-width:100%;
   height:auto;
}