css样式1

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

块级元素：div，p，h1~h6，form，table，ul，ol，li，blockquote等；
行内元素：em，span，img，a，q，textarea，input等。

特性区别；
1.块级元素无论大小，都会占据一整行的空间，而行内元素则占据其自身大小的空间。从表现上看，块级元素内容前后有换行，行内元素内容与其包含元素的其余内容放在一起；
2.width和height对行内元素不起作用；
3.块级元素可嵌套块级元素和行内元素，而行内元素不能嵌套块级元素；
4.块级元素可以设置margin和padding，行内元素只能设置左右margin和padding。

• 什么是css继承? 哪些属性能继承，哪些不能？

文档树和家族树一样，有父代和子代。css继承指的是特定的css属性从父代向下传递到子孙后代的现象。
能被继承的属性：font，color，font-family，font-size，font-style，font-weight，line-height，text-decoration，text-transform等。
不能被继承的属性：margin，padding，border，background，bottom，float，clear，display等。

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

块级元素水平居中可以使用下面的属性：

.box {
    margin: 0,auto;
}

实际上是下面属性的合并：

.box {
   margin-left: auto;
   margin-right: auto;
}

行内元素的居中可以用下面属性：

.box {
    text-align: center;
}

• 单行文本溢出加“...”如何实现？

可使用下面的属性

.card > h3{
  white-space: nowrap; /*文本不转行*/
  overflow: hidden; /*当内容溢出元素框时，溢出部分被修剪，且不可见*/
  text-overflow: ellipsis; /*当内容溢出元素框时，显示省略符号来代表被修剪的文本*/
}

具体表现为：

• px, em, rem 有什么区别？

px：pixel，像素的缩写，对元素进行大小设置时的常用单位：

.box {
    width: 200px;
    height:100px;
}  /*对box设置其宽度为200px，高度为100px*/

em：相对度量单位，使用时要指定一个比例因子：

font-size: 1.2em; /*字体大小为父元素字体的1.2倍*/

rem:与em类似，不过其相对于根元素对字体进行设置：

font-size: 1.2rem; /*字体大小为根元素字体的1.2倍*/

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

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

对body进行设置，字体高度12px，行高为字体高度的1.5倍；后面则是对body进行字体的选择，选择优先度从左到右依次下降；
加引号是因为字体名称里有空格，去掉引号有可能会误成为另一属性，导致出错；
\5b8b\4f53是Unicode编码，代表的是宋体。