常见面试题(html+css篇)

 

1、什么是盒子模型?

       解答:css模型(又称:框模型),CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

       包含元素内容(content),内边距(padding),边框(border),外边距(margin)几个要素。

2、如果页面不写doctype页面还会解析页面吗?

       解答:会, <!DOCTYPE html>表示文档类型的声明,它的目的是告诉解析器应该使用什么样的文档类型来解析文档。

                 ★  如果没有使用<!DOCTYPE html>,浏览器会按照自己的方式解析页面, 在不同的浏览器就会显示不同的样式。(怪异模式)

                 ★  如果页面添加了<!DOCTYPE html>, 那么浏览器就会使用W3C的标准来解析渲染页面。(标准模式)

3、定位有几种方式?每种方式定位的基准是什么吗?那种方式会脱标?他们之间会有层级关系吗,谁的层级会高些?

      解答:

    ①  绝对定位(absolute)、相对定位(relative)、固定定位(flex)、静态定位(static)

    ②  绝对定位:相对于其最接近的一个具有定位属性的父元素进行定位。

     相对定位:相对于自身的位置进行定位。

     固定定位:相对于浏览器进行定位。

     静态定位:默认值,没有定位。

    ③  绝对定位和固定定位会脱标。相对定位不会脱标:老家留坑 形影分离

    ④  定位元素层级相同,下会盖住上。  为其定位元素设置 z-index:1,依次递增。 父元素层级再高,也不会盖住子元素。

4、浮动会带来哪些影响?哪些方式可以清除浮动?

    ①  浮动会使当前元素脱离标准流,产生上浮,同时还会影响周边元素(前后标签),以及父元素的位置和width,height。

    ②  1. 为父元素添加高度,2. 额外标签法,3. 为父元素添加伪类 :after,4. 为父元素设置overflow:hidden。

5、如何让一个不定宽高的div垂直水平居中?

    第一种方法: 

      <style>
        html,body {
          height: 100%;
        }
        .container {
          height: 100%;
          position: relative;
        }
        .in {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%,-50%);
        }
      </style>

      <div class="container">
        <div class="in">
          我是大盒子里面的小盒子
        </div>
      </div>

    第二种方法

      <style>
        html,body {
          margin:0; padding:0; height:100%;
        }
        table {
          margin:0 auto; height:100%;
        }
      </style>

      <table>
        <tr>
          <td>
            <div class="in">
              我就是那个最里面小盒子
            </div>
          </td>
        </tr>
      </table>

6、H5/C3增加了哪些新属性,分别列举一下?

7、H5/C3新属性如何做兼容处理?(重要)

8、Css如何画一个三角形?

      <style>
        div {
           0;
          height: 0;
          border-left: 100px solid transparent;
          border-right: 100px solid transparent;
          border-top: 100px solid transparent;
          border-bottom: 100px solid red;
        }
      </style>

9、H5的本地存储和传统的存储区别是什么?

10、页面之间的参数传递有哪些方式?

11、浏览器缓存和离线缓存的区别是什么吗?

12、为什么会有缓存?如果不想缓存如何避免掉?

    解答:

      缓存,数据交换的缓冲区(称作Cache),当某一硬件要读取数据时,会首先从缓存中查找需要的数据,如果找到了则直接执行,找不到的话则从内存中找,这样做可以减少系统开销,提高系统效率。

      如果不想要缓存在引用js、css文件的url后边加上版本号、发布时间。例:<script type="text/javascript" src="/js/common.js?t=20180428" ></script>

      实际开发中可以使用时间戳, 或者随机数

13、H5的wbsocket是什么?应用场景有哪些?和http以及https的区别是什么?

14、em和rem的区别?

15、移动端页面如何来做适配?(重要)

原文地址:https://www.cnblogs.com/myongchuang/p/10863446.html