多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
# 第五章 样式汇总 1. css 三种写法 2. 选择符和样式优先级 [重点] 4. 布局相关 5. 文本相关 text-* 6. 字体相关 font-* 7. 背景相关 background-* 8. 边框 9. 列表 10. 定位 11. 案例 ## css介绍 ## css三种写法和选择符 ### 选择符高级使用 ## 选择符和css优先级 ### css优先级 行内最大! 内部和外部遵循: 就近原则 ### 选择符优先级 1. id> class > 标签 2. 连写时有权重值 ![](https://box.kancloud.cn/00e9cb16fc302fa789a04f95196fc672_537x361.png) ## 布局相关 1. 行块转换 2. 显示隐藏 ## font-* ## text-* ## background-* ## border-* ## list-* ## position 除了使用`盒子模型`外,还可以使用定位实现标签位置的调整.就是定位属性:position [pei zen sen] . position分三种,:相对定位,决定定位,固定定位 ``` 相对定位: position: relative 绝对定位: positon:absolute 固定定位: position:fixed 层次调整: z-index:数字 ``` ### 相对定位 相对定位,就是微调元素位置.让元素`相对于自己原来的位置,进行位置调整` 1. 特点:不脱流,原有位置保留,形影分离 2. 用途 - 微调元素 - 做绝对定位的参考,子绝父相 ### 绝对定位 1. 特点1:脱流 2. 默认参考点: 网页左上角 ![](https://box.kancloud.cn/1148233e5c05ff7c1a841e0907ca8221_395x421.png) 3. 父辈存在定位时,优先相对于离的最近的父辈定位元素定位 4. 定位子元素无视参考盒子的padding 5. 绝对定位盒子maring:0 auto;失效 7. 定位后行级标签可设置宽高 8. 定位重合用z-index调整层次 ## 浮动案例 ## 雪碧图案例 ## 列表案例 ## 导航案例 ## 定位案例 ## 总结 1. 各种样式 2. 应用案例