HTML/CSS面试题

HTML+CSS

Label的作用是什么?是怎么用的

答案:

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

解析:两种用法:一种是id绑定，-种是嵌套

Date:input type='text' name= 'B/>

iframe 框架有那些优缺点？

优点

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

缺点

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

Doctype，知道这是干什么的么？

‹!DOCTYPE› 声明位于文档中的最前面的位置，处于 ‹html› 标签之前。
1.告知浏览器文档使用哪种 HTML 或 XHTML 规范。
2.告诉浏览器按照何种规范解析页（如果你的页面没有 DOCTYPE 的声明，那么 compatMode 默认就是 BackCompat,浏览器按照自己的方式解析渲染页面）

解析：

doctype 是一种标准通用标记语言的文档类型声明，目的是告诉标准通用标记语言解析器要使用什么样的文档类型定义（DTD）来解析文档。
声明是用来指示web浏览器关于页面使用哪个HTML版本进行编写的指令。 声明必须是HTML文档的第一行，位于html标签之前。

浏览器本身分为两种模式，一种是标准模式，一种是怪异模式，浏览器通过 doctype 来区分这两种模式，doctype 在 html 中的作用就是触发浏览器的标准模式，如果 html 中省略了 doctype，浏览器就会进入到 Quirks 模式的怪异状态，在这种模式下，有些样式会和标准模式存在差异，而 html 标准和 dom 标准值规定了标准模式下的行为，没有对怪异模式做出规定，因此不同浏览器在怪异模式下的处理也是不同的，所以一定要在 html 开头使用 doctype。

严格模式与混杂模式

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

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

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

前端页面有哪三层构成，分别是什么？作用是什么？

分成：结构层、表示层、行为层。

结构层（structural layer）

由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”

表示层（presentation layer）

由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。

行为层（behaviorlayer）

负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。

为什么用多个域名存储网站资源更有效？

1、CDN 缓存更方便
2、突破浏览器并发限制
3、节约 cookie 带宽
4、节约主域名的连接数，优化页面响应速度
5、防止不必要的安全问题

页面可见性（Page Visibility）API 可以有哪些用途？

页面可见性： 就是对于用户来说，页面是显示还是隐藏, 所谓显示的页面，就是我们正在看的页面；隐藏的页面，就是我们没有看的页面。 因为，我们一次可以打开好多标签页面来回切换着，始终只有一个页面在我们眼前，其他页面就是隐藏的，还有一种就是.........，(把浏览器最小化，所有的页面就都不可见了)。

API 很简单，document.hidden 就返回一个布尔值，如果是 true, 表示页面可见，false 则表示，页面隐藏。 不同页面之间来回切换，触发 visibilitychange 事件。 还有一个 document.visibilityState, 表示页面所处的状态，取值：visible, hidden 等四个。

document.addEventListener('visibilitychange', function() {
  if (document.hidden) {
    document.title = 'hidden';
  } else {
    document.title = 'visibile';
  }
});

我们打开这个页面，然后再打开另一个页面，来回点击这两个页面，当我们看到这个页面时，标题显示 visiable ,当我们看另一个页面时，标题显示 hidden;
动画，视频，音频都可以在页面显示时打开，在页面隐藏时关闭

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

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

1.改版的时候更方便 只要改 css 文件。
2.页面加载速度更快、结构化清晰、页面显示简洁。
3.表现与结构相分离。
4.易于优化（seo）搜索引擎更友好，排名更容易靠前。

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，解决办法：

.opacity {
  opacity: 0.4;
  filter: alpha(opacity=60); /_ for IE5-7 _/
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=60)'; /_ for IE 8_/
}

10.IE6 不支持 PNG 透明背景，解决办法: IE6 下使用 gif 图片 或者filter滤镜

对 WEB 标准以及 W3C 的理解与认识

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链 css 和 js 脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。

如何在页面上实现一个圆形的可点击区域？

答案：css3、js、map 加 area

一.border-radius (css3)

对于圆形，最直接的方法想到的就是 css3 的圆角属性，这个属性可以将 html 元素的形状设置为圆形，这之后你想对该圆形区域设置什么事件就设置什么事件(当然包括点击)。（这里就不做具体的 test 了）

二.通过事件坐标来实现（js）

也就是通过 js 来进行一个区域判断，进而简介地的形成可点区域，以下给出主要的 js 测试代码：

// 获取目标元素
var box = document.getElementById('box');

