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

 

你可能感兴趣的:(前端面试题,面试,前端,html,css)