CSS零碎知识点
无内容的边框：可以做三角箭头
border-right:7px solid #FFF;
border-top:7px solid transparent;
border-bottom:7px solid transparent;
border-left: 7px solid blue;
顶部banner图
设置为background-position: 50% 50%; 可以将其重点放在页面上，并且改变浏览器窗口大小也不会压缩变形。记住同时min-width;一定要设置为定宽布局部分的固定宽度。
关于position的总结：
1.在html页面中，默认使用流式布局。
2.流式布局：在一个元素中，他的子元素都拥有自己的默认位置，子元素之间采用从左到右，从上到下的方式排列布局。
3.文档流：在一个元素中，流式布局的元素队列，在文档流中的子元素都会有自己的位置，如果某个子元素脱离了文档流，那么他就不再参与流式布局，不再拥有自己的位置。
4.块元素不设置宽高时，宽度与父元素等宽，高度取决于自身内容。但是如果脱离了文档流，就不能参照父元素定宽，所以脱离了文档流的块元素如果没有内容，则必须设置宽高。如果有内容，宽高都取决于内容。
position作用：表示元素的定位方式。
static静态定位。参与流式布局，不能设置位置，是元素默认的定位方式。
absolute绝对定位。脱离文档流。不参与流式布局。所以在它父元素的文档流中就没有他的位置。绝对定位的元素可以设置位置，相对于离自己最近的position为非static的外层元素定位。
relative相对定位。参与流式布局，可以设置位置，相对于本身在流文档中原有的位置进行定位。
fixed固定定位。脱离文档流，可以设置位置，相对于浏览器视窗进行定位。不随页面滚动。
简单常用的表格属性：
设置边框折叠，解决看起来像双边框问题：border-collapse: collapse;
colspan设置td占多少列，rowspan设置td占多少行。
常用的伪类：
:hover , 所有元素都能用
:active，当元素获得焦点时触发。只有可交互的元素才能获得焦点。同一页面中同一时间只有一个元素获得焦点。
:visited , 只能用于a标签，表示已访问过。
:before , 元素前缀，前缀中设置的内容，会显示在元素的左边。前缀中的内容可以单独设置样式
.rmb:before{ content: "￥"; color: blue; }
相似的:after
.rmb:after{ content: "元"; color: blue; }
:first-letter , 选中元素中第一个元素。
#p1:first-letter{ font-size: 30px; color: red; }
:first-line ， 选中元素中第一行。
#p1:first-line{ font-family: "黑体"; }
实现上下左右居中
absolute，四个方向0；margin：auto；
{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
常用的background属性：
1.background-position，设置背景图片的位置。横向和纵向。可以设置具体指，也可以设置百分比。
background-position: 100px -20px; /*上下左右居中*/ background-position: 50% 50%; /*右下*/ background-position: 100% 100%;
2.background-size，设置横向和纵向的尺寸。如果不设置这个属性，默认为图片原始大小，如果只设置宽度，高度会等比例变化。可以设固定值，也可以设置百分比。
与元素等宽高：background-size: 100% 100%;
有两个特殊值：
contain，纵向铺满，横向等比例缩放。
cover,横向铺满，纵向等比例缩放。
background-size: contain;
background-size: cover;
3.background-attachment: fixed;背景图片固定
4.background-clip: content-box; 背景裁剪，背景只显示在内容部分，pading部分无背景。
5.背景精灵：将多个小图片拼接成一个大图片之后，会减少本页面加载时的请求次数，提高页面的访问速度。
background-image, background-size, background-position , 配合使用。
如下：div宽度为50*50；小图标共有7*7；于是 background-size: 700% 700%; 可以使背景图为div的7倍宽高，于是每张图的宽高就等于div的宽高了。然后通过 background-position: -100% -200% ; 就可以定位在在图片里第3排第2列的铃铛小图标了。
div{ width: 50px; height: 50px; border: 1px solid black; background-image: url("icons.jpg"); background-position: -100% -200% ; background-size: 700% 700%; }
常用的border相关属性：
1.圆角：border-radius:25px;
2.阴影：box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需。阴影的水平方向相对于左上角的偏移量。允许负值
v-shadow 必需。阴影的垂直方向相对于左上角的偏移量。允许负值
blur 可选。模糊部分的尺寸。
spread 可选。阴影的尺寸，设置正值，阴影会大一圈。同理，负值会使阴影变小。
color 可选。阴影的颜色。
inset 可选。将外部阴影 (outset) 改为内部阴影。
即：h-shadow与y-shadow决定了阴影的位置，blur决定了阴影的模糊程度，spread决定了阴影的尺寸。
应用：box-shadow: 10px 10px 5px #888888;
3.使用图片来绘制边框：
div{ border-image:url(border.png) 30 30 round; -moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */ -webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */ -o-border-image:url(border.png) 30 30 round; /* Opera */ }
盒子模型
1.任何元素，从里到外分为 内容，内间距，边框，外间距。
2.设置一个元素的宽高，默认设置的是内容的宽高。可以通过box-sizing设置。
3.box-sizing，元素宽高的计算方式，默认为content-box，以内容盒计算。border-box表示以边框盒计算，包含内容，内边距和边框。
/* 默认 内容*/ box-sizing: content-box; /* 内容 内边距 边框 */ box-sizing: border-box;
content-box:
border-box:
4.外边距重叠
两个块元素，上下相邻时，外边距会产生重叠。如果两者外边距不同，则使用较大的那个值。
两个嵌套关系的块元素上下外间距也会重叠。如果两者外间距不同，则使用较大的那个值。
必要条件：只有块元素的上下外间距才会产生重叠。
行元素或行内块元素之间会有小间隙？
原因：HTML在书写时为了保持美观，每个元素单独写一行，所以元素之间会有空格和回车，这些空格和回车在页面解析时会被解析成一个空格，间隙就是这个空格造成的。
解决办法：清除元素之间的回车和空格，例如将下一行的开始标签写在上一行；设置负margin抵消间距（用em）；
关于float：
让元素使用浮动布局，不再使用流式布局，在浮动布局中，块元素不再单独占一行，而且宽度不再与父元素相等，也进行左右排列。
任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
注意：浮动布局会影响本元素的后续元素，所以使用浮动布局之后一定要在最后一个浮动元素之后清除浮动，否则会造成父元素撑不开，后续元素排列错误等。
清除浮动的方法：
在最后一个浮动元素之后添加一个空的div，给这个div设置样式clear: both;
在不添加新元素的情况下清除浮动：为浮动元素的父元素添加一个class（一般使用clear-fix作为class名），为这个class添加后缀，后缀设置为块级元素，并clear: both;
.clear-fix:after{ content: ''; display: block; clear: both; }
浮动布局用处：做环绕效果；
常用长度单位：
溢出的文本过长将超出部分设置为 ...
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
关于是否脱离文档流的尝试：
position:relative
position:absolute
float:left;
float和absolute都会将元素转成块级元素。relative不会。
如下：
width: 50px;
height: 50px;
background-color: green;
margin: 10px;
这时元素的宽高不会是50px，因为是行内元素
添加float：left；以后，元素具有了宽高：
改为添加position:absolute; 元素同样具有了宽高，都叠在了一起：
改为position:relative; 再看看还是与原来一样，仍旧是不具有设置的宽高的。
所以float和absolute都会将元素转成块级元素。而relative不会。
关于css选择器
类别：标签名，id，class，属性，自定义，伪类选择器
div p 选择子元素（包括所有子辈元素，包括孙子...
div>p 选择子元素（孙子元素不选择）
#first.line 同时满足id为first和class为line
[abc] 属性选择器
[pro=val] 属性选择器
div:empty 内容为空的div
td:nth-of-type(1) 每个元素中的第一个td标签。即选中表格中第一列。
td:nth-last-of-type(1) 每个元素中倒数第一个td标签，即选中最后一列。
td:nth-of-type(2n) 所有第偶数个td。
td:nth-of-type(2n+1) 奇数 。常用于表格的隔行换色。
td:nth-of-type(n+3) 从第三列开始，后面所有td
td:nth-of-type(-n+3) 前三列
选择器优先级：！important>行内样式>id选择器>class选择器>标签名选择器
多个选择器连写时优先级是这些选择器优先级（权值）之和。权值：标签名1，class10，id100，行内1000，！import10000。例如h1#t1.title比#t1高。
让元素隐藏
display: none;让一个元素在页面当中不显示，而且页面中也没有它的位置
visibility: hidden;让一个元素在页面当中不显示，而且页面中有它的位置
浏览器前缀
-ms- /* IE */ -webkit- /* Safari and Chrome */ -o- /* Opera */ -moz- /* Firefox */
body元素自带一个8像素的外间距。
rgb分别表示三种颜色的强度，所以rgb(0,0,0)黑色，rgb(0,0,0)白色。
