1 块级元素和行内元素分别有哪些？动手测试并列出4条以上的特性区别

答：块级元素有h1~h6,p,div,ul,ol,form,article,aside,table,dl.dd,hr.行内元素有span,input,strong,em,a,img,code,button,lable,select,textarea.块级元素与行内元素的区别有，1，块级元素会占据一整行，后一个块级元素会新起一行，行内元素只占据内容的宽度,2，块级元素设置盒模型padding，margin上下左右都有效，行内元素设置padding，margin左右有效，上下没有效果。3，块级元素可以包含其他块级元素或行内元素，行内元素只能包含数据或行内元素。4，块级元素可以设置宽高，行内元素不能设置宽高。

2 什么是 CSS 继承? 哪些属性能继承，哪些不能？

答：CSS 继承指元素的有些属性能继承给后代元素。能继承的属性有color,font-family,font-size,font-style,font,line-height,list-style,text-align,visibility,word-spacing.不可继承的有display,margin,padding,border,background,height,width,position.

3 如何让块级元素水平居中？如何让行内元素水平居中?

答：设置margin：0 auto;让块级元素居中。让行内元素水平居中只需在父级块级元素中设置text-align:center;

4 用 CSS 实现一个三角形

答：设置一个块级元素，宽高设置为0，设置边框border为三角形的高度。设置三个方向的边框颜色为transparent，剩下一个为三角形的颜色。html：<div class="box"></div>css： .box{
width: 0px;
height: 0px;
border-top: 100px solid transparent;
border-right: 100px solid transparent ;
border-bottom: 100px solid transparent ;
border-left: 100px solid red ;
}

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

答：给文本设置三个属性：overflow: hidden;white-space: nowrap;text-overflow: ellipsis;

6 px, em, rem 有什么区别

答：px为像素，em为父级元素的字体大小，rem为相当于body字体大小。

7 解释下面代码的作用?为什么要加引号? 字体里的数字符号代表什么?

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

答：第一个参数设置字体大小和行高，等效于font:12px;line-height:1.5;第二个参数设置字体，。因为字体名字中有空格，加上引号表示一个参数，字体里的数字符号代表中文字体名字的unicode码，'\5b8b\4f53'表示宋体。设置不止一个字体时，自动匹配字体库中能找到的最近一个字体。

代码

1 实现如下效果: 【参考】

JS Bin代码链接

2 实现如下按钮效果: 【参考】

JSBin代码链接

3 实现如下表格:【参考】

JS Bin代码链接

4 实现如下三角形

JS Bin代码链接

5 实现如下Card: 【参考】

JS Bin代码链接