// 对目标元素target的圆形区域进行一个点击事件绑定
function bindClickOnCircleArea(target, callback) {
  target.onclick = function(e) {
    e = e || window.event;

    // target中心点的坐标
    var x1 = 100;
    var y1 = 100;

    // 事件源坐标
    var x2 = e.offsetX;
    var y2 = e.offsetY;

    // 校验是否在圆形点击区，在的话就执行callback回调
    // 计算事件触发点与target中心的位置
    var len = Math.abs(Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)));
    // 通过半径进行校验
    if (len ‹= 100) {
      callback();
    } else {
      alert('死鬼，跑哪去啊，你老婆我是黄皮肤还是白皮肤都分不清了吗');
    }
  };
}

// 执行
bindClickOnCircleArea(box, function() {
  alert('老婆，你让我好找啊，呜呜呜');
});

三.通过 map 加 area

‹img src='../imgs/test.jpg' width='200' border='0' usemap='#Map' /›
‹map name='Map' id='Map'›
  ‹area
    shape='circle'
    coords='100,100,100'
    href='http://www.baidu.com'
    target='_blank'
  /›
‹/map›

前端需要注意哪些 SEO

1.合理的 title、description、keywords：搜索对着三项的权重逐个减小，title 值强调重点即可，重要关键词出现不要超过 2 次，而且要靠前，不同页面 title 要有所不同；description 把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面 description 有所不同；keywords 列举出重要关键词即可
2.语义化的 HTML 代码，符合 W3C 规范：语义化代码让搜索引擎容易理解网页
3.重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
4.重要内容不要用 js 输出：爬虫不会执行 js 获取内容
5.少用 iframe：搜索引擎不会抓取 iframe 中的内容
6.非装饰性图片必须加 alt
7.提高网站速度：网站速度是搜索引擎排序的一个重要指标

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；

支持 HTML5 新标签：

IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签， 可以利用这一特性让这些浏览器支持 HTML5 新标签， 浏览器支持新标签后，还需要添加标签默认的样式：
当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架

‹!--[if lt IE 9]›
  ‹script›
    src = 'http://html5shim.googlecode.com/svn/trunk/html5.js';
  ‹/script›
‹![endif]--›

HTML 全局属性(global attribute)有哪些

• accesskey:设置快捷键，提供快速访问元素如aaa在 windows 下的 firefox 中按 alt + shift + a 可激活元素
• class:为元素设置类标识，多个类名用空格分开，CSS 和 javascript 可通过 class 属性获取元素
• contenteditable: 指定元素内容是否可编辑
• contextmenu: 自定义鼠标右键弹出菜单内容
• data-*: 为元素增加自定义属性
• dir: 设置元素文本方向
• draggable: 设置元素是否可拖拽
• dropzone: 设置元素拖放类型： copy, move, link
• hidden: 表示一个元素是否与文档。样式上会导致元素不显示，但是不能用这个属性实现样式效果
• id: 元素 id，文档内唯一
• lang: 元素内容的的语言
• spellcheck: 是否启动拼写和语法检查
• style: 行内 css 样式
• tabindex: 设置元素可以获得焦点，通过 tab 可以导航
• title: 元素相关的建议信息
• translate: 元素和子孙节点内容是否需要本地化

HTML5 为什么只需要写 !DOCTYPE

HTML 4.01 中的 doctype 需要对 DTD 进行引用，因为 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为。其中，SGML 是标准通用标记语言,简单的说，就是比 HTML,XML 更老的标准，这两者都是由 SGML 发展而来的。BUT，HTML5 不是的。

‹!DOCTYPE›声明位于位于 HTML 文档中的第一行，处于 ‹html› 标签之前。作用：告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE 不存在或格式不正确会导致文档以怪异模式呈现。

对 web 标准、可用性、可访问性的理解

可用性（Usability）：

产品是否容易上手，用户能否完成任务，效率如何，以及这过程中用户的主观感受可好，是从用户的角度来看产品的质量。可用性好意味着产品质量高，是企业的核心竞争力。

可访问性（Accessibility）：

Web 内容对于残障用户的可阅读和可理解性

可维护性（Maintainability）：

一般包含两个层次，一是当系统出现问题时，快速定位并解决问题的成本，成本低则可维护性好。二是代码是否容易被人理解，是否容易修改和增强功能。

新的 HTML5 文档类型和字符集是？

HTML5文档类型：‹!doctype html›

HTML5使用的编码‹meta charset='UTF-8'›

css与js最好放在html哪个地方

把‹link›放在‹head›中

