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

• 块级元素和行内元素分别由哪些？
  1、块级元素：div；h1~h6；p；hrform；ul；dl；ol；pre；tableli；dd；dt；tr；td；th
  2、行内元素：em；strong；span；a；br；img；button；iput；label；select；textareacode；script
• 动手测试并列出4条以上特性区别
  1.块级元素可以包含文本，块级，行内元素，而行内元素只能包含文本和行内元素；

块元素的宽度占据父容器整行，行元素占据本身.png

2.块级元素单独占据一整行，行内元素占据的位置只有自身文本宽度的空间；

块元素的width和height 可调，而行元素的宽高不可调，只决定于行元素的内容.png

3.块级元素可以设置宽高，行内元素设置宽高无效；

块元素能容纳块元素和行内元素，而行元素只能容纳文本和其他行内元素.png

4.块级元素的padding，margin值设置有效，行内元素padding，margin上下的值设置无效，但左右有效；

4.png

问题二：什么是 CSS 继承? 哪些属性能继承，哪些不能？

• 什么是CSS继承？
  答：继承就是子元素继承了父元素的CSS样式的属性
• 什么属性能继承？
  1.字体：family，size，weight，line-height
  2.文本：letter-spacing，word-spacing，text-align, text-indent
  3.列表：list-style-type
  4.颜色：color，ps：a标签不能继承父元素的字体颜色，原因是a标签自己有默认字体颜色，会覆盖掉- 继承自父元素的字体颜色；
• 什么属性不能被继承？
  1.display
  2.float
  3.padding和margin
  4.背景相关，比如颜色图片等

问题三：用 CSS 实现一个三角形

三角.png

问题四：单行文本溢出加...如何实现?

小圆点.png

1、white-space:nomal;：设置文本不换行；
2、overflow:hidden;：设置文本溢出隐藏；
3、text-overflow:ellipsis： 设置溢出部分显示为"...”

问题五：px, em, rem 有什么区别？

• px 像素的单位，当使用px来规定字体的大小时，那么该字体的大小就是规定的大小，不会改变。
• em 相对于父元素字体大小的倍数。
• rem 相对于根元素字体大小的倍数。

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

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

这段代码的作用是：

• 代码的作用：将body元素设置字体的大小是12px（Chrome浏览器最小字体为12px），行高是字体大小的1.5倍，其中的字体待选为：tahoma字体，arial字体，Hiragino Sans GB字体，'\5b8b\4f53'，sans-serif字体这几种，浏览器查找用户的字体库，如果有第一种就使用第一种，如果没有查找第二种，以此类推。
• 添加引号的原因：加引号是因为字体的名字中包含空格，避免浏览器解析时候把它解析成多个词汇。
• 字体里的数字符号代表Unicode码，为了避免直接写中文的情况下编码不匹配时会产生乱码的情况，将字体名称用Unicode来表示。'\5b8b\4f53'就代表宋体。

问题七：实现如下效果:card

问题八：实现如下页面：页面