常见前端面试题整理——HTML、CSS篇

时间 2019-11-24

标签常见端面试题整理 html css 栏目 HTML 繁體版

原文原文链接

前言

2019届校招陆陆续续开始了，整理了一些高频的面试题。javascript

HTML部分

1. 什么是<!DOCTYPE>？css

DOCTYPE是html5标准网页声明，且必须声明在HTML文档的第一行。来告知浏览器的解析器用什么文档标准解析这个文档。
html

文档解析类型有：html5

BackCompat：怪异模式，浏览器使用本身的怪异模式解析渲染页面。（若是没有声明DOCTYPE，默认就是这个模式）
CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

2. meta标签java

提供给页面的一些元信息（名称/值对），有助于SEO。
css3

属性值：web

name：名称/值对中的名称。author、description、keywords、generator、revised、others。把 content 属性关联到一个名称。面试
http-equiv：没有name时，会采用这个属性的值。content-type、expires、refresh、set-cookie。把content属性关联到http头部算法
content ：名称/值对中的值，能够是任何有效的字符串。始终要和 name 属性或 http-equiv 属性一块儿使用canvas
scheme ：用于指定要用来翻译属性值的方案

3. HTML语义化

用正确的标签作正确的事情。
html语义化让页面的内容结构化，结构更清晰，便于对浏览器，搜索引擎解析；
即便在没有样式CSS状况下也以一种文档格式显示，而且是容易阅读的；
搜索引擎的爬虫也依赖于HTML标记肯定上下文和各个关键字的权重，利于SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

4. 常见的浏览器内核

Trident内核：IE,MaxThon,TT,The Word,360,搜狗浏览器等。
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等；
Presto内核：Opera7及以上。[现为：Blink]
Webkit内核：Safari,Chrome等。[Chrome的:Blink(Webkit的分支)]

5. 简单介绍对浏览器内核的理解

主要分红两部分：渲染引擎和JS引擎。

渲染引擎：将代码转换成页面。负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等）、以及计算网页的显示方式，而后会输出至显示器或打印机。浏览器的内核的不一样对于网页的语法解释会有不一样，因此渲染的效果也不相同。全部网页浏览器、电子邮件客户端以及其余须要编辑、显示网络内容的应用程序都须要内核。
JS引擎：解析和执行javascript来实现网页的动态效果。

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

6. HTML5有哪些新特性，移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？

新特性：

(1) 用于绘画的canvas元素；
(2) 用于媒介回放的video和audio元素；
(3) 对本地离线存储有更好的支持，localStorage长期存储数据，浏览器关闭后数据不丢失；sessionStorage的数据在浏览器关闭后自动删除；
(4) 语意化更好的内容元素，好比header,nav,section,article,footer；
(5) 新的表单控件：calendar,date,time,email,url,search；
(6) 新的技术webworker,websockt、Geolocation；

移除元素：

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

处理兼容性问题：

IE8/IE7/IE6支持document.createElement方法产生的标签，能够利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还须要添加标签默认的样式。

7. html5哪些标签能够作SEO优化？

title、meta、header、footer、nav、article、aside

8. src和href的区别

src是指向外部资源的位置，指向的内容会嵌入到文档中当前标签所在的位置，在请求src资源时会将其指向的资源下载并应用到文档内，如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其余资源的下载和处理，知道将该资源加载、编译、执行完毕，因此通常js脚本会放在底部而不是头部。
href是指网络资源所在位置，创建和当前元素（锚点）或当前文档（连接）之间的连接，用于超连接。

9. 渐进加强和优雅降级

渐进加强：针对低版本浏览器进行构建页面，保证最基本的功能，而后再针对高级浏览器进行效果、交互等改进和追加功能，达到更好的用户体验。
优雅降级：一开始就构建完整的功能，而后再针对低版本的浏览器进行兼容。

10. defer和async的区别

