CSS和HTML面试题

1、块级元素block，行内元素inline，行内块元素inline-block概念和区别

(1)、 block

①.block确切的说应该是block-level elements块级元素，block元素通常显示为独立的一行，多个block元素会各自新起一行。默认情况下，block元素宽度会自动填满其父级宽度；

②.block元素可以设置width、height，margin、padding属性，但是即使设置了宽度，仍然是独占一行。

③. 常见的block块级元素有：div from table p pre h1~h6 dl ol ul等

(2)、 inline

①.inline确切的说是inline elements内联元素，inline元素不会产生换行，多个相邻的内联元素会排列在同一行里，直到一行排列不下才会心换一行，其宽度随元素的内容而变化；

②.inline元素可以设置width、height属性，也可以设置margin、padding属性，但是水平方向产生边距效果，垂直方向则不会；

③. 常见的inline行内元素有：span a strong em label input select textarea img br等

(3)、 inline-block

①.会将对象呈现为inline对象，但是对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内。

(4)、 补充

①.这三种只是比较常用，其实display的参数远不止这三种；

②.IE（低版本IE）本来是不支持inline-block的，所以在IE中对内联元素使用display:inline-block，理论上IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表象。

③.一般来说，块元素可以包含行元素和块元素，行元素只能包含行元素；但是也有例外，比如p元素，只能包含行元素，而不能包含块元素；

④. 4. 一般来说，可以通过display:inline和display:block的设置，改变元素的布局级别。

2、将多个元素设置为同一行的方法？清浮动的方法？

(1)、①.float；②.inline-block

(2)、

①.父级也进行浮动，弊端是左右的margin：0，auto；会失效

②.给父级加display：inline-block，弊端是左右的margin：0，auto；会失效（如果需要元素居中，可以给父级加text-align：center；）

③.父级div定义 overflow: hidden；

④.给父级添加伪类子元素

.div:after{

content:""

display:block;

clear:both;

}

clear{

zoom：1；

}

（因为只有IE8+以上的浏览器才支持）

相当于最后给一个空<div style:"cllear:both;"></div>

推荐使用，目前主流方法

⑤.添加浮动元素的不浮动兄弟标签，并设置clear属性，属性值一般直接给both

⑥.浮动元素的父级设置高度，实际上没有清浮动的效果，只产生感官上的效果,扩展性更差

3、各种盒模型？

(1)、 标准盒模型

盒子的总宽度/高度 = width/height+padding+margin+border

(2)、 怪异盒模型

①.盒子的总宽度和高度是包含内边距padding和边框border宽度在内的

②.盒子的总宽度/高度 = width/height+margin = 内容区域宽度/高度+padding+border+margin

③.box-sizing可以取以下三个值：

1、border-box 边框的宽度和padding的宽度都在width内；也叫怪异模式，怪异盒模型；不会破坏整体位置布局。但是border和padding给的值的总和，不能超过width，否则元素的实际宽度就会被撑开

2、content-box，border和padding不计算入width之内

3、padding-box，padding计算入width内

ie8+浏览器支持content-box和border-box；ff则支持全部三个值。

4、box-sizing有两个值一个是content-box，另一个是border-box。

当设置为box-sizing:content-box时，将采用标准模式解析计算；

当设置为box-sizing:border-box时，将采用怪异模式解析计算。

4、区分href、src，title和alt

①. href（Hrpertext Reference）指定网络资源的位置（超文本引用），从而在当前元素或文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系，在link和a等元素上使用；

②. src（Source）属性仅仅嵌入当前资源到当前文档元素定义的位置，是页面必不可少的一部分，是引入。在img、script、iframe等元素上使用；

③. title既是HTML标签，又是HTML属性，title作为属性时，用来为元素提供额外说明信息；

④. alt是HTML标签的属性，alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息；

5、transform和animation的区别？以及animation-duration？

①. transform：它和width、left一样，定义了元素很多静态样式实现变形、旋转、缩放、移位及透视等功能，通过一系列功能的组合我们可以实现很炫酷的静态效果（非动画)。

②. animation：作用于元素本身而不是样式属性,属于关键帧动画的范畴，它本身被用来替代一些纯粹表现的javascript代码而实现动画,可以通过@keyframe显式控制当前帧的属性值.

