任务八

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

块级元素div h 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（行内元素占据自身宽度空间）（里面包含行内元素和文本）

                     1宽高只对块级元素生效

2.块元素，总是在新行上开始；内联元素，和其他元素在一行；

3块元素，能容纳其他块元素或者内联元素；内联元素，只能容纳文本或其他内联元素；

4.块级宽度默认是它容器的100%，除非设定一个宽度。行内元素宽度就是它的文字和图片的宽度，不可改变。

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

什么是css继承?

继承就是子标签继承了上级标签的CSS样式的属性

哪些属性能继承？

1、字体：font-family

2、文字大小：css font-size

3、文本粗细：font-weight

4、文字颜色：css color

哪些不能？

高度宽度，padding,margin border样式不能继承

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

块级元素水平居中：

左右margin相等

div{background:yellow;height:100px;width:100px;margin:0 auto;}

行内元素水平居中：

span{padding:0 50%;}

或者父元素width100%，子元素text-align:center,块级元素也可如此实现；

4、用 CSS 实现一个三角形

如图

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

实现如图

white-space参考资料

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

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素

如图：rem相对于根部span发生 变化，em相对于父容器变化。px则是相对于屏幕

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

body{

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

}

设置body内字体样式

有空格，不加引号会被识别成两个元素。

数字是Unicode码，宋体、微软雅黑

二、代码实现

1、代码实现1

2、代码实现2

3、代码实现3

github地址

4、代码实现4

github地址

5、代码实现5

github地址