任务8

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

块级元素：div h1 h2 p hr form ul dl ol pre table li dd dt tr td th
行内元素：em strong span a br img button input lanel select textarea code script
区别：
块级元素可以包含块级元素和行内元素，行内元素只能包含文本和行内元素
块级元素可以设置宽高 行内元素不能设置宽高
块级元素默认宽度为父元素宽度 行内元素默认宽度为内容宽度
行内元素上下margin不生效

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 实现一个三角形

答：

Paste_Image.png

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

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

6. px, em, rem 有什么区别

答:

image.png

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

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

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

8.代码

1 实现如下效果: 【参考】
JS Bin代码链接
2 实现如下按钮效果: 【参考】
JSBin代码链接
3 实现如下表格:【参考】
JS Bin代码链接
4 实现如下三角形
JS Bin代码链接
5 实现如下Card: 【参考】
JS Bin代码链接