③. animation-duration：规定完成动画所花费的时间，以秒或毫秒计。

6、nth-of-type/nth-child?

①. p: nth-child（2）/(2n-1)/……

选择的是p标签

p标签必须是同级里面所有标签的顺序中的第二个

可以给first和last

②. p: nth-of-type（2）/(2n-1)/……

选择的是p标签

p标签必须是所有p标签中的顺序的第二个

可以给first和last

7、:before和::before的区别？

:用于CSS3伪类，::用于CSS3伪元素。

对于CSS2之前已有的伪元素，比如before，单冒号和双冒号的作用是一样的。

8、div居中、多行文本和图片在容器中的居中方法

1)、position：absolute；

1⃣当元素没有宽和高的时候，设置四个方向的定位值可以把元素宽高拉开，撑满父级；

2⃣当元素有宽高的时候，设置四个方向的定位值为0，可以使用margin：auto；居中。

2)、margin：0 auto；左右居中

3)、定位居中

父级设置position：relative；

子级设置position：absolute；

top：50%；

left：50%；

margin：-宽的一半 0px 0px -高的一半

4)、flex-box：规定框的子元素是否可伸缩其尺寸。

display: flex; 设置flex布局

align-items: center; 在交叉轴方向的对其方式为居中

justify-content: center;在主轴方向的对齐方式为居中

5)、使用表格，把图文放在td里面，默认就是垂直居中，然后加一个margin：0 auto；左右居中；达到居中效果。

6)、图片居中：设置为位置容器的背景图background-position：50%；

9、css2.0 和css3.0

css3加强了css2的功能，增加了新的属性和新的标签，并且删除了一些冗余的标签，在布局方面减少了代码量。以前比较复杂的布局现在一个属性就搞定了（columns之类的属性）。在效果方面加入了更多的效果(圆角，动画之类的)，还有在盒子模型和列表模块都进行了改进。不过CSS3兼容性不好，只有一些高级版本的浏览器支持。

10、弹性盒子模型?flex|box区别?

(1) 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。

即便容器中条目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工作。在该布局模型中，容器会根据布局的需要，调整其中包含的条目的尺寸和顺序来最好地填充所有可用的空间。

当容器的尺寸由于屏幕大小或窗口尺寸发生变化时，其中包含的条目也会被动态地调整。比如当容器尺寸变大时，其中包含的条目会被拉伸以占满多余的空白空间；当容器尺寸变小时，条目会被缩小以防止超出容器的范围。弹性盒布局是与方向无关的。

在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；

而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。

(2) flex和box的区别: display：box 是老规范，要兼顾老式浏览器就加上它； 父级元素有display:box;属性之后。他的子元素里面加上box-flex属性。可以让子元素按照父元素的宽度进行一定比例的分占空间。 flex是最新的，老式浏览器不支持的；

父元素设置display:flex后，子元素宽度会随父元素宽度的改变而改变，而display:box不会。 Android UC浏览器只支持display: box语法；而iOS UC浏览器则支持两种方式。

11、viewport的所有属性？

(1)width :设置layout viewport的宽度，为一个正整数，或字符串'device-width';

(2)initial-scale:设置页面的初始缩放值，为一个数字，可以带小数。

(3)minimum-scale:允许用户的最小缩放值，为一个数字，可以带小数。

(4)maximum-scale:允许用户的最大缩放值，为一个数字，可以带小数。

(5)height:设置layout viewport的高度，这个属性对我们并不重要，很少使用

(6)user-scalable:是否允许用户进行缩放，值为‘no’或者‘yes’。

安卓中还支持：target-densitydpi，表示目标设备的密度等级，作用是决定css中的1px 代表多少物理像素

(7)target-densitydpi:值可以为一个数值或者 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个

12、HTML结构的语义化

标签语义化，就是指标签的含义。语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用，对搜索引擎友好，有了良好的结构和语义我们的网页内容便自然容易被搜索引擎抓取，这种符合搜索引擎收索规则的做法，网站的推广便可以省下不少的功夫，而且可维护性更高，因为结构清晰,十分易于阅读。这也是搜索引擎优化SEO重要的一步。

