1.什么是HTML？

超文本标记语言，是一种用于创建网页的标准语言

2.HTML元素和标签有什么区别？

元素代表某种结构或语义，通常由开始标签，内容和结束标签组成

标签就是HTML 文档的根，用来标记 HTML 元素的，<heade>,<div>等被尖括号包起来的对象，绝大部分是成对出现的

3.块级元素和内联元素有什么区别？

块级元素：占据其父元素（容器）的整个空间，创建了一个“块”。每个块状元素都从新的一行开始，并且其后的元素也另起一行（独占一行）；元素的高度、宽度、行高以及顶和底边距都可设置；元素宽度在不设置的情况下，占它本身父容器的100%（和父元素宽度一致）

内联元素：内联元素被绘制在它们被定义的地方，并且只占用绝对需要的空间，和其他元素在同一行上，不独占一行；元素的高度、宽度及顶部底部边距不可设置

4.对语义化的理解？

用正确的标签做正确的事情。

html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的;

搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO;

使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

5.列出常用的列表标签

有序列表：有序列表以编号格式显示元素，由<ol>标签表示

无序列表：无序列表以项目符号格式显示元素，它由<ul>标签表示。

定义列表：定义列表以定义形式显示元素，就像在字典中一样，如 <dl>、 <dt>和<dd>标签用于定义描述列表。

6.解释HTML标签语义

<header>：用于定义文档的标题。

<nav>：定义了导航链接

<section> : 用于定义文档中的一个单元

<article>：用于定义独立的、自包含的文章

<aside>：用于定义内容之外的内容

<footer>：用于定义文档的页脚

7.div和span的区别

span和div的区别在于span元素是内联的，通常用于一行内的一小块，例如段落内。而 div 是块级，相当于在其前后有一个换行符，用于对较大的代码块进行分组。

8.`<!DOCTYPE html>` 标签是否为 `HTML` 标签？

不是，<!DOCTYPE>声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。

9.`HTML`、`XML` 和 `XHTML` 有什么区别？

HTML：超文本标记语言（HyperText Markup Language）

XML：可扩展标记语言（Extensible Markup Language）

XHTML：可扩展超文本标记语言（Extensible Hypertext Markup Language）

HTML 和 XHTML 之间的区别是：

HTML是一种标准通用标记语言的应用，XML是一种可扩展标记语言的应用程序。

HTML标签不区分大小写XHTML所有标签都必须小写。

XHTML所有属性都必须使用双引号

HTML 是关于显示信息，而 XHTML 是关于描述信息。

10.iframe 框架的优缺点

优点: iframe 能够原封不动的把嵌入的网页展现出来。如果有多个网页引用 iframe，那么你只需要修改 iframe 的内容，就可以实现调用的每一个页面内容的更改，方便快捷。网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用 iframe 来嵌套，可以增加代码的可重用。如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由 iframe 来解决

缺点：
框架结构中出现各种滚动条
iframe 会阻塞主页面的 Onload 事件
搜索引擎的检索程序无法解读这种页面，不利于 SEO
iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

11.position有哪些值？

position 属性用于指定一个元素在文档中的定位方式

扫描二维码关注公众号，回复： 14621707 查看本文章

static：默认值，没有定位，指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置，此属性下 top、right、bottom、left 和 z-index 属性无效。

relative 相对定位：元素先放置在未添加定位时的位置，在不改变页面布局的前提下调整元素位置（此时会在此元素未添加定位时所在位置留下空白）。position:relative 对table-row、table-column、table-cell、table-caption 元素无效。

absolute 绝对定位：生成绝对定位的元素，元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。

fixed 固定定位：生成绝对定位的元素，元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置，元素的位置在屏幕滚动时不会改变

sticky 元素根据正常文档流进行定位，相对它的最近滚动祖先和最近块级祖先。

12.`display:none`和`visibility:hidden`的区别

都能把页面上的元素隐藏起来，两者的区别如下：

