定位属性

相对定位（relative）

position:relative;
left:50px;top:100px;
就是根据当前元素自身位置来移动。

绝对定位（absolute）

position:absolute；
left:0px;top:0px;

当父元素设置了定位属性，此时子元素的参考原点就变为父元素的左上角，没设置父元素的定位属性，子元素的参考原点为整个文档（根元素）的左上角。
就是它的祖先元素谁设置了定位属性就定位到谁的左上角，若都有的话那就定位到离它自己最近的祖先元素为基准。
固定定位（fixed）
position:fixed;以viewport视口（0,0）点，就是整个文档的左上角。（用于固定在某个位置的图标，如返回顶部的图标）
粘性定位（sticky）
一般用于头部固定不动的导航，如下可以实现一个简单的导航： ```html

123

这是文章

123加斯大数据

4sadas 5sadas

在使用粘性定位时，需要注意以下几点：
- 在设置position:sticky;时，必须再定义 top、bottom、right、left 四个属性之一，否则只会处于相对定位；
- 使用固定定位元素的父元素不能定义overflow:hidden或者overflow:auto属性；
- 父元素的高度不能低于固定定位元素的高度；
- 固定定位的元素仅在其父元素内有效。
<a name="ShcBk"></a>
## 静态定位（static）
static 是 position 属性的默认值，表示没有定位，使用静态定位的元素会按照元素正常的位置显示，并且不会受到 top、bottom、left、right 和 z-index 属性的影响。（这个定位一般不用，因为是默认的。）
<a name="QMCBS"></a>
## 层级
图层上下位置，层级（Z轴定位），元素发生重叠下使用，数值越大越往外显示。<br />z-index:1；
<a name="nwJBH"></a>
## 溢出
overflow:hidden; 表示溢出部分隐藏。
<a name="BQKf2"></a>
# 变化效果
<a name="noRgo"></a>
## transition
transition 是 过渡，指的是某个CSS属性值如何平滑的进行改变，就是平常说的 动效。而 transform 是没有动画效果，你改变了它的值，元素的样子就唰的改变了。
<a name="Hay5v"></a>
### transition 的相关属性 
```css
transition: [属性名] [持续时间] [速度曲线] [延迟时间];
transition: height 2s ease .5s;  /*高度属性的值改变时，延迟 0.5 秒后以 ease 曲线进行过渡，持续2秒。*/
transition: all 2s ease .5s;   /*或者一个属性不够，想要监听所有属性。*/

transform

transform 是转换，指的是改变所在元素的外观，它有很多种手段（转换函数）来改变外观，例如位移、缩放、旋转等，而其中的位移的函数名就叫 translate，所以说，translate 是 transform 的一部分。

transform 的相关属性

1、旋转（rotate）

transform:rotate(30deg);

2、缩放（scale）

transform:scale(1.5);

3、倾斜（skew）

transform:skew(30deg);

4、移动（translate）

transform:translate(-20px,0);   /*表示从元素的当前位置延x轴方向，向左移动20px*/

其他常用属性

美化文本

