Web面试之 HTML与CSS

最新推荐文章于 2024-10-12 10:09:54 发布

@lgk_Blog

最新推荐文章于 2024-10-12 10:09:54 发布

阅读量606

点赞数

分类专栏：前端面试文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_49809163/article/details/118164825

版权

前端面试专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Web 面试之 HTML 与 CSS

一、HTML 面试题
二、CSS3 面试题
总结

一、HTML 面试题

1、如何理解 HTML 语义化？为什么要语义化？

语义化理解：

在适当的位置使用适当的标签，不同的文本内容选择对应不同的 HTML 标签，比如：标题用 h 系列标签，段落用 p 标签

语义化的作用：

让开发人员更容易看懂代码（增加代码的可读性）：使页面没有css的情况下，也能够呈现出很好的内容结构
让搜索引擎更容易读懂（SEO，搜索引擎优化）：网络爬虫依赖标签来确定关键字的权重，正确的语义化可以帮助爬虫抓取更多的有效信息
便于团队开发和维护：语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化
方便其他设备解析：如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。

2、HTML5 新增语义元素？

Header nav article section aside footer main stong em small

区块标签	说明
<header>	页头
<nav>	导航条
<article>	文档的核心文章内容，会被搜索引擎主要抓取
<section>	文档的区域，语义比 div 大
<aside>	文档的非必要相关内容，比如：广告等
<main>	网页核心部分
<footer>	页脚

3、默认情况下，哪些 HTML 标签是块级元素，哪些是内联元素？

块级元素是设置 display: block / table; 这些元素的特点是无论内容多少都独占一行；常见的块级元素标签有：div、h系列、p、table、ul、ol 等
内联元素是设置 display: inline / inline-block; 这些元素的特点是不独占一行，会挨着靠后拍，直到浏览器的边缘换行为止；常见的标签有：span、img、input、button 等

4、如何去除内联元素之间的边距？

在 html 中将元素写在一行或者上一个元素的结束标签与下一个元素的开始标签放在一行
使用浮动 float: left;
设置 margin 为负值

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

IE8/IE7/IE6 支持通过 document.createElement() 方法产生新的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签，当然最好的方式是直接使用成熟的框架，使用最多的是 html5shiv 框架
html5shiv 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁，可以下载并引入 html5shiv.js 让 IE 浏览器识别并支持 HTML5 元素

6、说说 title 和 alt 属性的区别？

两个属性都是当鼠标滑动到元素上的时候显示
alt 是 img 的特有属性，是图片内容的等价描述，图片无法正常显示时候的替代文字。
title 属性可以用在除了 base，basefont，head，html，meta，param，script 和 title 之外的所有标签，是对 dom 元素的一种类似注释说明

7、b 和 strong 的区别？

两者虽然在网页中显示效果一样,但实际目的不同：
这个标签对应 bold ，即文本加粗，其目的仅仅是为了加粗显示文本，是一种样式风格需求
这个标签意思是加强，表示该文本比较重要，为了引起读者或终端注意，浏览器等终端将其加粗显示
为了加粗而加粗， 为了标明重点而加粗

8、HTML5 有哪些新特性？

语义化更好的标签（header、nav、footer、aside、article、section、main ）
增加表单控件：date、 time、 email、url、search 等
临时会话存储数据 sessionStorage（数据在浏览器关闭后自动删除）
本地存储数据 localStorage，即使浏览器关闭后数据也不会丢失
音频、视频API(audio,video)
拖拽释放（Drag and drop）API
画布（Canvas）API
地理（Gealocation）API

9、如何区分 HTML 和 HTML5？

看文档类型声明

<!-- html声明 -->
<!DOCTYPE html PUBLIC "-/ /W3C/ /DTD XHTML 1.0 Transitional/ /EN" "http://mw.w3.org/TR/xhtn11/DTD/xhtml transitional.dtd"> 
 
<!-- html5声明 -->
<!DOCTYPE html>

