前端工程师面试题(html+css)

在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。

离线的情况下，浏览器就直接使用离线存储的资源。

2. HTML标签相关

2.1 iframe有那些缺点？

iframe会阻塞主页面的Onload事件；

搜索引擎的检索程序无法解读这种页面，不利于SEO;

iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript 动态给iframe添加src属性值，这样可以绕开以上两个问题。

2.2 Label的作用是什么

label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

提示:"for" 属性可把 label 绑定到另外一个元素。需把 "for" 属性的值设置为相关元素的 id 属性的值。

<label for="name">姓名：</label>
<input type="text" name="Name" id="name">
<label for="age">年龄：</label>
<input type="text" name="age" id="age">

<label for="age">姓名：</label>
<input type="text" name="Name" id="name">
<label for="name">年龄：</label>
<input type="text" name="age" id="age">

自己尝试以上代码，即可看出label标签的作用！

2.3 如何实现浏览器内多个标签页之间的通信?

WebSocket、SharedWorker；

也可以调用localstorge、cookies等本地存储方式；

localstorge另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信；

注意quirks：Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常；

2.4 webSocket如何兼容低浏览器？

Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、基于 multipart 编码发送 XHR 、基于长轮询的 XHR

2.5 字体标签的区别

title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响；

strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：会重读，而是展示强调内容。 内容展示为斜体，表示强调的文本；

Physical Style Elements -- 自然样式标签

b, i, u, s, pre

Semantic Style Elements -- 语义样式标签

strong, em, ins, del, code

应该准确使用语义样式标签, 但不能滥用, 如果不能确定时首选使用自然样式标签。

3. css部分(1)

3.1 盒子模型

介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

（1）有两种， IE 盒子模型、W3C 盒子模型；

（2）盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)；

（3）区别： IE的content部分把 border 和 pading计算了进去;

3.2 css选择符与属性继承

选择符:

1.id选择器（ # myid）

2.类选择器（.myclassname）

3.标签选择器（div, h1, p）

4.相邻选择器（h1 + p）

5.子选择器（ul > li）

6.后代选择器（li a）

7.通配符选择器（ * ）

8.属性选择器（a[rel = "external"]）

9.伪类选择器（a:hover, li:nth-child）

可继承的样式:

font-size font-family color ul li dl dd dt

不可继承的样式:

border padding margin width height

3.3 优先级算法

优先级就近原则，同权重情况下样式定义最近者为准;

载入样式以最后载入的定位为准;

优先级为:

!important > id > class > tag

important 比内联优先级高

3.4 css3新增伪类

:first-of-type选择器匹配元素其父级是特定类型的第一个子元素

举例

指定其父级的第一个p元素的背景色

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title></title>
        <style>
            p:first-of-type{
                background-color: #f00;
            }
        </style>
    </head>
    <body>
        <div>
          <h1>this is a heading</h1>
            <p>this is first paragraph</p>
            <p>this is second paragraph</p>
        </div>
    </body>
</html>

:last-of-type选择器匹配元素其父级是特定类型的最后一个子元素。

举例

指定其父级的第一个p元素的背景色

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title></title>
        <style>
            p:last-of-type{
                background-color: #f00;
            }
        </style>
    </head>
    <body>
        <div>
          <h1>this is a heading</h1>
            <p>this is first paragraph</p>
            <p>this is second paragraph</p>
        </div>
    </body>
</html>

:only-of-type选择器匹配属于同类型中唯一同级元素

举例

匹配属于同类型中唯一同级元素的p元素的背景颜色

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title></title>
        <style>
            p:only-of-type{
                background-color: #f00;
            }
        </style>
    </head>
    <body>
    <div>
        <p>this is a paragraph</p>
    </div>
        <div>
            <p>this is a paragraph</p>
            <p>this is a paragraph</p>
        </div>
    </body>
</html>

:only-child选择器匹配属于父元素中唯一子元素的元素

举例：

匹配属于父元素中唯一子元素的p元素

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title></title>
        <style>
            p:only-child{
                background-color: #f00;
            }
        </style>
    </head>
    <body>
    <div>
        <p>this is a paragraph</p>
    </div>
        <div>
            <span>this is a span</span>
            <p>this is a paragraph</p>
        </div>
    </body>
</html>

:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。n 可以是一个数字，一个关键字，或者一个公式

举例

指定每个 p 元素匹配的父元素中第 2 个子元素的背景色

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title></title>
        <style>
            p:nth-child(2){
                background-color: #f00;
            }
        </style>
    </head>
    <body>
    <div>
        <span>this is a span</span>
        <p>this is first paragraph</p>
        <p>this is second paragraph</p>
    </div>
    </body>
</html>

:after 在元素之前添加内容,也可以用来做清除浮动。

举例

