前端面试题整理—HTML/CSS篇
1、简述一下你对HTML语义化的理解
1）用正确的标签做正确的事情
2）html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析
3）即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的
4）搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO
5）使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解
2、Doctype作用？标准模式与兼容模式之间区别？
<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html>标签之前，告知浏览器的解析器用什么文档标准解析这个文档
DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现
标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行
在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器以防止站点无法工作
3、什么是盒模型？你是怎么理解的
简单的说页面是由若干个盒模型（BOX）堆砌起来的，可以说每个HTML元素就是一个盒模型
盒模型由外到内包括边距(margin)、边框（border）、填充(padding)、内容(content)
盒子模型有两种分别是W3C标准模型和IE模型
不同之处：
标准模型宽高是指content，不包括padding和border
IE模型的宽高是指content+padding+border的总宽高
4、谈谈对BFC的理解
BFC：块格式化上下文(Block Formatting Context)
BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品
BFC的特性：
1）bfc 是一个独立的容器，容器内子元素不会影响容器外的元素
2）bfc的区域不会与float的元素区域重叠
3）计算bfc的高度时，浮动元素也参与计算
4）垂直方向上的距离由margin决定
5）内部的Box会在垂直方向上一个接一个的放置
以下条件会形成BFC：
1）浮动元素 float:left | right | inherit（none除外）
2）position:absolute 或 fixed 定位
3）display:inline-block | inline-flex | table-cell
4）overflow:hidden | auto | scroll (visible除外)
5、CSS选择符有哪些？哪些属性可以继承？
id选择器（ # myid）
类选择器（.myclassname）
标签选择器（div, h1, p）
相邻选择器（h1 + p）
子选择器（ul > li）
后代选择器（li a）
通配符选择器（ * ）
属性选择器（a[rel = "external"]）
伪类选择器（a:hover, li:nth-child）
可继承的样式： font-size font-family color, ul li dl dt dd
不可继承的样式：border padding margin width height
6、CSS优先级算法如何计算？
优先级就近原则，同权重情况下样式定义最近者为准
载入样式以最后载入的定位为准
优先级为: !important > id > class > tag important 比 内联优先级高
7、你理解的伪类与伪元素
伪类：用于向某些选择器添加特殊的效果。比如span:first-child{}
伪元素：用于将特殊的效果添加到某些选择器。比如span:before{}
伪类只要不是互斥可以叠加使用
伪元素在一个选择器中只能出现一次，并且只能出现在末尾
伪类与伪元素优先级分别与类、标签优先级相同
它们的本质区别：是否抽象创造了新元素
8、display有哪些值？box-sizing 常用的属性有哪些？说明他们的作用
block 像块类型元素一样显示。
none 缺省值。像行内元素类型一样显示。
inline-block 像行内元素一样显示，但其内容像块类型元素一样显示。
list-item 像块类型元素一样显示，并添加样式列表标记。
table 此元素会作为块级表格来显示
inherit 规定应该从父元素继承 display 属性的值
box-sizing: content-box; // 默认的标准(W3C)盒模型元素效果
box-sizing: border-box; // 触发怪异(IE)盒模型元素的效果
box-sizing: inherit; // 继承父元素 box-sizing 属性的值
9、什么是外边距重叠？ 重叠的结果是什么？
外边距重叠就是 margin-collapse
相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。 这种合并外边距的方式被称为折叠
折叠结果遵循下列计算规则：
1）两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值
2）两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值
3）两个外边距一正一负时，折叠结果是两者的相加的和
10、请列举几种隐藏元素的方法
1）display: none; 元素会变得不可见，并且不会再占用文档的空间
2）visibility: hidden; 只是简单的隐藏某个元素，但是元素占用的空间还存在
3）opacity: 0; 设置0可以使一个元素完全透明
4）position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外
5）transform: scale(0); 将一个元素设置为缩放无限小，元素不可见 原来位置将被保留
11、你对line-height是如何理解的？
line-height 指一行字的高度，包含了字间距，实际上是下一行基线到上一行基线距离
一个容器没有设置高度，那么撑开容器高度的是 line-height 而不是容器内的文字内容
把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中
line-height和height都能撑开一个高度，height会触发 haslayout，而line-height不会
12、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
行内元素有：a b span img input select strong
块级元素有：div ul ol li dl dt dd h1-h6 p
常见的空元素: <br> <hr> <img> <input> <link> <meta>
13、position有哪些值，他们各自的区别
absolute：生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位
relative：生成相对定位的元素，相对于其正常位置进行定位
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位（固定定位）
static：默认值,无定位,元素出现在正常的流中（忽略top,bottom,left,right z-index）
14、HTML5有哪些新特性，新技术，如何区分HTML和HTML5？
语意化更好的内容元素。比如header、footer、nav、section、article
用于媒介回放的 video 和 audio 元素
绘画 canvas
拖放Drag
表单控件，calendar、date、time、email、url、search
存储功能localStorage和sessionStorage
localStorage 长期存储数据，浏览器关闭后数据不丢失
sessionStorage的数据在浏览器关闭后自动删除
新的技术webworker, websocket（通讯协议）, Geolocation（地理定位）
区分HTML和HTML5:
DOCTYPE声明上不同
结构语义上不同
添加了新的功能媒体标记标签，如audio、video
15、SVG 与 Canvas两者间的区别
SVG 是一种使用 XML 描述 2D 图形的语言
Canvas 通过 JavaScript 来绘制 2D 图形
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的，在SVG 中，每个被绘制的图形均被视为对象
如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形
Canvas 是逐像素进行渲染的
在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注
如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象
16、为什么要初始化CSS样式
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的
如果没对CSS初始化往往会出现浏览器之间的页面显示差异
可以使用 reset.css 或 Normalize.css 做 CSS 初始化
17、rgba() 和 opacity 的透明效果有什么不同？
opacity 作用于元素以及元素内的所有内容（包括文字）的透明度
rgba() 只作用于元素自身的颜色或其背景色，子元素不会继承透明效果
18、请描述一下 cookies，sessionStorage 和 localStorage 的区别
cookie是网站为了标示用户身份而储存在用户本地终端上的数据（一般加密）
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
存储大小：
cookie数据大小不能超过4k
sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
有效时间：
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
sessionStorage 数据在当前浏览器窗口关闭后自动删除
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
19、浏览器是怎么对HTML5的离线储存资源进行管理和加载的？
1）在线的情况下，浏览器发现 html 标签有 manifest 属性，它会请求 manifest 文件
2）如果是第一次访问app，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储
3）如果已经访问过app且资源已经离线存储了，浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作。如果文件改变了，那么就会重新下载文件中的资源并进行离线存储
4）离线的情况下，浏览器就直接使用离线存储的资源
20、页面导入样式时，使用 link 和 @import 有什么区别？
link 属于HTML标签，除了加载CSS外，还能用于定 RSS等；@import 只能用于加载CSS
页面加载的时，link 会同时被加载，而 @import 引用的 CSS 会等到页面被加载完再加载
@import 只在 IE5 以上才能被识别，而 link 是HTML标签，无兼容问题
21、列举几种清除浮动的方法
1)给父级使用:after 伪元素
2）末尾处添加空div标签clear:both
3）父元素设置 overflow：hidden; （必须定义width或zoom:1）
4）父元素也设置浮动
5）结尾处加br标签clear:both
22、什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
响应式设计就是网站能够兼容多个终端（包括PC端，手机平板终端），而不是为每个终端做一个特定的版本
基本原理是利用CSS3媒体查询，为不同尺寸的设备适配不同样式
对于低版本的IE，可采用JS获取屏幕宽度，然后通过resize方法来实现兼容
23、水平居中、垂直居中的方法有哪些？
水平居中：
1）inline-block实现水平居中（text-align:center;）
2）margin和width实现水平居中
3）绝对定位实现水平居中
4）使用flex实现水平居中
5）使用栅格布局grid实现水平居中
垂直居中：
1）新增 inline-block 兄弟元素，设置 vertical-align
2）绝对定位配合 transform 位移
3）使用flex弹性盒子display:flex
4）未知高度的块级子元素，采用table-cell配合vertical-align
5）已知高度的块级子元素，采用绝对定位和负边距
6）通过css3的translate变形实现
24、你理解的flex弹性盒子布局
Flexbox用于不同尺寸屏幕中创建可自动扩展和收缩布局
任何一个容器都可以指定为Flex布局
使用弹性布局可以有效的分配一个容器的空间
即使我们的容器元素尺寸改变，它内部的元素也可以调整它的尺寸来适应空间
设置了flex布局后，子元素的float、clear和vertical-align属性就会失效
25、阐述px与em、rem的区别，以及你知道的其他css单位
px就是pixel像素的缩写，相对长度单位。常用于PC端的字体单位
em相对于当前父元素的font-size（并不是固定的）
rem相对于HTML根元素的font
其他css单位：
%百分比，一般来说就是相对于父元素
vw是相对视口（viewport）的宽度而定的，长度等于视口宽度的1/100
vh是相对视口（viewport）的高度而定的，长度等于视口高度的1/100
vm css3新单位，相对于视口的宽度或高度中较小的那个
26、实现左边固定宽度，右边自适应（不限于一种方法）
1）浮动布局（左侧固定宽度并且左浮动，右侧使用margin-left）
2）使用定位（左侧固定宽度并且绝对定位，右侧使用margin-left）
3）overflow（左侧固定宽并且左浮动，右侧加overflow：hidden）
4）flex布局（父级元素设置display:flex，左侧设置固定宽，右侧flex:1）
27、使用css实现一个持续的动画
.animat{
width:20px;
height:20px;
background:red;
position:relative;
animation:mymove 3s infinite;
}
@keyframes mymove{
from{left:0px;}
to{left:200px;}
}28、css实现三角形
.triangle{
width:0;
height:0;
border-width:20px;
border-style:solid;
border-color:transparent transparent red transparent;
}29、移动端开发中有哪些常用的布局？
百分比流式布局
flex布局
媒体查询+rem布局
固定宽度做法
30、什么是圣杯布局和双飞翼布局，并说下实现原理
圣杯布局：
三列布局；中间主体内容前置，且宽度自适应；两边内容定宽
好处：重要的内容放在文档流前面可以优先渲染
原理：利用相对定位、浮动、负边距布局，而不添加额外标签
双飞翼布局：
双飞翼布局：对圣杯布局（使用相对定位对以后布局有局限性）的改进，消除相对定位
原理：主体元素上设置左右边距，预留两翼位置。左右两栏使用浮动和负边距归位，消除相对定位
31、align-content与align-items的区别？
align-content:center对单行是没有效果的
而align-items:center不管是对单行还是多行都有效果
我们日常开发中用的比较多的就是align-items
32、列举去除inline-block出现间距的几种方法
1）给父级font-size：0
2）使用margin负值
3）使用letter-spacing
4）使用word-spacing
5）移除空格
33、title与h1的区别、b与strong的区别、i与em的区别？
title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取有很大的影响
b是一个实体标签，展示强调内容。strong是标明重点内容，有语气加强的含义
i内容展示为斜体，em表示强调的文本
34、<script>、<script defer>、<script async>三者之间区别
没有defer或async属性，浏览器会立即加载并执行相应的脚本
有了async属性，表示后续文档的加载和渲染与js脚本的加载和执行是并行进行的，即异步执行
有了defer属性，加载后续文档的过程和js脚本的加载是并行进行的
（此时仅加载不执行）
defer和async在网络加载过程是一致的，都是异步执行
两者的区别在于脚本加载完成之后何时执行
如果存在多个有defer属性的脚本，那么它们是按照加载顺序执行脚本的
对于async，它的加载和执行是紧挨的，无论声明顺序如何，只要加载完成立刻执行
35、data-的用法，以及他的优势
data-代表自定义属性，可以在所有的 HTML 元素中嵌入数据
自定义的数据可以让页面拥有更好的交互体验
属性名不要包含大写字母，在 data- 后必须至少有一个字符
该属性可以是任何字符串
自定义属性前缀 "data-" 会被客户端忽略
36、如何实现浏览器内多个标签页之间的通信?
WebSocket、SharedWorker
也可以调用localstorge、cookies等本地存储方式
37、实现不使用border画出1px高的线
注：在不同浏览器的标准模式与怪异模式下都能保持一致的效果
<div ></div>
38、怎么让Chrome支持小于12px 的文字
.shrink{
-webkit-transform:scale(0.8);
-o-transform:scale(1);
display:inline-block;
}39、一个满屏 品 字布局 如何设计?
上面的div宽100%
下面的两个div分别宽50%
然后用float或者inline使其不换行即可
40、经常遇到的浏览器的兼容性有哪些？解决方法是什么？
1）PNG24位的图片在ie6浏览器上出现背景，解决方案是做成PNG8
2）浏览器默认的margin和padding不同。解决方案：*{margin:0;padding:0;}
3）Chrome中文界面下默认会将小于12px的文本强制按照12px显示，可通过加入CSS属性-webkit-text-size-adjust:none解决
4）IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义的属性
在FireFox下，只能使用getAttribute()获取自定义属性；解决方法：统一通过getAttribute()获取自定义属性
5）IE下，even对象有x,y属性，但是没有pageX,pageY属性
在Firefox下，even对象有pageX,pageY属性，但是没有x,y属性
解决方法：(条件注释)缺点是在IE浏览器下可能会增加额外的HTTP请求数
41、less如何定义一个函数，比如圆角
//定义圆角
@radius
.round(@radius:5px){
border-radius:@radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
.round7{
.round(7px);
}42、如何平移放大一个元素
transform:translateX(100px) transform:scale(2)
43、CSS中动画实现的方式有几种
transition、keyframes(animation)
44、你知道的CSS预处理器，以及预处理器作用
less、sass、Stylus
作用：
帮助更好地组织CSS代码
提高代码复用率
提升可维护性
45、如何解决CSS模块化
less sass 等CSS预处理器
webpack处理CSS(css-loader+style-loader)
PostCSS插件(postCSS-import/precss等)
46、li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
浏览器的默认行为会把inline元素间的空白字符渲染成一个空格，空格会占用一个字符的宽度
解决方案：给父级font-sieze设置为0。或者采用letter-spacing方式
47、描述一下你对渐进增强和优雅降级的理解
渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
.transition{
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
.transition{
transition: all .5s;
-o-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
} 48、解释css sprites，如何使用
css精灵又称雪碧图
将多个小图片整个到一张大的背景图上，再利用repeat、position进行精准操作
雪碧图减轻了服务器的请求次数，提高了页面性能
49、针对移动浏览器端开发页面，不期望用户放大屏幕，且要求“视口（viewport）”宽度等于屏幕宽度，视口高度等于设备高度，如何设置？
<meta name = "viewport" content = "width=device-width,initial-scale = 1.0,maximum-scale = 1.0">
50、简述几个css hack
(1) 图片间隙
在div中插入图片，图片会将div下方撑大3px。hack1：将<div>与<img>写在同一行。hack2：给<img>添加display：block；
dt li 中的图片间隙。hack：给<img>添加display：block；
(2) 默认高度，IE6以下版本中，部分块元素，拥有默认高度（低于18px）
hack1：给元素添加：font-size：0；
hack2：声明：overflow：hidden；
表单行高不一致
hack1：给表单添加声明：float：left；height： ；border： 0；
鼠标指针
hack：若统一某一元素鼠标指针为手型：cursor：pointer；
当li内的a转化块元素时，给a设置float，IE里面会出现阶梯状
hack1：给a加display：inline-block；
hack2：给li加float：left；
- 上一篇 »经典完整java面试题大全
- 下一篇 »php笔试面试题大全