结构语义
HTML：没有体现结构语义化的标签，通常都是这样来命名的<div id=“header”>，这样表示网站的头部
HTML5：在语义上却有很大的优势，提供了一些通俗易懂的新的标签，比如：article、 footer、header、nav、 section

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

class：为元素设置类标识
data-*：为元素增加自定义属性
id：元素id，文档内唯一
lang：元素内容的的语言
style：行内 css 样式
title：元素相关的建议信息
draggable：设置元素是否可拖拽

11、DOCTYOPE 的作用？严格模式和混杂模式的区别？

DOCTYPE是 document type (文档类型) 的缩写。<!DOCTYPE > 声明位于文档的最前面，处于标签之前，它不是 HTML 标签,主要作用是告诉浏览器的解析器使用哪种 HTML 规范或者 XHTML 规范来解析页面
严格模式和混杂模式都是浏览器的呈现模式，浏览器究竟使用混杂模式还是严格模式呈现页面与网页中的DTD（文件类型定义）有关，DTD里面包含了文档的规则
严格模式：又称标准模式，是指浏览器按照W3C标准来解析代码，呈现页面
混杂模式：又称为怪异模式或者兼容模式，是指浏览器按照自己的方式来解析代码，使用一种比较宽松的向后兼容的方式来显示页面

12、meta 标签有哪些属性，作用是什么？

meta 标签用于描述网页的元信息，如网站作者、描述、关键词，meta 通过name=xxx 和 content=xxx 的形式来定义信息，常用设置如下：
meta 元素包含四大属性：
name 属性： 用于定义页面的元数据。他不能与http-equiv、charset共存。通常是与 content 配合使用
content 属性： 通常配合name或http-equiv使用,能够给这两个属性提供一个值
charset 属性： 声明了页面的字符编码常用的值: UTF-8(Unicode字符编码)、 ISO-8859-1(拉J字母表的字符编码)
http-equiv 属性： 可用用做 HTTP头部的某些作用,通过定义该属性可以改变服务器和用户代理的行为

13、src 和 href 的区别？

src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系
src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕才会继续向下。这也是为什么将 js 脚本放在底部而不是头部。
href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加 <link href=”common.css” rel=”stylesheet”/> 那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css，而不是使用@import 方式。

14、attribute和property的区别是什么？

Attribute：书写在 HTML 标签内的某个属性，如id、class、value 等以及自定义属性，它的值只能是字符串，使用setAttribute()和getAttribute()进行设置和获取，以及用 removeAttribute() 进行删除
Property：是 JS 获取的 DOM 对象上的属性值，html标签对应的DOM节点属性，使用 .属性名 或者 [‘属性名’] 进行设置和获取

15、说一下 HTML5 drag（拖拽） API

dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发
darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发
dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发
dragover：事件主体是目标元素，在被拖放在某元素内移动时触发
dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发
drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发
dragend：事件主体是被拖放元素，在整个拖放操作结束时触发

16、前端如何处理网站 seo？

突出重要内容：合理的设计title 、description 和 keywords
<title>标题：只强调重点即可，尽量做到每个页面的<title> 标题中不要设置相同的内容
<meta keywords>标签：关键词，列举出几个页面的重要关键字即可
<meta description>标签：网页描述，描述内容不宜过长
语义化书写 HTML 代码，符合W3C标准：尽量让代码语义化，在适当的位置使用适当的标签，用正确的标签做正确的事
正文标题要用 h1 标签：
h1 标签自带权重，爬虫认为它最重要，一个页面有且最多只能有一个 h1 标签，放在该页面最重要的标题上面；副标题用 h2 标签，而其它地方不应该随便乱用 h 系列标题标签
<a>链接:
页内链接，要加 title 属性加以说明
而外部链接，链接到其他网站的，则需要加上 rel=“nofollow” 属性，告诉爬虫不要爬取
<img>应使用"alt"属性加以说明，同时为图片设置高度和宽度，可提高页面的加载速度
表格应该使用 caption 表格标题标签：caption元素定义表格标题，caption 标签必须紧随 table 标签之后
strong、em 标签：
strong 标签在搜索引擎中能够得到高度的重视，它能突出关键词，表现重要的内容，em 标签强调效果仅次于 strong 标签
b、i 标签只是用于显示效果时使用，在SEO中不会起任何效果
尽少使用 iframe 框架：因为爬虫一般不会读取其中的内容

