2021-05-24

css选择器：
层级选择器

1.±----相邻的兄弟选择器（后面紧邻的标签）—并列
2.~----通用选择器（查找后面的所有标签）—并列

伪类选择器
结构伪类选择器
：first-child—查找第一个元素
：last-child–查找最后一个元素
：nth-child(n)—查找第N个元素
查找奇数项—：nth-child(2n-1/2n+1) ：nth-child(odd) ：not（偶数项）
查找偶数项—：nth-child(2n) ：nth-child(even) ：not（奇数项）
：nth-last-child（n)—查找倒数第N个元素
：only-child—查找唯一元素
同一类型
：first-of-type–查找同一类型的第一个元素
：last-of-type–查找同一类型最后一个元素
：nth-of-type–查找同类型的第n个元素
：only-of-type—查找唯一的类型
：nth-last-of-type—查找同类型倒数第n个元素

属性选择器
e----标签
1.e[attr]----根据标签属性查找（查找具有这个属性的所有标签）
2.e[attr=“value”]----查找属性值为value的所有标签
3.e[attr^=“value”]----查找属性值以value开头的标签
4.e[attr$=“value”]----查找属性值以value结束的标签
5.e[attr~=“value”]----查找的标签属性值是词列表（attr=“value1 value2”),词列表中是包含value值的
6.e[attr|=“value”]—查找的标签属性值仅是value 或value-
7.e[attr*=“value”]----查找属性值中包含value 的标签
：root----查找根元素html标签
：empty—查找空标签（不包含任何子元素）

目标伪类选择器
：target（主要应用在锚点）–指向的是活动的目标元素（超链接跳转后的地方）

状态伪类选择器（表单）
：enabled----标签可以使用
：disabled-----禁止使用的标签
：checked-----被选中的标签

伪元素选择器：
：：selection—设置选中的文本内容高亮显示（background-color和color）
否定伪类选择器
：not（）
例如：
：empty----查找空标签
：not（：empty）—查找非空标签
语言伪类选择器
：lang(取值）

css属性：
1.盒阴影：box-shadow：水平位置 垂直位置 阴影模糊距离 阴影大小 阴影颜色 inset（阴影在盒子里面）
水平和垂直位置 可以取负值
如果阴影在外面，水平位置取值为正，阴影在盒子的右边，垂直位置取正，阴影在盒子的下面。
阴影在盒子的里面，水平位置取正，阴影在盒子的左边，垂直位置取正，阴影在盒子的上面。

2.文本阴影：text-shadow：水平位置 垂直位置 模糊距离 颜色

3.文本换行属性：
word-wrap:break-word 保留换行，拆分长单词
word-break：break-all 不换行，直接拆分长单词/keep-all 在英文连接符（-）或空格处拆分单词

4.字体图标
使用场景；可以改变图标颜色
使用方法
1.link iconfont.css
2.i class="iconfont 字体图标具体classname“

下载字体图标地址：
https://www.iconfont.cn/search

背景属性：
1.设置背景图像开始显示的位置：background-origin
取值：
Border-box:从边框处开始显示背景图片（background-color，默认的是从边框处开始显示，background-origin,对背景颜色没作用）
Padding-box:从内填充开始显示背景图片（默认）
Content-box:从内容区开始显示背景图片
2.设置背景开始裁剪的位置：background-clip
取值
Border-box:从边框处开始裁剪背景图片
Padding-box:从内填充开始裁剪背景图片
Content-box:从内容区开始裁剪背景图片
3.设置背景图像的大小：background-size
background-size：width height
取值：
Px
%
Cover----背景图像完全覆盖整个盒子
Contain—背景图像宽或者高覆盖盒子
4 多背景图片
Background-image:url(),url()…
Background:url() background-color background-position background-repeat,
url() background-color background-position background-repeat…

边框图像：
border-image：url() 水平向里偏移 垂直向里偏移 stretch/repeat/round
向里的偏移量不能加单位
设置border-image需要设置border
Border-image-source:边框图像路径
Border-image-slice:向边框图像里面偏移的数值
Border-image-repeat:设置边框图像是否平铺。（stretch（默认）、repeat,round）
Border-image-outset:边框图像距离边框的位置。（了解）

设置圆角：
border-radius:
取值：（四个角圆的半径）
1个值： 四个角一样的弧度
2个值： 左上-右下 右上-左下
3个值： 左上 右上-左下 右下
4个值： 左上 右上 右下 左下
正圆： border-radius:50%;
半圆： border-radius:左上角（圆的半径） 右上角（圆的半径） 0 0；
椭圆： border-radius:50%; 水平半径/垂直半径

盒子四个角是四个椭圆的语法：
Border-radius:左上 右上 右下 左下（椭圆水平半径）/左上 右上 右下 左下（椭圆垂直半径）

弹性盒：
父元素控制子元素的布局
布局特点：
1：弹性盒里面，所有子元素默认是沿着主轴排列的（主轴默认是水平方向的）
2：弹性盒中如果只有一个子元素，那么设置这个子元素水平垂直居中的方法是：margin:auto;
3: 弹性盒中，子元素如果是一个行内元素，那么可以直接设置大小。

开启弹性盒方式：
Display:flex/inline-flex;

属性：

1:设置主轴的排列方向：flex-direction:
取值：
Row: 所有子元素水平方向排列
Column：所有子元素垂直方向排列
Row-reverse:横向反转
Column-reverse:纵向反转

2：改变主轴对齐方式：justify-content:
取值：
Flex-start:主轴顶端对齐
Flex-end:主轴底端对齐
Center:主轴居中对齐
Space-between:主轴两端对齐
Space-around:主轴自由分配空间

3：改变侧轴对齐方式： align-items:
取值：
Flex-start:侧轴顶端对齐
Flex-end:侧轴底端对齐
Center：侧轴居中对齐
Baseline:侧轴基线对齐（同flex-start效果一样）
Stretch：拉伸子元素适应父元素这个盒子。（默认）

4.换行：flex-wrap
取值：
Wrap:换行
Nowrap:不换行
Wrap-reverse:换行反转

5：取消行与行之间间距，并且设置侧轴对齐方式：align-content: （属性只用在换行里面）
取值：
Flex-start:侧轴顶端对齐，取消行与行间距
Flex-end：侧轴底端对齐，取消行与行之间的间距
Center:侧轴居中对齐
Space-between:侧轴两端对齐
Spcae-around:侧轴自由分配空间
Stretch： 侧轴拉伸对齐

给子标签添加：
6.设置某一个子元素在侧轴上对齐方式：align-self:
取值：
Flex-start:侧轴顶端
Flex-end:侧轴底端对齐
Center：侧轴居中对齐
Stretch：侧轴拉伸对齐
Auto：默认的值

7： 子元素排序： order
取值：
数值。数值越大越排在后面，默认的值0 ，可以取负数。