每个元素之后插入内容：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title></title>
        <style>
            p:after{
                content: "后插入";
            }
        </style>
    </head>
    <body>
    <div>
        <p>this is first paragraph</p>
        <p>this is second paragraph</p>
    </div>
    </body>
</html>

:before 选择器向选定的元素前插入内容

举例

每个 元素之前插入内容

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title></title>
        <style>
            p:before{
                content: "前插入";
            }
        </style>
    </head>
    <body>
    <div>
        <p>this is first paragraph</p>
        <p>this is second paragraph</p>
    </div>
    </body>
</html>

:checked 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）

举例

为所有选中的输入元素设置背景颜色

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title></title>
        <style>
            input:checked{
                height: 20px;
                width: 20px;
            }
        </style>
    </head>
    <body>
    <form action="">
        <input type="radio" checked="checked" value="male" name="gender">Male<br>
        <input type="radio" value="female" name="gender">Female<br>
        <input type="checkbox" checked="checked" value="Bike">I have a bike<br>
        <input type="checkbox" value="Car">I have a car<br>
    </form>
    </body>
</html>

:enabled 选择器匹配每个启用的的元素（主要用于表单元素）

:disabled 选择器匹配每个禁用的的元素（主要用于表单元素）

实例

设置所有type="text"的启用的输入元素的背景颜色

设置所有type="text"的禁用的输入元素的背景颜色

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title></title>
        <style>
            input[type="text"]:enabled {
                background-color: #ffa800;
            }

            input[type="text"]:disabled {
                background-color: #dddddd;
            }
        </style>
    </head>
    <body>
    <form action="">
        First name: <input type="text" value="may"><br>
        Last name: <input type="text" value="Mouse" disabled="disabled"><br>
    </form>
    </body>
</html>

3.5 css居中

给div设置一个宽度，然后添加margin:0 auto属性

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title></title>
        <style>
            div {
                width: 200px;
                height: 200px;
                background-color: palegoldenrod;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

让绝对定位的div居中

给div设置一个宽度，然后添加margin:0 auto属性，再添加 top: 0;left: 0;bottom: 0;right: 0;

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title></title>
        <style>
            div {
                position: absolute;
                width: 200px;
                height: 200px;
                background-color: palegoldenrod;
                margin: 0 auto;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

水平垂直居中一

确定容器的宽高

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title></title>
        <style>
            div {
                position: relative; /* 相对定位或绝对定位均可 */
                width:200px;
                height:200px;
                background-color: pink;         /* 方便看效果 */
                top: 50%;
                left: 50%;
                margin: -100px 0 0 -100px;      /* 外边距为自身宽高的一半 */
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

水平垂直居中二

未知容器的宽高，利用 `transform` 属性

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title></title>
        <style>
            div {
                position: absolute;         /* 相对定位或绝对定位均可 */
                width:200px;
                height:200px;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background-color: pink;     /* 方便看效果 */
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

水平垂直居中三

利用 flex 布局实际使用时应考虑兼容性

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        .container {
            display: flex;
            align-items: center;                 /* 垂直居中 */
            justify-content: center;             /* 水平居中 */
        }
        .container div {
            width: 100px;
            height: 100px;
            background-color: pink;           /* 方便看效果 */ }
    </style>
</head>
<body>
<div class="container">
    <div></div>
</div>
</body>
</html>

3.6 display值及作用

block 象块类型元素一样显示。

none 缺省值。象行内元素类型一样显示。

inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。

list-item 象块类型元素一样显示，并添加样式列表标记。

table 此元素会作为块级表格来显示

inherit 规定应该从父元素继承 display 属性的值

3.7 position定位

absolute 生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。

fixed （老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。

relative 生成相对定位的元素，相对于其正常位置进行定位。

static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。

inherit 规定从父元素继承 position 属性的值。

3.8 css3新特性

新增各种CSS选择器（: not(.input)：所有 class 不是“input”的节点）

圆角（border-radius:8px）

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title></title>
        <style>
            div {
                width: 200px;
                height: 200px;
                background-color: palegoldenrod;
                border-radius: 8px;         /*圆角*/
                border-radius: 50%;         /*圆*/
            }
        </style>
    </head>
    <body>
    <div></div>
    </body>
</html>

多列布局（multi-column layout）

阴影和反射（Shadow\Reflect）

文字特效（text-shadow、）

文字渲染（Text-decoration）

线性渐变（gradient）

旋转（transform）

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title></title>
        <style>
            ul {
                width: 800px;
                height: 800px;
                border: 1px solid #000;
                margin: 0 auto;
            }

            ul li {
                list-style: none;
                width: 100px;
                height: 50px;
                background-color: red;
                margin: 0 auto;
                margin-top: 50px;
                text-align: center;
                line-height: 50px;
            }

            ul li:nth-child(2){
                /*其中deg是单位, 代表多少度*/
                transform: rotate(45deg);
            }
            ul li:nth-child(3){
                /*
                第一个参数:水平方向
                第二个参数:垂直方向
                */
                transform: translate(100px, 0px);
            }
            ul li:nth-child(4){
                /*
                第一个参数:水平方向
                第二个参数:垂直方向
                注意点:
                如果取值是1, 代表不变
                如果取值大于1, 代表需要放大
                如果取值小于1, 代表需要缩小
                如果水平和垂直缩放都一样, 那么可以简写为一个参数
                */
                /*transform: scale(0.5, 0.5);*/
                transform: scale(1.5);
            }
            ul li:nth-child(5){
                /*
                注意点:
                1.如果需要进行多个转换, 那么用空格隔开
                2.2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的
                */
                transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5);
                /*transform: translate(100px, 0px);*/
            }
        </style>
    </head>
    <body>
    <ul>
        <li>正常的</li>
        <li>旋转的</li>
        <li>平移的</li>
        <li>缩放的</li>
        <li>综合的</li>
    </ul>
    </body>
</html>

动画Animation

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 50px;
            background-color: red;
            /*transition-property: margin-left;*/
            /*transition-duration: 3s;*/

            /*1.告诉系统需要执行哪个动画*/
            animation-name: lnj;
            /*3.告诉系统动画持续的时长*/
            animation-duration: 3s;
        }
        /*2.告诉系统我们需要自己创建一个名称叫做lnj的动画*/
        @keyframes lnj {
            from{
                margin-left: 0;
            }
            to{
                margin-left: 500px;
            }
        }

        /*div:hover{*/
        /*margin-left: 500px;*/
        /*}*/
    </style>
</head>
<body>
    <div></div>
</body>
</html>

3.9 创建一个三角形

把上、左、右三条边隐藏掉（颜色设为 transparent）

具体实现原理：https://blog.csdn.net/weixin_37580235/article/details/80803479

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
       #demo {
           width: 0;
           height: 0;
           border-width: 20px;
           border-style: solid;
           border-color: red transparent transparent transparent;
       }
    </style>
</head>
<body>
    <div id="demo"></div>
</body>
</html>

3.10 浏览器兼容

* png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.

* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

* IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。

浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}