17、前端性能优化

内容优化：

减少 HTTP 请求次数
合并多个 CSS 文件和 JS 文件，利用 CSS Sprites 整合图像，合理设置 HTTP 缓存等
可缓存的 AJAX
异步请求同样的造成用户等待，所以使用 ajax 请求时，要主动告诉浏览器如果该请求有缓存就去请求缓存内容
不要在 HTML 中缩放图片
比如你需要的图片尺寸是50* 50，那就不要用一张500*500的大尺寸图片，影响加载
使用 CDN（Content Delivery Network，即内容分发网络）分发网站上的静态资源，如：CSS、JS、图片等
避免空的 src 和 href
当 link 标签的 href 属性为空、script 标签的 src 属性为空的时候，浏览器渲染的时候会把当前页面的 URL 作为它们的属性值，从而把页面的内容加载进来作为它们的值。所以要避免犯这样的疏忽。
为文件头指定 Expires
Exipres是用来设置文件的过期时间的，一般对css、js、图片资源有效；它可以使内容具有缓存性，这样下回再访问同样的资源时就通过浏览器缓存区读取，不需要再发出http请求
使用 gzip 压缩内容
gzip能够压缩任何一个文本类型的响应，包括 html、xml、json，大大缩小请求返回的数据量
将 CSS 和 JS 放到外部文件中
目的是缓存文件，但有时候为了减少请求，也会直接写到页面里，需根据PV和IP的比例权衡。
权衡 DNS 查找次数
减少主机名可以节省响应时间，但同时需要注意，减少主机会减少页面中并行下载的数量
精简CSS和JS
这里就涉及到css和js的压缩了。比如下面的新浪的一个css文件，把空格回车全部去掉，减少文件的大小。现在的压缩工具有很多，基本主流的前端构建工具都能进行css和js文件的压缩，如grunt，glup等
避免重定向
有种现象会比较坑爹，看起来没什么差别，其实多次了一次页面跳转。比如当URL本该有斜杠（/）却被忽略掉时。例如，当我们要访问 baidu.com 时，实际上返回的是一个包含301代码的跳转，它指向的是 baidu.com/（注意末尾的斜杠）。在nginx服务器可以使用rewrite；Apache服务器中可以使用Alias 或者 mod_rewrite或者the DirectorySlash来避免
另一种是不用域名之间的跳转，比如访问 baidu.com/bbs 跳转到bbs.baidu.com/。那么可以通过使用Alias或者mod_rewirte建立CNAME（保存一个域名和另外一个域名之间关系的DNS记录）来替代
删除重复的 JS 和 CSS
重复调用脚本，除了增加额外的HTTP请求外，多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存，它们都存在重复运算JavaScript的问题
使用 GET 来完成 AJAX 请求：当使用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，然后才发送数据。因此使用GET获取数据时更加有意义
避免404
比如外链的 CSS、JS 文件出现问题返回 404 时，会破坏浏览器的并行加载
缩小 favicon.ico 并缓存
最小化iframe的数量
iframes 提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但其创建速度比其他包括JavaScript和CSS的DOM元素的创建慢了1-2个数量级。

CSS 优化：

把 CSS 放到顶部
网页上的资源加载时从上网下顺序加载的，所以 CSS 放在页面的顶部能够优先渲染页面，让用户感觉页面加载很快
图标尽量使用矢量图标
避免使用 CSS 表达式
使用 link 来代替 @import

JavaScript 优化：