把‹link›标签放在‹head›‹/head›之间是规范要求的内容。此外，这种做法可以让页面逐步呈现，提高了用户体验。将样式表放在文档底部附近，会使许多浏览器（包括 Internet Explorer）不能逐步呈现页面。一些浏览器会阻止渲染，以避免在页面样式发生变化时，重新绘制页面中的元素。这种做法可以防止呈现给用户空白的页面或没有样式的内容。

把‹script›标签恰好放在‹/body›之前

脚本在下载和执行期间会阻止 HTML 解析。把‹script›标签放在底部，保证 HTML 首先完成解析，将页面尽早呈现给用户。

例外情况是当你的脚本里包含document.write()时。但是现在，document.write()不推荐使用。同时，将‹script›标签放在底部，意味着浏览器不能开始下载脚本，直到整个文档（document）被解析。也许，对此比较好的做法是，‹script›使用defer属性，放在‹head›中。

什么是渐进式渲染

渐进式渲染（progressive rendering）

渐进式渲染是用于提高网页性能（尤其是提高用户感知的加载速度），以尽快呈现页面的技术。
在以前互联网带宽较小的时期，这种技术更为普遍。如今，移动终端的盛行，而移动网络往往不稳定，渐进式渲染在现代前端开发中仍然有用武之地。

DOM 和 BOM 有什么区别

DOM

Document Object Model，文档对象模型
DOM 是为了操作文档出现的 API，document 是其的一个对象
DOM 和文档有关，这里的文档指的是网页，也就是 html 文档。DOM 和浏览器无关，他关注的是网页本身的内容。

BOM

Browser Object Model，浏览器对象模型
BOM 是为了操作浏览器出现的 API，window 是其的一个对象
window 对象既为 javascript 访问浏览器提供 API，同时在 ECMAScript 中充当 Global 对象

img 上 title 与 alt

title 指图片的信息、alt 指图片不显示时显示的文字

介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒

• 有两种， IE 盒子模型、W3C 盒子模型；
• 盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
• 区 别： IE 的 content 部分把 border 和 padding 计算了进去;

CSS 隐藏元素的几种方法（至少说出三种）

• Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;
• Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;
• Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;
• Position:不会影响布局，能让元素保持可以操作;
• Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，浏览器支持度还要低;

CSS 清除浮动的几种方法（至少两种）

清除浮动： 核心：clear:both;

1.使用额外标签法（不推荐使用）

在浮动的盒子下面再放一个标签，使用 clear:both;来清除浮动

a 内部标签：会将父盒子的高度重新撑开

b 外部标签：只能将浮动盒子的影响清除，但是不会撑开盒子

2.使用 overflow 清除浮动（不推荐使用）

先找到浮动盒子的父元素，给父元素添加一个属性：overflow:hidden;就会清除子元素对页面的影响

3.使用伪元素清除浮动(用的最多)

伪元素：在页面上不存在的元素，但是可以通过 css 添加上去

种类：
:after(在。。。之后)
:before(在。。。之前)

注意：每个元素都有自己的伪元素

.clearfix:after {
    content:'';
    height:0;
    line-height:0;
    display:block;
    clear:both;
    visibility:hidden;  /_将元素隐藏起来_/ 
      在页面的 clearfix 元素后面添加了一个空的块级元素
     （这个元素的高为 0 行高也为 0   并且这个元素清除了浮动）
}
.clearfix {
  zoom:1;/_为了兼容 IE6_/
}

页面导入样式时，使用 link 和@import 有什么区别

Link 属于 html 标签，而@import 是 CSS 中提供的

• 在页面加载的时候，link 会同时被加载，而@import 引用的 CSS 会在页面加载完成后才会加载引用的 CSS

• @import 只有在 ie5 以上才可以被识别，而 link 是 html 标签，不存在浏览器兼容性问题

• Link 引入样式的权重大于@import 的引用（@import 是将引用的样式导入到当前的页面中）

伪元素和伪类的区别？

伪元素使用 2 个冒号，

常见的有：::before，::after，::first-line，::first-letter，::selection、::placeholder 等；

伪类使用1个冒号，

常见的有：:hover，:link，:active，:target，:not()，:focus等。

伪元素添加了一个页面中没有的元素（只是从视觉效果上添加了，不是在文档树中添加）；
伪类是给页面中已经存在的元素添加一个类。

CSS3新增伪类举例：

