一、复合选择器、CSS三大特性、背景
1.复合选择器
定义：由两个或多个基础选择器，通过不同的方式组合而成。
作用：更准确、更高效的选择目标元素（标签）。
- 后代选择器：
父选择器 子选择器 { CSS 属性}，父子选择器之间用空格隔开。 - 子代选择器：
父选择器 > 子选择器 { CSS 属性}，父子选择器之间用> 隔开。 - 并级选择器：
选择器1, 选择器2, …, 选择器N { CSS 属性}，选择器之间用 , 隔开。
- 交际选择器：
选择器1选择器2 { CSS 属性}，选择器之间连写，没有任何符号。
注意：如果交集选择器中有标签选择器，标签选择器必须书写在最前面。 - 伪类选择器：例：鼠标悬停状态：
选择器:hover { CSS 属性 }
2.CSS三大特性
①继承性：子级默认继承父级的文字控制属性。
注意：如果标签有默认文字样式会继承失败。例如 a 标签里面的字体
②层叠性：相同的属性会覆盖：后面的 CSS 属性覆盖前面的 CSS 属性，不同的属性会叠加：不同的 CSS 属性都生效
③优先级：也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。
公式：通配符选择器 < 默认 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
- 优先级-叠加计算规则
从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较
3.背景
①背景图片 background-image: 默认由平铺（复制）效果
②背景平铺方式 background-repeat:
③背景图位置 background-position:水平方向位置 垂直方向位置
④背景图缩放
background-size:cover等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见background-size:contain等比例缩放背景图片以完全装入背景区，可能背景区部分空白- 百分比：根据父级盒子尺寸计算图片大小
- 数字 + 单位（例如：px）
⑤背景复合属性
属性名：
background:
属性值：背景色 背景图 背景图平铺方式 背景图位置（空格隔开各个属性值）
二、盒子模型（边框、内外边距、圆角、阴影）
1.基本认识
盒子模型重要组成部分：
- 内容区域 – width & height
- 内边距 – padding（出现在内容与盒子边缘之间）
- 边框线 – border
- 外边距 – margin（出现在盒子外面）
2.边框线
属性名：
border：
属性值：边框线粗细 线条样式 颜色
例：border : 1px solid red
单方向边框线：border-方位名称：
例：border-left：2px dashed rgba(255,255,255,1)
3.内边距（外边距）（圆角）
- 技巧：从上开始顺时针赋值，当前方向没有数值则与对面取值相同。
- 技巧：版心居中– 左右 margin 值 为 auto（盒子要有宽度）
- 技巧：兄弟之间用margin 自己用padding
- 外边距合并：垂直排列的兄弟上下margin会合并取最大值
- 外边距塌陷:子级添加上外边距，父级会产生塌陷问题（掉下来）。解决：①取消自己margin，父级设置padding ②父级设置overfolw：hidden ③父级设置border-top
- 盒子尺寸自动内减：给盒子加 border / padding 会撑大盒子。解决：开启內减模式：box-sizing: border-box
- 清楚默认样式
- 元素溢出：控制溢出元素的内容的显示方式。
overflow：hidden
- 圆角：属性名：border-radius 属性值：数字+px/ 百分比
4.阴影
box-shadow：X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色 内外阴影
三、标准流，flex布局，定位
1.标准流
- 标准流也叫文档流，指的是标签在页面中默认的排布规则
- 例如：块元素独占一行，行内元素可以一行显示多个
2.flex布局：Flex 布局也叫弹性布局，是浏览器提倡的布局模型
- 设置方式：给父元素设置 display:flex，子元素可以自动挤压或拉伸
①主轴对齐方式 justify-content
各属性线效果演示：run.jb51.net/try/demo/pl…
②侧轴对齐方式align-items当前弹性容器内的所有盒子（给弹性容器设置）align-self单独控制某个盒子（给弹性盒子设置）
align-items效果演示：run.jb51.net/try/demo/pl…
align-self效果演示：run.jb51.net/try/demo/pl…
③修改主轴方向
- 例：
flex-direction:column
修改主轴方向的效果edu.jb51.net/cssref/cssr…
④弹性伸缩比 控制弹性盒子的主轴方向的尺寸（给弹性盒子设置）
- 例
flex：1（整数数字，表示占用父级剩余尺寸的份数。）
⑤弹性盒子换行
- 例
flex-wrap:wrap( wrap：换行 nowrap：不换行（默认）)
⑥多行对齐方式 align-content:
3.定位
①基本认识
- 作用：灵活的改变盒子在网页中的位置
-
- 定位模式：position ；2. 边偏移：设置盒子的位置（left、right、top、bottom）
②相对定位
position:relative
特点：
- 不脱标，占用自己原来位置
- 显示模式特点保持不变
- 设置边偏移则相对自己原来位置移动
拓展：很少单独使用相对定位，一般是与其他定位方式配合使用
③绝对定位
position:absolute
使用场景：子级绝对定位，父级相对定位（子绝父相）
特点：
-
脱标，不占位
-
显示模式具备行内块特点
-
设置边偏移则相对最近的已经定位的祖先元素改变位置
-
如果祖先元素都未定位，则相对浏览器可视区改变位置
④定位居中
实现步骤：
- 绝对定位
- 水平、垂直边偏移为 50%
- 子级向左、上移动自身尺寸的一半
- 左、上的外边距为 –尺寸的一半
transform: translate(-50%, -50%)
⑤固定定位
position:fixed
场景：元素的位置在网页滚动时不会改变
特点：
- 脱标，不占位
- 显示模式具备行内块特点
- 设置边偏移相对浏览器窗口改变位置
⑥## 6. 堆叠层级 z-index
- 默认效果：按照标签书写顺序，后来者居上
- 例：
z-index ：99整数数字（默认值为0，取值越大，层级越高）
四、变换，渐变
1.基本认识 平面转换(2D转换) transform：
- 为元素添加动态效果，一般与过渡配合使用 。改变盒子在平面内的形态（位移、旋转、缩放）
2.平移
- 例：
transform:translate(100px,100px);（x轴移动距离，y轴移动距离）可以是百分比（为自身尺寸计算的） - 技巧：translate() 只写一个值，表示沿着 X 轴移动
- 单独设置 X 或 Y 轴移动距离：translateX() 或 translateY()
3.旋转
- 例：
transform:rotate(90deg)顺时针旋转90度，可以为负数逆时针旋转
4.改变转换原点
- 例：
transform:origin(center 50px);(水平原点位置 垂直原点位置) - 方位名词（left、top、right、bottom、center）百分比 数字+px都可以
5.多重转换
- 例：
transform: scale(0.5) rotate(1720deg) translateX(-3800px) ;（顺序不一样会影响动画效果和最终位置） transition:all 3s写在变换的元素上，这里设置过渡时间为3秒div:hover {transform: translateX(300px)}鼠标悬停在这个div上执行里面的样式
6.缩放
- 例：
transition: all 3s ease;transform: scale(1,1);我用按键事件改变scale里面x和y的值，下面是呈现的效果
7.渐变
①线性渐变
- 线性渐变是多个颜色线性逐渐变化的效果，一般用于设置盒子背景
background-image: linear-gradient(
90deg,
red,
green
);
background-image: linear-gradient(
to right,
red,
green 40%, /*绿色从40%开始*/
blue
);