把 JS 放到底部
加载 JS 时会对后续的资源造成阻塞，必须得等 JS 加载完才去加载后续的文件，所以就把 JS 放在页面底部最后加载
减少 DOM 元素数量
就会减少浏览器的解析负担

Cookie 优化：

减少 Cookie 的大小
Cookie 里面别塞那么多东西，因为每个请求都得带着他跑
使用无 Cookie 的域
比如 CSS、JS、图片等，客户端请求静态文件的时候，减少了 Cookie 的反复传输对主域名的影响

二、CSS3 面试题

1、盒模型的宽度如何计算？

offsetWidth = width + 2 * padding + 2 * border
offsetHeight = height + 2 * padding + 2 * border

<!-- 如下代码，请问 div1 的 offsetWidth 是多大？ -->
<!-- 
	答案是：122px 
-->
<style>
	#div1 {
		width: 100px;
		height: 100px;
		padding: 10px;
		border: 1px solid #ccc;
		margin: 10px;
	}
</style>

<div id="div1">
</div>

<!-- 如下代码，请问 div2 的 offsetWidth 是多大？ -->
<!-- 
	加 box-sizing: border-box; 之后，盒子的宽高就是实际盒子的宽高
	答案是：100px 
-->
<style>
	#div2 {
		width: 100px;
		height: 100px;
		padding: 10px;
		border: 1px solid #ccc;
		margin: 10px;
		box-sizing: border-box;
	}
</style>

<div id="div2">
</div>

2、介绍一下 box-sizing 属性？

box-sizing 属性主要用来控制元素的盒模型的解析模式
属性值 content-box（默认）：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高
属性值 border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content
标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。

3、margin 纵向重叠的问题？

相邻元素的 margin-top 和 margin-bottom 会发生重叠
空白内容的 也会重叠

<!-- 如下代码，AAA 和 BBB 之间的距离是多少？ -->
<!--
	答案是：15px
-->
<style>
	p {
		font-size: 16px;
		line-height: 1px;
		margin-top: 10px;
		margin-bottom: 15px;
	}
</style>

<p>AAA</p>
<p></p>
<p></p>
<p></p>
<p>BBB</p>

4、margin 负值的问题？

margin-top 和 margin-left 负值，元素向上、向左移动
margin-right 负值，自身不受影响，右侧元素左移
margin-bottom 负值，自身不受影响，下方元素上移

5、BFC 理解和应用？

什么是 BFC：

Block format context，块级格式化上下文
简单的说，BFC 是页面上的一个隔离的独立容器，内部元素的渲染不会影响边界以外的元素

形成 BFC 的常见条件：

根元素或包含根元素的元素
float 的值不是 none
overflow 的值不是 visible，而是 hidden、scroll等
position 的值是 absolute 或 fixed
display 的值是 flex、inline-block、table、table-cell、table-caption、grid 等

BFC 在布局中的应用：

防止margin重叠（塌陷）
自适应多栏布局
清除内部浮动

6、float 布局的问题——圣杯、双飞翼布局

圣杯布局和双飞翼布局的技术：

使用 float 布局
两侧使用 margin 负值，以便和中间内容横向重叠
防止中间内容被两侧覆盖，一个用 padding，一个用 margin

圣杯布局： 通过 padding 给两边留白

  <style>
    body {
      min-width: 550px;
    }
    #header, #footer {
      text-align: center;
      background-color: #ccc;
    }
    #footer {
      clear: both;
    }

    #container {
      padding-left: 200px;
      padding-right: 150px;
    }
    #container .column {
      position: relative;
      float: left;
    }

    #center {
      width: 100%;
      background-color: green;
    }

    #left {
      /* position: relative; */
      width: 200px;
      margin-left: -100%;
      right: 200px;
      background-color: yellow;
    }
    
    #right {
      width: 150px;
      margin-right: -150px;
      background-color: red;
    }
  </style>

