前端高频面试题汇总(css,html)_怎么计算子盒子到父盒子边框的距离

• 标准盒模型中 width 指的是内容区域 content 的宽度
• height 指的是内容区域 content 的高度
• 标准盒模型下盒子的大小 = content + border + padding + margin

 IE 标准的盒子模型（怪异盒模型）    box-sizing: border-box;

• 怪异盒模型中的
• width 指的是内容、边框、内边距总的宽度（content + border + padding）；
• height 指的是内容、边框、内边距总的高度
• 怪异盒模型下盒子的大小=width（content + border + padding） + margin

我们还可以通过属性 box-sizing 来设置盒子模型的解析模式可以为 box-sizing 赋两个值：

• content-box：默认值，border 和 padding 不算到 width 范围内，可以理解为是 W3c 的标准模型(default)。总宽=width+padding+border+margin
• border-box：IE盒模型border 和 padding 划归到 width 范围内，可以理解为是 IE 的怪异盒 模型，总宽=width+margin

CSS 中选择器的优先级以及 CSS 权重如何计算？

！Important>行内样式>ID 选择器>类选择器>标签>通配符>继承>浏览器默认属性

权重

CSS 权重是由四个数值决定，看一张图比较好解释：

图里是英文的，翻译过来分别介绍一下，4 个等级的定义如下：

• 第一等：内联样式，如：style="color:red;"，权值为 1000.（该方法会造成 css 难以管理， 所以不推荐使用）
• 第二等：ID 选择器，如：#header，权值为 0100
• 第三等：类、伪类、属性选择器如：.bar， 权值为 0010
• 第四等：标签、伪元素选择器，如：div ::first-line 权值为 0001
• 最后把这些值加起来，再就是当前元素的权重了

其他：

• 无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样
• 式。（ie6 支持上有些 bug）
• 通配符，子选择器，相邻选择器等。如*，>,+, 权值为 0000.
• 继承的样式没有权值

CSS 权重计算方式

• 计算选择符中的 ID 选择器的数量（=a）
• 计算选择符中类、属性和伪类选择器的数量（=b）
• 计算选择符中标签和伪元素选择器的数量（=c）
• 忽略全局选择器

栗子

div#app.child[name="appName"] /a=1,b=2,c=1 —>权重 = 1 + 100 + 10 +10 = 121/

列举 5 个以上的 H5 input 元素 type 属性值？

• button :定义可点击的按钮（大多与 JavaScript 使用来启动脚本）
• checkbox :定义复选框。
• color :定义拾色器。
• date :定义日期字段（带有 calendar 控件）
• month :定义日期字段的月（带有 calendar 控件）
• time :定义日期字段的时、分、秒（带有 time 控件）
• email :定义用于 e-mail 地址的文本字段
• file :定义输入字段和 "浏览..." 按钮，供文件上传
• hidden :定义隐藏输入字段
• image :定义图像作为提交按钮
• number :定义带有 spinner 控件的数字字段
• password :定义密码字段。字段中的字符会被遮蔽。
• radio :定义单选按钮。
• search :定义用于搜索的文本字段。
• submit :定义提交按钮。提交按钮向服务器发送数据。
• text :默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个 字符。
• url :定义用于 URL 的文本字段。

CSS 中哪些属性可继承，哪些不可以？

能继承的属性

1. 字体系列属性:font、font-family、font-weight、font-size、font-style;

2. 文本系列属性:

           内联元素：color、line-height、word-spacing、letter-spacing, text-transform;

           块级元素：text-indent、text-align;

3. 元素可见性：visibility

4. 表格布局属性：caption-side、border-collapse、border-spacing、empty-cells,table-layout;

5. 列表布局属性：list-style

不能继承的属性

1. display：规定元素应该生成的框的类型；

2. 文本属性：vertical-align、text-decoration;

3. 盒子模型的属性：width、height、margin 、border、padding;

4. 背景属性：background、background-color、background-image;

5. 定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip;

CSS 单位中 px、em 和 rem 的区别？