• :first-of-type 选择属于其父元素的首个 ‹p› 元素的每个 ‹p› 元素。
• :last-of-type 选择属于其父元素的最后 ‹p› 元素的每个 ‹p› 元素。
• :only-of-type 选择属于其父元素唯一的 ‹p› 元素的每个 ‹p› 元素。
• :only-child 选择属于其父元素的唯一子元素的每个 ‹p› 元素。
• :nth-child(2) 选择属于其父元素的第二个子元素的每个 ‹p› 元素。
• :enabled、:disabled 控制表单控件的禁用状态。
• :checked，单选框或复选框被选中。

行内元素和块级元素的具体区别是什么

块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：

和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的 top/bottom(padding-top/padding-bottom)和外边距的 top/bottom(margin-top/margin-bottom)都不可改变（也就是 padding 和 margin 的 left 和 right 是可以设置的），就是里面文字或图片的大小。

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

rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度，

而 rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果！）

css 中可以让文字在垂直和水平方向上重叠的两个

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

px 和 em 的区别

px 和 em 都是长度单位，区别是，px 的值是固定的，指定是多少就是多少，计算比较容易。em 得值不是固定的，并且 em 会继承父级元素的字体大小。

浏览器的默认字体高都是 16px。所以未经调整的浏览器都符合: 1em=16px。那么 12px=0.75em, 10px=0.625em。

如何垂直居中一个元素？

方法一：绝对定位居中（原始版之已知元素的高宽）

.content {
  width: 200px;
  height: 200px;
  background-color: #6699ff;
  position: absolute; /*父元素需要相对定位*/
  top: 50%;
  left: 50%;
  margin-top: -100px; /*设为高度的1/2*/
  margin-left: -100px; /*设为宽度的1/2*/
}

方法二：绝对定位居中（改进版之一未知元素的高宽）

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

方法三：绝对定位居中（改进版之二未知元素的高宽）

.content {
  width: 200px;
  height: 200px;
  background-color: #6699ff;
  margin: auto; /*很关键的一步*/
  position: absolute; /*父元素需要相对定位*/
  left: 0;
  top: 0;
  right: 0;
  bottom: 0; /*让四个定位属性都为0*/
}

方法四：flex 布局居中

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

那么问题来了，如何垂直居中一个 img（用更简便的方法。）

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

用纯 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;
}

display:none 与 visibility:hidden 的区别是什么？

display : 隐藏对应的元素但不挤占该元素原来的空间。

visibility: 隐藏对应的元素并且挤占该元素原来的空间。

即是，使用 CSS display:none 属性后，HTML 元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用 visibility:hidden 属性后，HTML 元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。

哪些 css 属性可以继承？

可继承： font-size font-family color, ul li dl dd dt;
不可继承 ：border padding margin width height ;

怎么让 Chrome 支持小于 12px 的文字？

css3 的 transform 属性，设置值为 scale(x,y) 定义 2D 缩放转换
示例：
-webkit-transform: scale(0.50);

png、jpg、gif、webp这些图片格式解释一下，分别什

gif

图形交换格式，索引颜色格式，颜色少的情况下，产生的文件极小，支持背景透明，动画，图形渐进，无损压缩（适合线条，图标等），缺点只有 256 种颜色

jpg

支持上百万种颜色，有损压缩，压缩比可达 180：1，而且质量受损不明显，不支持图形渐进与背景透明，不支持动画

png

为替代 gif 产生的，位图文件，支持透明，半透明，不透明。不支持动画，无损图像格式。Png8 简单说是静态 gif，也只有 256 色，png24 不透明，但不止 256 色。

webp

谷歌开发的旨在加快图片加载速度的图片格式，图片压缩体积是 jpeg 的 2/3，有损压缩。高版本的 W3C 浏览器才支持，google39+，safari7+

css3 有哪些新特性

选择器

E:last-child 匹配父元素的最后一个子元素 E。
E:nth-child(n)匹配父元素的第 n 个子元素 E。
E:nth-last-child(n) CSS3 匹配父元素的倒数第 n 个子元素 E。

RGBA

回答此问题，可能继续问：rgba()和 opacity 的透明效果有什么不同？

多栏布局

‹div class='mul-col'›
  ‹div›
    ‹h3›新手上路‹/h3›
    ‹p›新手专区 消费警示 交易安全 24小时在线帮助 免费开店‹/p›
  ‹/div›
  ‹div›
    ‹h3›付款方式‹/h3›
    ‹p›快捷支付 信用卡 余额宝 蚂蚁花呗 货到付款‹/p›
  ‹/div›
  ‹div›
    ‹h3›淘宝特色‹/h3›
    ‹p›手机淘宝 旺信 大众评审 B格指南‹/p›
  ‹/div›
‹/div›