倾斜文字
- font-style:italic; 该属性可使文字产生倾斜效果。
文字和单词间距
- letter-spacing:10px; 文字间的间隙为10个像素；
- letter-spacing:0.5em; 文字间的间隙为0.5个字体大小；
- word-spacing:20px;（每个单词的间距为20px）
行间距
- line-height:100%;（大多数浏览器的默认行高约为110%至120%。）
- line-height:70%;（行间距会缩小为默认的70%）
- line-height:200%;（行间距会扩大为默认的2倍）
文本对齐方式
- text-align:left;
- text-align:left;
- text-align:justify;【当text-align设置为”justify”，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）】
文字装饰
- text-derection:overline;上划线
- text-derection:underline; 下划线
- text-decoration:line-through; 文字中部划线（删除线）
文本转换
- text-transform:uppercase;（转大写）
- text-transform:lowercase;（转小写）
- text-transform:capitalize;（每个单词的首字母大写）
文本缩进
- text-indent:20px;（也是段落首行缩进）
字体样式设置
- font-family:”xxx”,”xxx”,”xxxx”（引号引起来，逗号隔开）可设多种字体，电脑会一次读取，直到读取成功为止。
盒子倒圆角
- border-radius:50px;（后面数值根据需求自己调整；当值为方形盒子长宽一半时，方形变圆形）
英文文字换行 word-break
- word-break属性用来规定自动换行的处理方式，它可以实现在任意位置换行，可选值有normal | keep-all | break-all，默认值为 normal。
- normal 表示根据语言自身的换行规则，确定换行方式，中文将容器边界处的汉字换到下一行，西方文字则将整个单词换到下一行。
- keep-all 表示不允许把单词截断，只能在半角空格或连字符处换行；
- break-all 允许把单词截断，在单词内换行。
文字超出显示省略号
```
/*单行文本超出*/
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
/*多行文本超出*/
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;   /*超出多少行*/
overflow: hidden;
text-overflow:ellipsis;
```
white-space、word-wrap、word-break的区别：
white-space:nowrap; 可以让一段文本不换行，在一行内显示。
word-wrap:normal; 使一个单词或URL不折行，在一行内显示。
word-break 就是上面的用法。
背景图
```
.div { background-img:url(路径)
background-repeat:repeat-x ；表示横向平铺
background-repeat:repeat-y; 表示纵向平铺
background-position:50px 30px; 表示图片位置，两个数值分别表示x轴和y轴的偏移量，或者右上（right top），左下 （left bottom），或者center
background-attachment:fixed; 固定图片位置 }
```
简写backgroung:color url() repeat (attachment) position/x y;
详细简写：background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];（注意背景图片位置和大小尺寸间要用/隔开）
各个单个属性之间用空格分割，图片位置和尺寸的 X Y 坐标也是用空格分隔，例如：
```
<style>
    .box {
     background:#ccc url(...) no-repeat scroll 0px 0px / 400px 400px border-box padding-box;
    }
</style>
```
变色
线性渐变色
background:linear-gradient(45deg,red,blue); 或者 background:linear-gradient(to left,red,blue); 呈45度角渐变，在盒子里使用
径向渐变色
background:radial-gradient(red,blue); 由一个点向外发散，在盒子里使用
文字和盒子阴影
box-shadow:5px 5px 20px 5px red; 值分别表示 x偏移量 y偏移量模糊值外延值颜色
text-shadow:5px 5px 20px red; 值分别表示 x偏移量 y偏移量模糊值颜色
隐藏盒子
display:none; 元素不生成盒子，不占据页面空间
visibility:hidden; 元素生成盒子，占据页面空间，但是不可见
透明度
opacity: 0~1;
background-color:rgba(0,0,0,0.5);
rgba 后面的 a 就是控制透明度的这种写法要比上面直接的透明度常用一些，因为上面那种背景和字都会透明，而下面这种就只是背景透明。
改变鼠标样式
cursor:pointer;（小手形状）
cursor: crosshair;（十字光标）
cursor: help; （帮助）
cursor: wait; （正忙，等待）
雪碧图
雪碧图的优点：

可以减小建立连接的消耗,加快运行。
多张图片合并到一张图片中，可以减小图片的总大小。
减少网页加载图片时对服务器的请求次数。

大致代码如下：

i{
    display: inline-block;
    width: 21px;
    height: 20px;
    background-image: url(img/Disneyicon.png);
    background-position: -22px 0;
}

客户端

定位属性与常用样式

定位属性

相对定位（relative）

绝对定位（absolute）

固定定位（fixed）

粘性定位（sticky）

这是文章

transform

transform 的相关属性

其他常用属性

美化文本

背景图

变色

线性渐变色

径向渐变色

文字和盒子阴影

隐藏盒子

透明度

改变鼠标样式

雪碧图