菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: CSS知识_王晓苗_20230208 [打印本页]

作者: 王晓苗1991 时间: 2023-2-8 23:50
标题: CSS知识_王晓苗_20230208
20230208学习笔记
1. CSS的背景
背景颜色:background-color
默认值：transparent
十六进制、RGB颜色、预定义颜色
背景图片：background-image
默认值：none
url(图片路径)
背景平铺：background-repeat
repeat 默认值横向和纵向都平铺
no-repeat 背景不平铺
repeat-x 背景横向平铺
repeat-y 背景纵向平铺
背景定位：background-position
精准单位，如background-position：300px 200px
方位名词（包括left,right,top ,bottom,center）
混合单位,即方位名词和精确单位混合使用如background-position：left 200px
背景图片滚动：background-attachment
scroll 默认值背景随屏幕滚动
fixed 背景不随屏幕滚动
背景颜色的半透明：background:rgba(0,0,0,0.3)
背景缩放：background-size
精确单位控制，第一个是宽度，第二个是高度  如background-size: 200px 300px
百分比控制，第一个是宽度，第二个是高度（参照盒子的高度和宽度计算，如background-size: 20%  30%）
cover 宽度和高度适配到覆盖整个盒子大小为止
contain 背景图片高度活宽度任意一项达到盒子的高度或宽度就停止缩放

2. CSS的三大特性
层叠性
概念：如果选择器相同，此时新的样式会覆盖掉旧的样式

层叠性的原则
1：样式冲突，遵循就近原则，哪个样式距离结构更近，就执行哪个样式
2：样式不冲突，不会出现层叠问题
继承性
概念：子元素会继承父元素的某些样式，比如文本或者字体相关样式等
优先级
概念：如果为同一个元素指定多个选择器时，就会出现优先级的情况
各种情况的权重表
继承或者 *  权重是 0,0,0,0
元素选择器  权重是 0,0,0,1
类选择器/伪类选择器权重是 0,0,1,0
ID选择器             权重是 0,1,0,0
行内样式          权重是 1,0,0,0
!important    权重是 ∞（无穷大）

         判断优先级的注意点：
1、权重是由4组数字来组成的，不会有进位的情况出现，意思就是类选择器永远比元素选择器的权重高
2、继承的权重是0 ，不管父元素的权重多高，对于子元素来说权重都是0
3、如果有出现了复合选择器，那么权重是多个选择器权重相加(权重叠加的实例详见笔记)

CSS的盒子模型
边框 Border
内边距：Padding属性盒子的内容和盒子边框之间的距离

外边距：margin属性控制盒子和盒子之间的距离
外边距的典型应用为：设置margin: 0 auto 让块级盒子水平居中（注意：这个设置只对块元素生效，如果要实现行内元素水平居中，就给父盒子增加 text-align:center样式即可）
外边距合并
外边距合并
相邻的块元素垂直外边距会出现合并的情况
如果上面块元素有下外边距，下面的盒子有上外边距，那么就使用两者中较大的外边距值。
例

嵌套块元素外边距塌陷
当父元素和子元素都有上外边距，以两者中的较大值为准进行上外边距的调整。
解决外边距塌陷的三种方法
1、给父元素添加上内边距
2、给父元素添加上边框
3、给父元素添加overflow:hidden；属性

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)