CSS注意事项（二）

CSS中定位

1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明
2、absolute（绝对定位）
absolute定位的元素脱离了文本流，在正常流中的位置不再存在。相对于 static 定位以外的第一个父元素进行定位或参照浏览器的左上角通过top,right,bottom,left（简称TRBL） 定位。
如果设定TRBL，并且父级设定position属性，则以父级的左上角为原点进行定位，位置由 TRBL决定。即使父级有Padding属性，对其也不起作用
因此把一个定位属性为absolute的元素定位于其父级元素内，只有满足两个条件：
　 第一：设定TRBL
　第二：父级设定Position属性
在Position属性值为absolute的同时，如果有一级父对象（无论是父对象还是祖父对象，或者再高的辈分，一样）的Position属性值为Relative时，则上述的相对浏览器窗口定位将会变成相对父对象定位
3、relative（相对定位）
定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在。
他是默认参照父级的原始点为原始点，无父级则以文本流的顺序在上一个元素的底部为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。
无论父级存在不存在，无论有没有TRBL，均是以父级的左上角进行定位，但是父级的Padding属性会对其影响。
总结：
relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式
对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层；如果其父层中都未定义absolute或relative，则其将相对body进行定位

摘抄自下面博文：https://www.cnblogs.com/theWayToAce/p/5264436.html

文字阴影

文字阴影的顺序：水平偏移距离，垂直偏移距离，模糊度，阴影的颜色
发光效果：可进行多个阴影的叠加，例如：text-shadow:0px 0px 10px yellow,0px 0px 5px orange
3D效果：通过层次感营造出3D立体效果
闪亮的效果：使用动画animation和keyframes 名称{from … to… }

过渡动画

transition属性：要过渡的属性 过渡时间

transition-property:width,background;
transition-duration:2s,10s;
transition-timing-function:ease;
/*ease:默认先慢后快再变慢*/
/*linear:线性速度*/
/*还可以通过浏览器获取贝塞尔曲线值*/
transition-delay：3s;

2D移动与旋转

transform：translate(x,y);
/*X代表水平移动，y代表垂直移动的距离。*/
等同于transform：translateX()  translateY()
transform:rotate();

3D旋转

旋转X轴：transform:rotateX();此时看到只是3D旋转之后的二维投影平面。
3D效果呈现：
perspective：距离值；/设置透视点/

margin：0 auto居中

margin：0 auto居中生效的情况：
**块级元素：**给定要居中的块级元素的宽度。
**行内元素：**①设置display:block；②给定要居中的行内元素的宽度。（行内元素设置成块级元素后可以对其宽高进行设置）
**行内块元素：**设置display:block。
margin：一个元素在水平方向上所占的长度，由width ,padding ,和margin 决定。这些值中，只有width和margin-left，margin-right可以设为auto。
1、auto 可解释为：弥补其它部分与所要求总合之间的差别;
2、如果两个边界都被设为 auto ,则被设为相等的值。
3、如果两个边界之一和width设为auto ,则被设置为auto的边界值为0
4、三个都被设为auto ,则2个边界的值都为0，width的值为最大可能值

background-image属性

1、在使用该属性的时候，需要给容器添加height和width，不然无法显示。因为背景图片不会撑开容器，只有容器的内容（content+padding）才能撑开容器。
background-size：100%100%; 按容器比例撑满，图片变形；
background-size：cover;把背景图片放大到适合元素容器的尺寸，图片比例不变
2、该属性的路径（url）问题
图片路径可以是绝对路径、根相对路径、文档相对路径
绝对路径是包括服务器协议的完全路径
根相对路径（也称相对跟目录）的路径以“/”开头，路径是从当前站点的根目录开始计算。
文档相对路径就是指包含当前文档的文件夹，也就是以当前网页所在文件夹为基础开始计算路径
当使用相对地址时，相对地址和css是内联还是外联是有关系的：在css中当使用内联css时，相对地址为图像相对于htm文件的地址；当使用外联css时，相对地址应为图像相对于css文件的地址！
关于background-image的路径问题参考自下面博文：https://www.cnblogs.com/kelly2017/p/7091829.html
关于斜杠和反斜杠：
web应用最新使用在Unix系统上面，所以目前所有的网络地址都采用 斜杆/ 作为分隔符。
windows系统上的文件浏览器都是用 反斜杠\ 作为路径分隔符（由于使用 斜杆/ 作为DOS命令提示符的参数标志）

在该属性的url中，需要使用/或者//。

参考博文：https://blog.csdn.net/yfgcq/article/details/7062550
https://www.cnblogs.com/theWayToAce/p/5264436.html