Css元素|属性

笑一个...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 的样式

有继承性的属性：

 
 
 
  
文本系列属性：
 
```
 color：
 direction：
 text-align：
 line-height：
 text-indent：
 text-transform：
 word-spacing：
 letter-spacing：
 
 
 
 
2. 字体系列属性：
```
font：
font-family：
font-weight：
font-size：
font-style：
font-stretch：
font-variant：
font-size-adjust：```
3. 其他属性：
```
块级元素可以继承的属性：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
```

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

无继承性的属性：

 文本属性：
 
```
 vertical-align
 text-decoration
 text-shadow
 white-space
 unicode-bidi
 
 
其他属性：
```
生成内容属性：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
``` 
盒子模型的属性：
```
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
```


---

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




![一步两步~](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)