CSS的知识点补充

CSS的知识点补充

一 标准流(文档流):就是html代码的书写顺序。

二 浮动:(float:left; 左浮 float:right; 右浮)

浮动的特点:

  1. 元素一旦浮动会水平排列;
  2. 元素一旦浮动类似转行内块(能控制宽高,不独占一行)
  3. 元素一旦浮动就脱离文档流;

三 清除浮动(浮动对其他元素造成的影响)

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

yang, xiaoyun

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: