【前端面试题】

一阶段

1、<!DOCTYPEhtml>文档声明的意义是什么，如果不加会怎么样

DOCTYPE是document type(文档类型)的简写,用来告诉浏览器的解析器使用哪种HTML或XHTML规范解析页面。
DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

2、常见的块级标签、行内标签、行内块标签都有哪些

行内元素：span,a,b,u,i,strong,em,sub,sup等
块级元素：div,p,h1-h6,ul,ol,li,dl,dt,dd,header,nav,footer等
行内块：img,input,button.
区别：行内元素display默认值为inline,设置宽高不生效，不用换行显示，块级元素display值为block,可以设置宽高，独占一行。
可以改变元素的display值，display的属性值有以下几种：
①block  块类型。默认宽度为父元素宽度，可设置宽高，换行显示
② inline  行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示
③inline-block  行内块。默认宽度为内容宽度，可以设置宽高，同行显示
④ none         隐藏。隐藏后不占据页面位置
⑤flex        弹性盒模型

3、a标签都有哪些用法

跳转到网址 ：<a href="http://www.taobao.com">跳转到淘宝</a>
跳转到其他文件去 ：<a href="day3-2.html">跳转到day3-1</a>
用于移动端打电话：<a href="tel:123456789">123456789</a>
发送电子邮件：<a href="mailto:12345@qq.com">发送邮件</a>（不常用）
用于下载
1、锚点:可以快速定位到页面上的某个点  回到顶部  给标签加一个 id属性, a标签的href对应这个id值
<a href="#two">第二章</a>

<p id="two">第二章内容</p>

2、还可以直接定位到其他页面的某个点去
 <!-- <a href="文件路径+#id名字">b 小说 第二章</a> -->
  < a href="./day5-4.html#two">b 小说 第二章</a>
3、配合 iframe 使用        a标签的target 属性 对应 iframe的 name 属性

4、img中的src title alt属性都是什么意思

src:代表图片的路径。路径有几种表示法：绝对路径和相对路径  （在线路径）

title:代表图片的标题。鼠标移动到图片上就会显示出来的提示文字

alt:代表图片的替换文本。当图片加载不出来的时候才会显示替换文本

5、html5新增的标签都有哪些

新增的元素有canvas画布 ，用于媒介回放的 video视频 和 audio音频 元素
新增布局标签：header、nav、article、section、aside、footer。
新增的表单input类型：color、date、month、time、email、url、tel、range、search、calendar、。

6、什么是语义化，为什么要语义化呢

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

为什么要语义化？
1）为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构；
2）提升用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
3）有利于[SEO]和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：[爬虫]依赖于标签来确定上下文和各个关键字的权重；
4）方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
5）便于团队开发和维护，语义化更具可读性，是网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

7、哪些样式可以继承呢

所有元素可继承：visibility和cursor。

内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。

块状元素可继承：text-indent和text-align

列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承：border-collapse。

8、选择器的优先级是什么

选择器优先级：
权重 （越重，优先级越高）
      !important >行内样式  >  id 选择器 >  class(类选择器) >  标签选择器 > 通配符选择器
权重值： 无限大     1000          100        10                  1			 0

9、什么是盒子模型，都有哪几部分组成

CSS的盒模型可分为三类：标准盒模型（W3C盒模型），怪异盒模型（IE盒模型），弹性盒模型。
盒模型都由内容content,内边距padding,边框border,外边距margin组成。

**Content内容区域**包含宽度（width）和高度（height）两个属性 ，块级元素默认宽度为100%，行内元素默认宽度是由内容撑开，不管 块级元素还是行内元素，默认高度都是由内容撑开 ，块级元素可以设置宽高属性，行内元素设置宽高属性不生效 ，宽度（width）和高度（height）可以取值为像素（px）和百分比 （%）

 **margin需要注意的问题 **
 1、margin padding 并不是对所有标签都生效
        块级、行内块：margin padding 四个方向都是生效
        行内：margin ： 左右生效，上下不生效
             padding : 左右生效，上下不生效
 2、当两个元素上下排列的时候
        外边距：左右都是生效，相加
               上下是谁大谁生效，并不是相加
 3、当你给父元素里面的第一个子元素设置 margin-top 的时候会出现越级问题
        解决办法：
            1、给父元素加border
            2、给父元素加padding-top 
            3、可以给子元素设置浮动
            4、可以给父元素加 overflow:hidden 
 4、margin padding 设置百分数的时候， %  相对单位  
            不管设置上下 左右方向， 都是相对于的是父元素的宽 
            
区别：标准盒模型的宽高只包含content内容区域，怪异盒模型的宽高包含content+padding+border。
设置弹性盒模型：display:flex

10、什么是浮动、浮动有什么特点、如何清除浮动

浮动语法：float:left|right
特点：   1、元素浮动了以后，支持设置宽高，并且还可以共处一行
        2、当父元素的宽度不够，浮动的子元素会自己换行
        3、半脱离文档流
