CSS常见样式

1、块级元素与行内元素

块级元素（block-level）：

1. div
2. 标题 h1~h6
3. 段落 p
4. 表格 table，tr，td，th
5. 列表 ul，dl，ol，li，dd，dt
6. 表单 form
7. 分隔线 hr
8. pre定义预格式化的文本，保留空格和换行符，常用于展示计算机源代码

行内(内联)元素（inline-level）：

• em，strong ，span， a ，img， br
• button， label ，select ，textarea， input
• code， script

特性区别：

1. 块级可以包含块级和行内，行内只能包含文本和行内
2. 块级占据一整行空间，行内占据自身宽度空间。默认情况下，块级元素会新起一行，行内元素不会以新行开始。
3. 块级元素可以设置宽高，行内元素的高度是由line-height来决定，宽度由具体的内容来决定，设置height和width无效
4. 行内元素设置上下margin、padding、border不占据空间。
5. 行内元素添加属性display:block可转换为块级元素
6. 行内元素可以"感受"到浮动元素的存在

2、用 CSS 实现一个三角形

方法1：

预览：

方法2：

width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 50px solid red;
transform:rotate(-45deg);

3、单行文本溢出加...如何实现?

overflow: hidden;   //多余的文字变成...
text-overflow: ellipsis;   //超过边框的文字隐藏
white-space: nowrap;   //不折行

预览：

4、px, em, rem 有什么区别？

相对长度单位：px、em、ex(x-height)

px：像素(指定图片的大小一般肯定是用这个，要不然图片会被变形拉伸，因为图片的尺寸大多数时候是以px来丈量的)
em：值并不固定，会继承父级元素的字体大小，是默认字体大小的倍数。比如一个元素的font-size为14px，那么对于该元素，1em = 14px
rem：rem是CSS3新增的一个相对单位，相对的只是HTML根元素，使用它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

单位转换器

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

1. 代码作用：定义html页面使用的字体
2. 中间有空格所以加引号，避免浏览器认为是多个字体

3. \5b8b\4f53是Unicode码编号，表示“宋体”

   
   
   Unicode码编号

6、文本样式都有哪些相关属性，对应哪些值

color     //设置文本颜色
font-family    //设置字体
font-style :normal/italic(斜体)/oblique(倾斜)/inherit(从父元素继承)
font-size    //字体大小
line-height     //行高
text-align     //控制行内元素如何与父元素对齐
text-decoration:none/underline/overline(上划线)/line-through(文字删除线)/blink(让文本闪烁)
text-indent:50px;  //将段落的第一行缩进 50 像素：
text-shadow    //设置阴影

7、IE 盒模型（box盒模型 ）和W3C盒模型（content盒模型）有什么区别?

W3C标准中padding、border所占的空间不在width、height范围内
IE的盒模型width、height包括content尺寸 + padding + border

可以看出W3C盒模型和IE的盒模型区别在与width的计算，现在各种浏览器都在集中向w3c靠拢，自然选择“标准 w3c 盒子模型”是明智之举。简单的办法就是在网页的顶部加上 doctype 声明。
参考文章

8、*{ box-sizing: border-box;}的作用是什么？参考资料

真正的W3C盒模型宽高，需要加内边距和边框：

• padding + border + width = 盒子的宽度
• padding + border + height = 盒子的高度

CSS设置的宽度仅仅是内容区的宽度，总体的盒模型就会大于我们想要的宽高，所以设置该属性可以为全局的盒模型设置带有指定宽度和高度的框，并把边框和内边距放入框中。

9、line-height: 2和line-height: 200%有什么区别?

1. 计算标准：line-height: 2根据自身元素的字体大小来计算，line-height: 200%根据父元素的字体大小来计算。
2. 继承：line-height: 2继承给子元素的是2这个缩放因子，line-height: 200%继承给子元素的是200%计算后的值。

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

inline-block特性：

1. 可以设置宽高
2. 具有行业元素特性，在同一行排列
3. 默认内容撑开宽度
4. ie6 ie7不支持块属性标签的inline-block

5. 块级元素换行造成空白符，会有缝隙

   
   
   块级元素换行造成空白符，会有缝隙

去除缝隙：

1. html元素之间不换行 ps:代码太丑处女座拒绝
2. 父元素设置font-size:0 ，其自身再设置需要的字体大小不要用，傻X才用，用了一定会引起更大的BUG
   
   父元素设置` font-size:0` ，其自身再设置需要的字体大小
3. 父元素设置dispaly:flex，Flex是Flexible Box的缩写，意为"弹性布局"。注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
   

高度不一致的inline-block的顶端对齐：

图片有空隙可以使用vertical-align:top;
无解
flex
float

11、CSS sprite 是什么?

CSS sprite又叫CSS雪碧图或CSS精灵，是一种背景图片的拼合技术。使用css雪碧图，能够减少页面的请求数、降低图片占用的字节，以此来达到提升页面访问速度的目的。
具体实现：把每张小图标集合在一张大图上，通过background的url()直接定义X,Y轴的值，使每个地方显示需要的小图标。

小贴士：
图片合并可以使用这个线上地址 csssprites.com8
在生产环境中使用的图片都需要经过压缩再使用，线上压缩图片地址 tinypng.com6

12、让一个元素"看不见"有几种方式？有什么区别?

常规：

• display:none;
• visibility:hidden;
• opacity:0;

其他(以下消失都是有前提条件的)：

• height:0;width:0;padding:0;margin:0;border:0; ... etc
• position:absolute; left:1000000px; top:100000px; ...etc;
• z-index:-1000;...etc
• background-color:rgba(0,0,0,0);

总结： 元素"看不见"的方式主要方式让元素用户在当前页面展示的视口里看不见。

区别：

1. display:none;从文档流消失，不占据文档空间，但是还存在DOM树中。
2. visibility:hidden;和opacity:0;还是会占据文档空间。
3. display:none;和visibility:hidden;绑定的事件不会触发。
4. opacity:0;的元素绑定的事件还是会触发事件。

13、常用CSS属性

border-radius: 5px;  /*定义圆角*/

span:hover{
  box-shadow: 0px 8px 20px #b9b9b9;  /*鼠标停留其上显示阴影*/
}  

transition-duration: 0.3s;  /*定义完成过渡效果需要花费的时间（以秒或毫秒计）*/

潜伏题： jQuery是如何实现获取一个元素的正常宽高的。

聊一聊字体图标的实现原理