文章
73
标签
63
分类
24
主页
归档
标签
分类
链接
关于
目录
  1. 1. 什么是盒子模型？
  2. 2. 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
  3. 3. 什么是块级格式化上下文（BFC）？ 什么样的元素会生成BFC？ BFC的布局规则是怎样的？
  4. 4. width与height设置的百分比是相对谁来计算的？padding与margin呢？
    1. 4.1. 明确width height padding margin取值可能的四个值
    2. 4.2. 代码实现
    3. 4.3. 元素设置定位后
      1. 4.3.1. 一、子元素设置了定位
      2. 4.3.2. 子元素没有设置定位
  5. 5. 如何设置一个边长等于浏览器宽度一半的正方形？
  6. 6. css实现垂直水平居中
  7. 7. 如何实现一个元素的垂直居中？
  8. 8. 简述一下src与href的区别
  9. 9. 简述同步和异步的区别
  10. 10. px和em的区别
  11. 11. 请问你了解vm vh这个单位吗？
  12. 12. rem与em了解吗？分别是相对于谁来计算的？
  13. 13. 了解移动端的适配吗？请问什么是rem布局？在移动端的1px问题该如何解决。
  14. 14. position属性有几个值？哪些值会脱离文档流？absolute是相对于谁来定位的？relative呢？
  15. 15. 对flex布局有所了解吗？请用flex布局实现一个三列布局
  16. 16. 可以不用flex实现一个三列布局吗？
  17. 17. 浏览器的内核分别是什么?
  18. 18. 什么叫优雅降级和渐进增强？
    1. 18.1. 渐进增强 progressive enhancement：
    2. 18.2. 优雅降级 graceful degradation：
    3. 18.3. 区别：
  19. 19. sessionStorage 、localStorage 和 cookie 之间的区别
  20. 20. Web Storage与Cookie相比存在的优势：
  21. 21. Ajax的优缺点及工作原理？
    1. 21.1. 定义和用法:
    2. 21.2. 优点：
    3. 21.3. 缺点：
    4. 21.4. AJAX的工作原理：
  22. 22. 请指出document load和document ready的区别？
  23. 23. cpu与gpu有了解吗？区别是什么？如何调用gpu渲染。
  24. 24. 如何清除浮动？ 什么是css样式初始化？为什么要这么做？css选择器的权重都是什么？什么是伪类与伪元素？
    1. 24.1. 清除浮动
    2. 24.2. css样式初始化
    3. 24.3. CSS选择器的权重
      1. 24.3.1. 优先级分类
      2. 24.3.2. 权重及优先规则
    4. 24.4. 伪类和伪元素
      1. 24.4.1. 伪类
      2. 24.4.2. 伪元素
    5. 24.5. 注意事项
  25. 25. 在实现一个div移动的动画，使用translate、top（代指定位）、margin之间有什么性能上的不同？
  26. 26. 对于css3的动画有了解吗？必填属性有哪些？
  27. 27. CSS3的动画属性
  28. 28. 对于css3的transform有了解吗？
前端面试题-HTML&CSS篇
|interview
字数总计: 5.4k|阅读时长: 18 分钟|阅读量: 31

什么是盒子模型？

在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

  • 行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
  • 块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
  • 空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img

什么是块级格式化上下文（BFC）？ 什么样的元素会生成BFC？ BFC的布局规则是怎样的？

内容太多，就不在这解释了，可以看我的另外一篇文章：块格式化上下文（BFC）布局规则及常见场景

width与height设置的百分比是相对谁来计算的？padding与margin呢？

明确width height padding margin取值可能的四个值

  • 可能的值

    值 描述
    auto 浏览器计算内边距
    length 规定以具体单位计的内边距值，比如px、cm等。默认0px
    inherit 规定应该从父元素继承相应属性

  • 重点理解：

    width是基于父元素的width计算的值

    height是基于父元素的height计算的值

    padding和margin的无论上下左右值都是基于父元素的宽度

代码实现

html
1
<style>
2
    .box {
3
        width: 800px;
4
        height: 500px;
5
        background-color: pink;
6
        overflow: hidden;
7
        /*这行代码解决垂直外边距塌陷问题*/
8
    }
9
    .one {
10
        width: 500px;
11
        height: 200px;
12
        padding: 50px ;
13
        margin: 100px;
14
        background-color: green;
15
    }
