• 常见面试题(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、移动端页面如何来做适配?(重要)

  • 相关阅读:
    04_远程管理常用命令
    03_文件和目录常用命令
    02_Linux 终端命令格式
    01_常用 Linux 命令的基本使用
    test
    centOS 7 更改root密码
    安装 centos7
    1
    IO模型
    使用git连接到Github
  • 原文地址:https://www.cnblogs.com/myongchuang/p/10863446.html
Copyright © 2020-2023  润新知