defer要等到整个页面在内存中正常渲染结束（DOM结构彻底生成，以及其余脚本执行完成），才会执行。多个defer脚本会按照它们在页面出现的顺序加载。==“渲染完再执行”==
async一旦下载完，渲染引擎就会中断渲染，执行这个脚本之后，再继续渲染。多个async脚本是不能保证加载顺序的。==“下载完就执行”==

11. 如何实现浏览器内多个标签页之间的通讯？

方法一：调用localstorge

标签页1：

<input id="name">  
<input type="button" id="btn" value="提交">

<script type="text/javascript">  
    $(function(){    
        $("#btn").click(function(){    
           var name=$("#name").val();    
            localStorage.setItem("name", name); //存储须要的信息 
        });     
   });    
</script>  
复制代码

标签页2：

$(function(){   
    window.addEventListener("storage", function(event){    
	   console.log(event.key + "=" + event.newValue);    
    });     //使用storage事件监听添加、修改、删除的动做  
});  
复制代码

方法二：使用cookie+setInterval

将要传递的信息存储在cookie中，每隔必定时间读取cookie信息，便可随时获取要传递的信息。

标签页1：

$(function(){    
    $("#btn").click(function(){    
        var name=$("#name").val();    
        document.cookie="name="+name;    
    });    
});    
复制代码

标签页2：

$(function(){   
	function getCookie(key) {    
	   return JSON.parse("{\"" + document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") + "\"}")[key];    
	}     
	setInterval(function(){    
	   console.log("name=" + getCookie("name"));    
	}, 10000);    
});  
复制代码

CSS部分

1. css盒模型

IE盒模型 box-sizing:border-box;（怪异模式）；
W3C标准盒模型 box-sizing:content-box;（标准模式）。

应用场景：

（1）表单：表单中有一些input元素其实仍是展示的是传统IE盒模型，带有一些默认的样式，并且在不一样平台或者浏览器下的表现不一，形成了表单展示的差别。此时咱们能够经过box-sizing属性来构建一个风格统一的表单元素。

（2）设置子类元素的margin或者border时，可能会撑破父层元素的尺寸，这时我就须要使用box-sizing: border-box来将border包含进元素的尺寸中，这样就不会存在撑破父层元素的状况了。

2. 行内元素和块级元素的区别？行内块级元素的兼容性使用？（IE8如下）

块级元素：div,p,h1,form,ul,li

（1）各占一行，垂直方向排列；
（2）能够包含其余块级或者行内元素；
（3）高度、行高以及外边距和内边距均可控制；
（4）默认宽度是它自己父容器的100%（和父元素的宽度一致），与内容无关。

行内元素：span,a,label,input,img,strong,em

（1）水平方向排列，不会自动换行；
（2）不能够包含块级元素，可是能够包含其余行内元素或者文本；
（3）行内元素设置width、height无效(能够设置line-height)，margin和padding上下无效；
（4）宽度就是它的文字和图片的宽度，不可改变。

行内块级元素在IE8如下的兼容性（块元素模拟inline-block）

div {
    display： inline-block；
    zoom： 1；   //在IE下触发hasLayout
    display：inline；//一旦触发了hasLayout设置display：inline和display：block效果类似。
}
复制代码

haslayout 是IE7-浏览器的特有属性。hasLayout是一种只读属性，有两种状态：true或false。当其为true时，表明该元素有本身的布局，不然表明该元素的布局继承于父元素。
注意: 经过element.currentStyle.hasLayout能够得出当前元素的hasLayout状况。

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

（1）link是XHTML标签，除了加载CSS外，还能够定义RSS等其余事务；@import属于CSS范畴，只能加载CSS。
（2）link引用CSS时，在页面载入时同时加载；@import须要页面网页彻底载入之后加载。
（3）link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器（IE5如下）不支持。
（4）link支持使用Javascript控制DOM去改变样式；而@import不支持。

4. 清除浮动有哪些方式？

（1）在浮动元素下方添加一个非浮动元素

<div>
    <div style="float:left;width:45%;"></div>
    <div style="float:right;width:45%;"></div>
    <div style="clear:both;"></div>
</div>
复制代码