• 1、px 像素（Pixel）。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一 个虚拟长度单位，是计算机系统的数字化图像长度单位
• 2、em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字 体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大 小，因此并不是一个固定的值
• 3、rem 是 CSS3 新增的一个相对单位（root em，根em），使用 rem 为元素设定字 体大小时，仍然是相对大小，但相对的只是 HTML 根元素

区别：

IE 无法调整那些使用 px 作为单位的字体大小，而 em 和 rem 可以缩放，rem,相对的只是 HTML 根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通 过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐 层复合的连锁反应。目前，除了 IE8 及更早版本外，所有浏览器均已支持 rem

rem 适配方法如何计算 HTML 跟字号及适配方案？

通用方案

• 1、设置根 font-size：625%（或其它自定的值，但换算规则 1rem 不能小于 12px）
• 2、通过媒体查询分别设置每个屏幕的根 font-size
• 3、CSS 直接除以 2 再除以 100 即可换算为 rem

优：有一定适用性，换算也较为简单

劣：有兼容性的坑，对不同手机适配不是非常精准；需要设置多个媒体查询来适应不同手机，单某款手机尺寸不在设置范围之内，会导致无法

网易方案

1、拿到设计稿除以 100，得到宽度 rem 值

2、通过给 html 的 style 设置 font-size，把 1 里面得到的宽度 rem 值代入  x document.documentElement.style.fontSize = document.documentElement.clientWidth / x + ‘px‘;

3、设计稿 px/100 即可换算为 rem

优：通过动态根 font-size 来做适配，基本无兼容性问题，适配较为精准，换算简便

劣：无 viewport 缩放，且针对 iPhone 的 Retina 屏没有做适配,导致对一些手机的适 配不是很到位

手淘方案

• 1.   拿到设计稿除以 10，得到 font-size 基准值
• 2、引入 flexible
• 3、不要设置 meta 的 viewport 缩放值
• 4、设计稿 px/ font-size 基准值，即可换算为 rem

优：通过动态根 font-size、viewpor、dpr 来做适配，无兼容性问题，适配精准。

劣：需要根据设计稿进行基准值换算，在不使用 sublime text 编辑器插件开发时，单位计算复杂

Display：none 与 visibility：hidden 的区别？

最常用的为 display:none 和 visibility:hidden

dispaly:none 设置该属性后，该元素下的元素都会隐藏，占据的空间消失

visibility:hidden 设置该元素后，元素虽然不可见了，但是依然占据空间的位置

 .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
 
    .cl earfix {
        display: inline-block;
    }
 
    /* for IE/Mac */

  .clearfix:after {
        content: "";
        /*设置内容为空*/
        height: 0;
        /*高度为 0*/
        line-height: 0;
        /*行高为 0*/
        display: block;
        /*将文本转为块级元素*/
        visibility: hidden;
        /*将元素隐藏*/
        clear: both;
        /*清除浮动*/
    }
 
    .clearfix {
        zoom: 1;
        /*为了兼容 IE*/
    }
    <div class="container clearfix">
        <div class="wrap">aaa</div>
    </div>

    <meta name="viewport" content="width=device-width,user-scalable=no" />
 <style>
        body {
            margin: 0;
        }
 
        div {
            /*width: 80px;*/
            height: 100px;
            width: 4rem;
            height: 4rem;
            /*1rem=20; nrem=80; n=80/rem; n=80/20; n=4*/
            background: green;
            float: left;
        }
    </style>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</body>
<script>
    (function () {
        var html = document.documentElement;
        var width = html.getBoundingClientRect().width;//获取屏幕宽度（设备独立像素）， 如 iPhone6 为 414
        html.style.fontSize = width / 16 + 'px'; //html font-size = 20px 
        //iphone5 下 1rem=20 这里之所以除以 16，是因为要把宽度分成 16 份，这个数并 没有固定，一般选 15，16，以 ipone5 为准是 16，因为一除可以得到整数 20，好计算。
    })();
</script>

        var width = document.documentElement.clientWidth; // 屏幕的布局视口宽度 
        var rem = width / 7.5; // 750px 设计稿将布局视口分为 7.5 份 
        var rem = width / 6.4; // 640px 设计稿将布局视口分为 6.4 份