前端攻城狮学习笔记六：常见前端面试题之HTML/CSS部分（一）

Doctype是什么？如何触发严格模式与混杂模式模式？区分它们有何意义？

　　Doctype是document type（文档类型）的简写，是用来说明所用的XHTML或HTML是什么版本的。XHTML1.0 提供了三种DTD声明可供选择，分别是：

　　1、过渡的(Transitional，也叫混杂模式)：要求比较宽松，允许继续使用HTML4.01的标识，完整声明为

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tranisitional.dtd">

　　2、严格的(Strict)：要求严格的DTD，不能使用任何表现层的标识和属性，完整声明为

<!DOCTYPE html PUBLIC "-W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

　　3、框架的(Frameset)：专门针对框架页面设计使用的DTD，如果页面中包含有框架，可以采用DTD，完整声明为

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

　　定义成相应的声明就可以触发相应的模式。

　　区分的意义是为了最终能达到数据与表现相分离的目地。

行内元素和块级元素各有哪些？

　　行内元素会再一条直线上，是在同一行的。如我是行内元素span 我是行内元素a

　　块级元素会各占一行。如

我是块级元素div

我是块级元素p

　　行内元素主要有：<span>、<a>、<b>、<img>、<br>、<button>、<strong>、<textarea>、<select>

　　块级元素主要有：<div>、<ul>、<li>、<p>、<fieldset>、<form>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<hr>、<iframe>、<ol>、<pre>、<table>、<tr>、<td>

　　行内元素可以通过display:block转为块级元素。另外块级元素的margin和padding都正常，行内元素左右maring和左右padding正常，上下不识别，也就是说不能通过margin-top和padding-top来改变行高。

CSS的盒模型？

　　CSS盒模型：网页设计中的每个元素都是长方形的盒子，如下图所示

　　Margin 比较特别，它不会影响盒子本身的大小，但是它会影响和盒子有关的其他内容。盒子本身的大小是这样计算的：

　　width(即MSIE中的offsetWidth)：width + padding-left + padding-right + border-left + border-right

　　height(即MSIE中的offsetHeight)：height + padding-top + padding-bottom + border-top + border-bottom

CSS引入的方式有哪些?

　　CSS与HTML文档结合的4中方法：
　　1、使用<link>元素链接到外部的样式文件
　　2、在<head>元素中使用"style"元素来指定
　　3、使用CSS "@import"标记来导入样式表单
　　4、在<body>内部的元素中使用"style"属性来定义样式

　　Demo:

<html>
<head>
      <title>css demo</title>
      <link rel=stylesheet type="text/css" href="css/name.css" title="cool">
      <style type="text/css">
            @import url(css/name2.css);
            h1 {color:red}
      </style>
</head>
<body>
      <h1>CSS demo</h1>
      <p style="color:blue">Test</p>
</body>
</html>

link和@import的区别是?

　　本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。

　　1、老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。

　　2、加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。

　　3、兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。

　　4、使用dom控制样式时的差别。当使用 javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

CSS选择符有哪些？

　　CSS选择符主要有以下10类：

　　1、通配选择符：*{margin:0px;}

　　2、类型选择符：a{text-decoration:none;}

　　3、属性选择符：input[type="button"]{padding:5px;}

　　4、包含选择符：div.code a{text-decoration:none;}

　　5、子对象选择符：ul.test>li{font-size:14px;}

　　6、ID选择符：#test {color:red;}

　　7、类选择符：.test{color:red;}

　　8、选择符分组：body,ul,li{margin:0px;}

　　9、伪类及伪对象选择符：div:first-letter{font-size:16px;}、a.test:hover{text-decoration:underline;}

　　10、相邻选择符：li+li{font-weight:bold;}

哪些属性可以继承？

　　CSS可以继承的属性有：

　　1、文字相关：font-family、font-size、font-style、font-variant、font-weight、font、letter-spacing、line-height、text-align、text-indent、text-transform、word-spacing

　　2、列表相关：list-style-image、list-style-position、list-style-type、list-style

　　3、颜色相关:color

　　4、透明度：opacity(opacity的继承有问题，子元素会继承祖元素的opacity，但是无法更改。)

　　另外，font-size继承的是父元素的大小，而不是比例。line-height当父元素是百分比或px值的时候，子元素跟父元素相同，当父元素是normal或数字的时候，子元素的line-height是子元素的字体大小乘以数字。

　　关于继承性参考了博客：css 继承的一点总结

优先级算法如何计算？

　　重要性和来源的优先级排序从低到高是：

　　1、浏览器默认样式

　　2、用户在浏览器中定义的普通样式（normal规则，不带important规则）

　　3、开发人员定义的普通样式（ normal规则，不带important规则）

　　4、开发人员定义特殊样式（带important规则）

　　5、用户在浏览器中定义特殊样式（带important规则）

　　另外还有一些原则：

　　1、相同的样式在CSS规则后添加了!important的优先于没有添加的。

　　2、CSS规则在文档中出现的顺序后面定义的的优先于前面定义的。

　　3、内联样式优先于用link引入的样式和页面上<style>里的样式。

　　常见的用以上规则就可以确定了，如果以上规则还不能区分，请参考这里：http://www.w3.org/TR/CSS21/cascade.html#specificity

内联和important哪个优先级高？

　　important高，DEMO：

<style type="text/css">
        .test{
                padding:10px;
                border-radius:5px;
                border:1px solid red!important;
        }
</style>
...
<div class="test" style="border:1px solid blue;">Test</div>