任务8

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

image.png

特性区别：

• 块级元素内容没有占满一行，也会强行占据一行。
• 块级元素可以设置宽高，而行内元素不可以（img元素可以设置宽高）
• 上下外边距对块级元素生效，对行内元素无效
• 想让行内元素居中设置 text-align:center; ，对于块级元素居中设置margin:0 auto;

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

css继承：子元素从父元素那继承部分css属性。（可以减少css代码）

image.png

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

• 块级元素：margin:0 auto;
• 行内元素：text-align:center;

4.用 CSS 实现一个三角形

在html中写一个div，然后给div添加样式
div{width:0;
height:0;
border-top:solid 10px black;
border-right:solid 10px transparent;
border-bottom:solid 10px transparent;
border-left:solid 10px transparent;}
这只是其中一种，其他的类似

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

image.png

white-space: nowrap;（设置不换行）
overflow: hidden;（设置不超过边框）
text-overflow: ellipsis;（设置超过的文本变成...）

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

• px：电脑像素
• em：相对于父元素的倍数
• rem：相对于根元素的倍数

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

• 12px/1.5：设置了body的font样式，字体大学为12px，行高是字体的1.5倍
• tahoma，arial，'Hiragino Sans GB','\5b8b\4f53'，sans-serif：字体可在tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif 这些字体中选择（若都不存在，则为浏览器默认字体，第一个字体不存在，就使用第二个，第二个不存在就使用第三个，以此类推。都不存在，选择浏览器默认字体
• \5b8b\4f53是Unicode码，而且全球通用，也是为了防止在个别浏览器上无法识别，所以用Unicode来表达的。

8.代码

• 效果1
• 效果2
• 效果3

image.png

不能再用cellspacing属性（被废弃）

• 效果4
• 效果5