<body>
  <div id="header">header</div>
  <div id="container">
    <div id="center" class="column">center</div>
    <div id="left" class="column">left</div>
    <div id="right" class="column">right</div>
  </div>
  <div id="footer">footer</div>
</body>

双非翼布局： 通过 margin 给两边留白

  <style>
    body {
      min-width: 550px;
    }

    .col {
      float: left;
    }

    #main {
      width: 100%;
      height: 200px;
      background-color: green;
    }

    #main-wrap {
      margin: 0 150px 0 200px;
    }

    #left {
      width: 200px;
      height: 200px;
      margin-left: -100%;
      background-color: yellow;
    }
    
    #right {
      width: 150px;
      height: 200px;
      margin-left: -150px;
      background-color: red;
    }
    
  </style>
</head>
<body>
  <div id="main" class="col">
    <div class="main-wrap">
      main
    </div>
  </div>
  <div id="left" class="col">
    left
  </div>
  <div id="right" class="col">
    right
  </div>
</body>

7、浮动的工作原理和清除浮动的方法？

原理：浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留
使用 after 伪元素清除浮动（推荐）
缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

/* 手写 clearfix */
/* 伪元素用双冒号表示，IE8可以兼容单冒号 */
.clearfix:after {
	content: '';
	display: table;
	clear: both;
}
.clearfix {
	*zoom: 1;  /* 兼容 IE 低版本 */
}

通过触发BFC方式，实现清除浮动：父级添加 overflow: hidden（不推荐）
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素
在最后一个浮动标签后新加一个空元素，给其设置 clear: both（不推荐）

8、flex 布局

容器属性：
flex-direction 属性：

flex-direction 属性：用于控制容器内排列方向与顺序
属性值：row（默认），按顺序横向排列
属性值：row-reverse，按倒序横向排列
属性值：column，按顺序纵向排列
属性值：column-reverse，按倒序纵向排列

flex-wrap 属性：

flex-wrap 属性：用于控制容器内项目是否换行
属性值：nowrap（默认），默认不换行
属性值：wrap，表示换行，第一排会紧贴容器顶部
属性值：wrap-reverse，同样表示换行，但第一排会紧贴容器底部

justify-content 属性：

justify-content 属性：用于控制容器内元素在水平方向的对齐方式
属性值：flex-start（默认），表示左对齐
属性值：center，表示居中对齐
属性值：flex-end，表示右对齐
属性值：space-between，表示左右两端对齐，即左右两侧项目都紧贴父容器，且项目之间间距相等

align-items 属性：

align-items 属性：用于控制容器内元素在竖直方向的对齐方式
属性值：stretch（默认），表示如果项目没有设置高度，或高度为 auto，则占满整个容器高度
属性值：flex-start，表示紧贴容器顶部
属性值：center，表示在竖直方向居中
属性值：flex-end，表示紧贴容器底部

项目属性：
order 属性：

order 属性：用于决定项目的排列顺序
属性值：0（默认），属性值越小，元素排列越靠前

flex-grow 属性：

flex-grow 属性：用于决定项目在有剩余空间的情况下是否放大（即使设置了固定宽度，也会放大）
属性值：0（默认），表示不放大

flex-shrink 属性：

flex-shrink 属性：用于决定项目在空间不足时是否缩小（即使设置了固定宽度，也会缩小）
属性值：1（默认），表示空间不足时所有项目一起等比例缩小

flex-basis 属性：

flex-basis 属性：用于设置项目宽度
属性值：auto（默认），表示使用默认宽度，或者以 width 为自身的宽度

flex 属性：

flex 属性是 flex-grow、flex-shrink 与 flex-basis 三个属性的简写形式，用于设置项目的放大、缩小与宽度
属性值：0 1 auto（默认），表示不放大、等比例缩小、使用默认宽度

align-self 属性：

