css简单样式

文字的样式：
1.font-size 文字大小, 最小12px, 默认16px em, rem
2.font-style "宋体", "微软雅黑", "楷体"
3.font-family（normal默认、italic斜体、oblique倾斜）
4.font-weight 100-900 默认是normal lighter bold.

5.color 英文 #16进制 rgb(0-255, 0-255, 0-255) rgba() css3 alpha

文本：
1. text-aling: 对齐方式：left right justfiy center
2. text-index: 首行缩进 em
3. text-decoration: overline line-through underline none
4. line-height: 行间距 行高 可以用于一行的垂直居中。
5. word-spacing: 单词间距, 空格识别
6. letter-specing: 字母间距

vertical-align: 垂直对齐方式。 top middle bottom 不建议多使用，如果一行都是内容，可以选择一行对齐的基线。

background: 
1. background-color: 背景颜色
2. background-image: 背景图片 url("相对路径/绝对路径");
3. background-repeat: 默认平铺, no-repeat, repeat-x, repeat-y
4. background-postion: 设置背景图的位置，两组数据
5. background-attachment: fixed scroll背景是否跟着内容滚动
6. background-size: 两组数据 可以设置背景图的大小

/* 设置圆角 左上 右上 右下 左下 */

border-radius: 50px 40px 30px 20px;

/* 设置阴影  X轴偏移 Y轴偏移 模糊范围 阴影大小 颜色 内阴影 */

box-shadow: 0px 0px 5px 5px red inset, 0px 0px 1px 1px blue;

display：

1. inline 变成行属性标签显示
2. block
变成块儿属性标签显示
3. inline-block 行显示的块标签， 特点：即在一行显示又可以设置各种块儿标签的CSS样式
4. table/table-cell display: table; display: tabel-cell;
为什么要变成table和table-cell？
配合vertical-align 使用，是一种垂直居中的方式。
5.none; 隐藏(不占文本流) visiable(占文本流)

float浮动:

文本流: 元素在文档中所占的位置。
浮动：脱离当前文档流 按着一定的方向移动，遇到父级边界，或其他浮动元素，停止。left，right
浮动元素的特点：
1. 脱离文档流。
2. 内容默认撑开宽高
3. 可以设置margin 和 padding
4. 可以在一行显示
5. 可以清除中间的默认缝隙
6. 所有元素都可以变为浮动元素

如何请浮动：
（1）overflow:hidden;加给浮动元素父级，子级所有元素都要浮动
（2）clear:both; 加给浮动元素下一个兄弟级元素，如果没有则加一个空元素进行清除浮动
（3）给父级加浮动可以清除浮动，但是父级也要清除浮动（不常用）

/* 超出 溢出 隐藏*/

/* overflow: hidden 隐藏*/

/* scroll 可以隐藏 可以滚动 */

overflow: scroll;

position定位:

position: fixed; 基于窗口定位
特点：
1. 脱离文档流
2. 固定在窗口的某一位置
3. 默认内容撑开宽高
4. 可以设置宽高以及margin
应用： 小广告 小工具 导航栏

position: absolute; 绝对定位
特点：
1. 脱离文档流
2. 默认内容撑开宽高
3. 可以设置宽高以及margin
4. 相对于祖辈中上一个position元素进行定位。
应用： 内容重叠

position: relative; 相对定位

    特点：

    1. 不脱离文档流

    2. 宽高和行块标签特点默认，原来元素属性不变

    3. 在没有设置left、top、bottom、right值的情况下，与没设置position无差别。

    应用： 微调页面 给absolute 做父级

z-index： 重叠的顺序，大的值在上，可以为负数

z-index：只能用于兄弟之间