前端常见面试题大全（1）

1.国内主流浏览器及其内核

•  IE浏览器    Trident内核又称IE内核
• Chorme谷歌   Blink内核
• Firefox搜狐    Firefox内核
• 苹果Safari浏览器    Webkit内核
• Opera浏览器   Blink内核
• 360浏览器、猎豹浏览器    IE+Chrome双内核
• 搜狗、QQ浏览器    Trident+Webkit双内核
• 百度浏览器   IE内核

2.什么是结构、表现、行为 

• 结构：HTML用于描述页面结构
• 表现：CSS用于控制页面中元素的样式
• 行为：Javascript用于响应用户操作

3.块元素、行内元素、行内块元素的区别

块元素（block element） 常用来布局

         特点：

         1.块元素会独占一行,从上往下依次排列

         2.块元素的宽度是父元素的100%(body是父元素，页面边小随之变小)

         3.块元素的高度默认是被内容撑开的

        常用块元素：div h1-h6 p header footer nav......

    行内元素（inline element）

         特点

         1.不会独占一行，它是自左向右排列，一行排满再换行

         2.行内元素的宽和高，默认是被内容撑开的

        常用行内元素：span em strong a i ......

    行内块元素

         特点

         1.兼具块元素和行内元素特点

         2.不会独占一行，可自定义宽高

注意：

     1.块元素里什么都能放，可以块元素，行内元素，行内块元素

     2.行内元素里一般只放行内元素，如：文字，不能放块元素

     3.特殊的块元素p标签它里面一般只放文字或者图片，不能放块元素

     4.特殊的行内元素a标签，它里面什么都能放，可以块元素，行内元素，行内块元素，除了a标签它自己不能放进去

4、c3选择器权重问题

权重大小排列：

        (！important)最nb的 写在颜色后面分号前面     color: red !imporant;

        1 内联样式

        2 id选择器

        3 属性选择器/class选择器

        4 元素选择器

        5 通配选择器

        继承选择器没有优先级

        注意：

        1.如果选择器权重一样，优先采用靠下面的

        2.如果选择器是交集选择器，则所有选择器权重相加，最终谁大听谁的

        3.如果选择器是群组选择器（并集选择器），则选择器权重各算各的，选择器权重不会叠加，只会是并集选择器中最大的那个权重

        4.选择器的权重相加，再大也不会超过它上一级的权重  class选择器再多也不会超过id选择器

        总结：

        哪个选择器更具体，它的权重越大。

5、谈谈你对CSS布局的理解？

常见的布局方式：固定布局、流式布局、弹性布局、浮动布局、定位布局、margin和padding

6、解决图片三像素问题  

图片三像素就是几张图片在一起中间有空白

      解决方案：

       1.vertical-align 设置一个非baseline值的一个值

             例如：vertical-align: bottom/top/middle

       2.设置父元素的font-size为0

               div{

            font-size: 0;

            }

       3.将图片转为块元素

           display：block；

       4.将元素脱离文档

7、div和span的区别

span和div的区别在于span元素是内联的，通常用于一行内的一小块，例如段落内。而 div 是块级，相当于在其前后有一个换行符，用于对较大的代码块进行分组。

 

8、超链接，锚点功能

        功能 

            1、从一个页面跳到另一个页面

            2、当前页面进行跳转（锚点功能）

            3、下载

        属性

            1、herf 填写超链接跳转的地址

                绝对地址    只要填写地址，都可以进行正确的跳转，不管文件本身在哪里

                相对地址    关文件本身位置的影响

            2、target   控制超链接打开的方式

                _self   在当前页面打开超链接（默认）

                _blank  用一个新页面打开超链接

        锚点功能

            1、回到顶部

                href的属性值设置为#

            2、回到底部

                底部的标签<p id="1"></p>

                <a href="#1">去底部</p>

            注意：

                    id属性值不能是数字开头，最好不要是汉字，是独一无二的存在

        补充：

            空链接的两种写法

            <a href="#"></a>

            <a href="javascript:;"></a>