CSS常见样式（二）

1.CSS有几种引入方式? link 和@import 有什么区别?

• 第一种：在head部分加入<link rel="stylesheet" type="text/css" href=""/>引入外部的CSS文件。这种方法可以说是现在占统治地位的引入方法。如同IE与浏览器。这也是最能体现CSS特点的方法，最能体现DIV+CSS中的内容与显示分离的思想，也最易改版维护，代码看起来也是最美观的一种。

• 第二种：在head部分加入:
  <style type="text/css"> div{margin: 0;padding: 0;border:1px red solid;} </style>
  这种方法的使用情况要少的多，最长见得就是访问量大的门户网站。或者访问量较大的企业网站的首页。与第一种方法比起来，优点突出，弊端也明显。优点：速度 快，所有的CSS控制都是针对本页面标签的，没有多余的ＣＳＳ命令；再者不用外链ＣＳＳ文件。直接在ＨＴＭＬ文档中读取样式。缺点就是改版麻烦些，单个页 面显得臃肿，ＣＳＳ不能被其他ＨＴＭＬ引用造成代码量相对较多，维护也麻烦些。

• 第三种：直接在页面的标签里加
  <div style="border:1px red solid;"></div>
  这种方法现在用的很少，它只能改变当前标签的样式，如果想要多个
  拥有相同的样式，你不得不重复地为每个添加相同的样式，如果想要修改一种样式，又不得不修改所有的 style 中的代码。很显然，这种方式引入的 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。但对于并且不常改动的地方，使用这种方法反而是很好的选择。

• 第四种：除了这三种常用的ＣＳＳ引入方式，还有一种很多人都没有见过的引入方式
  <style type="text/css"> @import url(my.css); </style>

link 和@import 的区别：

• link属于XHTML标签，而@import完全是CSS提供的一种方式。 - - link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
• 加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。
• 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
• 使用DOM控制样式时的差别 。当使用JavaScript控制DOM去改变样式的时候，只能使用link标签，因为@import不是DOM可以控制的。
• @import可以在CSS中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表。

2.解释下面代码的作用?为什么要加引号? 字体里\5b8b\4f53代表什么?

body{
  font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}

代码作用：

• 该段代码设置了body的font样式，字体大小为12px，行高是字体1.5倍的像素值，后面则是第一到第五字体，用逗号隔开，如果用户浏览第一字体没有，则查询第二字体有没有，以此类推，如果都没有则采用系统默认字体；

字体为什么要加引号：

• 因为采用中文或者英文字体有空格时，不加引号可能导致用户浏览器不能识别字体，产生乱码；

字体里的数字符号代表什么：

• 代表字体的Unicod码，Unicode码全球通用，用该码表示字体是最保险的。unicode编码‘\5b8b\4f53’ 表示宋体，需要加引号，使用unicode编码是因为网页或css编码是utf-8是 直接写成中文，浏览器有可能不能识别，所以写成中文的unicode编码就不会造成这种问题

3.text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中

text-align: center的作用是让行内或类行内元素（比如文本和连接）相对父元素居中对齐，作用在块级父容器上。

4.IE 盒模型和W3C盒模型有什么区别?

Paste_Image.png

区别在于width和height的算法不同，如下表：

Paste_Image.png

1、W3C的标准Box Model:

/*外盒尺寸计算（元素空间尺寸）*/ 
Element空间高度 = content height + padding + border + margin 
Element 空间宽度 = content width + padding + border + margin
 /*内盒尺寸计算（元素大小）*/ 
Element Height = content height + padding + border （Height为内容高度） 
Element Width = content width + padding + border （Width为内容宽度）

2、IE)传统下Box Model（IE6以下，不含IE6版本或“QuirksMode下IE5.5+”）:

/*外盒尺寸计算（元素空间尺寸）*/ 
Element空间高度 = content Height + margin (Height包含了元素内容宽度，边框宽度，内距宽度) 
Element空间宽度 = content Width + margin (Width包含了元素内容宽度、边框宽度、内距宽度)
 /*内盒尺寸计算（元素大小）*/ 
Element Height = content Height(Height包含了元素内容宽度，边框宽度，内距宽度) 
Element Width = content Width(Width包含了元素内容宽度、边框宽度、内距宽度)

5.*{ box-sizing: border-box;}的作用是什么？

让元素维持IE传统的Box Model（IE6以下版本），也就是说所有元素的内边距和边框不再会增加它的宽度。

6.line-height: 2和line-height: 200%有什么区别?

• line-height:2 是指行高是为文字大小的2倍
• line-height:200%是指行高是父元素文字大小的2倍

7.inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?

1.特性：既呈现inline的特性，不占据一整行，宽度由内容宽度决定，又呈现block的特性，可设置宽高，内外边距；

2、去除缝隙：真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，去除间隙方法：

• 元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就没有了。考虑到代码可读性，显然连成一行的写法是不可取的
• 将inline-block元素的父元素设置font-size:0;然后在给设置了inline-block的元素重新设置一个font-size。

3、顶端对齐：将设置了inline-block的元素加上 vertical-align: top。

8.让一个元素“看不见”有几种方式？有什么区别？

• opacity:0;看不见，占用位置，可以点击（各种电影网站常用方式）
• visibility:hidden;看不见，占用位置，无法点击。
• display:none;完全消失，不占用位置，无法点击。
• background-color:rgba(22,22,22,0):设置背景透明度；