父容器如今必须考虑非浮动子元素的位置，然后者确定出如今浮动元素下方，因此显示出来，父容器就把全部子元素都包括进去了。这种方法比较简单，可是要在页面中增长冗余标签，违背了语义网的原则。

（2）将父容器也改为浮动定位

<div style="float:left;">
    <div style="float:left;width:45%;"></div>
    <div style="float:right;width:45%;"></div>
</div>
复制代码

这种方法不用修改HTML代码，可是缺点在于父容器变成浮动之后，会影响到后面元素的定位，并且有时候，父容器是定位死的，没法变成浮动。

（3）父容器设置overflow: hidden或者auto。（开启BFC）

<div style="overflow: hidden;">
    <div style="float:left;width:45%;"></div>
    <div style="float:right;width:45%;"></div>
</div>
复制代码

缺点：一个是IE6不支持，另外一个是一旦子元素的大小超过父容器的大小，就会出显示问题。

（4）利用:after伪选择符，在父容器的尾部自动建立一个子元素 ==（推荐这种）==

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}
//兼容ie6：激活父元素的"hasLayout"属性，让父元素拥有本身的布局
.clearfix {
    zoom: 1;  //或者height：1%；
}
复制代码

5. 简单介绍BFC和IFC

BFC —— 块级格式化上下文

（1）BFC触发条件：

根元素或其余包含他的元素
浮动元素 float：left/right
position：absolute/fixed
display：inline-block,table-cell,table-caption
overflow不为visible
弹性盒子：display: flex 或 inline-flex

（2）BFC特性

内部的Box会在垂直方向上一个接一个的放置；
垂直方向的距离有margin决定(属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关)；
每一个元素的margin box的左边，与包含块border； box的左边相接触(对于从左往右的格式化，不然相反)。即便存在浮动也是如此；
BFC的区域不会与float的元素区域重叠；
计算BFC的高度时，浮动子元素也参与计算，能够解决父元素高度塌陷问题；
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然；
文档流中的BFC元素, width为auto时，会占满当前行的剩余宽度。

（3）应用

阻止两个相邻的普通流中的块元素垂直方向上的margin折叠；
BFC能够包含浮动元素，撑开父元素；
BFC能够阻止元素被浮动元素覆盖。

（4）BFC与hasLayout

IE6-7不支持BFC，而是使用私有属性hasLayout，要用zoom：1触发hasLayout属性。Zoom用于设置或检索元素的缩放比例，值为“1”即便用元素的实际尺寸。

IFC —— 行内格式化上下文

（1）建立方式：

和BFC相比，它的建立方式是被动的、隐式的，是由所包含的子元素来建立：只有在一个区域内仅包含可水平排列的元素时才会生成，这些子元素能够是文本、inline-level元素或inline-block-level元素。

（2）特性：

IFC内部的元素，按从左到右、从上到下的顺序排布；
IFC内部的每一个元素，均可以经过设置vertical-align属性，来调整在垂直方向上的对齐；
包含这些内部元素的矩形区域，造成的每一行，被称为line box（行框）。

6. 选择器优先级

！important>行内样式>id选择器>类选择器>标签选择器>通配符>继承

权重算法：(0,0,0,0) ——> 第一个0对应的是important的个数，第二个0对应的是id选择器的个数，第三个0对应的类选择器的个数，第四个0对应的是标签选择器的个数，合起来就是当前选择器的权重。

比较：先从第一个0开始比较，若是第一个0大，那么说明这个选择器的权重高，若是第一个相同，比较第二个，依次类推。

7. 怎么实现水平垂直居中

（1）行内元素的水平居中

text-align: center;
line-height: 100px;
复制代码

（2）块级元素水平居中

margin: 0 auto;
复制代码

（3）已知高度宽度元素的水平垂直居中

利用绝对定位和负边距实现

.container{
    width: 600px;
    height: 600px;
    position: relative;
}
.center{
    width: 300px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -150px 0 0 -150px;
}
复制代码

利用绝对定位和margin