这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别) 渐进识别的方式，从总体中逐渐排除局部。

首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。

接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

css .bb{ background-color:#f1ee18;/*所有识别*/ .background-color:#00deff\9; /*IE6、7、8识别*/ +background-color:#a200ff;/*IE6、7识别*/ _background-color:#1e0bd1;/*IE6识别*/ }

* IE下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用getAttribute()获取自定义属性; Firefox下,只能使用getAttribute()获取自定义属性。

解决方法:统一通过getAttribute()获取自定义属性。

* IE下,even对象有x,y属性,但是没有pageX,pageY属性; Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。

* 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。

* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,

可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

超链接访问过后hover样式就不出现了被点击访问过的超链接样式不在具有hover和active了

解决方法是改变CSS属性的排列顺序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

3.11 li之前空白间隔

行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。

3.12 为什么要初始化css样式

- 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

- 当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

最简单的初始化方法： * {padding: 0; margin: 0;} （强烈不建议）

淘宝的样式初始化代码：

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
	margin:0;
	padding:0;
}
body,button,input,select,textarea {
	font:12px/1.5tahoma,arial,\5b8b\4f53;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
}
address,cite,dfn,em,var {
	font-style:normal;
}
code,kbd,pre,samp {
	font-family:couriernew,courier,monospace;
}
small {
	font-size:12px;
}
ul,ol {
	list-style:none;
}
a {
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}
sup {
	vertical-align:text-top;
}
sub {
	vertical-align:text-bottom;
}
legend {
	color:#000;
}
fieldset,img {
	border:0;
}
button,input,select,textarea {
	font-size:100%;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}

4. css部分(2)

4.1 BFC规范

（W3C CSS 2.1 规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）

一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。

不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。

4.2 css定义权重

以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：

/*权重为1*/ 
div {
}

/*权重为10*/ 
.class1 {
}

/*权重为100*/ 
#id1 {
}

/*权重为100+1=101*/ 
#id1 div {
}

/*权重为10+1=11*/ 
.class1 div {
	}

/*权重为10+10+1=21*/ 

.class1 .class2 div {
}

如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现

4.3 css浮动

请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式：

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

浮动元素引起的问题和解决办法？

浮动元素引起的问题：

父元素的高度无法被撑开，影响与父元素同级的元素与浮动元素同级的非浮动元素（内联元素）会跟随其后，若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

解决方法：使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题，对于问题1，添加如下样式，给父元素添加clearfix样式：

