面试题之html/css

1、让一个div 在不同分辨率屏幕居中

//两种方法：定位和margin:0 auto;
position:absolute;//定位
left:50%;
margin-left:-(div的宽度)

top:0;//margin:0 auto方法
bottom:0;
left:0;
right:0;
margin:0 auto;

2、双飞燕布局，左中右布局，左右固定中间自适应，要求先加载中间模块

3.为什么会出现浮动和什么时候需要清除浮动？清楚浮动的方法：

浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。浮动带来的问题：

父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素（内联元素）会跟随其后
若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方式：

父级div定义height
最后一个浮动元素后加空div标签并添加样式clear:both。
包含浮动元素的父标签添加样式overflow为hidden或auto。
父级div定义zoom
Clearfix 方法：上文使用.clearfix类已经提到。（在大型项目中，我会使用 Clearfix 方法，在需要的地方使用.clearfix。设置overflow: hidden的方法可能使其子元素显示不完整，当子元素的高度大于父元素时。）
父元素增加伪类

4.行内元素，块级元素有哪些？

块级：div、p、ul、ol、body、from
行内： title lable span a
行内块： img input td

5.css选择符有哪些？哪些属性可以继承？优先级算法如何计算？

CSS选择符：id、class类、标签(div, h1, p)、相邻(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child）

**可继承的属性：**font-size, font-family, color **不可继承的样式：**border, padding, margin, width, height

优先级（就近原则）：!important >行内> (内部)[ id > class > tag ]>外部样式

6.cs3新增的伪类，css3的了解与使用、css3新特性

css3新增伪类：

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

css3新特性：

RGBA和透明度
background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
word-wrap（对长的不可分割单词换行）word-wrap：break-word
文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）
font-face属性：定义自己的字体
圆角（边框半径）：border-radius 属性用于创建圆角
边框图片：border-image: url(border.png) 30 30 round
盒阴影：box-shadow: 10px 10px 5px #888888
媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性

7.flex布局应用场景，圣杯布局

8.常见的浏览器内核是什么？经常碰到的浏览器兼有哪些？原因，解决方法是什么，常用hack技巧？

9.h5有哪些新特性？如何处理h5的兼容问题？html5语意化？

所谓语意化：让人（写程序、读程序）更易读懂；让机器（浏览器、搜索引擎）更易读懂；

为了加强 HTML 语义化，HTML5 标准中又增加了 header section artical 等标签。

好处：

语义化有利于SEO，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重。
在没有CSS的时候能够清晰的看出网页的结构，增强可读性。
便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。
支持多终端设备的浏览器渲染。

10.html标签

11.Doctype作用?标准模式与兼容模式各有什么区别? 有几种Doctype类型？

　(Q1) 告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
　(Q2) 标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

12.iframe 优缺点：

13.div+css 和table有什么优点

14.垂直居中布局等一些经典布局方式

14.position,文档流的理解

答：

1.relative 元素的定位永远是相对于元素自身位置的，和其他元素没关系，也不会影响其他元素可通过z-index进行层次分级

2.fixed 元素的定位是相对于 window （或者 iframe）边界的，和其他元素没有关系。但是它具有破坏性，会导致其他元素位置的变化。可通过z-index进行层次分级

3.absolute 的定位相对于前两者要复杂许多。如果为 absolute 设置了 top、left，浏览器会根据什么去确定它的纵向和横向的偏移量呢？答案是浏览器会递归查找该元素的所有父元素，如果找到一个设置了 position:relative/absolute/fixed 的元素，就以该元素为基准定位，如果没找到，就以浏览器边界定位。可通过z-index进行层次分级

15浏览器渲染原理

16.重排、重绘

重绘：指的是当页面中的元素不脱离文档流，而简单地进行样式的变化，比如修改颜色、背景等，浏览器重新绘制样式

（重排）回流：指的是处于文档流中 DOM 的尺寸大小、位置或者某些属性发生变化时，导致浏览器重新渲染部分或全部文档的情况

17.box-sizing:border-box;

答：为div设置这个属性之后，这个div的宽度就是内容宽+padding+border的总和。

box-sizing属性用来控制元素的盒子模型的解析模式，默认为content-box
context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽
border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽

18.margin塌陷,纵向重叠,解决方式

19、flex

20、CSS 的 transition 和 animation 有何区别？

首先 transition 和 animation 都可以做动效，从语义上来理解， transition 是过渡，由一个状态过渡到另一个状态，比如高度 100px 过渡到 200px ；而 animation 是动画，即更专业做动效的， animation 有帧的概念，可以设置关键帧 keyframe ，一个动画可以由多个关键帧多个状态过渡组成，另外 animation 也包含上面提到的多个属性。

21.class和id的区别

1.书写的区别：. #

2.优先级权重的区别

3.这些元素可以出现在同一页面上的多个位置，而ID 应该应用于不同的唯一的元素

22，请解释 inline 和 inline-block 的区别？

inline-block ：简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。

23.CSS 引入方式有哪些？link和 @important的区别？

CSS的引入方式共有三种：

行内样式（使用style属性引入CSS样式）
内部样式表（在style标签中书写CSS代码。style标签写在head标签中）
外部样式表（链接式、导入式）

链接：

<link type="text/css" rel="styleSheet"  href="CSS文件路径" />

导入：

<style type="text/css">
      @import url("css文件路径");
</style>

链接和道路的区别： <link>：

@import：属于CSS2.1 先加载HTML结构在加载CSS文件

24.请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。

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

而 inline 布局则是在水平方向来排列。

弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。

**适用场景：**弹性布局适合于移动前端开发，在Android和ios上也完美支持。

27.为什么要初始化CSS样式？

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

28.常见的兼容问题？

29.display:none与visibility：hidden的区别？

display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

30.有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度

外层div使用position：relative；高度要求自适应的div使用position: absolute; top: 100px; bottom: 0; left: 0

31.style标签写在body后与body前有什么区别？

页面加载自上而下当然是先加载样式。写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）

32.阐述一下CSS Sprites

将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background- repeat，background-position 的组合进行背景定位。利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能；CSS Sprites能减少图片的字节。

33.如何解决不同浏览器的样式兼容性问题？

在确定问题原因和有问题的浏览器后，使用单独的样式表，仅供出现问题的浏览器加载。这种方法需要使用服务器端渲染。
使用已经处理好此类问题的库，比如 Bootstrap。
使用 autoprefixer 自动生成 CSS 属性前缀。
使用 Reset CSS 或 Normalize.css。

34.使用 CSS 预处理的优缺点分别是什么？

优点：

提高 CSS 可维护性。
易于编写嵌套选择器。
引入变量，增添主题功能。可以在不同的项目中共享主题文件。
通过混合（Mixins）生成重复的 CSS。
将代码分割成多个文件。不进行预处理的 CSS，虽然也可以分割成多个文件，但需要建立多个 HTTP 请求加载这些文件。

缺点：

需要预处理工具。
重新编译的时间可能会很慢。

35.如何实现一个使用非标准字体的网页设计？

使用@font-face并为不同的font-weight定义font-family。

36.display的属性值都有哪些？

none, block, inline, inline-block, table, table-row, table-cell, list-item.

37.常见的兼容性问题？

不同浏览器的标签默认的margin和padding不一样。
*{margin:0;padding:0;}
IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：display:inline;将其转化为行内属性。
渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
```
{
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
```
设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

38.BFC

39.设置元素浮动后，该元素的display值是多少？

自动变成display:block

40.什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有meta声明的viewport。

41.你对line-height是如何理解的？

行高是指一行文字的高度，具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。
单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以把height删除。
多行文本垂直居中：需要设置display属性为inline-block。

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

p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例

43.常用那几种浏览器测试？有哪些内核(Layout Engine)?介绍一下你对浏览器内核的理解？
　　(Q1) 浏览器：IE，Chrome，FireFox，Safari，Opera。
　　(Q2) 内核：Trident，Gecko，Presto，Webkit。

　主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
　　渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
　　JS引擎则：解析和执行javascript来实现网页的动态效果。
　　最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

44.html5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

　(Q1)
　　HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
　　(1)绘画 canvas;
　　(2)用于媒介回放的 video 和 audio 元素;
　　(3)本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
　　(4)sessionStorage 的数据在浏览器关闭后自动删除;
　　(5)语意化更好的内容元素，比如 article、footer、header、nav、section;
　　(6)表单控件，calendar、date、time、email、url、search;
　　(7)新的技术webworker, websocket, Geolocation;
　　(Q2)
　　IE8/IE7/IE6支持通过document.createElement方法产生的标签，
　　可以利用这一特性让这些浏览器支持HTML5新标签，
　　浏览器支持新标签后，还需要添加标签默认的样式。
　　当然也可以直接使用成熟的框架、比如html5shim，

46.document.write和innerHTML的区别：
48.px和em的区别

px表示像素 (计算机屏幕上的一个点：1px = 1/96in)，是绝对单位，不会因为其他元素的尺寸变化而变化；

em表示相对于父元素的字体大小。em是相对单位，没有一个固定的度量值，而是由其他元素尺寸来决定的相对值。

49.bootstrap响应式实现的原理

百分比布局+媒体查询

51.浏览器是如何渲染页面的？
渲染的流程如下：

1.解析HTML文件，创建DOM树。

自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。

2.解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；

3.将CSS与DOM合并，构建渲染树（Render Tree）

4.布局和绘制，重绘（repaint）和重排（reflow）

猜你喜欢