总结了一下遇到的面试上的问题，希望能帮助到大家【歪脖树】
1.Doctype作用？严格模式与混杂模式如何区分？它们有何意义?
（1）<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。
（2）严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。
（3）在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
（4）DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
2.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
（1）块级元素。默认display属性是block。div ul ol li dl dt dd h1 h2 h3 h4…p。
（2）行内元素。默认display属性是inline。a b span img input select strong。
（3）空元素。功能性元素，标签可以不闭合。<br> <hr> <img> <input> <link> <meta>
3.介绍一下CSS的盒子模型？
（1）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 padding;--
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).
4.link和@import的区别是？
（1）<link>属于XHTML标签，而@import是CSS提供的;
（2）页面被加载的时，<link>会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
（3）import只在IE5以上才能识别，而<link>是XHTML标签，无兼容问题;
（4）<link>方式的样式的权重 高于@import的权重。
5.CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？
CSS 选择符：
1) id选择器(# myid)
2) 类选择器(.myclassname)
3) 标签选择器(div, h1, p)
4) 相邻选择器(h1 + p)
5) 子选择器(ul > li)
6) 后代选择器(li a)
7) 通配符选择器( * )
8) 属性选择器(a[rel = "external"])
9) 伪类选择器(a: hover, li:nth-child)
可继承的样式：
1) font-size
2) font-family
3) color
4) text-indent
不可继承的样式：
1) border
2) padding
3) margin
4) width
5) height
优先级算法：
1) 优先级就近原则，同权重情况下样式定义最近者为准;
2) 载入样式以最后载入的定位为准;
3) 3.!important > id > class > tag
4) important 比 内联优先级高，但内联比 id 要高
CSS3新增伪类举例：
1) p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
2) p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
3) p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
4) p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
5) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
6) :enabled :disabled 控制表单控件的禁用状态。
7) :checked 单选框或复选框被选中。
CSS3有哪些新特性？
1) CSS3实现圆角（border-radius），阴影（box-shadow），
2) 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
3) transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
4) 增加了更多的CSS选择器 多背景 rgba
5) 在CSS3中唯一引入的伪元素是 ::selection.
6) 媒体查询，多栏布局
7) border-image
6.HTML语义化的理解？
（1）用正确的标签做正确的事情！
（2）html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
（3）在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。
（4）搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
（5）使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
7.浏览器的内核分别是什么？
IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink。
8. iframe有那些缺点？
（1）iframe会阻塞主页面的Onload事件；
（2）iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
解决方法：使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以可以绕开以上两个问题。
9.用纯 CSS 创建一个三角形
.triangle{
width: 0;height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 120px solid red;
}
10.一个满屏”品”字布局 如何设计?
<div class="header"></div>
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
.header{height:200px;background:#e33;width:100%;}
.main{width:100%;height:200px;overflow:hidden;}
.main .left,.main .right{width:50%;height:200px;float:left;background:#a23;}
.main .right{background:#e11;}
扫一扫
209
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
