CSS的知识点补充
CSS的知识点补充
一 标准流（文档流）：就是html代码的书写顺序。
二 浮动：（float:left； 左浮 float:right; 右浮）
浮动的特点：
-
元素一旦浮动会水平排列；
-
元素一旦浮动类似转行内块（能控制宽高，不独占一行）
-
元素一旦浮动就脱离文档流；
三 清除浮动（浮动对其他元素造成的影响）
1 clear:both;{both=left+right} (清除上盒子浮动对下盒子造成的影响；前提是这几个盒子在一个大盒子里；如图所示；)
2 overflow:hidden;(清除浮动) {浏览器默认的是overflow:auto；自动}
overflow:hidden; 的作用：1）溢出隐藏{超出大盒子的时候可以使用；超出的部分会隐藏；} 2） 清除浮动；”清除上边大盒子浮动对大盒子外的元素造成的影响，如图所示”
3 伪类清除浮动
ClearFix:after{clear:both; display:block; visibility:hidden; height:0; line-height:0; conter:””;}清除的浮动结构和overflow:hidden一样
四 定位的概念
1 绝对定位：相对于浏览器定位； position：absolute；
2 相对定位：相对于自己定位； position：relative；
定位的特点:1) 脱离文档流；2）使行内元素的宽高起作用，但必须是绝对定位；相对定位没有这个作用；
3 子绝父相：子级使用绝对定位，父级使用相对定位， 最后的结果是子级相对于父级定位{常用的定位方法}
4 固动定位：position：fixed；{位置固定，不会随着浏览器的滚动而动}
五 精灵图（sprite）
精灵图:是把多张图片合成为一张，减少对服务器的请求次数，提高页面的加载速度。
CSS精灵图一定是进入背景图，不能插入图片
精灵图的使用步骤：1）先量一下需要显示的图片大小；2）在html中创建盒子；3）在css里控制该盒子的大小，盒子的大小=需要看到图片的大小；4）用背景图片进入，然后调整需要显示图片的位置{调整坐标}
六 背景颜色透明的方法
1 background:rgba{ } 比如：背景黑色透明background:rgba{0,0,0,(0.5)} 小括号里的取值范围在0~1之间；r是红色； g是绿色； b是蓝色； a是alpha透明
2 opacity
