**
1、html5为什么只需要写<!doctype html>?
**
html5不是基于sgml(标准通用标记语言),不需要对dtd文件进行引用,但是需要doctype来规范浏览器的行为,
否则浏览器将开启怪异模式,而html4.01基于sgml,需要引入dtd,才能告知浏览器文档使用的文档类型
2、行内元素有哪些?块级元素有哪些?空(void)元素有哪些?
**行内元素有**:a b span img input select strong(强调的语气)
**块级元素有**:div ul ol li dl dt dd h1 h2 h3 h4…p
知名的空元素:
<br> <hr> <img> <input> <link> <meta>
鲜为人知的是:
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
3、页面导入样式时,使用link和@import有什么区别?
两者都是外部引用CSS的方式,但是存在一定的区别:
区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。
区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
区别4:link支持使用Javascript控制DOM去改变样式;而@import不支持。
补充:@import最优写法
@import的写法一般有下列几种:
@import‘style.css’//Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import“style.css”//Windows IE4/ NS4, Macintosh IE4/NS4不识别
@import url(style.css) //Windows NS4, Macintosh NS4不识别
@import url(‘style.css’) //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import url(“style.css”) //Windows NS4, Macintosh NS4不识别
由上分析知道,@import url(style.css)和@import url(“style.css”)是最优的选择,兼容的浏览器最多。
从字节优化的角度来看@import url(style.css)最值得推荐。
4、常见的浏览器内核有哪些?
使用Trident内核的浏览器:IE、Maxthon、TT、The World等;
使用Gecko内核的浏览器:Netcape6及以上版本、FireFox、MozillaSuite/SeaMonkey;
使用Presto内核的浏览器:Opera7及以上版本;
使用Webkit内核的浏览器:Safari、Chrome。
5、margin和padding分别适合什么场景使用?
何时应当使用margin:
(1)需要在border外侧添加空白时,
(2)空白处不需要有背景(色)时,
(3)上下相连的两个盒子之间的空白需要相互抵消时,比如15px+20px的margin,将得到20px的空白(注意地方见第三点)。
何时应当使用padding
(1)需要在border内侧添加空白时(往往是文字与边框距离的设置),
(2)空白处需要背景(色)时,
(3)上下相连的两个盒子之间的空白希望等于两者之和时,比如15px+20px的padding,将得到35px的空白。
margin使用时应该注意的地方
margin在垂直方向上相邻的值相同时会发生叠加,水平方向上相邻的值会相加。margin取负值时,在垂直方向上,两个元素的边界仍然会重叠。但是,此时一个为正值,一个为负值,并不是取其中较大的值,而是用正边界减去负边界的绝对值,也就是说,把正的边界值和负的边界值相加。
6、什么是响应式设计?响应式设计的基本原理是什么?如何兼容较低版本的IE?
一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
优点:
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点:
兼容各种设备工作量大,效率低下
代码累赘,会出现隐藏无用的元素,加载时间加长
其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构,会出现用户混淆的情况
respond.js和css3-mediaqueries-js
7、在网页中的应该使用奇数还是偶数的字体?为什么呢?
偶数字号相对更容易和Web设计的其他部分构成比例关系
使用奇数号字体不好的地方是,文本段落无法对齐
8、请解释下为什么会出现浮动和什么时候需要清除浮动?清除浮动的方式?
a.添加新的元素 、应用clear:both;
b.父级定义overflow: auto(注意:是父级div也就是这里的div.outer) 一个对seo比较友好,另个hidden对seo不是太友好
在IE6中还需要触发hasLayout,例如zoom:1;
c.据说是最高大上的方法:after
**方法:(注意:作用于浮动元素的父亲)IE6-7不支持:after,
使用zoom:1触发hasLayout**
{zoom:1;} /*==for IE6/7 Maxthon2==*/
:after {clear:both;content:’.’;display:block;width: 0;height: 0;visibility:hidden;}
d.使用br标签和其自身的html属性,<br clear=”all”/> clear=”all | left | right | one” 属性
e.父元素也设置浮动
f.父元素设置display:table盒模型属性已经改变,由此造成的一系列问题,得不偿失,不推荐使用
9、display设置为inline-block时,li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?
行框的排列会受到中间空白(回车空格等等)的影响,这些空白也会被应用样式,占据空间,所以会有间隔
解决:设置ul的font-size为0,缺陷是必须重新在li中去设置字体大小
10、position的值relative和absolute的定位原点是什么?
Absolute,CSS中的写法是:position:absolute;他的意思是绝对定位,他是参照浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定。
Relative,CSS中的写法是:position:relative;他的意思是绝对相对定位,他是参照父级的原始点为原始点,无父级则以BODY的原始点为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。
11、display有哪些值?说明他们的作用?
block :块对象的默认值。用该值为对象之后添加新行
none :隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间
inline :内联对象的默认值。用该值将从对象中删除行
compact :分配对象为块对象或基于内容之上的内联对象
marker :指定内容在容器对象之前或之后。要使用此参数,对象必须和:after及:before伪元素一起使用
inline-table :将表格显示为无前后换行的内联对象或内联容器
list-item :将块对象指定为列表项目。并可以添加可选项目标志
run-in :分配对象为块对象或基于内容之上的内联对象
table :将对象作为块元素级的表格显示
12、如何居中div,如何居中一个浮动元素?如何让绝对定位的div居中?
a.margin:xpx auto;
b.确定容器的宽高,这里宽度是必须的,高度可以不设,设置外层的上外边距和左外边距分别是宽高的一半。
实现居中关键在于margin设置与position:relative.
.div {
width:500px ;
height:300px;
margin: -150px 0 0 -250px;
position:relative;
left:50%;
top:50%;
}
c.position:absolute;
top: 50%;
left: 50%;只能把div定位在以红色圈为起点的位置,加上margin:-100px 0px 0px -100
13、实现不使用border,画出1px高的线,在不同浏览器下的Quirksmode和CSSCompat模式下都能保持一致的效果?
<div style=”height:1px;overflow:hidden;background:red”></div>
14、iframe有哪些优缺点?
优点:
1.用来实现长连接,在Websocket不可用的时候作为一种替代,最开始由google发明。Comet:基于HTTP长连接的”服务器推”技术
2.跨域通信。JavaScript跨域总结与解决办法 。
3.历史记录管理,解决ajax化网站响应浏览器前进后退按钮的方案,在html5的history api不可用时作为一种替代。
4.纯前端的utf8和gbk编码互转。
缺点:
1、在网页中使用框架结构最大的弊病是搜索引擎的”蜘蛛”程序无法解读这种页面。
2、框架结构有时会让人感到迷惑,特别是在几个框架中都出现上下、左右滚动条的时候。这些滚动条除了会挤占已经非常有限的页面空间外,还会分散 访问者的注意力。访问者遇到这种网站往往会立刻转身离开。他们会想,既然你的主页如此混乱,那么网站的其他部分也许更不值得浏览。
3、链接导航问题。使用框架结构时,你必须保证正确设置所有的导航链接,如不然,会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架 内,这种情况下访问者便被陷住了,因为此时他没有其他地方可去。