CSS1

a0.outline: 10px solid red; 调试定位法，大小，实线，红色。

1.line-height 属性设置行间的距离（行高）。 有时候可以左右剧中问题，父用了行高子就也用这个行高

2.<span style="border:2px solid #F00">对span设置装备摆设2px血色边框</span>  ;border布局需要注意silid属性加颜色

3.box-shadow 属性用于在元素的框架上添加阴影效果 ，该属性可设置的值包括，X偏移，Y偏移，阴影模糊半径，阴影扩散半径，和阴影颜色并以多个逗号分隔。

4.box-sizing:border-box（可以放在开头*{box-sizing:border-box}） 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。

5.height设置百分比不生效问题：经验：如果是按百分比给高度或者宽度一定要给一个最大最小的像素范围。

如果想让一个元素的百分比高度：height::100% 起作用，你需要给这个元素的所有父级元素的高度都设定一个值。

换句话说在刚刚的例子中，需要给body和html元素的高度都设置为height:100%  下面的div的高度的百分比才会生效

6.css中solid 是 实线的 意思
border:1px solid #aaaaaa;的意思是 边框1像素的实线（颜色的#aaaaaa）

7.文本不换行，溢出改"..."

text-oneLine{
            display:block;            /*内联对象需加*/
            word-break:keep-all;      /* 不换行 */
            white-space:nowrap;       /* 不换行 */
            overflow:hidden;          /* 内容超出宽度时隐藏超出部分的内容 */
            text-overflow:ellipsis;   /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
        }

8.background-size: length|percentage|cover|contain;

cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

background-size: 100% 100%;

cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

9.opacity: 0.2;设置不透明度。1.0是完全不透明；用百分比的话有的浏览器（google低版本）会不兼容。

10.层定位后.z-index数大在上面

一个层设:z-index:100
一个层设:z-index:99

11.CSS linear-gradient() 函数：函数用于创建一个线性渐变的 "图像"。

background-image: linear-gradient(to right, rgba(255,0,0,0),rgb(165, 58, 58), rgba(255,0,0,0));

12.很重要的一个思路！语法：css选择器实现联动(当父元素的hover生效后，后面的元素才生效)

.pan-data-icon-parent:hover .light-line {
	display: none;
}

 思想css选择器：CSS给当前class样式添加一个父class样式，这时候想要控制当前class样式的生效，只要给当前元素的祖先元素添加这个父class样式就可以了。

//当动画结束后给公共的父元素使用js添加一个父class,（拥有的此父class之后才有下面的clss样式）
.myanimationend .light-line {
    background-image: url("../img/pinganIndex/light-line.png");
}

<script>
    /*这里有几个知识点：
         1.使用jquery绑定事件使用on。（相当于原生js的addEventListener（这个好像有的不兼容））   
         2.添加animationend动画结束监听事件
         3.addclasst添加class样式
    */
    $(".pan-earth-div").on("animationend", function(){$(".pan-earth-div").addClass("myanimationend");}); 
</script>

13.定位

absolute :生成绝对定位的元素，相对于最近一级的定位不是 static 的父元素来进行定位。

fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。

relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。

static 默认值。没有定位，元素出现在正常的流中

sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出

14.CSS3\transform向上移动自身元素的一般（用作垂直居中）!!!

position: relative;
top: 50%;
transform: translateY(-50%)

transform该属性允许我们对元素进行旋转、缩放、移动或倾斜。

15.margin:0 auto；在不同场景下生效条件如下：一定给定宽度，里面才可以块居中

块级元素：给定要居中的块级元素的宽度。

    行内元素：①设置display:block；②给定要居中的行内元素的宽度。（行内元素设置成块级元素后可以对其宽高进行设置）

    行内块元素：设置display:block。（如input、button、img等元素，自带宽度可以不用设置其宽度）

 文字居中

   ①所有元素也可以通过对父元素设置 text-align：center；的方式来实现居中。（而对于块元素来说，对要居中的元素自身进行设置text-align:center也能实现居中——而无需对其父元素进行设置）

    ②margin:0 auto;可以使盒子居中，text-align:center;可以使文本居中，故有时需要两者结合使用才能使得盒子及其中文本一起居中。

16.关于css控制字体

letter-spacing:像素（字母或中文字的左右间距）
        
word-spacing:像素（两个单词之间的左右间距）

line-height:像素（两行之间的间距）

text-decoration:字体的装饰（如删除线等）

vertical-align:垂直上的位置

text-align:文字对齐方式

text-indent:缩进（一般以rem为单位，2rem为两个中文字的宽度）

text-transform:将文本转换为其他形式