13、伪类选择器和伪元素？c3中引入的伪类选择器有？c3中伪元素有?

伪类用一个冒号来表示，而伪元素则用两个冒号来表示。

伪类选择器：

由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。

伪元素选择器：

并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器；

c3中引入的伪类选择器：

:root()选择器，根选择器，匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。:root选择器等同于<html>元素。

:not()选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。

:empty()选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

:target()选择器来对页面某个target元素(该元素的id被当做页面中的超链接来使用)指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。

:first-child()选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。

:nth-child()选择某个元素的一个或多个特定的子元素。

:nth-last-child()从某父元素的最后一个子元素开始计算，来选择特定的元素

:nth-of-type(n)选择器和:nth-child(n)选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。

:only-child表示的是一个元素是它的父元素的唯一一个子元素。

:first-line为某个元素的第一行文字使用样式。

:first-letter 为某个元素中的文字的首字母或第一个字使用样式。

:before 在某个元素之前插入一些内容。

:after 在某个元素之后插入一些内容。

c3中伪元素：

::first-line选择元素的第一行，比如说改变每个段落的第一行文本的样式

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常用"content"配合使用，见过最多的就是清除浮动

::selection用来改变浏览网页选中文的默认效果

14、H5有哪些新特性、移除了哪些元素？如何处理h5新标签的浏览器兼容问题？如何区分HTML和HTML5？

新特性：

绘画 canvas;

用于媒介回放的 video 和 audio 元素;

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

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

语意化更好的内容元素，比如 article、footer、header、nav、section;

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

新的技术webworker, websockt, 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和HTML5：

DOCTYPE声明\新增的结构元素\功能元素

15.HTML5的离线储存怎么使用，工作原理能不能解释一下？

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。

原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

16.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。

离线的情况下，浏览器就直接使用离线存储的资源。

17.请描述一下cookies，sessionStorage 和 localStorage 的区别？

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。

cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会

sessionStorage和localStorage的存储空间更大；

sessionStorage和localStorage有更多丰富易用的接口；

sessionStorage和localStorage各自独立的存储空间；

存储大小：

cookie数据大小不能超过4k。

sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

有期时间：

localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

sessionStorage 数据在当前浏览器窗口关闭后自动删除。

cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

18.Doctype作用，标准模式与兼容模式的区别

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

 

标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

19.HTML5 为什么只需要写 <!DOCTYPE HTML>？

HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

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

（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;

（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

21.介绍一下你对浏览器内核的理解？

主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎则：解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

常见的浏览器内核有哪些？

Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]

Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等

Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]

Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

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

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

<label for="Name">Number:</label> <input type=“text“name="Name" id="Name"/>

<label>Date:<input type="text" name="B" /></label>

23.HTML5的form如何关闭自动完成功能？

给不想要提示的 form 或下某个input 设置为 autocomplete=off。

24.CSS 选择器有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

1.id选择器（ # myid）

2.类选择器（.myclassname）

3.标签选择器（div, h1, p）

4.相邻选择器（h1 + p）

5.子选择器（ul > li）

6.后代选择器（li a）

7.通配符选择器（ * ）

8.属性选择器（a[rel = "external"]）

9.伪类选择器（a: hover, li: nth - child）

* 可继承的样式： font-size font-family color, UL LI DL DD DT;

* 不可继承的样式：border padding margin width height ;

* 优先级就近原则，同权重情况下样式定义最近者为准;

* 载入样式以最后载入的定位为准;

优先级为:

!important > id > class > tag

important 比 内联优先级高

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> 元素。

:enabled :disabled 控制表单控件的禁用状态。

:checked 单选框或复选框被选中。

25.列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？

1.display的值，以及作用

block 象块类型元素一样显示。

none 缺省值。象行内元素类型一样显示。

inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。

list-item 象块类型元素一样显示，并添加样式列表标记。

2.position的值

*absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

*fixed （老IE不支持）

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

*relative

生成相对定位的元素，相对于其正常位置进行定位。

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

*（忽略 top, bottom, left, right z-index 声明）。

* inherit 规定从父元素继承 position 属性的值。