2018秋招前端面试题与参考答案总结之HTML+CSS（一）

闲暇时间，总结一下前端面试的题，有错误欢迎指出！

一. HTML+CSS

1. 对html css js的理解

html是语义， 是构建网页内容的基础，是超文本标记语言，标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

css 是表现，是一系列格式设置的规则，它们控制网页内容的外观。

javascript是行为，是一种动态类型、弱类型、基于原型的语言，内置支持类型，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

2. div和span的区别

div是块级元素，它不论大小默认占一行，而且可以设置宽高以及外边距
span是行内元素，它占它自身大小的位置，而且不能设置宽高以及边距
同时div也可以变为span，通过设置display:inline,这样div将变为行内元素
span也可以变为div(display:block),这样span将变为块级元素，默认占一行，而且可以设置宽高
同时，两者要想实现既可以设置宽高，边距，又可以不占一行，则display:inline-block

3. position定位方式和默认方式

默认方式：
position:static，为默认方式。不能进行z-index 划分层次。

定位方式：
固定定位 position:fixed 
不占位，参照物为当前窗口 ，可使用top、right、bottom、left进行定位，不会随着窗口滚动而滚动。
脱离标准流，变成行内块。

相对定位 position:relative 
占位，占的是原来的位置，参照物为自身，一般用来做微调，可使用top、right、bottom、left进行定位。
半脱离标准流，一方面可以使用top、right、bottom、left进行定位，另一方面，行内标签和块级标签的性质没有改变。

绝对定位  position:absolute
不占位，一般情况下，子级绝对定位，父级相对定位(父级只要有任何一种定位方式即可,用相对定位，因为对别的标签影响最小)，让子级固定在父级的某个位置。可使用top、right、bottom、left进行定位。
脱离标准流，变成行内块。

4. px和em的区别

相同点：px和em都是长度单位；
异同点：px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

5. CSS选择器以及权重怎么计算

css选择器的权重可参考另外一篇博客：https://blog.csdn.net/qq_41638795/article/details/79108799

1) 基本选择器：id，class，标签(如div、span)，通配符(*);
2) 层次选择器：parent > child，prev + next ，prev ~ siblings
3) 基本过滤器选择器：:first，:last ，:not ，:even ，:odd ，:eq ，:gt ，:lt
4) 内容过滤器选择器： :contains ，:empty ，:has ，:parent
5) 可见性过滤器选择器：:hidden ，:visible
6)属性过滤器选择器：[attribute] ，[attribute=value] ，[attribute!=value] ，[attribute^=value] ，[attribute$=value] ，[attribute*=value]
7) 子元素过滤器选择器：:nth-child ，:first-child ，:last-child ，:only-child
8) 表单选择器： :input ，:text ，:password ，:radio ，:checkbox ，:submit 等；
9) 表单过滤器选择器：:enabled ，:disabled ，:checked ，:selected

6. CSS实现垂直居中有哪些方法

以下垂直居中方法的具体例子可参考我另外一篇博客：https://blog.csdn.net/qq_41638795/article/details/79087261

方法一. 表格布局 display:table-cell
            给父级元素添加样式： display: table-cell; vertical-align: middle;  使其内的子元素实现垂直居中；
方法二. 弹性布局display:flex
            给父级元素添加样式：display:flex; align-item:center;  使其内的子元素实现垂直居中；
方法三. 绝对定位 position:absolute
           给父级元素添加样式：position：absolute; top: 0;  right: 0; bottom: 0; left: 0; margin: auto; 使其内的子元素实现垂直居中；
方法四. display:box
           给父级元素中添加样式：display: box;display: -webkit-box;-webkit-box-align:center;  使其内的子元素实现垂直居中；
方法五. 主要针对于img
            给子元素添加：vertical-align: middle; 给父级元素添加 line-height:height。
方法六. 针对于单行文本
            给父级元素添加 line-height:height。
关于vertical-align垂直居中问题可参考 ：https://www.jianshu.com/p/dea069fecb62

7. 什么是盒子模型

在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

1）盒模型：内容（content）、填充（padding）、边界（margin）、边框（border）；
2）有两种，IE 盒子模型、标准 W3C 盒子模型； IE 的 content 部分包含了 border 和 padding。也就是说IE盒模型的高度=2*margin+content.height，而W3C标准盒模型的高度＝2*margin＋2*border＋2*padding＋content.height。宽度也是一样的。

8. 行内元素有哪些？块级元素有哪些？空元素有哪些？

行内元素：a、b、span、img、input、em、strong、button、select、label
块级元素：div、ul、ol、li、dl、dt、dd、p、h1-h6、header、nav、section、footer
空元素(没有内容的HTML元素)：br、hr、input、img、meta、link

