CSS：常见样式

---

一、块级元素与行内元素

块级元素

常见的块级元素有：div、h1~h6、p、from、table、ul、ol、dl、li、dt、dd、hr、blockquote。
其特性是：

1. 独占一行空间；
2. 块级元素内部一般可以包含块级元素、行内元素或文本内容；
3. 可以设置元素宽高；
4. 可以设置margin、padding属性。

行内元素

常见的行内元素有：a、img、span、em、strong、b、big、select、textarea、label、q、abbr、cite、sub、sup、bdo、samp。
（注意：button、input的display值为inline-block）
其特性是：

1. 只占据所包含内容的空间；
2. 行内元素内部只能包含行内元素和文档内容，不能包含块级元素；
3. 不能设置元素宽高；
4. margin和padding上下方向的设置不会产生效果，只能撑开容器。

补充说明

display可以设置的值不仅仅是inline、block和inline-block，只是这三种比较常见而已。

---

二、CSS继承

什么是CSS继承？

如果一项样式属性可以继承，则父元素设置了该样式属性后，即使后代元素没有设置，也能够获得该样式属性，这就是CSS继承。

哪些属性可以继承？

• 可以继承的属性：
• visibility、cursor；
• lettter-spacing、word-spacing、white-space、line-height、color、font、text-decoration、text-transform、direction；
• text-indent、text-align；
• list-style、list-style-type、list-style-position、list-style-image；
• border-collapse。
• 不可以继承的属性：
  display、margin、padding、border、background、height、width、min-height、max-height、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-break-before、unicode-bidi。

---

三、水平居中

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

---

四、CSS实现一个三角形

<div id="tri"></div>

#tri{
  width:0;
  border-top: 30px solid black;
  border-right: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 30px solid transparent;
}

---

五、单行文本溢出加“...”如何实现

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

---

六、px、em与rem

• px，Pixel，相对长度单位，是相对于显示器屏幕分辨率而言的。
• em是相对长度单位，相当于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
• rem设置字体大小时，仍然是相对大小，但相对的是HTML跟元素。

---