CSS常见样式

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

block-level
div h1 h2 h3 h4 h5 h6 p hr
form ul dl ol pre table
li dd dt tr td th

inline-level
em strong span a br img
button input label select textarea
code script

• 块级(block-level); 行内(内联、inline-level)
• 块级可以包含块级和行内，行内只能包含文本和行内
• 块级占据一整行空间，行内占据自身宽度空间
• 宽高设置、内外边距的差异

8.1.JPG

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

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

• 所有元素可继承：visibility和cursor。
• 内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。
• 块状元素可继承：text-indent和text-align。
• 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
• 表格元素可继承：border-collapse。
• 不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi。

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

对于块级元素 设置 margin: 0 auto 可达到居中目的

  /* margin: 0 auto; 实际上是下面两个起作用 */
  margin-left: auto;
  margin-right: auto;
}```

行内元素居中
``````


####4.用 CSS 实现一个三角形
http://js.jirengu.com/zuqabeyiqo/3/edit?html,css
[http://js.jirengu.com/zuqabeyiqo](http://js.jirengu.com/zuqabeyiqo)

![8.2.JPG](http://upload-images.jianshu.io/upload_images/5027142-395e5b784c26c0b8.JPG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

####5.单行文本溢出加 ...如何实现?
```.card > h3{
  white-space: nowrap;//设置文本内的空白，nowrap文本不会换行，直到遇到
标签为止
  overflow: hidden;//设置当内容溢出元素框时发生的事情，内容会被修剪，并且其余内容是不可见的
  text-overflow: ellipsis;//设置当文本溢出包含元素时发生的事情，ellipsis显示省略符号来代表被修剪的文本
}```

####6.px, em, rem 有什么区别。
- px像素（Pixel）是相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

px特点:
1. IE无法调整那些使用px作为单位的字体大小；
2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

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

em特点：
1. em的值并不是固定的；
2. em会继承父级元素的字体大小。

- rem是[CSS3](http://www.html5cn.org/portal.php?mod=list&catid=16)新增的一个相对单位（root em，根em）。

三者区别如下：
px 在缩放页面时无法调整那些使用它作为单位的字体、按钮等的大小；
em 的值并不是固定的，会继承父级元素的字体大小，代表倍数；
rem 的值并不是固定的，始终是基于根元素  的，也代表倍数。


####7.解释下面代码的作用?为什么要加引号? 字体里\5b8b\4f53代表什么?
```body{
  font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}```

设置字体大小为12px，line-height为1.5，字体选用tahoma，没有则用arial，再没有则用Hiragino Sans GB，没有则用宋体，都没有则用sans-serif。
因为中间有空格，不加引号会被识别为两个元素。
字体里\5b8b\4f53代表Unicode码，译为宋体。


http://js.jirengu.com/noxuriqiho
.h-button{
  display: inline-block;
  padding: 8px 10px;
  text-decoration: none;
  color: #000;
  border-radius: 3px;
  cursor: pointer;
  transition: all .3s;
}

.steal{
  background-color: #009688;
  color: #fff;
}

.yellow{
  background-color:#ffeb3b;
}

.orange{
  background-color: #ff9800; 
}

.red{
  background-color: #f44336;
  color: #fff;
}

.green{
  background-color: #4CAF50;
  color: #fff;
}

.h-button:hover{
  box-shadow: 0 10px 10px 3px #AAA;

}
/*当鼠标悬浮到div上方是，给div添加阴影*/