.clearfix:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

/* for IE/Mac */ 
.clearfix {
	display:inline-block;
}

清除浮动的几种方法：

给父元素增加高度属性 - 用于撑起父元素的高度

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            height: 20px;
            background-color: red;
        }
        .box2{
            background-color: green;
        }
        .box1 p{
            width: 100px;
            background-color: blue;
        }
        .box2 p{
            width: 100px;
            background-color: yellow;
        }
        p{
            float: left;
        }
    </style>
</head>
<body>
    <div class="box1">
        <p>我是文字1</p>
        <p>我是文字1</p>
        <p>我是文字1</p>
    </div>

    <div class="box2">
        <p>我是文字2</p>
        <p>我是文字2</p>
        <p>我是文字2</p>
 </div>
</body>
</html>

clear：both属性

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            clear: both;
            background-color: green;
        }
        .box1 p{
            width: 100px;
            background-color: blue;
        }
        .box2 p{
            width: 100px;
            background-color: yellow;
        }
        p{
            float: left;
        }
    </style>
</head>
<body>
    <div class="box1">
        <p>我是文字1</p>
        <p>我是文字1</p>
        <p>我是文字1</p>
    </div>

    <div class="box2">
        <p>我是文字2</p>
        <p>我是文字2</p>
        <p>我是文字2</p>
 </div>
</body>
</html>

（缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁。）

使用after伪类 --- 注意这里是给父元素加

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            clear: both;
            background-color: green;
        }
        .box1 p{
            width: 100px;
            background-color: blue;
        }
        .box2 p{
            width: 100px;
            background-color: yellow;
        }
        p{
            float: left;
        }
        .box1::after {
            /*设置添加的子元素的内容为空*/
            content: "";
            /*设置添加的子元素为块级元素*/
            display: block;
            /*设置添加的子元素的高度为0*/
            height: 0;
            /*设置添加的子元素看不见*/
            visibility: hidden;
            /*给添加的子元素设置clear: both;*/
            clear: both;
        }
        
        .box1 {
            /*兼容IE6*/
            *zoom :1;
        }
        
    </style>
</head>
<body>
    <div class="box1">
        <p>我是文字1</p>
        <p>我是文字1</p>
        <p>我是文字1</p>
    </div>

    <div class="box2">
        <p>我是文字2</p>
        <p>我是文字2</p>
        <p>我是文字2</p>
 </div>
</body>
</html>

设置overflow为hidden或者auto

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
            overflow: hidden;
        }
        .box2{
            background-color: green;
        }
        .box1 p{
            width: 100px;
            background-color: blue;
        }
        .box2 p{
            width: 100px;
            background-color: yellow;
        }
        p{
            float: left;
        }
    </style>
</head>
<body>
    <div class="box1">
        <p>我是文字1</p>
        <p>我是文字1</p>
        <p>我是文字1</p>
    </div>

    <div class="box2">
        <p>我是文字2</p>
        <p>我是文字2</p>
        <p>我是文字2</p>
 </div>
</body>
</html>

4.4 cookie隔离

如果静态文件都放在主域名下，那静态文件请求的时候都带有的cookie的数据提交给server的，非常浪费流量，所以不如隔离开。

因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。

同时这种方式不会将cookie传入Web Server，也减少了Web Server对cookie的处理分析环节，提高了webserver的http请求的解析速度。

4.5 link和@import

（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS; （

2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

4.6 style标签写在body后与body前有什么区别？

总结：CSS和JS的下载都不会被解析阻塞，CSS下载时会阻塞渲染, 外部样式会阻塞后续脚本执行，直到外部样式加载并解析完毕。

没遇到JS阻塞的情况，CSS只会在DOM解析完后渲染。

遇到JS阻塞的情况，当DOM一旦遇到JS阻塞时，就会触发CSS渲染那么现在有一个问题，css写在body前和body后有什么区别，由上述可见，CSS无论是用STYLE标签还是link外链，如果没有遇到jS阻塞，放哪里都一样，如果遇到js阻塞，把CSS写在BODY上面，不会出现二次渲染，把CSS写在BODY下面，JS阻塞时，会出现一次渲染，等阻塞完毕会出现二次渲染（除非外链的CSS下载时间比阻塞时间长）。

一只前端小菜鸟~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端工程师面试题(html+css)

目录 1. HTML5相关1.1 新特性移除了那些元素1.2 处理HTML5新标签的浏览器兼容问题1.3 区分 HTML 和 HTML51.4 HTML语义化的理解 1.5 HTML5离线储存2. HTML标签相关2.1 iframe有那些缺点？2.2 Label的作用是什么2.3 如何实现浏览器内多个标签页之间的通信?2.4 webSocket如何...
复制链接

扫一扫

专栏目录