1.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
（1）、<!DOCTYPE> 声明位于文档中的最前面，处于<html> 标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。
前端面试性能优化（2）、严格模式的排版和JS 运作模式是以该浏览器支持的最高标准运行。
（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作
（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
其次是这样的意义各个浏览器的混杂模式，基本就是各个浏览器的私有模式，不相互兼容。所以，除非是为了兼容的问题，比如你不想修改很久很久以前做的IE ONLY的网页，否则刻意触发混杂模式没有任何意义。
2：行内元素有哪些？块级元素有哪些？CSS的盒模型？
（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span 默认display属性值为“inline”，是“行内”元素。
（2）行内元素有：a b span img input select strong（强调的语气）
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）知名的空元素：
<br> <hr> <img> <input> <link> <meta>
鲜为人知的是：
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
CSS的盒子模型两种: IE 盒子模型、标准W3C 盒子模型；IE 的content部分包含了border 和padding;
盒模型：内容(content)、填充(padding)、边界(margin)、边框(border).
二.行内元素与块级元素有什么不同？
不同：行内元素是一个一个挨着的，块级元素是占据一整行。
记住对行内元素
设置宽度width  无效。
设置高度height  无效，可以通过line-height来设置。
设置margin 只有左右margin有效，上下无效。
设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的，看图上效果就知道了
盒子模型
W3C组织建议把所有网页上的对像都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层。盒模型主要定义四个
区域：内容(content)、边框距(padding)、边界(border)和边距(margin)。对于初学者，经常会搞不清楚margin，background-color，background- image，padding，content，border之间的层次、关系和相互影响。这里提供一张盒模型的3D示意图，希望便于你的理解和记忆。
每个HTML元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。
盒模型的实际宽度
关于盒模型，还有以下几点需要注意：
对于块级元素（display:block），未浮动的垂直相邻元素的上边界和下边界会被压缩，例如：有上下2个元素，上元素的下边界为5px，下面元素的上边界为20px，则实际2个元素的间距为20px（2个边界值中较大的值）。如图所示。
注1. 块级元素（display：block）
每个块级元素都从一个新行开始，而且其后的元素也需另起一行开始，标题、段落、表格、层、body等都是块级元素。块级元素只能作为其他块级元素的子元素，而且需要一定的条件。
内联元素，例如<a>、<span>等，定义上下边界不会影响到行高（line-height），内联元素距离上一行元素的距离由行高决定，而不是填充或边界。
注2. 内联元素（display：inline）
内联元素不需要在新行内显示，而且也不强迫其后的元素换行，如a、em、span等都为内联元素。内联元素可以为任何其他元素的子元素。
·浮动元素（无论左或者右浮动）边界不压缩，且若浮动元素不声明宽度，则其宽度趋向于0，即压缩到其内容能承受的最小宽度。
·如果盒中没有内容，则即使定义了宽度和高度都为100%，实际上只占0%，因此不会被显示，此点在采取层布局的时候需特别注意。
·边界值可为负，其显示效果各浏览器可能不相同。
·填充值不可为负。
·边框默认的样式（border-style）为不显示（none）。
3.CSS引入的方式有哪些? link和@import的区别是?
本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。
1)link属于XHTML标签，而@import完全是CSS提供的一种方式。link标签除
了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属
性等，@import就只能加载CSS了。
2)加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link
引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完
再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是
闪烁），网速慢的时候还挺明显。
3)兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，
@import只有在IE5以上的才能识别，而link标签无此问题。
4)使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，
只能使用link标签，因为@import不是dom可以控制的。
5)link方式的样式的权重高于@import的权重。
注：
1，网友提出了另一种区别。
差别6：@import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表，如：
main.css
———————-
@import “sub1.css”;
@import “sub2.css”;
sub1.css
———————-
p {color:red;}
sub2.css
———————-
.myclass {color:blue}
这样更利于修改和扩展．
提示：这样做有一个缺点，会对网站服务器产生过多的HTTP请求，以前是一个文件，而现在却是两个或更多文件了，服务器的压力增大，浏览量大的网站还是谨慎使用。有兴趣的可以观察一下像新浪等网站的首页或栏目首页代码，他们总会把css或js 直接写在html 里，而不用外部文件。
4.CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？
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）
可继承：font-size font-family color, UL LI DL DD DT;
不可继承：border padding margin width height ;
优先级就近原则，样式定义最近者为准;
载入样式以最后载入的定位为准;
优先级为:
!important > id > class > tag
important 比内联优先级高
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，单选框或复选框被选中。
如何居中div，如何居中一个浮动元素?
1)给div设置一个宽度，然后添加margin:0 auto属性
div{
width:200px;
margin:0 auto;
}
2)居中一个浮动元素( 确定容器的宽高宽500 高300 的层，设置层的外边距)
.div {

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。