display:none：被隐藏的对象不会占用任何物理空间，不会影响其他元素的布局

visible:hidden：使对象在网页上不可见，但是会在网页上占用物理空间，通俗来说就是看不见但摸得到。

属性值改变后是否重新渲染：visibility:hidden不渲染；display:none 会重新渲染。

13.回流和重绘

回流，当渲染树中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程。

重绘，当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋值给元素并重新绘制它的过程

14.BFC

什么是 BFC
BFC（Block Formatting Context）格式化上下文，是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。
形成 BFC 的条件
浮动元素，float 除 none 以外的值
定位元素，position（absolute，fixed）
display 为以下其中之一的值 inline-block，table-cell，table-caption
overflow 除了 visible 以外的值（hidden，auto，scroll）
BFC 的特性
内部的 Box 会在垂直方向上一个接一个的放置。
垂直方向上的距离由 margin 决定
bfc 的区域不会与 float 的元素区域重叠。
计算 bfc 的高度时，浮动元素也参与计算
bfc 就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

15.居中问题

水平居中

inline元素：text-align:center

block元素：margin：auto

absolute元素：left:50%+margin-left负值

垂直居中

inline元素：line-height的值等于height值

absolute元素：top:50%+margin-top负值

absolute元素：transform（-50%，-50%）

absolute元素：top,left，bottom，right=0+margin:auto

16.Label的作用是什么？是怎么用的？

label 标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

两种用法：

一种是id绑定：
<label for="name">number</label>
<input type="text" name="name" id="name">
一种是嵌套:：
<label>date:<input type="text" name="b"></label>

17.严格模式与混杂模式

严格模式：以浏览器支持的最高标准运行
混杂模式：页面以宽松向下兼容的方式显示，模拟老式浏览器的行为

18.对于 WEB 标准以及 W3C 的理解与认识问题

web 标准简单来说可以分为结构、表现和行为。

其中结构主要是有 HTML 标签组成，表现即指 css 样式表，行为是js

1.对于结构要求：（标签规范可以提高搜索引擎对页面的抓取效率，对 SEO 很有帮助）
1）标签字母要小写
2）标签要闭合
3）标签不允许随意嵌套
2.对于 css 和 js 来说
1）尽量使用外链 css 样式表和 js 脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。
2）样式尽量少用行间样式表，使结构与表现分离，标签的 id 和 class 等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版
3）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。

19.列举 IE 与其他浏览器不一样的特性？

1. IE 的排版引擎是 Trident （又称为 MSHTML）
2. Trident 内核曾经几乎与 W3C 标准脱节（2005 年）
3. Trident 内核的大量 Bug 等安全性问题没有得到及时解决
4. JS 方面，有很多独立的方法，例如绑定事件的 attachEvent、创建事件的 createEventObject 等
5. CSS 方面，也有自己独有的处理方式，例如设置透明，低版本 IE 中使用滤镜的方式

20..div+css 的布局较 table 布局有什么优点

分离方便改版快清晰简洁 seo

1.改版的时候更方便只要改 css 文件。

2.页面加载速度更快、结构化清晰、页面显示简洁。

3.表现与结构相分离。

4.易于优化（seo）搜索引擎更友好，排名更容易靠前。

21.渐进增强和优雅降级之间的不同

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。（一开始保证最基本的功能，再改进和追加功能）

优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
（一开始就构建完整的功能，再针对低版本浏览器进行兼容。）

区别:优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

22.html 常见兼容性问题

1.双边距 BUG float 引起的，使用 display解决
2.3 像素问题使用 float 引起的，使用 dislpay:inline -3px
3.超链接 hover 点击后失效，使用正确的书写顺序 link visited hover active
4.Ie z-index 问题，给父级添加 position:relative
5.Png 透明，解决办法: 使用 js 代码
6.Min-height 最小高度，！Important 解决
7.select 在 ie6 下遮盖，使用 iframe 嵌套
8.为什么没有办法定义 1px 左右的宽度容器（IE6 默认的行高造成的，使用 over:hidden,zoom:0.08 line-height:1px）
9.IE5-8 不支持 opacity