影响：导致父元素塌陷：父元素高度没了，会影响下面的元素布局
清除浮动：  1、手动给父元素加一个高度 一般不推荐使用，因为要手动计算
           2、给父元素添加一个最小的块级儿子，给这个儿子设置 clear:both 清除浮动流    clear:left | right |both
           3、给父元素设置 overflow:hidden   作用：触发 [BFC ](#JXfLr)
           4、给父元素设置一个伪元素   最常用这一种
            .clear::after{
                     content: '';
                     display: block;
                     clear: both;
                 }

11、有几种定位，他们都是相对什么参照物定位的

答：有，position一共包含四个值，分别是static,relative,absolute,fixed。
    1.static是position的默认值，表示没有定位，元素出现在正常的流中，在文档页面中占据位置。
    2.relative表示相对定位，相对于自身没有定位时所在的位置定位，使top,bottom,left,right进行位置定位，在文档页面中占据位置。
    3.absolute表示绝对定位，相对于已经定位的第一个父元素进行定位，在文档中不占据位置。完全脱离文档流
    4.fixed表示固定定位，相对于浏览器窗口进行定位，脱离文档流，不占据原来位置。

值	描述
absolute	生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位，元素的位置通过left top right 以及bottom属性进行规定
fixed	生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过“left" , “top”, "right”以及"bottom”属性进行规定。
relative	生成相对定位的元素，相对于其正常位詈进行定位。因此，"left:20”会向元素的LEFT位置添加20像素。
static	默认值。没有定位，元素出现在正常的流中（忽略top, bottom, left,right 或者 z-index声明)。
inherit	规定应该从父元素继承position展性的值。

12、列出几种css3的选择器

1、结构性伪类选择器（css3新增）
        1. :root	选择到根元素
        2. :empty	选择到既不能有文本内容也没有后代元素的元素
        3. :first-child	所有兄弟元素中的第一个
        4. :last-child				所有兄弟元素中的最后一个
        5. :nth-child(n)			所有兄弟元素中的第n个，n是个数字
        6. :nth-last-child(n)		所有兄弟元素中的倒数第n个，n是个数字
        7. :only-child				没有兄弟元素的元素
        8. :first-of-type			所有兄弟元素中同类型的第一个
        9. :last-of-type			所有兄弟元素中同类型的最后一个
        10. :nth-of-type(n)			所有兄弟元素中同类型的第n个,n是个数字
        11. :nth-last-of-type(n)	所有兄弟元素中同类型的倒数第n个，n是数字
        12. :only-of-type			没有同类型兄弟元素
2、属性选择器  通过标签身上的属性来选中标签
    1、全匹配    √
        input[type="text"]{
                    background-color: pink;
                }
    2、开头匹配
        input[type^="t"]{
                    background-color: pink;
                }
    3、结尾匹配 
        input[type$="t"]{
                    background-color: pink;
                }
    4、选中所有标签中有type值为text
        [type="text"]{
                    color: red;
                }
3、伪对象（伪元素）选择器
    1. ::after	给元素动态创建最后一个子元素
    2. ::before			给元素动态创建第一个子元素
    3. ::first-letter		选择元素中第一字母
    4. ::first-line		选择元素中第一行
    5. ::placeholder		用于设置输入框或文本域中placeholder属性设置的文字的样式
    6. ::selection			用于设置被鼠标选中的文字的样式

13、变形有哪几种，为什么推荐使用变形，有什么优点。

CSS的变形(transform)包括这么几种效果，分别有平移（translate）,缩放（scale）,倾斜（skew）,旋转（rotate）

平移（translate）
语法：transform: translate（X轴平移的像素，Y轴平移的像素）

缩放（scale）
语法：transform: scale（宽度缩放值，高度缩放值）
如果参数只有一个值，默认第二个值和第一个值相等；默认值是1,0-0.99的任意一个数字可以缩小元素，大于1则会使元素放大。例如：scale（0.8），元素会缩小0.8倍，而scale（1.5）元素则会放大1.5倍。

伸缩（skew）
语法：transform: skew(X轴倾斜的角度,Y轴倾斜的角度);单位为deg(°)

旋转（rotate）
语法：transform: rotate(旋转的度数);其中参数的单位是deg(°)。

优点： (1)不需要加载额外的文件(flash文件) (2)提供开发效率 (3)提高页面的执行速度

14、一个宽100，高100的div如何在页面中上下左右居中

<body>
    <div id="box"></div>
</body>

<style>
    ①position+margin
        *{
            margin: 0px;
            padding: 0px;
        }
        #box{
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: absolute;
            top: 50%;
            left: 50%; 
            margin-left: -50px;
            margin-top: -50px;
        }
    ②position+transform
       *{
            margin: 0px;
            padding: 0px;
        }
        #box{
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: absolute;
            top: 50%;
            left: 50%; 
            transform: translate(-50%,-50%); 
        }
</style>

15、一个宽度100%，高50px的p标签中，hello world文字怎么上下左右居中

<body>
    <p id="box">hello word</p>
</body>
<style>
       *{
            margin: 0px;
            padding: 0px;
        }
        #box{
            width: 100%;
            height: 50px;
            background-color: aqua;
            text-align: center;
            line-height: 50px;
        }
</style>

16、实现两列布局（左边定宽100，右边宽度自适应）

17、一个p标签内有一个img标签和一个span标签，怎么保证文字图片居中对齐

<style>
        *{
            margin: 0px;
            padding: 0px;
        }
        img{
            vertical-align: middle;
        }
</style>
<body>
    <p>
        <img src="./img/2.jpg" alt="">
        <span>这是一张图片</span>
    </p>
</body>

18、BFC是什么？导致什么问题，怎么触发

BFC：block format content 块级格式化文档
        是一种模式，网页渲染隐藏模式，网页刚开始渲染的时候默认不会有的，需要我们手动去触发
        作用：规范我们的文档，不要有浮动流带来的影响 和右键格式化文档的作用是一样 规范代码
怎么去触发这种BFC 模式： overflow:hidden 
overflow: 内容溢出
                hidden  隐藏
                scroll  滚动条
                 overflow-x : hidden  隐藏x轴溢出的部分，y轴就出现滚动条 
                 overflow-y : hidden   隐藏y轴溢出的部分，x轴就出现滚动条

19、怎样解决div里面的img有空隙的问题

1.将img设置为block; 这个基本可以解决img和div下方的缝隙问题。

2.设置img的竖直对齐方式   v-align:bottom;

3.设置父级div的font-size:0;

4.设置外层的div的line-height:0