1.css选择器
<ul class="num" id="list">
<li class="jiao one">111</li>
<li class="two">222</li>
<li class="three">333</li>
<li>
<div class="one">wode</div>
</li>
<li>555</li>
</lu>
- 交集选择器
.jiao.one {color:red;} //选择既有.jiao又有.one的元素
- 并集选择器
.one,.two,.three {color:yellow;}
- 后代选择器
.num li {background：blue;} //选择.num下的所有li元素
- 子代选择器
.num > .one {color:black;} //选择.num的直接子元素
- 属性选择器
[disabled] {color:red;} //选中属性为disabled的元素
[type=button] {color:red;} //选中type值为button的元素
[id=nav]{} //相等于 #nav{}
[class ~= a] {} //相等于 .a{}
[href ^= "#"]{} //选中以#开头的元素
[href $= pdf]{} //选中以pdf结尾的元素
[href *= "a.com"] //选中href中包含a.com的
-伪类选择器
li:nth-child(even) {color:red;} //隔行变色的例子；even可换成表达式2n+1;
1.css链接样式（爱恨原则:love、hate）
a:link{} //未访问时状态
a:visited{} //访问后你状态
a:hover{} //鼠标经过时状态,可以应用于任何块级元素和行内元素
a:active{} //鼠标点击时状态,可以应用于任何块级元素和行内元素
例：
img:hover{border: 1px solid red} //鼠标经过时给图片加上红色边框
2.列表和表格的自定义样式
去除超链接下划线: text-decoration:none;
去除列表项符号：list-style-type:none;
自定义列表符号：list-style-image:url;
表格边框合并：border-collapse:collapse;
表格边框间距：border-spacing:5px 10px; //水平方向 垂直方向
表格标题位置：caption-side:bottom/top（默认）;
3.css3盒子模型
4.css背景
多张背景图片：background-image:url(1),url(2),url(3);
background-repeat:no-repeat; //是否平铺整个背景
backgroung-position:0 0; //默认，x轴向右方向，y轴向下方向
background-attachment:scroll; //背景图像会随着页面其余部分的滚动而移动。
fixed //当页面的其余部分滚动时，背景图像不会移动。
设置渐变背景：background: linear-gradient(45deg, #000, #f00 50%, #090);
渐变方向使用角度或者关键字设置
用百分比或长度指定起止色位置，长度不允许负值。
backgroung-size:cover;//铺满屏幕
:contain; //尽量小的图片
5.光标
cursor:crosshair; //十字线
pointer; //手的形状 #### 6.display属性
1)display:block;
block元素会独占一行，多个block元素会各自新起一行。 默认情况下，block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。
2)display:inline;
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
3)display:inline-block;
简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
7.perspective:
定义元素距离3D视图的距离，只影响3D转换元素。
（在大屏3D视图的项目中见到过，可以使用时再详细了解）
8.overflow属性
1）-visible:默认值。不裁剪溢出内容并全部可见。 2）-hidden:裁剪并隐藏溢出内容 3）-scroll:裁剪溢出内容并设置滚动条 4）-auto:溢出则设置滚动条，不溢出则不设置。
9.position属性
1）static:默认值。按元素出现先后顺序排列 2）relative:绝对定位。类似于static，区别是可以应用float属性将元素从正常文档流中脱离出来。 3）absolute：相对定位。可以把元素摆放到他的容器的任何位置，容器可以是文档本身，也可以是有着fixed、absolute属性的父元素，显示由top、left决定。
3.16笔记
vertical-align:属性设置元素的垂直对齐方式.
- top 把元素的顶端与行中最高元素的顶端对齐.
border-collapse 属性设置表格的边框是否被合并为一个单一的边框.
- collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
resize 属性允许你控制一个元素的可调整大小性。
overflow: auto; 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
box-sizing 属性以特定的方式定义匹配某个区域的特定元素。
需要并排放置两个带边框的框，可通过 box-sizing :border-box 令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