16
    .two {
17
        width: 50%;
18
        /*相对于父元素的宽度 500*50%*/
19
        height: 50%;
20
        /*相对于父元素的高度 200*50%*/
21
        background-color:yellow;
22
        padding-left: 10%;
23
        /*相对于父元素的宽度 500*10%*/
24
        padding-top: 10%;
25
        /*相对于父元素的宽度 500*10%*/
26
        margin-left: 10%;
27
        /*相对于父元素的宽度 500*10%*/
28
        margin-top: 10%;
29
        /*相对于父元素的宽度 500*10%*/
30
    }
31
</style>
32
<body>
33
<div class="box">
34
    <div class="one">
35
        <div class="two"></div>
36
    </div>
37
</div>
38
</body>

元素设置定位后

如果元素设置了定位呢，这个时候，定位的子元素的百分比的值相对于哪个元素

一、子元素设置了定位

给box添加position: relative

给two添加position: absolute

css
1
.two {
2
        width: 50%;
3
        /*相对于定位了的父元素的宽度 800*50%*/
4
        height: 50%;
5
        /*相对于定位了的父元素的高度 500*50%*/
6
        background-color:yellow;
7
        padding-left: 10%;
8
        /*相对于定位了的父元素的宽度 800*10%*/
9
        padding-top: 10%;
10
        /*相对于定位了父元素的宽度 800*10%*/
11
        margin-left: 10%;
12
        /*相对于定位了的父元素的宽度 800*10%*/
13
        margin-top: 10%;
14
        /*相对于定位了的父元素的宽度 800*10%*/
15
        position: absolute;
16
    }

如果子元素设置了定位，那么其height width padding margin等值如果以百分比来计算是相对于已经定位的父元素，（没有定位的父元素会跳过）为基准的。

子元素没有设置定位

css
1
.two {
2
        width: 50%;
3
        /*相对于父元素的宽度 500*50%*/
4
        height: 50%;
5
        /*相对于父元素的高度 200*50%*/
6
        background-color:yellow;
7
        padding-left: 10%;
8
        /*相对于父元素的宽度 500*10%*/
9
        padding-top: 10%;
10
        /*相对于父元素的宽度 500*10%*/
11
        margin-left: 10%;
12
        /*相对于父元素的宽度 500*10%*/
13
        margin-top: 10%;
14
        /*相对于父元素的宽度 500*10%*/
15
    }

此时无论父元素是否设置定位，子元素的width height padding margin通过百分数取值的时候，都是相对于其直接父元素。

如何设置一个边长等于浏览器宽度一半的正方形？

有两种实现方法

  • 设置width相对百分比，padding-bottom取值等于height

    html
    1
    <style>
    2
        .demo {
    3
            width: 50%;
    4
            padding-bottom: 50%;
    5
        }
    6
    </style>
    7
    <body>
    8
        <div class="demo"></div>
    9
    </body>

  • 设置height相对百分比，padding-left取值等于width

    html
    1
    <style>
    2
        .demo {
    3
            height: 50%;
    4
            padding-left: 50%;
    5
        }
    6
    </style>
    7
    <body>
    8
        <div class="demo"></div>
    9
    </body>

css实现垂直水平居中

方法1：

HTML结构：

html
1
<div class="wrapper">
2
     <div class="content"></div>
3
</div>

CSS结构：

css
1
.wrapper {
2
    position: relative;
3
    width: 500px;
4
    height: 500px;
5
    border: 1px solid red; 
6
 }
7
.content{
8
    position: absolute;
9
    width: 200px;
10
    height: 200px;
11
    /*top、bottom、left和right 均设置为0*/
12
    top: 0;
13
    bottom: 0;
14
    left: 0;
15
    right: 0;
16
    /*margin设置为auto*/
17
    margin:auto;
18
    border: 1px solid green;    
19
}

如何实现一个元素的垂直居中？

简述一下src与href的区别

  • href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

  • src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

    当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

简述同步和异步的区别

同步是阻塞模式，异步是非阻塞模式。

同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；

异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

px和em的区别

相同点：px和em都是长度单位；

异同点：px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

请问你了解vm vh这个单位吗？

详见网页设计css单位

rem与em了解吗？分别是相对于谁来计算的？

详见网页设计css单位

了解移动端的适配吗？请问什么是rem布局？在移动端的1px问题该如何解决。

position属性有几个值？哪些值会脱离文档流？absolute是相对于谁来定位的？relative呢？

值 描述
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 属性的值。

对flex布局有所了解吗？请用flex布局实现一个三列布局

