html+css面试题
HTML
1. <img>标签上title属性与alt属性的区别是什么？
title:当光标移动到图片上，显示title属性
alt:图片不显示，显示alt属性
2. 分别写出以下几个HTML标签：文字加粗、下标、居中、字体
文字加粗：b strong
下标：sub
居中：center
字体：font
3. 请说说你对标签语义化的理解？
让合适的标签作合适性，利于搜索引擎搜索
4. Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
<!DOCTYPE> 标签位于文档的开头，用来说明当前文档的类型。
严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。（渐进增强
）
混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。（优雅降级）
5.你知道多少种Doctype文档类型？
过渡的（Transitional）、严格的（Strict）和框架的（Frameset）
6. HTML与XHTML——二者有什么区别
a.XHTML元素必须被正确地嵌套。
b.XHTML元素必须被关闭。
c.标签名必须用小写字母。
d.XHTML文档必须拥有根元素。
7. iframe的优缺点？
优点：
a.解决加载缓慢的第三方内容如图标和广告等的加载问题
b.iframe无刷新文件上传
c.iframe跨域通信
缺点：
a.iframe会阻塞主页面的Onload事件
b.无法被一些搜索引擎索引到
c.页面会增加服务器的http请求
d.会产生很多页面，不容易管理。
8. 请阐述table的缺点
a.太深的嵌套，比如table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接
的损失就是大大增加了冗余代码量。
b.灵活性差，比如要将tr设置border等属性，是不行的，得通过td
c.代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱
d.混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺
序混乱。
e.不够语义
9. 简述一下src与href的区别
src用于替换当前元素；href用于在当前文档和引用资源之间确立联系。
CSS
1. 谈谈你对CSS布局的理解
常见的布局方式：固定布局、流式布局、弹性布局、浮动布局、定位布局、margin和padding。
2. 请列举几种可以清除浮动的方法（至少两种）
1、给父元素加overflow：hidden
2、给浮动元素加clear：left clear:right clear:both
3、父元素加clearfix::after{content:‘’;display:block;clear:both}
4、给父元素加
clearfix::after;clearfix::before{content:‘’;display:table;clear:both}
3. 请列举几种隐藏元素的方法
1、display:none; 2、opacity:0；3、visibility:hidden；
4. 如何让一段文本中的所有英文单词的首字母大写
text-transform:capitalize; 首字母大写
5. 请简述CSS样式表继承
CSS样式表继承指的是，特定的CSS属性向下传递到子孙元素。会被继承下去的属性如下：
文本相关：font-family，font-size，font-style，font-variant，font-weight，font，letter-spacing，line-height，color，text-…
列表相关：list-style-image，list-style-position，list-style-type，list-style
6. 请简述CSS的选择器
基本选择器：类名选择器、id选择器、标签选择器、多类名选择器、通配符选择器
复杂选择器：子代选择器、后代选择器、交集选择器、并集选择器
伪类选择器：a:link、a:hover、a:visite、a:active
7. CSS伪类与CSS伪对象的区别
根本区别在于：它们是否创造了新的元素（抽象）
伪类：一开始用来表示一些元素的动态状态，随后CSS2标准扩展了其概念范围，使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类
伪对象：代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中
8. 请简述CSS的权重规则
!Important>style>id选择器>类名选择器>标签选择器>通配符选择器
元素本身的样式>继承的样式
继承或者*的贡献值0,0,0,0
每个标签的贡献值0,0,0,1
每个类的贡献值0,0,1,0
每个id的贡献值0,1,0,0
每个行内样式的贡献值1,0,0,0
每个!important贡献值重要的无穷大
9. 请写出多种等高布局
a.假等高列：使用背景图片，在列的父元素上使用这个背景图进行Y轴的铺放，
从而实现一种等高列的假像
b.给容器div使用单独的背景色（固定布局）（流体布局）：用元素中的最大
高度撑大其他的容器高度
c.创建带边框的两列等高布局：用border-left来做，只能使用两列。
d.使用正padding和负margin对冲实现多列布局方法：在所有列中使用正的上、
下padding和负的上、下margin，并在所有列外面加上一个容器，设置
overflow:hiden把溢出背景切掉
e.使用边框和定位模拟列等高：但不能使用在多列
f.模仿表格布局等高列效果：兼容性不好，在ie6-7无法正常运行
10. 在CSS样式中常使用px、em，各有什么优劣，在表现上有什么区别？
px是相对长度单位，相对于显示器屏幕分辨率而言的。
em是相对长度单位，相对于当前对象内文本的字体尺寸。
Rem是相对长度单位，相对于根元素文本的字体尺寸
11. CSS中 link 和@import 的区别是什么？
a.link属于HTML标签，而@import是CSS提供的，且只能加载CSS
b.页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加
载完再加载
c.import只在IE5以上才能识别，而link是HTML标签，无兼容问题
d.link方式的样式的权重高于@import的权重
e.当使用Javascript控制DOM去改变样式的时候，只能使用link方式，因
为@import眼里只有CSS，不是DOM可以控制
12. position的absolute与fixed共同点与不同点
absolute和fixed脱离标准流，不占位置
absolute: 父元素没有定位，元素相对于视口定位；父元素定位，元素相对于父元素定位。
fixed:相对于浏览器窗口定位
13. position的值， relative和absolute分别是相对于谁进行定位的？
relative：相对于元素本身定位
absolute：父元素没有定位，元素相对于视口定位；父元素定位，元素相对于父元素定位。
14. CSS3有哪些新特性？
CSS3实现圆角（border-radius），阴影（box-shadow），对文字加特效（text-shadow），线性渐变（gradient），变形（transform）
增加了更多的CSS选择器多背景rgba，在CSS3中唯一引入的伪元素是::selection，媒体查询，多栏布局
15. 为什么要初始化CSS样式？
浏览器存在兼容问题
16. 解释下 CSS sprites原理，优缺点
将背景图片放到一张图上，利用background-image、background-repeat，，background-position等样式对所需图片进行定位
17. 解释下浮动和它的工作原理？
浮动的元素会脱离标准流，移动到设置好的位置上
浮动元素碰到包含它的边框或者浮动元素的边框停留。
18. 浮动元素引起的问题
a.父元素的高度无法被撑开，影响与父元素同级的元素
b.与浮动元素同级的非浮动元素会跟随其后
c.若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显
示的结构
19. 什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？（未学）
如果使用import方法对CSS进行导入，会导致某些页面在Windows下的IE出现一些奇怪的现象：
以无样式显示页面内容的瞬间闪烁，这种现象称之为文档样式短暂失效(FlashofUnstyledContent)，简称为FOUC。
原理：当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。
解决方法：使用LINK标签将样式表放在文档HEAD中。
20 :link、:visited、:hover、:active的执行顺序是怎么样的？
:link：未访问链接
:visited：已访问的链接
:hover：鼠标移动到链接上
:active：鼠标选定链接
21 经常遇到的浏览器兼容性有哪些？如何解决？
a.浏览器默认的margin和padding不同
b.IE6双边距bug
c.在ie6，ie7中元素高度超出自己设置高度。原因是IE8以前的浏览器中会给
元素设置默认的行高的高度导致的
d.min-height在IE6下不起作用
e.透明性IE用filter:Alpha(Opacity=60)，而其他主流浏览器用opacity:0.6
f.input边框问题，去掉input边框一般用border:none;就可以，但由于IE6在解
析input样式时的BUG(优先级问题)，在IE6下无效
22 有哪项方式可以对一个DOM设置它的CSS样式？
1、 行内样式
2、 内联样式
3、 外联样式
23 什么是外边距重叠？重叠的结果是什么？
外边距重叠有两种情况：1、两个相邻块元素，一个设置下外边距，一个设置上外边距，外边距发生重叠，它的值为两者的最大值；2、当父块状元素没有边框和上内边距时，父块状元素与子块状元素的上外边距发生合并，值为两者上外边距的最大值
24 rgba()和opacity的透明效果有什么不同？
opacity作用于元素，以及元素内的所有内容的透明度，rgba()只作用于元素
的颜色或其背景色。
