JOB；面试题

最新推荐文章于 2024-03-31 21:30:51 发布

鱼儿跳

最新推荐文章于 2024-03-31 21:30:51 发布

阅读量337

点赞数

分类专栏： JOB 文章标签：前端面试题

本文链接：https://blog.csdn.net/xin9910/article/details/77664969

版权

JOB 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1.HTML5 为什么只需要写 !DOCTYPE HTML？Doctype作用？标准模式与兼容模式各有什么区别?

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

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

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

2.代码实现：CSS实现垂直水平居中

(1)margin:0 auto来实现水平居中

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

1)、如果是单行文本

<style>
        #wrapper{
            width: 500px;
            height: 500px;
            background: gray;
        }
        #wrapper p{
            line-height: 500px;//行高=父级的height，垂直居中。
            text-align: center;//水平居中
        }
</style>

效果：

2）、对于已知高度的块级元素，可以采用绝对定位。

适用：绝对定位为页面布局没有影响的情况下可以使用，并且子级的高度是已知的。

 <style>
        #wrapper{
            position: relative;//父级
            width: 500px;
            height: 500px;
            background: gray;
        }
 
        #wrapper p{
            position: absolute;//子级用绝对定位
            top:50%;//先定位到50%的位置
            height: 300px;//已知的高度
            margin-top: -150px;//往上提本身高度的一半
        }
    </style>

3）、对于已知子级元素的高度，而且不能用绝对定位来布局的情况，

适用：对于绝对布局有影响，不能适用position:absolute的元素，可以用以上这种方法，思路是：用一个块级元素，设置已知大小，在让其高度达到父级容器的一半大小，再把要居中的元素往上提半个高度。跟方法2同理。

 <style>
        #wrapper{
            background: gray;
            width: 500px;
            height: 500px;
            text-align: center;
            overflow: hidden;
        }
         
        #content {
            height: 100px;
            margin: -50px;
        }  
 
    </style>

4）、垂直居中一张图片（行内元素）。看代码：

这里的多了一个空的<img>标签，为什么要这样的，首先，要搞清楚vertical-align这个属性的特点，它是相对兄弟级行高（line-height）来定位，它是相对兄弟级行高（line-height）来定位，它是相对兄弟级行高（line-height）来定位（重要事情说三遍），并且他仅对行内元素有效，所以，在要定位的元素后面加多一个行内元素img来撑开父级的行高，以此来居中。记得把后面img的src=""这个空属性去掉，不然会留下一个空白框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #wrapper{
            width: 800px;
            height: 800px;
            background: gray;
            text-align: center;
        }
 
        #wrapper img{
            vertical-align: middle;
        }
             
        #wrapper #block{
            background: blue;
            height: 100%;
            width: 0;
     
        }
    </style>
</head>
<body>
 
<div id="wrapper">
    <img src="http://img0.bdstatic.com/img/image/2016ss1.jpg" alt="">
    <img  id="block">//vertical-align是相对兄弟级行高（line-height）来定位
</div>
 
</body>
</html>

5）、子父级都未知高度的块级元素居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #wrapper{
            display: table;
            background: gray;
            width: 500px;
            height: 500px;
            text-align: center;
        }
 
        #content {
            display: table-cell;
            vertical-align: middle;
        }
             
 
    </style>
</head>
<body>
 
<div id="wrapper">
    <div id="content">居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~</div>
</div>
 
</body>
</html>

6）、绝对定位居中法

将元素未知的宽度高度的元素，使其让它的top,bottom,left,right,都与父级的距离为零，如果其元素宽高不够的，就会用margin:auto去填充其大小,从而实现了居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #wrapper{
            position: relative;
            background: gray;
            width: 800px;
            height: 800px; 
        }
         
        #content {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin:auto;
        }
     
 
    </style>
</head>
<body>
 
<div id="wrapper">
    <img  id="content" src="http://img0.bdstatic.com/img/image/2016ss1.jpg" alt="">
</div>
 
</body>
</html>

3.display有哪些值？说明他们的作用。

常用：

1）、none：元素不会显示，而且元素现实的空间也不会保留。但有另外一个 visibility: hidden，是保留元素的空间的。
2）、inline：默认。将元素显示为内联元素，元素前后没有换行符。我们知道内联元素是无法设置宽高的，设置属性height和width是没有用的。此时影响它的高度一般是内部元素的高度（font-size）和padding。
3）、block：将元素将显示为块级元素，元素前后会带有换行符。元素可以设置width和height了。元素独占一行。
4）、inline-block：行内块元素。这个属性值融合了inline 和 block 的特性，即是它既是内联元素，又可以设置width和height。

4.CSS引入的方式有哪些? link和@import的区别是?CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?

（Q1）引入CSS的方法主要有四种，它们分别是行内式、内嵌式、链接式和导入式。

1）行内式：在标记的style属性中设定CSS样式。（不推荐）

2）内嵌式：<style></style>标签对中

3）导入式：将一个独立的.css文件引入HTML文件中，

<style type="text/css">

@import"mystyle.css"; 此处要注意.css文件的路径

</style>

4）链接式：使用HTML规则引入外部CSS文件，它在网页的<head></head>标签对中使用<link>标记

PS：使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

（Q2） link和@import的区别

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

　　区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

　　区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

　　区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。
（Q3）CSS选择符：

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)

（Q4）CSS可继承的样式：

1) font-size
2) font-family
3) color
4) text-indent

（Q5）优先级算法的计算：

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

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

3) !important > id > class > tag
eg：div .sjweb{ font-size:12px;}
分析：
1个元素{ div }，Specificity值为0,0,0,1
1个类选择符{.sjweb}，Specificity值为0,0,1, 0
最终：Specificity值为 0,0,1,1

4) important 比内联优先级高，但内联比 id 要高

5.行内元素有哪些?块级元素有哪些?CSS的盒模型?

行内元素有：a b span img input select strong（强调的语气）
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p address

1）块级元素会独占一行，其宽度自动填满其父元素宽度
行内元素不会独占一行，相邻的行内元素会排列在同一行里，一行排不下时换行，其宽度随元素的内容变化而变化
2）块级元素可以设置 width, height属性，行内元素设置width, height无效
【注意：块级元素即使设置了宽度，仍然是独占一行的】
3) 块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）

鱼儿跳

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JOB；面试题

1.HTML5 为什么只需要写 !DOCTYPE HTML？Doctype作用？标准模式与兼容模式各有什么区别?（Q1）声明位于位于HTML文档中的第一行，处于标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。（Q2）HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让
复制链接

扫一扫

专栏目录