web前端面试题：HTML、CSS篇
- HTML部分
- CSS部分
- 1、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
- 2、box-sizing属性？
- 3、CSS选择器有哪些？哪些属性可以继承？
- 4、CSS权重？
- 5、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？
- 6、display有哪些值？说明他们的作用?
- 7、display:none和visibility:hidden的区别？
- 8、CSS中 link 和@import 的区别是？
- 9、position:absolute和float属性的异同?
- 10、CSS Sprites优缺点
- 11、清除浮动的几种方式
- 12、CSS3有哪些新特性？
- 13、stylus、sass、less区别
- 14、less的一些优势
- 15、使用CSS预处理的优缺点分别是什么？
- 16、CSS优化/提高性能的方法有哪些?
- em，rem，px的区别？
HTML部分
1、Doctype作用，HTML5 为什么只需要写
html5不基于SGML,因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照他们应该的方式来运行）
而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
2、行内元素有哪些，块级元素有哪些，空(void)元素有那些
行内元素：a span i img input select b 等
块级元素：div ul ol li h1~h6 p table 等
空元素：br hr link 等
3、简述一下你对HTML语义化的理解
简单来说，就是合适的标签做合适的事情
1.有助于构架良好的HTML结构，有利于搜索引擎的建立索引、抓取，利于SEO
2.有利于不同设备的解析
3.有利于构建清晰的机构，有利于团队的开发、维护
4、常见的浏览器内核有哪些，介绍一下你对浏览器内核的理解
Trident内核：IE Gecko内核：NETSCAPE6及以上版本，火狐
Presto内核：Opera7及以上。[Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari，Chrome等。[Chrome的：Blink（WebKit的分支）]
浏览器内核又可以分成两部分：渲染引擎和JS引擎。 渲染引擎主要负责取得网页的内容、整理讯息、计算网页的显示方式等，JS引擎则是解析Javascript语言，执行javascript语言来实现网页的动态效果。
5、html5有哪些新特性
语义化标签: header footer nav section article aside 等
增强型表单：date(从一个日期选择器选择一个日期) email(包含 e-mail 地址的输入域) number(数值的输入域) range(一定范围内数字值的输入域) search(用于搜索域) tel(定义输入电话号码字段) 等
视频和音频：audio video
Canvas绘图 SVG绘图
地理定位：Geolocation
拖放API：drag
web worker：是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能
web storage: localStorage sessionStorage
WebSocket: HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议
6、cookie，sessionStorage 和 localStorage 的区别
7、src与href的区别
src
src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素
href
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加
那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式
CSS部分
1、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin
2、box-sizing属性？
用来控制元素的盒子模型的解析模式，默认为content-box
context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽
border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽
3、CSS选择器有哪些？哪些属性可以继承？
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
不可继承的样式：border, padding, margin, width, height
4、CSS权重？
1.!important，加载样式属性值后，权重值为10000
2.内联样式，如：style=""，权重值为1000
3.ID选择器，如：#content，权重值为100
类，伪类和属性选择器，如：content、:hover 权重值为10
4.标签选择器和伪元素选择器，如：div、p、:before 权重值为1
5.通用选择器(*)、子选择器(>)、相邻选择器(+)、同胞选择器(~)、权重值为0
5、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？
div
div{
border: 1px solid red;
margin: 0 auto;
height: 50px;
width: 50px;
}
浮动元素水平垂直居中
div{
border: 1px solid red;
float: left;
position: absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;
}
绝对定位的左右居中：
div{
border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: 0 auto;
left: 0;
right: 0;
}
6、display有哪些值？说明他们的作用?
inline（默认）–内联
none–隐藏
block–块显示
table–表格显示
list-item–项目列表
inline-block
7、display:none和visibility:hidden的区别？
display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。
visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。
8、CSS中 link 和@import 的区别是？
(1) link属于HTML标签，而@import是CSS提供的;
(2) 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
(3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
(4) link方式的样式的权重 高于@import的权重.
9、position:absolute和float属性的异同?
共同点：对内联元素设置float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高。
不同点：float仍会占据位置，position会覆盖文档流中的其他元素。
10、CSS Sprites优缺点
CSS Sprites优点：
1.减少HTTP请求数，极大提高页面加载速度；
2.增加图片信息重复度，提高压缩比，减少图片大小
3.更换风格方便
CSS Sprites缺点：
1.图片合并麻烦
2.维护麻烦，修改一个图片可能会重新布局整个图片样式
11、清除浮动的几种方式
1.添加额外标签，如
2.父元素设置 overflow：hidden
3.父元素设置 overflow：auto 属性
4.父元素也设置浮动
5.使用:after 伪元素
6.结尾处加标签，clear:both;
12、CSS3有哪些新特性？
1.CSS3实现圆角（border-radius），
2.阴影（box-shadow），
3.对文字加特效（text-shadow、），
4.线性渐变（gradient），
5.旋转（transform）transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
6.增加了更多的CSS选择器 多背景 rgba
7.在CSS3中唯一引入的伪元素是::selection.
8.媒体查询，多栏布局，border-image；
13、stylus、sass、less区别
均具有变量、混合、嵌套、继承、颜色混合五大基本特性
Sass和Less语法较为严谨，Less要求一定要使用大括号{ }，Sass和Stylus可以通过缩进表示层次与嵌套关系
Sass无全局变量的概念，Less和Stylus有类似于其他语言的作用于概念
Sass是基于Ruby语言的，而Less和Stylus可以基于NodeJS NPM下载相应库就进行编译
14、less的一些优势
1.结构清晰，便于扩展
2.可以方便的屏蔽浏览器私有语法差异
3.可以轻松实现多重继承
4.完全兼容CSS代码，可以方便的应用到老项目中。Less知识在CSS语法上做了扩展，所以老的CSS代码也可以与Less代码一同编译
15、使用CSS预处理的优缺点分别是什么？
优点：
提高CSS可维护性
易于编写嵌套选择器
引入变量，增添主题功能。可以在不同的项目中共享主题文件。
缺点：
需要预处理工具
重新编译的时间可能会很慢
16、CSS优化/提高性能的方法有哪些?
1.使用css预处理器(less/sass),
2.增加代码可复用性,方便项目的协作开发,可维护性.
3.css压缩与合并、Gzip压缩
em，rem，px的区别？
1.px像素单位-----相对长度单位，相对于显示屏分辨率。
2.em-------相对长度单位，相对于当前对象内文本的字体尺寸，会继承父级元素的字体大小。
3.rem-----rem是CSS3新增的一个相对访问，相对的是HTML根元素
扫一扫
1043
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
