CSS常见样式和属性

1.块级元素和行内元素分别有哪些？它们的区别？
块级元素有：div h1 h2 h3 h4 h5 h6 p hr form ul dl ol pre table li dd dt tr td th等；行内元素有：em strong span a br img button input label select textarea code script等。区别：块级元素可以包含行内元素和块级元素。行内元素只能包含文本和行内元素；块级元素占据一整行空间，行内元素占据自身宽度空间；块级元素可以直接设置看宽度和高度，行内元素不能设置宽高；对块级元素设置上下左右的margin和padding都生效，而对行内元素设置上下的margin和
padding不生效，左右生效。
2.什么是 CSS 继承? 哪些属性能继承，哪些不能？
CSS 继承是指为父元素设置样式后子元素也会具有这种样式。
常见的不可继承的属性有：display、文本属性（如vertical-align：垂直文本对齐、text-shadow：文本阴影效果）、盒子模型的属性（如width、height、border、margin、padding）、背景属性（如background、background-color）、定位属性（如float、clear、position）等；
常见的可以继承的属性有：字体系列属性（如font、font-family、font-size）、文本系列属性（如text-indent、text-align）、元素可见性visibility、表格布局属性（如caption-side、border-collapse）等；
内联元素可以继承的属性：1.字体系列属性 2.除text-indent、text-align之外的文本系列属性；
块级元素可以继承的属性：text-indent、text-align

3.如何让块级元素水平居中？如何让行内元素水平居中?
块级元素居中设置其margin: 0, auto;（上下的margin也可以为其他任意值）行内元素居中text-align : center;
4.用 CSS 实现一个三角形
http://home.jscode.me/uploads/default/original/2X/2/2ddf8e88bc919070eba804f8cbea000202a7722a.PNG
5.单行文本溢出加 ...如何实现?

white-space: nowrap; /*使文本不折行*/ 
overflow: hidden; /*溢出部分隐藏*/ 
text-overflow: ellipsis; /*溢出部分加...*/

6.px, em, rem 有什么区别?
px：固定单位em: 相对单位，相对于父元素字体大小rem: 相对单位，相对于根元素(html)字体大小
7.下面代码的作用?为什么要加引号? 字体里\5b8b\4f53代表什么?

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

这段代码是给body里面的全部元素设置大小12px，行高1.5倍，后面的内容是设置字体。
字体的名字中间有空格就需要加引号使它成为一个整体，否则浏览器无法识别。
\5b8b\4f53是“宋体”的Unicode编码。
为同一个元素设置多种字体的意义是：一旦前面的字体不可用，浏览器就会按顺序找到后面的字体代替。如果这些字体都找不到就会使用浏览器的默认字体。

8.text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中?
text-align: center是居中对齐方式，作用在块级元素上，可以使其内部的行内元素和inline-block元素水平居中。

9.IE 盒模型和W3C盒模型有什么区别?
IE 盒模型和W3C 盒模型都包括margin、border、padding、content。
IE 盒模型的width和height的值等于 border + padding + content 的总和；
W3C盒模型的width和height的值等于content自己的宽高值。

10.*{ box-sizing: border-box;}的作用是什么？
CSS 3新样式：使用IE盒模型。

11.line-height: 2和line-height: 200%有什么区别?
line-height:2 是设置行高为它本身文字高度的2倍；line-height:200%是设置行高为父元素文字高度的2倍。

12.inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
inline-block既像block那样，可以设置宽高，内外边距，又像inline那样在同一行排列。
去除缝隙可以删除两标签之间的空格，或者用父容器包裹这两个标签，父容器字体大小设为零，再将它们自己的字体大小设置为原来的值进行覆盖。
inline-block元素顶端对齐：为它们设置vertical-align: top;

6.CSS sprite 是什么?
CSS精灵图。是一种网页图片应用处理方式，可以将页面上的icon拼成一张大图，然后利用改变背景图片位置的操作使每一个图标在页面中显示。这样做可以减少向服务器发送请求数量，优化页面性能。

7.让一个元素"看不见"有几种方式？有什么区别?
opacity:0; 设置元素的透明度，但该元素还在页面中占据着自己的空间。
visibility:hidden; 使元素隐藏，和透明的效果类似，元素也占据空间。
display:none; 使元素消失，浏览器不加载该元素，在页面中不占据空间。