1.css三大特性：层叠性、继承性、优先级
1.1层叠性：样式冲突 就近原则 不冲突就执行
<style> div { color: red; font-size: 12px; } div { color: pink; } </style> <body> <div>长江后浪推前浪,前浪死在沙滩上</div> </body> 显示的是粉色
1.2继承性：子标签会继承父标签的某些样式，（text-，font-，line-，color，与文字相关的都可以继承）
1.3优先级：!important>行内样式（style=“ ”）>ID选择器>类选择器，伪类选择器>元素选择器>继承或* 范围越小，权重越大 继承的权重是0
a链接浏览器默认指定了颜色，蓝色，有下划线
2.盒子模型
2.1边框（border）
border: border-width(粗细) || border-style（样式） || border-color（颜色）;
边框简写：border：1px solid red；没有顺序
只要上边框：border-top
div {
200px;
height: 200px;
border: 1px blue solid;
border-top-color: red;
}下面覆盖上面 就近原则
2.2表格的细线边框：控制相邻单元格的距离
border-collapse：collapse； 表示相邻边框合并在一起
表格的话 table，td单元格，th标题单元格
2.3内边距（padding）：框与内容的间距
padding:5px 上下左右
padding:5px 10px 上下5 左右10
padding:5px 10px 20px 上5 左右10 下20
padding:5px 10px 20px 50px 上 右 下 左 padding会撑大盒子
2.4外边距 （margin）：控制盒子与盒子间的距离
方式和padding一样
居中显示 magrin：0 auto；左右auto
让行内或者行内块元素水平居中对齐，则给其父元素添加 text-aling：center；
相邻块元素合并问题：取较大值为外边距值
嵌套块元素塌陷问题：解决方案：1.可以为父元素定义上边框2.可以为父元素定义上内边距3.可以为父元素添加 overflow：hidden
2.5清除内外边距
* {
padding：0；
margin：0；
} 第一行代码
行内元素尽量设置左右边距，不设置上下边距
2.6圆角边框（重点）
border-radius:length; 如果写四个数值，则从左上开始顺时针。两个数值则为对角线。
border-top-left-radius：length；
2.7盒子阴影
box-shadow：h-shadow v-shadow blur spread color inset；
h-shadow：水平阴影（允许负值）
v-shadow：垂直阴影（允许负值）
blur：模糊距离 spread：阴影的尺寸 color：阴影的颜色 inset：将外部阴影（outset）改为内部阴影
2.8文字阴影
text-shadow：h-shadow v-shadow blur color；
3.浮动（float）
3.1标准流：标签按照规定好的默认方式排列
3.2网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
选择器 { float：属性值} none/left/right
3.3浮动元素的特性：
1.脱离标准普通流的控制（浮）移动到指定位置（动）（俗称脱标） 2.浮动的盒子不子啊保留原先的位置
3.浮动元素具有行内块元素特性
1.先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
2.浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流
3.4清除浮动
清除浮动的本质：清除浮动元素脱离标准流造成的影响
清除浮动的策略：闭合浮动，只让 浮动在父盒子内部影响，不影响父盒子外面的其他盒子
选择器{ clear：属性值；} left/right/both
在实际工作当中，几乎只用 clear：both
清除浮动的方法：
1.额外标签法：最浮动元素末尾添加一个空标签：<div style="clear:both"></div> 缺点：添加许多无意义标签，结构化较差，新增元素必须为块级元素
2.父级添加overflow：hidden/auto/scroll 缺点：无法显示溢出的部分
3.after伪元素：给父元素添加 .clearfix:after{content:"";display:block; height:0; clear:both; visibility:hidden;} .clearfix{*zoom:1;}
4.双伪元素：给父元素添加 .clearfix:before; .clearfix:after{content："";display:table;} .clearfix{clear:both} .clearfix{*zoom:1;}
3.5ps切图
1.图层切图：
2.切片切图
3.插件切图：cutterman
3.6css书写顺序
1.布局定位属性 display/position/float/clear/visibility/overflow
2.自身属性关系 width/height/margin/padding/border/background
3.文本属性： color/font/text-decoration/text-align/vertical-align/white-space/break-word
4.其他属性(css3)： content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient