JOB；面试题

柔光的暖阳◎ 2022-06-09 05:42 139阅读 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)、如果是单行文本

效果： ![Image 1][]

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

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

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

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

![Image 1][]  
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文件中，

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

**PS：**使用链接式时与导入式不同的是它会以网页文件主体装载前装载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都不会产生边距效果。（**水平方向有效，竖直方向无效**）

[Image 1]: