笑一个...HaHa.....
块级元素和行内元素
-
块级元素
| 列表 (无规矩排列) | 作用 |
|---|---|
| p | 行 |
| ol | 有序列表 |
| ul | 无序列表 |
| dl | 定义列表 |
| hr | 水平分割线 |
| div | 文档分区 |
| dd | 定义列表中定义条目的描述 |
| pre | 预格式化文本 |
| tfoot | 表脚注 |
| form | 表单 |
| table | 表格 |
| h1~h6 | 标题 |
| fieldset | 表单元素分组 |
| noscript | 不支持脚本或禁用脚本时显示的内容 |
| H5增加 | 👇 |
| aside | 伴随内容 |
| audio | 音频播放 |
| video | 视屏 |
| figure | 图文信息组（参照） |
| footer | 区段尾或页尾 |
| output | 表单输出 |
| hgroup | 标题组 |
| header | 区段头或页头 |
| canvas | 绘制图形 |
| section | 一个页面区段 |
| figcaption | 图文信息组标题 |
-
（内联）行内元素
| 列表 (无规矩排列) | 作用 |
|---|---|
| a | 链接/锚点 |
| b | 粗体(待淘汰) |
| i | 斜体 |
| u | 下划线 |
| q | 短引用 |
| br | 换行 |
| em | 强调 |
| font | 字体设定（不推荐） |
| sub | 下标 |
| sup | 上标 |
| cite | 引用 |
| img | 图片 |
| abbr | 缩写 |
| span | 常用内联容器 |
| label | 标签 |
| input | 输入框 |
| small | 小字体 |
| strike | 中划线 |
| select | 菜单选择 |
| strong | 强调粗体（慎用） |
| textarea | 多行文本输入框 |
| acronym | 首字 |
- 区别描述：
- 块元素（宽）占满整行，行内元素只占内容所在的宽度。
- 块级元素可以设置有宽高，行内元素无法设置宽高。
- 块级元素可以设置内边距，行内元素设置横向内边距有效，纵向内边距则无效 。
- 快级元素可以设置内/外边距 行内元素设置纵向外边距无效，可以设置横向外边距。
- 块级元素可以包含行内元素和块级元素，行内元素只能包含行内元素和文本。
CSS 继承， 能&不能继承的属性
span 继承了 p 的样式
有继承性的属性：
<pre>
- 文本系列属性：
<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>
---
> ### 如何让块级元素水平居中？如何让行内元素水平居中?
---
> ### 用 CSS 实现一个三角形
---
> ### 单行文本溢出加 ...如何实现?
---
> ### 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表示宋体
---
**参考**：[传送门](http://www.cnblogs.com/thislbq/p/5882105.html)
网友评论