笑一个...HaHa.....

块级元素和行内元素

• 块级元素

• （内联）行内元素

• 区别描述：
• 块元素（宽）占满整行，行内元素只占内容所在的宽度。
• 块级元素可以设置有宽高，行内元素无法设置宽高。
• 块级元素可以设置内边距，行内元素设置横向内边距有效，纵向内边距则无效 。
• 快级元素可以设置内/外边距 行内元素设置纵向外边距无效，可以设置横向外边距。
• 块级元素可以包含行内元素和块级元素，行内元素只能包含行内元素和文本。

CSS 继承， 能&不能继承的属性

span 继承了 p 的样式

有继承性的属性：
<pre>

1. 文本系列属性：
   <pre>```
   color：
   direction：
   text-align：
   line-height：
   text-indent：
   text-transform：
   word-spacing：
   letter-spacing：

2. 字体系列属性：
<pre>```
font：<!-- 组合字体 -->
font-family：<!-- 规定元素的字体系列 -->
font-weight：<!-- 设置字体的粗细 -->
font-size：<!-- 设置字体的尺寸 -->
font-style：<!-- 定义字体的风格 -->
font-stretch：<!-- 对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。 -->
font-variant：<!-- 设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。 -->
font-size-adjust：<!-- 为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。 -->```</pre>
3. 其他属性：
<pre>```
块级元素可以继承的属性：text-indent、text-align
元素可见性：visibility<!-- 所有元素可以继承的属性 -->
光标属性：cursor<!-- 所有元素可以继承的属性 -->
元素可见性：visibility
表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout
列表布局属性：list-style-type、list-style-image、list-style-position、list-style
生成内容属性：quotes
光标属性：cursor
页面样式属性：page、page-break-inside、windows、orphans
声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation
```</pre>
</pre>

Ps:内联元素可以继承的属性:
1、字体系列属性
2、除text-indent、text-align之外的文本系列属性```

无继承性的属性：
<pre>
文本属性：
<pre>```
vertical-align
text-decoration
text-shadow
white-space
unicode-bidi

其他属性：
<pre>```
生成内容属性：content | counter-reset | counter-increment
页面样式属性：size | page-break-before | page-break-after
轮廓样式属性：outline-style | outline-width | outline-color、outline
声音样式属性：pause-before | pause-after | pause | cue-before | cue-after | cue | play-during
背景属性：background | background-color | background-image | background-repeat | background-position | background-attachment
定位属性：float | clear | position | top | right | bottom | left | min-width | min-height | max-width | max-height | overflow | clip | z-index
``` </pre>
盒子模型的属性：<pre>```
display | width | height | margin | margin-top | margin-right | margin-bottom | 
margin-left | border | border-style | border-top-style | border-right-style | 
border-bottom-style | border-left-style | border-width | border-top-width | 
border-right-right | border-bottom-width | border-left-width | border-color | 
border-top-color | border-right-color | border-bottom-color | border-left-color | 
border-top | border-right | border-bottom | border-left | padding | padding-top |
 padding-right | padding-bottom | padding-left
```</pre></pre>

---

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




![一步两步~](http://upload-images.jianshu.io/upload_images/4007920-6d08fa3c94eca6a5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)




---

> ### 用 CSS 实现一个三角形


![举一反三即可](http://upload-images.jianshu.io/upload_images/4007920-df565203af96f414.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

---


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


![这三段要在一起，并且要在P段落里才能奏效](http://upload-images.jianshu.io/upload_images/4007920-164998ef758b6965.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


---



> ### px, em, rem 有什么区别


- 作用都是设置宽高的长度和字体的大小
 - px：固定值。
 - em：父容器宽高长度或字体大小的倍数
 - rem：根节点body设置的字体的倍数


---



> ### 下面代码的作用?为何加引号? \5b8b\4f53代表啥?
```body{
  font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}```

- 设置字体大小12px 字体行高1.5 字体：tahoma—至—sans-serif; 
- 浏览器将从左到右依次寻找字体，如果计算机上有该字体就应用字体，sans-serif保证了浏览器最后选择的显示字体（一般都有）。
- 另外加引号是因为字体中间有空格。
- \5b8b\4f53表示宋体

![image.png](http://upload-images.jianshu.io/upload_images/4007920-87480243478069d7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


---

**参考**：[传送门](http://www.cnblogs.com/thislbq/p/5882105.html)