html+css 经典面试题总结

1.HTML常见的标签

• 块级标签：div、p、ul、li、ol、dd、dt、table，form、h1-h6
• 块状元素特征：(1)能够识别宽高

　　　　　　　　　(2)margin和padding的上下左右均对其有效

　　　　　　　　　(3)可以自动换行

　　　　　　　　　(4)多个块状元素标签写在一起，默认排列方式为从上至下

• 行内标签：a、span ，i，b，strong
• 行内元素特征：(1)设置宽高无效

　　　　　　　　　(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间

　　　　　　　　　(3)不会自动进行换行

• 行内块标签：img，input
• 行内块状元素特征：(1)不自动换行

　　　　　　　　　　　(2)能够识别宽高

　　　　　　　　　　　(3)默认排列方式为从左到右

2.常见浏览器以及内核

浏览器	内核
ie	Trident
火狐	Gcko
谷歌	Blink 在脚本理解方面，Chorome使用自己研发的V8引擎
苹果	Webkit
欧朋	Blink（是webkit的分支）

4.css画三角

css实现三角形原理：

代码	效果
#box01{             width: 0;             height: 0;             border-top: 100px solid pink;             border-left:100px solid red ;             border-bottom:100px solid  yellow;             border-right:100px solid  yellowgreen;                      }
#box02{     width: 0;     height: 0;     border:50px solid transparent ;     border-left-color:pink ;     }
#box03{     width: 0;     height: 0;     border-top: 200px solid transparent;     border-left:100px solid transparent;     border-right:100px solid  yellowgreen;  }

5.浮动

浮动最典型的应用：可以让多个块级元素一行内排列显示

浮动的特性：

1）脱离标准流 不占有原来的位置

2）一行内显示 元素顶部对齐

3）浮动的元素具有行内块元素的特点

浮动的注意点：

1）浮动的元素只影响浮动元素后面的标准流不影响浮动元素前面 的标准流

2）一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，以防止引起问题

清除浮动的本质：

本质就是清除浮动元素脱离标准流造成的影响，浮动的子盒子无法撑开父盒子的高度

如果父盒子有高度，则不需要清除浮动

浮动之后，父盒子就会根据浮动的子盒子自动检测高度

父盒子有了高度就不会影响下面的标准流了

6.清除浮动的方法

方法名	案例	优点	缺点
额外标签法（隔墙法）	在浮动元素末尾添加一个空的块级元素标签 例如： style="clear:both"> ，或者其他标签（如 等）	通俗易懂，书写方便	添加许多无意义的标签，结构化差
给父级添加 overflow 属性 将其属性值设置为 hidden、 auto 或 scroll	overflow：hidden/auto/scroll	书写简单	无法显示溢出部分
父级添加after伪元素	.box::after{             content: '';             display: block;             height: 0;             clear: both;            visibility: hidden;         }         .box{             *zoom:1         }	结构语义正确	ie6-7不支持:after，兼容性问题
父级添加双伪元素	.box::before,.box::after{             content: '';             display:table;         }         .box::after{             clear: both;         }         .box{             *zoom:1         }	结构语义正确	ie6-7不支持:after，兼容性问题

7.如何让一个盒子水平垂直居中

html代码如下：

css固定样式：

方法一：利用定位

.parent{ 
position:relative; 
} 
.child{ 
position:absolute; 
top:50%; 
left:50%; 
margin-top:-50px; 
margin-left:-50px; 
} 
//方法一的原理就是定位中心点是盒子的左上顶点，所以定位之后我们需要回退盒子一半的距离。

方法二：利用transform

.parent{ 
position:relative; 
} 
.child{ 
position:absolute; 
top:50%; 
left:50%; 
transform:translate(-50%,-50%); 
}
//方法二就不用再计算子盒子的大小

方法三：利用display：flex;设置垂直水平都居中；

.parent{ 
display:flex; 
justify-content:center; 
align-items:center; 
}
//方法三给父盒子设置flex布局

8.vertical-align实现行内块与文字垂直居中对齐

给行内块元素设置vertical-align:middle样式，让文字的基线与行内块元素的中线对齐

9.less和sass的区别

	less	sass
.编译环境不同	Less是需要引入less.js来处理Less代码输出CSS到浏览器，也可以在开发服务器将Less语法编译成css文件，输出CSS文件到生产包目录，有npm less, Less.app、SimpleLess、CodeKit.app这样的工具，也有在线编译地址	服务端处理的，以前是Ruby，现在是Dart-Sass或Node-Sass
变量符不一样	@	$
输出设置	Less没有输出设置	Sass提供4中输出选项：nested, compact, compressed 和 expanded
是否支持语法条件	Less不支持	Sass支持条件语句，可以使用if{}else{},for{}循环等

10.flex布局的属性

flex布局中的一些基本概念

容器和项目

• 什么叫容器采用flex布局的元素被称作容器。
• 什么叫项目在flex布局中的子元素被称作项目。

即父级元素采用flex布局，则父级元素为容器，全部子元素自动成为项目。

在容器中默认有水平的主轴和垂直的交叉轴，项目在容器中默认沿主轴排列

容器的属性：

项目的属性：

11.css选择器的权重

• 第一等：内联样式 权重为1000
• 第二等：id选择器 权重为0100
• 第三等：类，伪类，属性选择器 权重为0010
• 第四等：类型选择器，伪元素选择器 权重为0001
• 通配符，子选择器，相邻选择器 权重为0000
• 继承的样式没有权重

12、对语义化标签的理解

*HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；

*在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的；

*搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于SEO。

*使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

13.页面导入样式时，使用link和@import有什么区别？

• link属于XHTML标签，而@import是css提供的
• 页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载
• @import只在IE5以上才能识别，而link是XHTML标签，无兼容问题
• link方式的样式的权重高于@import的权重。

14.Html和xhtml有什么区别?

html是一种基本的web网页设计语言，xhtml是一个基于XML的置标语言。

最主要的不同:XHTML元素必须正确的被嵌套，元素必须关闭，标签必须小写，必须有根元素。

15.介绍一下标准的css盒模型，低版本ie盒模型有什么不同

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

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

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

16.< image>标签上的title属性和alt属性的区别？

alt如果无法显示图像，浏览器将显示替代文本

title（鼠标放在图片上显示信息）属性为设置该属性的元素提供建议性的信息

17.设置文字水平居中的属性是？设置标签盒子水平居中的属性是？

文字水平居中是 text-aligin:center；

盒子水平居中是 margin:0 auto；

18.列举几种隐藏元素的方法

• visibility：hidden; /*简单的隐藏某个元素，但是元素占用的空间仍然存在*/
• display:none;/*元素会变得不可见，并且不会再占用文档的空间*/

• opacity：0；/*一个css3属性，设置0可以使一个元素完全透明，制作出和visibility一样的效果*/
• position:absolute;/*使元素脱离文档流，处于普通文档之上，给他设置一个很大的left负值定位，使元素定位在可见区域之外*/

19.定位有几种？区别是什么

position：relative 相对定位   它是参照它在页面中原来的位置进行移动的  
position：absolute绝对定位    相对于距离他最近的有定位的父元素进行移动的
position：fixed固定定位       它是相对于页面的位置进行移动的

  注意：只有添加了定位的元素才可以设置z-index属性，后面的值代表层级，没有px等单位。

20，请描述一下cookies，sessionStorage和localStorage的区别？

cookie是网站为了标示用户身份而储存在用户本地终端上的数据（通常经过加密），cookie数据始终在同源的http请求中携带（即使不需要），在浏览器和服务器间来回传递。

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

存储大小：

cookie数据大小不能超过4k

sessionStorage和localStorage虽然也有存储大小的限制，但是比cookie大得多，可以达到5M或者更大

有效时间：

localStorage 存储持久数据，浏览器关闭后数据不会丢失除非主动删除数据

sessionStorage 数据在当前浏览器窗口关闭后自动删除

cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

21.一个页面上两个div左右铺满整个浏览器，要保证左边的div一直为100px，右边的div跟随浏览器大小变化，请写出大概的css代码？

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1 {
            width: 100px;
            height: 200px;
            background-color: aquamarine;
            float: left;
        }
        .div2 {
            height: 200px;
            background-color: pink;
            margin-left: 100px;
        }
    </style>
</head>
<body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
</body>
</html>

 

22.前端如何优化网站性能？

1.减少http请求数量：在浏览器与服务器进行通信时，主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手，每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限（不同浏览器允许并发数），一旦 HTTP 请求数量达到一定数量，资源请求就存在等待状态，这是很致命的，因此减少 HTTP 的 请求数量可以很大程度上对网站性能进行优化。

2.可以通过精灵图，合并css文件和js文件，懒加载等方式来减少http请求：

css sprites国内俗称CSS精灵，这是将多张图片合并成一张图片达到减少HTTP请求的一种解决方案，可以通过CSS的background属性来访问图片内容。这种方案同时还可以减少图片总字节数。

现在前端有很多工程化打包工具，如：grunt、gulp、webpack等。为了减少 HTTP 请求数量，可以通过这些工具再发布前将多个CSS或者多个JS合并成一个文件。

lazyload俗称懒加载，可以控制网页上的内容在一开始无需加载，不需要发请求，等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。

3.控制资源文件加载优先级：浏览器在加载HTML内容时，是将HTML内容从上至下依次解析，解析到link或者script标签就会加载href或者src对应链接内容，为了第一时间展示页面给用户，就需要将CSS提前加载，不要受 JS 加载影响。

4.利用浏览器缓存

浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器重新请求该资源，直接在本地读取该资源。

5.减少dom操作

6.图标适用iconfont替代image标签

23.css3新属性

border-radius 圆角

border-shadow 盒子阴影

background-size 背景尺寸

text-shadow 文字阴影

text-overflow 文字隐藏的方式 裁剪/省略号

box-sizing

transform 变换 转换

animation 动画

transition 过渡动画

媒体查询 @media

24.px，em，rem的区别

• px像素

相对长度单位。像素px是相对于显示器屏幕分辨率而言的。特点：IE无法调整那些使用px作为单位的字体大小

• em是相对长度单位

相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px特点：em的值并不是固定的；em会继承父级元素的字体大小。

• rem

rem是CSS3新增的一个相对单位（root em，根em）

这个单位与em的区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

 25，display：inline-block什么时候出现间隙？解决办法有什么？

<style>
        .father .child {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="child">child1</div>
        <div class="child">child2</div>
    </div>

产出空隙的原因：display:inline-block是让元素在一行显示，但是这些元素在html里面是上下行排列的，所以中间有换行符，于是并排显示就有了换行符带来的空隙。

解决方法：

1.将html标签要display:inline-block 的元素写在一行。缺点：代码可读性差。

</head>
<body>
    <div class="father">
        <div class="child">child1</div> <div class="child">child2</div>
    </div>

2.给父元素设置font-size:0,给子元素设置需要的font-size值

缺点:是子元素如果里面有文字，文字会消失不见，所以又要给子元素设置font-size,增加了代码量。

<style>
     .father {
            font-size: 0;
        }
        .father .child {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            display: inline-block;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="child">child1</div>
        <div class="child">child2</div>
    </div>

 3.设置子元素的margin-left为负值，但是元素之间的间隙大小是根据上下文的字体大小确定的，而每个浏览器的换行空隙大小不同，所以这个方法不通用。

<style>
        .father .child {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            display: inline-block;
            margin-left: -5px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="child">child1</div>
        <div class="child">child2</div>
    </div>

4.设置父元素 display:table;word-spacing:-1em;目前这个方法可以完美解决，且兼容其他浏览器。

<style>
     .father {
            display: table;
            word-spacing: -1em
        }
        .father .child {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            display: inline-block;
      
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="child">child1</div>
        <div class="child">child2</div>
    </div>