一、块级元素和行内元素分别有哪些？测试4条以上的特性区别。

1、块级元素能包含块级元素和行内元素，而行内元素只能包含行内元素和文本。
2、块级元素是占据一整行空间，而行内元素占据自身宽度空间。
3、块级元素可以设置宽高、内外边距，。行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效
4、 行内元素与块级元素属性的不同，主要是盒模型属性上。

可变元素列表：可变元素为根据上下文语境决定该元素为块元素或者内联元素

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

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。
　　当元素的一个继承属性没有指定值时，则取父元素的同属性的计算值。只有文档根元素取该属性的概述中给定的初始值。当元素的一个非继承属性没有指定值时，则取属性的初始值。
常见的继承属性：
border-collapse：为表格设置合并边框模型。1、collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。2、separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。3、inherit 规定应该从父元素继承 border-collapse 属性的值。

border-spacing： 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。

caption-side：

color：

cursor：

direction：

font (其中包括 font-family , font-size , font-weight , font-style，font-height)

letter-spacing：字母间隔修改的是字符或字母之间的间隔

line-height：percentage，是原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值，与元素自身的字体大小有关。计算值是给定的百分比值乘以元素计算出的字体大小。使用Percentage和em可能会带来意想不到的结果（特别是当父级元素下的子元素字体大小不同时）。
line-height:number，该属性的应用值是这个无单位数字number乘以该元素的字体大小。计算值与指定值相同。大多数情况下，使用这种方法设置line-height是首选方法，在继承情况下不会有异常的值。
对于替代行内容，如button或者input，若line-height=height，在可以达到垂直居中的作用。

list-style (其中包括 list-style-image , list-style-position , list-style-type)

text-align：文本对其方式 left、center、right、justify

text-indent：文案第一行缩进距离

text-decoration： none、underline、line-through、overline

text-transform：改变文字大小写none、uppercase、lowercase、capitalize

visibility：

white-space：white-space 属性设置如何处理元素内的空白。

word-spacing：可以改变字（单词）之间的标准间隔

非继承属性
z-index：

width (其中包括 min-width , max-width)：

dispaly：

float：

clear：

vertical-align：CSS 的属性 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。bottom元素及其后代的底端与整行的底端对齐/top元素及其后代的顶端与整行的顶端对齐。baseline是initial。元素基线与父元素的基线对齐。

unicode-bidi：

position：

top：

bottom：

left：

right：

text-decoration：

background (其中包括 background-color , background-image：

background-position , background-attachment , background-repeat)：

border (其中包括 border-color , border-style , border-width , border-spacing and so on)：

padding (其中包括 padding-left , padding-right , padding-top , padding-bottom)：

margin (其中包括 margin-left , margin-right , margin-top , margin-bottom)：对于行内元素，设置上下margin是无效的。

outline (其中包括 outline-color , outline-style , outline-width)：

clip：

content：

box-sizing：content-box：表示使用w3c标准盒模型。 border-box表示使用“IE盒模型”

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

对于行内元素,只需在父元素中设置text-align="center"即可；
　　对于块级元素，把元素的属性margin-left和margin-right设置成auto即可。
注意：浏览器自身有默认margin和padding，我们可以通过哦*{来更改默认}

用css实现一个三角形

用css指定一个三角形样式，我们只需要把块的宽高设置为0，编辑边框的每个边，通过改变边的属性，例如可以设置三个边透明或者两个边透明，其中相邻的两个边颜色相同，还可以通过改变边的大小，来实现不同样式的三角形。
.tri{ width: 0px; height: 0px; border: 30px transparent solid; border-right: 20px red solid; border-bottom: 40px red solid; border-left: 30px transparent solid; }

直角三角形

四、单行文本溢出加 ...，如何实现

要实现单行文本溢出，首先让它成为一个单行文本，即不换行nowrap，这样就不有溢出，但是溢出部分却不会隐藏，我们就让它隐藏hidden，隐藏了，用户可能不知道后面还有文字，我们可以用省略...（ellipsis）来表示后面还有文字。如下：
.box{ border: 2px blue solid; width: 100px; padding: 5px 20px; margin: 10px auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

文本溢出加...

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

px： 固定单位
em: 相对单位，相对于父元素字体大小
rem: 相对单位，相对于根元素(html)字体大小
vw vh: 相对单位，1vw 为屏幕宽度的1% 但是兼容性很差

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

body{ font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif; }
　　这段代码是用来指定body的字体样式，12px/1.5是文字大小为12px，行高是字高的1.5倍；其中tahoma、arial、Hirgino Sans GB、\5b8b\4f53 、sans-serif等是字体样式。
　　加引号是为了告诉浏览器Hirgino Sans GB是一个词，不能被认为是几个词。
　　字体里\5b8b\4f53代表字体为宋体样式，在使用浏览器打开页面时，浏览器会读取 HTML 文件进行解析渲染。当读到文字时会转换成对应的 unicode码（可以认为是世界上任意一种文字的特定编号）。再根据HTML 里设置的 font-family （如果没设置则使用浏览器默认设置）去查找电脑里（如果有自定义字体@font-face ，则加载对应字体文件）对应字体的字体文件。找到文件后根据 unicode 码去查找绘制外形，找到后绘制到页面上。

七、demo

1、实现如下效果: 【参考】效果/
2、实现如下按钮效果: 【参考65】效果
3、实现如下表格:【参考68】效果
4、实现如下三角形效果

三角形

task8完