.mul-col {
  column-count: 3;
  column-gap: 5px;
  column-rule: 1px solid gray;
  border-radius: 5px;
  border: 1px solid gray;
  padding: 10px;
}

多背景图

/* backgroundimage:url('1.jpg),url('2.jpg') */

CSS3 word-wrap 属性

p.test {
  word-wrap: break-word;
}

文字阴影

text-shadow: 5px 2px 6px rgba(64, 64, 64, 0.5);

@font-face 属性

Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。

@font-face {
  font-family: BorderWeb;
  src: url(BORDERW0.eot);
}
@font-face {
  font-family: Runic;
  src: url(RUNICMT0.eot);
}
.border {
  font-size: 35px;
  color: black;
  font-family: 'BorderWeb';
}
.event {
  font-size: 110px;
  color: black;
  font-family: 'Runic';
}

/* 淘宝网字体使用 */

@font-face {
  font-family: iconfont;
  src: url(//at.alicdn.com/t/font_1465189805_4518812.eot);
}

圆角

border-radius: 15px;

边框图片

CSS3 border-image 属性

盒阴影

/* box-shadow: 水平方向的偏移量 垂直方向的偏移量 模糊程度 扩展程度 颜色 是否具有内阴影 */

盒子大小

CSS3 box-sizing 属性

媒体查询

CSS3 @media 查询

CSS3 动画

@keyframes

@keyframes abc {
  from {
    transform: rotate(0);
  }
  50% {
    transform: rotate(90deg);
  }
  to {
    transform: rotate(360deg);
  }
}

animation 属性

/* animation ： name duration timing-function delay interation-count direction play-state */

渐变效果

background-image: -webkit-gradient(
  linear,
  0% 0%,
  100% 0%,
  from(#2a8bbe),
  to(#fe280e)
);

CSS3 弹性盒子模型

• 弹性盒子是 CSS3 的一种新的布局模式。
• CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
• 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

CSS3 过渡

div {
  transition: width 2s;
  -moz-transition: width 2s; /* Firefox 4 */
  -webkit-transition: width 2s; /* Safari 和 Chrome */
  -o-transition: width 2s; /* Opera */
}

CSS3 变换

• rotate()旋转
• translate()平移
• scale( )缩放
• skew()扭曲/倾斜
• 变换基点
• 3d 转换

position 的值， relative 和 absolute 分别是相对于谁定位

• absolute :生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。
• fixed （老 IE 不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。
• relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。
• static 默认值。没有定位，元素出现在正常的流中
• sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出

box-sizing:border-box会产生怎样的效果？

• 元素默认应用了box-sizing: content-box，元素的宽高只会决定内容（content）的大小。
• box-sizing: border-box改变计算元素width和height的方式，border和padding的大小也将计算在内。
• 元素的height = 内容（content）的高度 + 垂直方向的padding + 垂直方向border的宽度
• 元素的width = 内容（content）的宽度 + 水平方向的padding + 水平方向border的宽度

你了解 CSS Flex

flex 容器中存在两条轴， 横轴和纵轴， 容器中的每个单元称为 flex item。

在容器上可以设置 6 个属性：

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

注意：当设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效。

Flex 项目属性

有六种属性可运用在 item 项目上:

• order
• flex-basis
• flex-grow
• flex-shrink
• flex
• align-self

display:none、visibile:hidden、opacity:0 的区别

display: none

• 是否隐藏
  是
• 是否在文档中占用空间
  否
• 是否会触发事件
  否

visibile: hidden

• 是否隐藏
  是
• 是否在文档中占用空间
  是
• 是否会触发事件
  否

opacity: 0

• 是否隐藏
  是
• 是否在文档中占用空间
  是
• 是否会触发事件
  是

文本超出部分显示省略号

单行

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

多行

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

过渡与动画的区别是什么

transition 可以在一定的时间内实现元素的状态过渡为最终状态，用于模拟以一种过渡动画效果，但是功能有限，只能用于制作简单的动画效果而动画属性

animation 可以制作类似 Flash 动画，通过关键帧控制动画的每一步，控制更为精确，从而可以制作更为复杂的动画。

行内元素和块级元素有哪些

行内元素

一个行内元素只占据它对应标签的边框所包含的空间
一般情况下，行内元素只能包含数据和其他行内元素

b, big, i, small, tt,
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea

块级元素

占据一整行，高度、行高、内边距和外边距都可以改变，可以容纳块级标签和其他行内标签

header,form,ul,ol,table,article,div,hr,aside,figure,canvas,video,audio,footer