a 标签的实际运用
实际工作中: 文本的默认样式里,除了 color 和 text-decoration,其他的都可以靠继承,默认样式可以给四个状态都设置成一样的,
谁发生变化,单独设置这个伪类
四个状态都设置:用 a 标签选择器,谁不一样的,添加伪类单独设置,注意书写顺序
background-image:url(图片路径);
background-repeat:图片重复
四个属性值:repeat 整个背景区域重复
no-repeat 不重复
repeat-x 水平方向重复
repeat-y 垂直方向重复
背景图定位:
像素法: background-position:x,y;单位是像素
css精灵图技术:很多元素都有背景图,需要有十几家存在图片,就需要发送多个http 请求下载图片,讲很多小弟 背景图合成在一张图片上
单词法:background-position:x 的方向:left,center,right, y 的方向:top,center,bottom
background-attachment:背景图附着;、、
属性值有:scroll: 滚动,背景图会随着页面滚动走
fixed:固定,背景图不会随着页面滚动走
背景图实际运用:
1.padding 基础背景图效果:给盒子用 padding-left 流出一个空白区域,添加一个合适的背景图,不重复
定位:
相对定位:元素相对于自身进行的位置偏移
position: 定位属性
属性值: relative,相对的
偏移的数据量由方向属性来控制,方向属性:left,right,top,bottom
特点:显示的位置是偏移的位置,原位置还保留,不会让元素脱离文档流
特殊用途:1.用来稳固结构
2.微调
div span{
font-size: 12px;
position: relative;
top: -6px;
}
绝对定位:绝对定位的定位参考元素不固定,但是不是本身
属性值:absolute,也是四个方向的偏移量:left,right,top,bottom
特点:绝对定位会脱离文档流,绝对定位的元素根据选取偏移量不同,参考点也不同
1.参考元素为body 时的定位参考点
有 top 参与的绝对定位,定位的参考点是页面 (body)的左上角和右上角
2.有 bottom 参与的绝对定位: 参考点是页面(body)首屏的左下角和右下角
3.祖先元素作为参考元素:祖先元素总有定位的元素,绝对定位的参考元素就是距离它最近的有定位的祖先元素
4.当祖先元素作为参考点时:会忽视padding,参考点时border内部的顶点
固定定位:参考浏览器开口进行定位
属性值:fixed
始终保持针对浏览器窗口的某一个顶点位置相对不变
有四个方向的偏移量的值:left、right、top、bottom
压盖顺序
1.有定位的元素压盖没有定位的元素
2.有定位的元素,不区分定位类型,谁写在后面谁就能压盖
自定义压盖顺序
属性:z-index
属性值: 数字,没有任何单位,数值大的压盖数值小的
1.只能给定位的元素加,其他的标准流的或者浮动元素都没有z-index属性
2.属性值相同看 html 结构书写顺序,后面的压盖前面的
3.父子盒模型里,如果父子都有定位,都有自定义的 z-index 值,两个父子对比,不管
子元素的属性值多大,只要父亲 z-index 值小,都只能被压盖,父级数值小,子级再大,都没用