今晚看了 百度传课 一门关于CSS的课程, 感觉不错, 随手记了点儿笔记, 供以后查阅.
===================================================
position:
relative: 相对于自己原来的位置(正常文档流中的位置), 特点:原来的位置不会消失, 可以和float, center等属性一起使用.
absolute: 相对于距离自己最近的有position属性的祖宗节点(如果不存在这样的祖宗, 则相对于静态可视区域[会被淹没]--你能看见的浏览器显示内容的那部分)
fixed: 相对于可视区域(动态可视区域---永久性可视区域, 滚动条变化之后不会被淹没), 原来的位置彻底消失, 不能和float属性一起用.
left right bottom top z-index : 必须和position一起使用才起作用. 都是可正可负可百分数. 不光相对于谁, 都是以向盒子内为正, 以向盒子外为负, 比如 left:20px 和 right:-20px是一样的.因为right是向盒子外的方向走了20px.
left top 优先于 right和bottom.
css 优先级:
!important 10000
style 行内 1000
# id选择器 100
类 和 伪类 10
标签 属性选择 1
继承 0.1 -- width,padding,border 盒子模型的东西不能继承, margin不在盒子模型中(盒子外边的), left, top 不能继承. 背景色可以继承.
默认值 0
===============
同等优先级看先后顺序! 后写的优先!(覆盖了吧)
盒子模型有平面模型和3D模型, 下面是3D模型
====================
最下面是background-coler层
往上一层是: background-img (和background-color等大)
再往上一层是: border在 background-color 层的边缘
再往上一层是: padding
然后是: width height
最上面是: content
兼容性问题(主要是IE6)列表:
========================
1. 浮动加倍
2. 盒子模型-- 怪异模式 (没有文档类型的声明)
3. 定位fixed
4. png透明
5. 高度不能小于16
6. min-height属性不支持
7. 透明度
8. 自定义cursor的兼容