.container{
    width: 600px;
    height: 600px;
    position: relative;
}
.center{
    width: 300px;
    height: 300px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
复制代码

（4）未知高度和宽度元素的水平垂直居中

被居中的元素是inline或者inline-block元素

.container{
    width: 600px;
    height: 600px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
复制代码

css3的transform属性

.container{
    width: 100%;
    height: 600px;
    position: relative;
}
.center{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
复制代码

flex布局

.container{
    width: 100%;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}
复制代码

最简单的写法：

.container{
    display: flex;
    height: 600px;
}
.center{
    margin : auto;
}
复制代码

8. 实现左边定宽，右边自适应布局

（1）左盒子左浮动，右盒子width=100%
（2）左盒子左浮动，右盒子margin-left=左盒子宽度
（3）左盒子左浮动，右盒子右浮动，设置width: calc（100% - 左盒子宽度）
（4）父容器设置display：flex，右盒子flex：1

9. 实现中间自适应宽度，左右两栏固定宽度布局

两招搞定三栏布局——圣杯布局、双飞翼布局

10. 脱离文档流

(1) 浮动脱离文档流：使用float脱离文档流时，其余盒子会无视这个元素，但其余盒子内的文本依然会为这个元素让出位置，环绕在周围。
(2) 绝对定位脱离文档流：使用absolute: position | fixed 脱离文档流的元素，其余盒子与其余盒子内的文本都会无视它。

11. CSS3新特性

颜色：新增RGBA、HSLA模式
文字阴影(text-shadow)
边框：圆角（border-radius）边框阴影：box-shadow
盒子模型：box-sizing
背景：background-size设置背景图片的尺寸，background-origin设置背景图片的原点，background-clip设置背景图片的裁剪区域，以“，”分隔能够设置多背景，用于自适应布局
渐变：linear-gradient、radial-gradient
过渡：transition可实现动画
自定义动画
在CSS3中惟一引入的伪元素是::selection
多媒体查询、多栏布局
border-image
2D转换：transform:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)
3D转换

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

(1) display:none; HTML元素（对象）的宽高，高度等各类属性值都将“丢失”,视为不存在，并且不加载。

(2) visibility:hidden; HTML元素（对象）仅仅是在视觉上看不见（彻底透明），而它所占据的空间位置仍然存在，也便是说它仍然具备高度，宽度等属性值。

13. 响应式布局原理

媒体查询，查询到当前屏幕(媒介媒体)的宽度，针对不一样的屏幕宽度设置不一样的样式来适应不一样屏幕。

14. flex布局

flex布局能够看阮一峰老师的这两篇文章： Flex 布局教程：语法篇， Flex 布局教程：实例篇，讲的很是详细。

（1）设置在容器上的属性

flex-direction：row | row-reverse | column | column-reverse 项目的排列方向
flex-wrap：nowrap | wrap | wrap-reverse 是否换行
flex-flow：<flex-direction> || <flex-wrap> flex-direction和 flex-wrap的简写
justify-content：flex-start | flex-end | center | space-between | space-around 在水平方向上的对齐方式
align-items: flex-start | flex-end | center | baseline | stretch 定义在垂直方向上的对齐方式
align-content: flex-start | flex-end | center | space-between | space-around | stretch 定义了多根轴线的对齐方式，若是项目只有一根轴线，那么该属性将不起做用(item有多行时)

（2）设置在项目上的属性

order：<number> 定义项目在容器中的排列顺序，数值越小，排列越靠前，默认值为 0
flex-basis：<length> | auto 定义了在分配多余空间以前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间
flex-grow: <number> 定义项目的放大比例。默认值为 0，即若是存在剩余空间，也不放大
flex-shrink: <number> 定义项目的缩小比例。默认值: 1，即若是空间不足，该项目将缩小，负值对该属性无效。
flex：none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]flex-grow, flex-shrink 和 flex-basis的简写默认值：0 1 auto，即不放大，可缩小，大小就是项目自己的大小。
align-self：auto | flex-start | flex-end | center | baseline | stretch 容许单个项目有与其余项目不同的对齐方式

以后仍会继续更新...