前端知识回顾系列（二）----CSS
1. 基本结构
写在<head>里面，或引用
<style type=”text/css”>
选择器{
Key:value;
Key:value;
}
</style>
2. 选择器
（1） 基本选择器
标签选择器：p{ Key:value;}所有标签都给选上
类选择器：.head{key:value;}可以重用，也可以一个标签放多个类，用空格
Id选择器：#name{key:value;}一般用于JS，不能同名
（2） 高级选择器
后代选择器：.div p{}选择的是后代，不一定是儿子，某一部分的所有。共性
交集选择器：li.special{}没有空格，一般以标签开头。表示标签里面的特殊
并集选择器：h3,li{}用逗号隔开，表示样式两个或多个选择器相同。
儿子选择器：div>p{}就是div的下一层就是p,与后带选择器不同。IE7
序选择器：ul li:first-child{} 表示特殊，可以用交集选择器代替，IE8
兄弟选择器：h3+p{} h3紧跟着的第一个兄弟。
3. 继承性和层叠性
（1） 继承性：一些关于文字的属性都能继承，如font开头、text开头、line开头、color当给自己设计的时候自己的后代都会继承，作用：可以省写代码。
（2） 层叠性：（多个选择器描述了同一个属性、多个选择器作用于一个标签）
是用来解决冲突。
权重问题：
1）先看选择器有没有选中，如果选中了，那么以（id数，类数，标签数）来计算权重，谁大听谁的，如果都一样，以写在后面的为准。
2）如果都没有选中，那么权重是0，按就近原则。看看谁的选择器描述更靠近目标。
3）如果就近原则也描述的一样近，那在回到权重计算，看看谁的权重高。如此循环。
4）同一个标签携带多个类，与写的顺序无关，只和CSS的先后有关
5）！important（尽量少用）只提升一个属性，不是一个选择器、无法提升权重、无法影响就近原则，也就是说他要影响的就是权重一样或者一样近，但是写的先后顺序不同。
4. 盒模型
（1） 盒模型区域
width:宽度（内容宽）
height:高度（内容高）
padding:内边距
border:边框
margin:外边距
（2） width和height
都是表示盒子内容的宽高
真实宽度=width+左右padding
真实高度=height+上下padding
要想保持宽高不变，加width、height就要减padding(a/2);加padding就要减width、height(a*2)
（3） 认识padding
Padding区域有背景颜色，跟内容颜色一致
描述方法：
Padding:10px 20px 10px 20px;（上右下左）
Padding:10px 20px 10px;(上右下，左跟右一样)
Padding:10px 20px;(第一个上下，第二个左右)
Padding:10px;（全部方向一样）
用小属性层叠大属性padding:20px; padding-left:30px;
有些标签自带padding,需要清除
（4） 认识border
三要素：粗细、线型、颜色
Border:1px solid red;必须三个都写，不然显示不了。
线型记忆：solid（实线）、dotted（圆点）、dashed虚线、double双线
写法：
1）综合法： border:1px solid red;
2）要素法：border-width:1px; border-style:solid; border-color:red;(多个隔开表示上右下左)
3）方向法：border-top:1px solid red;…..
方向还能拆一层，少用，注意尽量简便写法
4）没有边框border:none;
5）圆角边框：border-radius:4px;
（5） 认识margin
1）标准文档流中，垂直方向的margin不叠加，以较大的为准。（margin的塌陷现象），脱标之后，比如浮动后没有塌陷现象
2）盒子标准文档流中居中方法（margin:0 auto,必须有明确width,必须标准流、居中盒子不是文本）
3）善于使用父亲的padding,而不是儿子的margin，兄弟间可margin
4）IE6中连续浮动并且margin方向相同时，队首元素会有双倍margin（推荐通过设置margin方向相反来解决）
5）IE6的3px bug （儿子在父亲中右浮动并设置了margin-right会多出3px,不用管不推荐儿子用margin踹父亲）
6）IE6不支持高度12px的盒子，height:10px;_font-size:0px;
7）IE6不支持overflow:hidden;来清除浮动，hasLayout机制，zoom:1;来触发。Zoom放大缩小的意思。
5. 标准文档流
（1）空白折叠、高矮不齐，底边对齐、自动换行。
（2）元素和级块元素：（标准文档流等级森严，分为两个等级）
级块元素：占整行，不能与任何元素并列、能设宽高、不设默认为父的100%（div h ul li ol dl dt dd p）
行内元素：能与其他行内元素并排、不能设置宽高，默认为文字宽高
（span a u I b del strong）
（3）级块元素和行内元素的相互转换
Display:inline; 级块转行内
Display:block; 行内转级块
并排（浮动），设置宽高（转级块）
脱离标准文档流：浮动、绝对定位、固定定位
6. 浮动
（1） 性质：浮动元素脱标（span浮动后可以并排和设置宽高）
浮动元素互相贴靠（看空间，贴不了上一个，就贴前前个或墙）
字围效果（浮动元素不会遮挡文字，文字围着浮动元素）
一般是多个元素浮动，达到并排布局
（2） 清除浮动
1）给浮动元素的祖先加高度。（一般不推荐，高度靠内容撑）
2）给后一个盒子加clear:both属性（margin失效，因为父亲高为0）
3）两个之间隔墙法（.clf{clear:both;};但第一个父亲还是没有给撑高，一般用在大的部分）
4）给第一个盒子内墙法（弥补了隔墙法的的缺点，既能清除浮动，还能另第一个盒子有高度）
5）给父亲设置属性overflow:hidden;能让margin生效，父亲给撑出高
但不能溢出
7. 定位
（1） 相对定位（相对于自己原来的位置，进行位置的调整）
Position:relative; top:100px; left:100px;
1）不脱标，老家留坑，形影分离，参考点为自己
2）用途：微调元素、做绝对定位的参考（子绝父相）
3）负数方向相反。Right:-100px;=left:100px;
（2） 绝对定位
1）绝对定位脱标，不区分行内级块、不需转换就能设置宽高
2）参考点：top描述，参考点在页面右上角，不是浏览器右上角
Bottom描述，那么就是浏览器首屏尺寸，对应的页面左下角
3）以盒子为参考点
一个绝对定位的元素，如果父辈元素中出现了也定位的元素，那么将*以父辈这个元素为参考点
*要听最近已定位的元素，不一定是父亲，可能是祖辈
*不一定是相对定位，任何定位，都可以作为参考点，一般是子绝父相，父亲没有脱标，儿子脱标，在父亲范围内移动。这样更稳固。
*绝对定位的儿子，无视参考那个盒子的padding。
*绝对定位的盒子水平居中，position:absolute; left:50%; margin-left:一半;
（3） 固定定位（IE6不兼容）
1）固定定位是相对浏览器窗口的定位，页面如何滚动，这个盒子显示的的位置不变。
2）固定定位脱标
3）一般应用于通栏导航（注意设置z-index：9999;让其位于最上层）
z-index属性：
表示谁压着谁，数值大的压数值小、
只有定位的元素才有，任何定位都可设置 z-index、
没有单位，是一个正整数，默认为0
如果大家都没设置z-index值，谁写在HTML后面，谁最上面
从父现象：父亲的值小，儿子多大都没办法，压着别人。
8. CSS常用属性
（1） 行高和字号
Line-height
*行高作用在行，不作用文字
*行高、字号一般是偶数，字号比行高小
*会测量行高
*单行文字居中：行高：盒子高；多行文字居中，需设置盒子padding
font
*能将字号、行高、字体一起设置（font:14px/24px “SimSun”）
*不是所有字体都能用，一般（宋体、微软雅黑、黑体）其他需切图
*备选字体设置（font-family:”Arial”,”Microsoft YaHei”,”SimSun”）英文字体放前面，不匹配就自动匹配后面的中文
（2） 超级链接美化
1）伪类（一个标签，状态不同，有不同样式）
*:link:没有点击过
*:visited:访问过后
*:hover:悬停
*:active:点击的时候，按下的时候
*必须按顺序
*一般只写:hover
*习惯：a标签中描述盒子，伪类中描述文字样式、背景。A没有继承
（3） Background系列属性
1）background-color:rgb(255,255,255); 十六进制:#fff 英文：black
2）background-image:url(相对路径);
3）background-repeat:四种 默认、no-repeat、repeat-x、repeat-y背景重复
4）background-position:水平 垂直；
*背景定位，常用英文（right、center、left、top、bottom）
*css精灵：把所有小图标合并到一张图上，通过背景定位，显示部分减少http:请求
*应用：大背景居中给body设置背景图，定位居中、通栏banner
5）background-attachment:fixed背景固定，不会随滚动条滚动
6）background综合属性 background:url(1.jpg) no-repeat 100px 100px fixed;
（4） 去掉小圆点 list-style:none;
（5） 缩进 text-indent:2em;缩进两个汉字。
浙公网安备 33010602011771号