align-self 属性允许单个项目有与其它项目不一样的对齐方式，可覆盖 align-items 属性
属性值：auto（默认），表示继承父容器的 align-items 属性；如果没有父容器，则等同于 stretch
属性值：stretch，表示如果项目没有设置高度，或高度为 auto，则占满整个容器高度
属性值：flex-start，表示紧贴容器顶部
属性值：center，表示在竖直方向居中
属性值：flex-end，表示紧贴容器底部

9、flex 布局——实现一个三点的骰子

<style>
.box {
	width: 200px;
	height: 200px;
	border: 2px solid #ccc;
	padding: 20px;

	display: flex;
	justify-content: space-between;
	
}
.item {
	display: block;
	width: 40px;
	height: 40px;
	border-raduis:50%;
	background-color: #666;
}
.item:nth-child(2) {
	align-self: center;
}
.item:nth-child(3) {
	align-self: flex-end;
}
</style>

<div class="box">
	<span class="item"></span>
	<span class="item"></span>
	<span class="item"></span>
</div>

10、定位元素 position 的值有哪些？依据什么定位？

static（默认）：没有定位，元素出现在正常的流中
relative（相对定位）：相对于元素原来在普通流中的位置进行定位
absolute（绝对定位）：相对于距离最近的外层设置有 position 属性且属性值为 relative 或 absolute 的元素进行定位，如果外层都没有 position 属性，则依据 body 进行定位
fixed（固定定位）：相对于浏览器窗口的指定坐标进行定位或 frame 进行定位
sticky：生成粘性定位的元素，容器的位置根据正常文档流计算得出

11、居中对齐（垂直对齐和水平对齐）有哪些方式？

水平居中
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

 div {
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -250px;
      margin-top: -250px;
      width: 500px;
      height: 500px;
      background: yellow;
      z-index: 1;
    }
   div {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 500px;
      height: 500px;
      background: yellow;
      z-index: 1;
      transform: translate3d(-50%, -50%, 0);
    }
    .parent {
      display: flex;
    }
    .child {
      margin: auto;
    }

12、line-height 的如何继承的问题？

写具体数值，如 30px ，则直接继承该值
写比例，如 2 或 1.5 ，则直接继承该比例，然后行高就为：比例 * font- size
写百分比，如 200% ，则继承计算出来的值（考点），该值为：当前的 font-size * line-height

<!-- 如下代码， p 标签的行高将会是多少？ -->
<!-- 
	body 中的 line-height 是 50px 时，p 标签的行高是：50px；
	body 中的 line-height 是 1.5 时，p 标签的行高是：24px；
	body 中的 line-height 是 200% 时，p 标签的行高是：40px；
 -->
<style>
	body {
		font-size: 20px;
		line-height: 200%;
	}
	p {
		font-size: 16px;
	}
</style>

<body>
	<p>AAA</p>
</body>

13、行内元素和块级元素什么区别？