10.IE6 不支持 PNG 透明背景，使用 gif 图片或者filter滤镜

23.html5 有哪些新特性、移除了那些元素？

新特性：

拖拽释放(Drag and drop) API

语义化更好的内容标签（header,nav,footer,aside,article,section）

音频、视频 API(audio,video)

画布(Canvas) API

地理(Geolocation) API

本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

sessionStorage 的数据在浏览器关闭后自动删除

表单控件，calendar、date、time、email、url、search

新的技术 webworker, websocket, Geolocation

移除的元素：

纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；

24.如何垂直居中一个元素？

1.绝对定位居中

.content {
  width: 200px;
  height: 200px;
  background-color: #6699ff;
  position: absolute; /*父元素需要相对定位*/
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /*在水平和垂直方向上各偏移-50%*/
}

2.flex 布局居中

body {
  display: flex; /*设置外层盒子display为flex*/
  align-items: center; /*设置内层盒子的垂直居中*/
  justify-content: center; /*设置内层盒子的水平居中*/
  .content {
    width: 200px;
    height: 200px;
    background-color: #6699ff;
  }
}

3.垂直居中一个 img

.content {
  //img的容器设置如下
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

25.用纯 CSS 创建一个三角形的原理是什么？

span {
  width: 0;
  height: 0;
  border-top: 40px solid transparent;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 40px solid #ff0000;
}

26.Sass、LESS 是什么？

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

27.li 与 li 之间有看不见的空白间隔是什么原因引起

浏览器的默认行为是把 inline 元素间的空白字符（空格换行 tab）渲染成一个空格，也就是我们上面的代码换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度

解决方案：将‹ul›内的字符尺寸直接设为 0
 ul {
  font-size: 0px;
}

28.css3 有哪些新特性

选择器

多背景图

文字阴影

圆角

盒阴影

盒子大小

媒体查询

CSS3 动画

animation

属性渐变效果

CSS3 弹性盒子模型

CSS3 过渡

CSS3 变换

29.CSS 性能优化

内联首屏关键 CSS（Critical CSS）
内联 CSS 能够使浏览器开始页面渲染的时间提前，只将渲染首屏内容所需的关键 CSS 内联到 HTML 中

异步加载

CSS 文件压缩

去除无用 CSS

30.文本超出部分显示省略号

单行：

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行：

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // 最多显示几行
overflow: hidden;

31.过渡与动画的区别是什么

transition
可以在一定的时间内实现元素的状态过渡为最终状态，用于模拟以一种过渡动画效果，但是功能有限，只能用于制作简单的动画效果而动画属性
animation
可以制作类似 Flash 动画，通过关键帧控制动画的每一步，控制更为精确，从而可以制作更为复杂的动画。

32.基本数据类型

string number undefined boolean null

33.复杂数据类型

object array function

34.html5的自定义属性，定义和使用

通过data-* 来设置我们需要的自定义属性，进行数据存放

之后可以通过js脚本获取/设置自定义属性，也可以使用css属性选择器进行样式设置

35.介绍下css盒子模型

css盒子模型分为标准盒子模型，ie盒子模型

标准盒子模型：width和height指的是内容区域的宽度和高度，增加内边距，边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸

IE盒子模型：width和height指的是内容区域+border+padding的宽度和高度

36.定位的relative和absolute的区别

relative是相对定位，相对于自身的位置进行定位

absolute是绝对定位，选取其最近的父级进行定位，当腹肌的position为static时，相对于body的坐标原点定位

37.介绍下浮动定位，以及如何清除浮动

可以使元素脱离文档流

开启BFC使用overflow：hidden，使用clear清除浮动

38.flex布局的align-content，align-items的区别？

align-content是多跟轴线对齐方式

align-items 定义了项目在交叉轴上如何对齐

39.flex-grow和flex-shrink的默认值

flex-shrink：定义了项目的缩小比例，默认值为1，即如果空间不足，该项目将缩小

flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

40.image标签上title属性与alt属性的区别是什么？

alt属性是图片不能加载或显示失败后的提示文本

title属性可以实现鼠标悬停提示效果

41.请写出至少5个HTML5新增的标签，并说明其语义和应用场景？

<header>：主要用于定义内容的介绍展示区域，描述了文档的头部区域，比如定义文章的头；

<nav>：定义导航链接的部分；

<section>：定义了文档中的节，比如章节、页眉、页脚或文档中的其他部分；

<article>：定义独立的内容；

<aside>：定义页面主区域之外的内容，比如侧边栏；

<figcaption>：定义<figure>元素的标题，一般被放置在<figure>元素内的第一个或最后一个位置处；

<figure>：定义独立的流内容，比如图形、图标、照片、代码等；

<footer>：定义文档的底部区域，描述文档的页脚，比如作者、著作权信息、联系方式等；

42.请说说你对标签语义化的理解？

一个语义元素能够清楚的描述意义给浏览器和开发者，即使在丢掉样式的时候，也能让页面呈现出清晰的解构

有利于SEO优化，让页面和搜索引擎简历良好的沟通

方便设备解析，并以具有意义的方式来渲染页面

便于团队开发和维护，语义化更具有可读性，减少差异化

43.渐进增强和优雅降级之间的不同

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果，交互等改进和追加功能，达到更好的用户体验

优雅降级：一开始就构建完整的功能，然后在针对低版本浏览器进行兼容

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的能够起作用的版本开始，并不断扩充

44.请阐述table有哪些缺点？

嵌套层级太深，会导致搜索引擎读取困难，大大增加代码量

灵活性差，可读性差，代码臃肿，不方便修改样式

不够语义化

45.简述一下src和href的区别？

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系

src指向外部资源的位置，指向的内容会嵌入到文档中当前标签所在的位置

href指向网络资源所在的位置，建立和当前元素之间的链接

46.谈谈你对css布局的理解

常见的布局方式：固定布局，流式布局，弹性布局，浮动布局，定位布局，margin和padding

47.请举例几个清除浮动的方法

使用clear属性

通过设置父元素的样式，实现清除浮动，例如：overflow：hidden，display：table

使用：after伪类元素

48.请举例几种隐藏元素的方法

visibility：hidden 这个属性只是简单的隐藏某个元素，但是元素占用的空间仍然存在

opacity：0，是css3的属性，设置元素为完全透明

display：none，设置元素为不可见，不会占用文档的空间

hidden属性，该属性是HTML5中新增的属性，效果和display相同

49.如何让一段文本中的所有英文单词的首字母大写

text-transform：uppercase（全大写）

text-transform：lowercase（全小写）

text-transform：capitalize（首字母大写）

50.简述css样式表的继承

会被继承下去的属性有：font-family，font-size，font-style，font-variant，font-weight，font，letter-spacing，line-height，color

51.简述css的选择器

元素选择器

id选择器

class选择器

后代选择器

子元素选择器

相邻兄弟选择器

通用兄弟选择器

群组选择器

属性选择器

伪类选择器

52.简述CSS的权重规则

行内样式>ID>属性选择器/class类/伪类选择器>元素名/伪对象选择器

53.在css样式中使用px，em，各有什么优势，在表现上有什么区别？

px是相对长度单位，相对于显示器屏幕分辨率而言的

em是相对长度单位，相对于当前对象内文本的字体尺寸

px定义的字体，无法用浏览器字体放大功能，em的值并不是固定，会继承父级元素的字体大小

54.css中link和@import的区别是什么？

link属于HTML标签，而@import是css提供的，只能加载css

页面加载时候，link会同时加载，@import引用的css会等到页面被加载完在加载

link方式的样式权重高于@import的权重

使用javaScript控制dom改变样式，只能使用link方式，因为@impoer只有css能使用

55.position的absolute与fixed共同点与不同点？

相同：

改变行内元素的呈现方式，display被设置为block

让元素脱离普通流，不占据空间

默认会覆盖到非定位元素上

区别:

absolute的根元素是可以设置的，而fixed的根元素固定为浏览器窗口

当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的

56.position的值，relative 和 absolute 分别是相对于谁进行定位的？

absolute：生成绝对定位的元素，相对于static定位以外的第一个祖先元素进行定位

fixed：生成绝对定位的元素，相对于浏览器窗口进行定位

relative：生成相对定位的元素，相对于其在普通流中的位置进行定位

static：默认值，没有定位，元素出现在正常的流中

57.CSS3有哪些新特性？

新增特性有：圆角，阴影，对文字加特性，线性渐变，变形

增加更多的css选择器，媒体查询，多栏布局，多背景rgba

css3动画，弹性盒子

58.为什么要初始化css样式？

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

59.解释下css sprites原理，及优缺点？

优点：

减少网页的http请求

减少图片的字节

解决网页设计师在图片命名上的困扰，只需要对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名

更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变了

缺点：

在宽屏，高分辨率的屏幕下的自适应页面，如果背景图不够宽，很容易出现背景断裂

CSS sprites 在开发的时候，需要通过Photoshop或其他工具测量计算每一个背景单元的精确位置

在维护的时候比较麻烦，如果页面背景有少许改动，一般就要修改这张合并的图片

60.解释一下浮动及其工作原理？

浮动元素脱离文档流，不占据空间

浮动元素碰到包含它的边框或者浮动元素的边框才停留

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

带单位：px不用计算，em则会使其父元素font-size值作为参考来计算自己的高度

纯数字：把比例传递给后代，例如父元素行高1.5，子元素字体18px，则子元素行高为1.5*18

百分比：将计算的值传递给后代

62.经常遇到的浏览器兼容性有哪些？如何解决

浏览器默认的 margin 和 padding 不同

IE6双边距bug

在IE6、IE7中元素高度超出自己设置高度，原因是IE8以前的浏览器中会给元素设置默认的行高的高度导致的

min-height 在IE6下不起作用

透明性IE用filter.Alpha(opcity=60)，而其他主浏览器用opacity:0.6

input边框问题，去掉input边框一般用 border:none 就可以了，由于IE6在解析input样式时的bug（优先级问题），在IE6下无效

63.有哪些方式可以对一个DOM设置它的CSS样式？

外部样式表，使用 <link>标签引入一个外部CSS样式

内部样式表，将CSS代码放在 <style> 标签内部

内联样式，将CSS样式直接定义在HTML元素内部

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

opacity 作用于元素，以及元素内的所有内容的透明度，rgba()只作用于元素的颜色或其背景色

设置rgba透明的元素的子元素不会继承透明效果

65.CSS属性content有什么作用？有什么应用？

css的content属性专门应用在 after/before 伪元素上，用于插入生成内容，可以配合自定义字体显示特殊符号。

66.前端需要注意哪些 SEO

重要内容不要用 js 输出：爬虫不会执行 js 获取内容

少用 iframe：搜索引擎不会抓取 iframe 中的内容

非装饰性图片必须加 alt

提高网站速度：网站速度是搜索引擎排序的一个重要指标

语义化的 HTML 代码，符合 W3C 规范：语义化代码让搜索引擎容易理解网页

重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下

67.css性能优化

异步加载，去除无用css，css文件压缩

68.对于你使用过的 CSS 预处理，说说喜欢和不喜欢

喜欢：

提高 CSS 可维护性。

易于编写嵌套选择器。

引入变量，增添主题功能。可以在不同的项目中共享主题文件。

通过混合（Mixins）生成重复的 CSS。

Less 用 JavaScript 实现，与 NodeJS 高度结合。

不喜欢：

我通过node-sass使用 Sass，它用 C ++ 编写的 LibSass 绑定。在 Node 版本切换时，我必须经常重新编译。

Less 中，变量名称以@作为前缀，容易与 CSS 关键字混淆，如@media、@import和@font-face。

69.过度与动画的区别？

transition
可以在一定的时间内实现元素的状态过渡为最终状态，用于模拟以一种过渡动画效果，但是功能有限，只能用于制作简单的动画效果而动画属性
animation
可以制作类似 Flash 动画，通过关键帧控制动画的每一步，控制更为精确，从而可以制作更为复杂的动画。

HTML+CSS面试题 万字

1.什么是HTML？

2.HTML元素和标签有什么区别？

3.块级元素和内联元素有什么区别？

4.对语义化的理解？

5.列出常用的列表标签

6.解释HTML标签语义

7.div和span的区别

8.<!DOCTYPE html> 标签是否为 HTML 标签？

9.HTML、XML 和 XHTML 有什么区别？

10.iframe 框架的优缺点

11.position有哪些值？

12.display:none和visibility:hidden的区别

13.回流和重绘

14.BFC

15.居中问题

16.Label的作用是什么？是怎么用的？

17.严格模式与混杂模式

18.对于 WEB 标准以及 W3C 的理解与认识问题

19.列举 IE 与其他浏览器不一样的特性？

20..div+css 的布局较 table 布局有什么优点

21.渐进增强和优雅降级之间的不同

22.html 常见兼容性问题

23.html5 有哪些新特性、移除了那些元素？

24.如何垂直居中一个元素？

25.用纯 CSS 创建一个三角形的原理是什么？

26.Sass、LESS 是什么？

27.li 与 li 之间有看不见的空白间隔是什么原因引起

28.css3 有哪些新特性

29.CSS 性能优化

30.文本超出部分显示省略号

31.过渡与动画的区别是什么

32.基本数据类型

33.复杂数据类型

34.html5的自定义属性，定义和使用

35.介绍下css盒子模型

36.定位的relative和absolute的区别

37.介绍下浮动定位，以及如何清除浮动

38.flex布局的align-content，align-items的区别？

39.flex-grow和flex-shrink的默认值

40.image标签上title属性与alt属性的区别是什么？

41.请写出至少5个HTML5新增的标签，并说明其语义和应用场景？

42.请说说你对标签语义化的理解？

43.渐进增强和优雅降级之间的不同

44.请阐述table有哪些缺点？

45.简述一下src和href的区别？

46.谈谈你对css布局的理解

47.请举例几个清除浮动的方法

48.请举例几种隐藏元素的方法

49.如何让一段文本中的所有英文单词的首字母大写

50.简述css样式表的继承

51.简述css的选择器

52.简述CSS的权重规则

53.在css样式中使用px，em，各有什么优势，在表现上有什么区别？

54.css中link和@import的区别是什么？

55.position的absolute与fixed共同点与不同点？

56.position的值，relative 和 absolute 分别是相对于谁进行定位的？

57.CSS3有哪些新特性？

58.为什么要初始化css样式？

59.解释下css sprites原理，及优缺点？

60.解释一下浮动及其工作原理？

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

62.经常遇到的浏览器兼容性有哪些？如何解决

63.有哪些方式可以对一个DOM设置它的CSS样式？

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

65.CSS属性content有什么作用？有什么应用？

66.前端需要注意哪些 SEO

67.css性能优化

68.对于你使用过的 CSS 预处理，说说喜欢和不喜欢

69.过度与动画的区别？

猜你喜欢

HTML+CSS面试题万字

8.`<!DOCTYPE html>` 标签是否为 `HTML` 标签？

9.`HTML`、`XML` 和 `XHTML` 有什么区别？

12.`display:none`和`visibility:hidden`的区别