CSS知识整理

1. 权重问题(CSS优先级）：

　　继承或 * ：0,0,0,0

　　标签：0,0,0,1

　　每个类，伪类：0,0,1,0

　　每个ID：0,1,0,0

　　每个行内式：1,0,0,0

　　!important：无穷大

　　注意，权重会叠加。例如，div ul li （权重=0,0,0,1 + 0,0,0,1 + 0,0,0,1 = 0,0,0,3）、.nav ul li（权重=0，0,1,0 + 0,0,0,1 + 0,0,0,1 = 0,0,1,2）。注意：数位之间没有进制，比如说0,0,0,5 + 0,0,0,5 = 0,0,0,10 而不是 0,0,1,0

2. 综合设置字体样式

　　选择器 { font: font-style font-weight font-size/line-height font-family;}

　　注意：使用 font 时，必须按照以上的书写顺序书写，可以省略一些属性（取默认值），但是必须保留 font-size 和 font-family属性，否则不起作用。

3. 解决表格边框合并在一起边框粗的问题。

　　设置cellspacing:0; 单元格与单元格之间的距离变为0。虽然边框是1px，但是两个单元格合并在一起就是2px，所以看起来更粗。解决方法：border-collapse: collapse;

4. 标签的显示模式：display

　　块级元素（block）：常用于网页布局和网页结构搭建。每个块级元素都会独自占一整行或多整行，可对其设置宽度、高度、对齐等属性。常见的块元素：<h1>~<h6>、<div></div>、<p></p>、<ul></ul>、<li></li>等。特点：总是从新行开始；高度、行高、外边距以及内边距都可以控制；宽度是默认容器的100%；可以容纳内联元素和其他块级元素。

　　行内元素（inline）：常用于页面中控制文本的样式。行内元素不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性。常见的行内元素：<a></a>、<span></span>、<strong></strong>、<u></u>等。特点：和相邻的行内元素在一行上；高、宽设置无效，但水平方向的 padding 和margin 可以设置，垂直方向无效；默认宽度就是它本身内容的宽度；行内元素只能容纳文本或其他行内元素（<a></a>特殊，里面可以放块级元素）。

　　行内块元素（inline-block）：常见的行内块级元素：<img />、<input />、<td /></td>。既可以放在同一行，也可以设置宽高等。特点：和相邻行内块元素在一行上，但是之间会有空白间隙；默认宽度就是它本身内容的宽度；高度、行高、外边距以及内边距都可以控制。

5. padding

　　注意：若盒子有宽度，padding会撑开盒子。

6. 圆角边框

　　border-radius: 50%;  正方形变成圆形。

　　 border-radius: 1px 1px 1px 1px;   顺时针方向（左上角 右上角 右下角  左下角）

　　 border-radius: 10px 3px;    对角线：左上角、右下角10px;，右上角、左下角3px.

　　border-radius: 20px 10px 30px;    左上角20px，右上角、左下角10px，右下角30px

7. 给文本或盒子添加阴影

　　text-shadow：给文本添加阴影。

　　

　　box-shadow：向框添加一个或多个阴影。

　　

 8. 浮动 float

　　注意：浮动会让元素默认转换为行内块元素。浮动后的盒子不占有原来的位置，漂浮在其他标准流盒子的上方。

9. 元素的显示与隐藏

　　显示：visibility: visible;

　　　　　display: block;

　　隐藏：visibility: hidden;

　　　　    display: none;

　　注意区别：display: none; 隐藏后不会占有空间，而visibility: hidden;隐藏后还是占据着原来的空间，会影响布局。

10. 溢出隐藏

　　overflow:hidden;

　　overflow:scroll;    总是显示滚动条

　　overflow:auto;     超出就显示滚动条

11. 溢出的文字显示

　　溢出部分隐藏：

　　

　　溢出部分用省略号表示：

　　

　　溢出部分直接剪切掉：

　　

12. 常用的鼠标样式

　　cursor: pointer;   鼠标样式变成小手

　　cursor: text;    鼠标变成文本编辑状态

　　cursor: default;   默认，通常是一个箭头

　　cursor:move;    鼠标样式变成十字架样子，表示某对象可被移动。

13. 轮廓线 outline

　　outline: outline-color outline-style outline-width;

　　取消轮廓线的方法：outline: none;

　　

　　

　　效果如下图所示：

　　

14. vertical-align

　　vertical-align 不影响块级元素的内容对齐，它只针对于行内元素或者行内块元素，通常用来控制图片或表单与文字的对齐。

　　常用的：

　　vertical-align: middle;    把此元素放置在父元素的中部。

　　vertical-align: top;     把元素的顶端与行中最高元素的顶端对齐。

　　vertical-align: baseline;   元素放置在父元素的基线上。默认的。会有空隙。

　　vertical-align: bottom;    把元素的低端与行中最低元素的顶端对齐。  可以解决空隙问题，没有空隙。

14. datalist标签

　　datalist标签定义选项列表，与input元素配合使用，来定义input可能的值。

　　

　　效果如下：

　　

15. fileldset 标签

　　fieldset将表单内的相关元素进行分组，打包 和legend搭配使用

　　

　　

　　效果图如下：

　　

 16. video 和 audio

　　注意：有兼容性问题，有的浏览器不支持mp3等格式，可以先用工具转换格式，然后用source标签，第一种格式不支持，则用下一种，以此类推。

　　

　　video 使用方法同 audio。

17. box-sizing: border-box; 

　　内减模式，即使再增加边框或内边距，盒子的整体的大小也不会发生改变。

 18 . :after

　　:after 选择器在被选元素的内容后面插入内容。使用 content 属性来指定要插入的内容。

　　注意：使用:after会将元素转化为行内元素.