行内元素会在一条直线上排列（默认宽度只与内容有关），水平方向排列
块级元素各占据一行(默认宽度是它本身父容器的100%），垂直方向排列
块级元素可以包含行内元素和块级元素；行内元素不能包含块级元素，只能包含文本或者其它行内元素
行内元素与块级元素属性的不同，主要是盒模型属性上，行内元素不能设置width、height 属性，可以设置 line-height 属性；margin 上下无效，padding 上下无效

14、display 有哪些值及作用？

none： 隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
block： 块对象的默认值。用该值为对象之后添加新行
inline： 内联对象的默认值。用该值将从对象中删除行
table： 将对象作为块元素级的表格显示
inline-table： 将表格显示为无前后换行的内联对象或内联容器
compact： 分配对象为块对象或基于内容之上的内联对象

15、display: none 和 visibility：hidden 的区别？

display: none

隐藏后的元素不占据任何空间
给子元素设置display：none 不会显示出来
修改后会引起回流
会影响计数器的计数(ol)

visibility：hidden

隐藏后的元素空间依旧保留
visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来
修改后不会引起回流
不会影响计数器的计数(ol)

16、使元素消失的方法有哪些？

opacity：0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click 事件，那么点击该区域，也能触发点击事件的
visibility：hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
display：none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉。

17、em px rem vh vw 的区别？

px：表示像素，所谓像素就是呈现在我们显示器上的一个个小点，每个像素点都是大小等同的，所以像素为计量单位被分在了绝对长度单位中
em：是相对长度单位，相对于当前对象内文本的字体尺寸。如果当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（1em = 16px）
rem：相对单位，相对的只是 HTML 根元素 font-size 的值，常用于响应式布局
vw： 就是根据视口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽（vw 始终是针对窗口的宽）。同理，vh 则为视口的高度

18、响应式和自适应的区别？

响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；
自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面。

19、如何实现响应式？

媒体查询 media-query，根据不同的屏幕宽度设置根元素 font-size
rem，基于根元素的相对单位

<style>
	@media only screen and (max-width: 374px) {
		/* iphone5 或者更小的尺寸，以 iPhone5 的宽度（320px）比例设置 font-size */
		html {
			font-size: 86px;
		}
	}

	@media only screen and (min-width: 375px) and (max-width: 413px) {
		/* iphone6/7/8 和 iPhonex 的宽度（375px）比例设置 font-size */
		html {
			font-size: 100px;
		}
	}

	@media only screen and (min-width: 414px) {
		/* iphone6p 或者更大的尺寸，以 iPhone6p 的宽度（414px）比例设置 font-size */
		html {
			font-size: 110px;
		}
	}
</style>

rem 布局：rem 单位都是相对于根元素 html 的 font-size 来决定的，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化
flex 弹性布局，兼容性较差
Grid 网格布局，兼容性较差
Columns 栅格系统，往往需要依赖某个UI库，如Bootstrap

20、CSS 选择器有哪些？哪些属性可以继承？

选择器：

标签名选择器，如：p {}
类选择器，如：.box {}
ID选择器，如：#stuId {}
相邻选择器(+ )
子选择器(ul> li)
后代选择器(li a)
通配符选择器(* )
属性选择器( a[rel=" external"] )
伪类选择器( a:hover, li:nth-child )

继承属性：

font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
font-variant:偏大或偏小的字体
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：增加或减少单词间的空白
letter-spacing：增加或减少字符间的空白
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色
visibility: 隐藏元素
caption-side：定位表格标题位置
border-collapse：合并表格边框
border-spacing：设置相邻单元格的边框间的距离
empty-cells：单元格的边框的出现与消失
table-layout：表格的宽度由什么决定
quotes：设置嵌套引用的引号类型
cursor：箭头可以变成需要的形状

非继承属性：

display
文本属性：vertical-align、text-decoration
盒子模型的属性：宽度、高度、内外边距、边框等
背景属性：背景图片、颜色、位置等
定位属性：浮动、清除浮动、定位position等
生成内容属性：content、counter-reset、counter-increment
轮廓样式属性：outline-style、outline-width、outline-color、outline
页面样式属性：size、page-break-before、page-break-after

21、CSS3新增伪类有那些？

:first-child：匹配第一个子元素
:last-child：匹配最后一子元素
:nth-child()：按正序匹配特定子元素
:nth-last-child()：按倒序匹配特定子元素
:nth-of-type()：在同类型中匹配特定子元素
:nth-last-of-type()：按倒序在同类型中匹配特定子元素
:first-of-type：匹配第一个同类型子元素
:last-of-type：匹配最后一个同类型子元素
:only-child：匹配唯一子类型
:only-of-type：匹配同类型的唯一子元素
:empty：匹配空元素

22、link 和 @import 的区别？

两者都是外部引用 CSS 的方式，但是存在一定的区别：
link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务；@import 只能加载CSS
link 引用CSS 时，在页面载入时同时加载；@import 需要在页面完全载入之后才加载
link 是 XHTML标签，无兼容问题；@import 是在 CSS2.1 提出的，低版本的浏览器不支持
link 支持使用 JavaScript 控制 DOM 去改变样式；而@import不支持

23、z-index 的定位方法

z-index 属性设置元素的堆叠顺序，拥有更好堆叠顺序的元素会处于较低顺序元素之前， z-index 可以为负，且z-index 只能在定位元素上奏效，该属性设置一个定位元素沿 z 轴的位置，如果为正数，离用户越近，为负数，离用户越远，它的属性值有auto，默认，堆叠顺序与父元素相等，number，inherit，从父元素继承z-index 属性的值

24、单行文本溢出、多行文本溢出

单行文本溢出

p {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

多行文本溢出

p {
	overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;   // 控制多少行后隐藏
}

25、CSS3 有哪些新特性?

动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;
弹性盒模型 display: flex;
颜色透明度 color: rgba(255, 0, 0, 0.75)
圆角 border-radius: 5px;
文字溢出 text-overflow:ellipsis;
缩放 transform: scale(0.5)；
平滑过渡 transition: all .3s ease-in .1s;
旋转 transform: rotate(20deg)；
媒体查询 @media(max-width: 480px){.box: {column-count: 1;}}
新增选择器 p:nth-child（n）{color: rgba(255, 0, 0, 0.75)}
多列布局 column-count: 5;
个性化字体 @font-face{font-family:BorderWeb;src:url(BORDERW0.eot)}
渐变 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;
背景效果 background-size: 100px 100px;
边框效果 border-image:url(bt_blue.png) 0 10;
倾斜 transform: skew(150deg, -10deg)
位移 transform:translate(20px, 20px)

26、如何让浏览器支持一个小于 12px 的字体？

使用 zoom：zoom 的字面意思是“变焦”，可以改变页面上元素的尺寸，属于真实尺寸
zoom:50%，表示缩小到原来的一半
zoom:0.5，表示缩小到原来的一半

// 字体大小变为 12px 的 80%
.box1 {
	display: inline-block;
	font-size: 12px;
	zoom: 0.8;
}

-webkit-transform:scale()
针对 Chrome 浏览器，加webkit前缀，用 transform: scale() 这个属性进行缩放
注意的是，使用 scale 属性只对可以定义宽高的元素生效

// 字体大小变为 12px 的 80%
.box1 {
	display: inline-block;
	font-size: 12px;
	-webkit-transform: scale(0.8);
}

27、重排和重绘？如何避免？

什么是重绘重排：

当我们改变了一个元素的尺寸位置属性时，会重新进行样式计算(computedstyle)布局(layout)绘制( paint )以及后面的所有流程，这种行为称为重排。
当改变了某个元素的颜色属性时不会重新触发布局，但还是会触发样式计算和绘制这就是重绘。

触发的一些因素：

页面首次进入的渲染。
浏览器 resize（改变）
元素位置和尺寸发生改变的时候
可见元素的增删
内容发生改变
字体的font的改变
CSS伪类激活

CSS 如何避免：

使用 transform 替代 top 等位移;
使用 visibility 替换 display: none
避免使用 table 布局
尽可能在 DOM 树的最末端改变 class
避免设置多层内联样式，尽量层级扁平
将动画效果应用到 position 属性为 absolute 或 fixed 的元素上
避免使用CSS表达式
将频繁重绘或者回流的节点设置为图层，比如：video、iframe

Javascript 如何避免：

避免频繁操作样式，合并操作
避免频繁操作DOM，合并操作;
防抖节流控制频率;
避免频繁读取会引发回流/重绘的属性
对具有复杂动画的元素使用绝对定位

28、CSS 预处理器

CSS 预处理器：

为 CSS 增加编程特性的拓展语言，可以使用变量、简单逻辑判断、函数等基本编程技巧，CSS预处理器编译输出还是标准的CSS样式
Less、 Sass 都是是动态的样式语言，是 CSS 预处理器，CSS上的一种抽象层。他们是一种特殊的语法/语言而编译成 CSS。less变量符号是@ ，Sass变量符号是$

CSS预处理器带来的好处：