9.  什么是CSS Hack？

百度百科定义：

CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。

具体可参考：https://blog.csdn.net/freshlover/article/details/12132801

10. src和href的区别

       href(Hypertext Reference的简写) 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，常用的有link、a。如：

        src(source的简写)是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素，如：

11. sessionStorage、localStorage和cookie的区别

共同点：用于浏览器端存储的缓存数据

不同点：
(1)、存储内容是否发送到服务器端：当设置了Cookie后，数据会发送到服务器端，造成一定的宽带浪费；web storage,会将数据保存到本地，不会造成宽带浪费；
(2)、数据存储大小不同：Cookie数据不能超过4K,适用于会话标识；web storage数据存储可以达到5M;
(3)、数据存储的有效期限不同：cookie只在设置了Cookid过期时间之前一直有效，即使关闭窗口或者浏览器；sessionStorage,仅在关闭浏览器之前有效；localStorage,数据存储永久有效；
(4)、作用域不同：cookie和localStorage是在同源同窗口中都是共享的；sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面。

12. 简述同步和异步的区别

同步是阻塞模式，异步是非阻塞模式。
同步就是指发送一个请求,需要等待返回,然后才能够发送下一个请求，有个等待程；
异步是指发送一个请求,不需要等待返回,随时可以再发送下一个请求，即不需要等待。

异步的例子：

console.log(1);
setTimeout(function(){
    console.log(2);
},1000);
console.log(3);      
/*结果如下：
    1
    3
    2
*/

13. css中让元素隐藏的方法

1)  opacity:0; //占位
2)  visibility:hidden; //占位
3)  display:none;  //不占位
4)  height:0;overflow:hidden; //不占位
5)  position: absolute;top: -9999px;left: -9999px; //将位置设到不可见区域。

14. css让超出文字省略的方法

//单行多出省略号
p{
    word-wrap: normal; /* for IE */
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

//多行溢出省略号：
p{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; // 这里修改为要显示的行数
    -webkit-box-orient: vertical;
}

15. 清除浮动的方法

1）使用CSS的overflow属性
2）使用带clear属性的空元素
3）使用CSS的:after伪元素
具体例子可参考：https://www.cnblogs.com/ForEvErNoME/p/3383539.html

16. 行内块元素之间空白缝隙的问题

1)  利用margin 负值，例如margin-left:-8px;
2)  把行内块写到一行上去。如12;
3)  给父盒子加:font-size:0;
4)  利用js来清除缝隙。

17. css元素分类

分为块级元素和行内元素

18. 列举你常用的html标签

div块状标签
h1 标题
p  段落
dl 定义列表
ul 无序列表
ol 有序列表
table 表格
img 图像
textarea 多行文本域
input 表单
a 超链接

19. css实现高度是父元素高度的一半的方法

当父元素高度确定时，设子元素高度为height:50%;

20. b和strong标签的区别

标签是一个实体标签，他所包含的内容被设计成粗体。
标签是一个逻辑标签，起到强调作用。但因为是通过字体加粗形式来起到强调作用的，所以效果跟一样。

21. 本地存储有哪几种方法

cookie
sessionStorage
localStorage

22. 浮动的弊端和解决方法

float:left/right
浮动元素脱离文档流，在当前行的左边或是右边对齐，如果当前行没有足够的空间，它将下移一行，直到有足够的空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

弊端：

1）父元素的高度无法被撑开

2）浮动元素前同级非浮动元素

若为行内元素，当行内元素被撑起的宽度加上浮动元素的宽度，大于父元素的宽度时，浮动元素，就会下移一个line-height，直到计算的值小于父元素的宽度时，非浮动元素会跟随其后。

若为块内元素，浮动元素会在块内元素下一行进行浮动。

3）浮动元素后同级非浮动元素

无论是行内元素，还是块内元素，都会会紧随浮动元素之后。

3）浮动元素对浮动元素的影响

同一个方向的浮动元素：当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面，当空间不够时会被挤下。

反方向的浮动元素：互不影响，位于同一条水平线上，当空间不够时会被挤下。

解决方法：

一是利用 clear 属性，包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素，其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。

二是利用BFC (Block Formatting Contexts, 块级格式化上下文)特性：:BFC就是页面上的一个隔离的独立容器，不会与其他Box发生折叠（即使元素浮动），容器里面的子元素不会影响到外面的元素，反之也如此。关于这一点，可以“理解CSS中的BFC块级格式化上下文”。

具体例子可参考：https://blog.csdn.net/hsd2012/article/details/72533441