详见几种经典布局的实现方法

可以不用flex实现一个三列布局吗？

详见几种经典布局的实现方法

浏览器的内核分别是什么?

IE: trident内核

Firefox：gecko内核

Safari：webkit内核

Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核

Chrome：Blink(基于webkit，Google与Opera Software共同开发)

什么叫优雅降级和渐进增强？

渐进增强 progressive enhancement：

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：

  • 优雅降级是从复杂的现状开始，并试图减少用户体验的供给
  • 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要
  • 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

  • 共同点：用于浏览器端存储的缓存数据

  • 不同点：

    1. 存储内容是否发送到服务器端：当设置了Cookie后，数据会发送到服务器端，造成一定的宽带浪费；

      web storage,会将数据保存到本地，不会造成宽带浪费；

    2. 数据存储大小不同：Cookie数据不能超过4K,适用于会话标识；web storage数据存储可以达到5M;

    3. 数据存储的有效期限不同：cookie只在设置了Cookid过期时间之前一直有效，即使关闭窗口或者浏览器；

      sessionStorage,仅在关闭浏览器之前有效；localStorage,数据存储永久有效；

    4. 作用域不同：cookie和localStorage是在同源同窗口中都是共享的；sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；

Web Storage与Cookie相比存在的优势：

  • 存储空间更大：IE8下每个独立的存储空间为10M，其他浏览器实现略有不同，但都比Cookie要大很多。
  • 存储内容不会发送到服务器：当设置了Cookie后，Cookie的内容会随着请求一并发送的服务器，这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地，不会与服务器发生任何交互。
  • 更多丰富易用的接口：Web Storage提供了一套更为丰富的接口，如setItem,getItem,removeItem,clear等,使得数据操作更为简便。cookie需要自己封装。
  • 独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。

Ajax的优缺点及工作原理？

定义和用法:

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。Ajax 是一种用于创建快速动态网页的技术。Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

优点：

  1. 减轻服务器的负担,按需取数据,最大程度的减少冗余请求

  2. 局部刷新页面,减少用户心理和实际的等待时间,带来更好的用户体验

  3. 基于xml标准化,并被广泛支持,不需安装插件等,进一步促进页面和数据的分离

缺点：

  1. AJAX大量的使用了javascript和ajax引擎,这些取决于浏览器的支持.在编写的时候考虑对浏览器的兼容性.

  2. AJAX只是局部刷新,所以页面的后退按钮是没有用的.

  3. 对流媒体还有移动设备的支持不是太好等

AJAX的工作原理：

  1. 创建ajax对象（XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)）

  2. 判断数据传输方式(GET/POST)

  3. 打开链接 open()

  4. 发送 send()

  5. 当ajax对象完成第四步（onreadystatechange）数据接收完成，判断http响应状态（status）200-300之间或者304（缓存）执行回调函数

请指出document load和document ready的区别？

  • 共同点：这两种事件都代表的是页面文档加载时触发。

  • 异同点：

    ready 事件的触发，表示文档结构已经加载完成（不包含图片等非文字媒体文件）。

    onload 事件的触发，表示页面包含图片等文件在内的所有元素都加载完成。

cpu与gpu有了解吗？区别是什么？如何调用gpu渲染。

如何清除浮动？ 什么是css样式初始化？为什么要这么做？css选择器的权重都是什么？什么是伪类与伪元素？

清除浮动

css样式初始化

建站老手都知道，这是为了考虑到浏览器的兼容问题，其实不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

最简单的初始化方法就是： * {padding: 0; margin: 0;} 。有很多人也是这样写的。这确实很简单，但有人就会感到疑问：*号这样一个通用符在编写代码的时候是快，但如果网站很大，CSS样式表文件很大，这样写的话，他会把所有的标签都初始化一遍，这样就大大的加强了网站运行的负载，会使网站加载的时候需要很长一段时间。

写过css的都知道每个网页引进的css首先都需要初始化，而出名的css reset有YUI css reset（QQ、淘宝等都出现他的影子），业内用的最多的还有Erik Meyer’s CSS Reset。

CSS初始化是指重设浏览器的样式。不同的浏览器默认的样式可能不尽相同，所以开发时的第一件事可能就是如何把它们统一。如果没对CSS初始化往往会出现浏览器之间的页面差异。每次新开发网站或新网页时候通过初始化CSS样式的属性，为我们将用到的CSS或html标签更加方便准确，使得我们开发网页内容时更加方便简洁，同时减少CSS代码量，节约网页下载时间。

