解决高度塌陷、定位(补充版)、opacity、filter、ba
解决高度塌陷
清除浮动:将最后一个盒子设为空白盒子再clear:both;就可以撑开父元素,防止高度塌陷
用after在后面加入内容,为兼容ie6需加zoom eg:.clearfix:after{content:"";display:block;clear:both;}
.clearfix{zoom:1;} 【最推荐使用】
定位:元素开启定位后比文档流高一层
position:
static:默认值,没有定位
relative:{position:relative;left:100px;top:200px;}
相对定位相对于元素在文档流原来的位置
开启相对定位后不会影响元素性质
absolute:元素相对于html元素或离他最近 的祖先定位元素进行定位(一般帮他的父元素先开启相对定位)
绝对定位,会使元素完全脱离文本流
开启绝对定位后会影响元素性质
绝对定位的块元素的宽度会被其内容撑开
fixed:固定定位,元素会被锁定在屏幕的某个位置上,网页滚动时保持不动
(开启以上三种定位后可使用(top、right、bottom、left)属性)
z-index:元素开启定位后可使用,可提升定位元素所在的层级
可指定一个整数作为参数,值越大优先级越高,显示在网页上层
未开启定位则不可以使用
opacity:设置透明,0为完全透明,1为完全不透明;
filter:alpha(opacity=50):一般也会加上这个滤镜用于支持ie浏览器(选值0~100)
background-image:url(图片路径)
一般设置背景图片时同时指定背景颜色
background-repeat:设置是否重复背景图
repeat 重复图片
no-repeat 不重复,只一张
repeat-x 只横排重复
repeat-y 只竖排重复
background-position:设置背景图像的起始位置
eg:background-position:bottom center;可选值一个设为横,一个为竖
eg:background-position:100px 200px; 也可为负值
background-attachment:设置背景图片是否会随着页面其余部分的滚动而滚动
fixed 固定背景
小注意点:如父子元素则子元素永远在父元素之上
相对路径写到哪儿便从哪儿开始找