CSS选择器的权重

优先级分类

通常可以将css的优先级由高到低分为6组：

  1. 第一优先级：无条件优先的属性只需要在属性后面使用！important。它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。
  2. 第二优先级：在html中给元素标签加style，即内联样式。该方法会造成css难以管理，所以不推荐使用。
  3. 第三优先级：由一个或多个id选择器来定义。例如，#id{margin:0;}会覆盖.classname{margin:3pxl}
  4. 第四优先级：由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px}会覆盖div{margin:6px;}
  5. 第五优先级：由一个或多个类型选择器定义。如div{marigin:6px;}覆盖*{margin:10px；}
  6. 第六优先级：通配选择器，如*{marigin:6px;}

权重及优先规则

在css中，会根据选择器的特殊性来决定所定义的样式规则的次序，具有更特殊选择器的规则优先于一般选择器的规则。如果两个规则的特殊性相同，那么后定义的规则优先。

那么如何计算选择器的特殊性呢？那就要用到选择器的权重计算了。计算规则如下图：

我们把特殊性分为4个等级，每一个等级代表一类选择器，没个等级的值相加得出选择器的权重。

4个等级的定义如下：

  • 第一等级：代表内联样式，如style=””，权值为 1000
  • 第二等级：代表id选择器，如#content，权值为100
  • 第三等级：代表类，伪类和属性选择器，如.content，权值为10
  • 第四等级：代表标签选择器和伪元素选择器，如div p，权值为1

注意：通用选择器（*），子选择器（>），和相邻同胞选择器（+）并不在这个等级中，所以他们的权值为0

伪类和伪元素

css选择器常见包括id（#id）、标签（tag）、class（.class）、属性[attr=attrval]等，还包括伪元素和伪类选择器。正确的利用伪元素和伪类能够让我们的html结构更清晰合理，也能在一定程度上减少js对dom的操作！

伪类

伪类包含两种：状态伪类和结构性伪类

状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。常见的状态伪类主要包括：

  • :link 应用于未被访问过的链接；
  • :hover 应用于鼠标悬停到的元素；
  • :active 应用于被激活的元素；
  • :visited 应用于被访问过的链接，与:link互斥。
  • :focus 应用于拥有键盘输入焦点的元素。

结构性伪类是css3新增选择器，利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。常见的包括：

  • :first-child 选择某个元素的第一个子元素；
  • :last-child 选择某个元素的最后一个子元素；
  • :nth-child() 选择某个元素的一个或多个特定的子元素；
  • :nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
  • :nth-of-type() 选择指定的元素；
  • :nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算；
  • :first-of-type 选择一个上级元素下的第一个同类子元素；
  • :last-of-type 选择一个上级元素的最后一个同类子元素；
  • :only-child 选择的元素是它的父元素的唯一一个子元素；
  • :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素；
  • :empty 选择的元素里面没有任何内容。

伪元素

伪元素是对元素中的特定内容进行操作，而不是描述状态。它的操作层次比伪类更深一层，因此动态性比伪类低很多。实际上，伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作。控制的内容和元素是相同的，但它本身是基于元素的抽象，并不存在于文档结构中！常见的伪元素选择器包括：

  • :first-letter 选择元素文本的第一个字（母）。
  • :first-line 选择元素文本的第一行。
  • :before 在元素内容的最前面添加新内容。
  • :after 在元素内容的最后面添加新内容。

注意事项

有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素，大多数浏览器都支持这两种表示方式。单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素。对于 CSS2 中已经有的伪元素，例如 :before，单冒号和双冒号的写法 ::before 作用是一样的。

所以，如果你的网站只需要兼容 webkit、firefox、opera 等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容 IE 浏览器，还是用 CSS2 的单冒号写法比较安全。

引用：https://segmentfault.com/a/1190000012156828

在实现一个div移动的动画，使用translate、top（代指定位）、margin之间有什么性能上的不同？

对于css3的动画有了解吗？必填属性有哪些？

CSS3的动画属性

下面的表格列出了 @keyframes 规则和所有动画属性：

属性 描述 CSS
@keyframes 规定动画。 3
animation 所有动画属性的简写属性，除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 “ease”。 3
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 3
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。 3
animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。

对于css3的transform有了解吗？

文章作者: Izzio
文章链接: https://izzio.netlify.com/blog/interview/23493.html
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Seventy！
HTML CSS
ENG