CSS知识
表单——关联控件(label)
用于进行form中文本与控件的关联
CSS概述
CSS: 层叠样式表/级联样式表
1995年诞生，2010年推出了CSS3
样式：颜色、背景、位置、大小、边框、阴影、动画…
总结：CSS用于控制HTML标签样式
CSS的书写位置
1.行内/内联样式
| <开始标签 style=”color: red; background: pink;”> |
style=”给当前的标签设置样式”
color 属性名 red属性值
属性名和属性值之间用冒号隔开，一个属性写完以英文的分号结束。
2.内部样式
| 在html中的head标签之间加入style标签，在标签内部写CSS样式 |
3.外部样式
把CSS样式写在外部的一个CSS文件中
| 在html中head标签之间加入link标签，引入一个外部CSS文件 |
4.样式优先级
| !important > 行内样式 >(内部样式=外部样式)>浏览器默认样式 color: blue!important; 注意：尽量不要使用important，级别过高，将来无法进行覆盖。 |
5.使用场景
行内样式：会和HTML混杂写在一起，不好修改；一般用于JS中动态变化样式
内部样式：可以减少服务器请求次数，加快网站的打开速度；大型网站（百度首页，京东首页…）选择这种方法
外部样式：结构上显得简洁规范，便于后期维护。会请求多次，影响网站的打开速度。后期还可以实现代码的复用
选择器
用于查找标签，告诉浏览器要把样式渲染给指定的标签
选择器 {
CSS样式
}
1.通用选择器
会选择所有的html标签
| * { color: red } |
用于给所有的标签设置公共的样式，选择器优先级非常低
2.标签选择器
| 标签名称{ CSS属性 } |
选中指定的html标签
优点：使用非常方便
缺点：选择面太广，不利于项目使用
3.类选择器
| .类名称{ CSS样式 } <标签 class=”类名称1 类名称2”> |
类名称是可以自定义的，是应用最多的一种选择器；调用的多个类之间用空格分隔
4.ID选择器
| #ID选择器名称{ CSS样式 } <标签 id=”ID选择器”> |
ID通常用于JS中，尽量少用
5.对比选择器的优先级
| ID选择器 > 类选择器 > 标签选择器 > 通用选择器 100 10 1 权重值 |
6.群组选择器
| h1, .a1, #a2{ CSS样式 } 多个选择器之间用逗号隔开 |
7.伪类选择器
假的类 —— 伪类选择器的名字不能自定义，是固定的
(1)悬停在标签的上方
| a:hover{ CSS样式 } |
(2)标签被激活状态(鼠标按下不松开)
| a:active{ CSS样式 } |
(3)针对于链接标签
a:link{} 链接未访问状态
a:visited{} 链接已访问状态
如果链接中同时出现了4种状态
:link > :visited > :hover > :active
(4)获取文本框的输入焦点
| input:focus{ CSS样式 } |
8.属性选择器
通过标签的属性来查找标签
| input[type]{ } 查找input标签中含有type属性 |
| [type]{ } 查找所有标签中含有type属性的 |
| [type=”text”]{ } 查找所有标签中含有type属性，并且值是text的 |
CSS样式
边框样式 border: 宽度 线的类型 颜色;
border: 1px solid red;
实线
宽度 width
高度 height
CSS样式优先级
1.不同选择器样式不同
当多个选择器选中同一个元素，不同的样式都会生效，它们之间不会产生冲突，样式会叠加。
2.不同选择器样式相同
权重相同的情况下，后边的把前边的给覆盖
| CSS中有一些样式可以继承的，父元素的样式会传递给子元素 |
3.选择器权重计算
| 选择器 |
权重 |
| 继承样式 |
无 上课时间15:18 |
| 通用选择器 |
0 |
| 标签选择器 |
1 |
| 类(伪类)选择器 |
10 |
| ID选择器 |
100 |
| 行内样式 style=”” |
1000 |
| !important 优先级最高 |
10000 |
总结：选择器权重会叠加，但注意权重叠加不会越级
例如：11个类选择器不会超过一个id选择器
| 常用的选择器：标签选择器、类选择器、后代选择器、直接子代选择器、群组选择器、伪类选择器、伪元素选择器.. |
CSS中的值和单位
1.颜色值(写法)
| 颜色 |
单词 |
rgb |
rgba |
16进制 |
16进制简写 |
| 红色 |
red |
rgb(255,0,0) |
rgba(255,0,0,1) |
#FF0000 |
#F00 |
rgba 分别表示 红色，绿色，蓝色，透明度
颜色值范围0~255 透明度范围0~1
2.尺寸写法
像素(px)，电脑屏幕上的一个发光点
百分比(%)，占父元素的尺寸的比例
em 倍率：相对于父元素字体大小的倍率
3.CSS属性
font-size 字体大小
text-indent: 2em; 文本缩进，缩进两个文字是2em
流和文档(标准)流
流：标签的有序排列
文档流，网页中每个元素都会按照各自的特征进行排列
例如：每个div会独占一行
1.所有的标签分为三种显示形态
| 块级元素：会独占一行，有宽高属性 div h1~h6 p ul ol li dl dt dd 行内元素：会和其它的行内共处一行，没有宽高属性 span b u I s a… 行内块元素：会和其它的行内共处一行，有宽度属性 input select textarea |
img 图片标签是一种特殊的，行内替换元素。
2.改变显示模式
display: inline; 转为行内元素
display: block; 转为块状元素
display: inline-block; 转为行内块元素
| 小技巧：去除图片底部空隙 给图片添加 display：block |
盒子模型
内边距 padding-top/right/bottom/left
上 右 下 左
边框 border-top/right/bottom/left
外边距 margin
1.边框
border-top/right/bottom/left: 宽度 线的类型 颜色
3个属性顺序不分先后
线的类型：solid 实线、dashed 虚线、 dotted 点状线
| border-width 边框宽度 border-color 边框颜色 transparent 透明色 border-style 边框样式（线的类型） border:none; 去除边框 |
2.内边距
padding: 10px; 上下左右相同
padding: 10px 20px; 上下 左右
padding: 10px 20px 30px; 上 左右 下
padding: 10px 20px 30px 40px; 上 右 下 左
| 标准(W3C)盒模型 盒子实际宽度=内容宽度+左右内边距+左右边框 盒子实际高度=内容高度+上下内边距+上下边框 |
| 怪异盒模型 盒子实际宽度就是内容的宽度(width) 盒子实际高度就是内容的高度(height) |
3.切换盒模型
box-sizing: content-box; 内容盒子(标准盒模型) —— 默认的
box-sizing: border-box; 边框盒子（怪异盒模型）
4.外边距
margin: 10px; 上下左右相同
margin: 10px 20px; 上下 左右
margin: 10px 20px 30px; 上 左右 下
margin: 10px 20px 30px 40px; 上 右 下 左
margin-top/right/bottom/left 控制其中一个方向
上 右 下 左
5.盒子在网页中占的空间大小
| 水平方向：左右的外边距 + 盒子实际宽度 垂直方向：上下的外边距 + 盒子实际高度 |
行内元素的内边距
行内元素的水平方向的内边距正常生效；垂直方向会产生“视觉生效”，实际上没有生效。
外边距特点
1.外边距合并
| (1)在文档流中，垂直方向的两个盒子之间的外边距会产生合并，取最大值。 (2)在父元素的第一个子元素中，设置上边距，会出现在父元素顶部 解决方法： 1.改用给父元素添加内边距 2.给父元素添加上边框 |
2.通过外边距实现盒子水平居中
版心：指的是页面布局中主体内容所在的区域
| 盒子水平居中 margin: 0 auto; |
3.外边距取值
正负值都可以使用，正值会增加距离，负值会减少，缩短距离
0距离是紧挨着
负值一旦使用可能会产生重叠的现象。
去除标签样式
标签中有自带的内外边距，需要去除这些样式
| *{ margin: 0; padding: 0; } |
| text-align: 盒子文本水平对齐方式 left/center/right |
HTML特殊字符
| 在网页中产生空格 < < > > © 产生版权分号© https://blog.csdn.net/jack_rose_me/article/details/124603494 |
元素中内容溢出
当前标签中如果内容出现溢出，通常是盒子宽高固定的情况才会出现溢出。
| overflow: visible; 溢出可见 overflow: hidden; 溢出隐藏 overflow: scroll; 显示滚动条，强制出现滚动条 overflow: auto; 自动出现滚动条，根据内容多少自动出现的 |
元素的显示和隐藏
1.脱离文档流的隐藏
| display: none; 元素隐藏后，不再保留空间 如果要让元素显示出来，可以添加 display: block; |
2.不脱离文档流的隐藏
| visibility: hidden; 元素隐藏后，还会保留空间 visibility: visible; 默认值，可见 |
3.不脱离文档流 —— 元素透明
| opacity: 0; 元素透明, 还会保留空间 值的范围 0~1 1是不透明 注意事项：包括元素中的内容 |
背景
| background-color 背景颜色 background-image 背景图像，通过url() 设置图像的路径 background-repeat 背景图像的平铺方式 Repeat 整个重复，把盒子铺满 Repeat-x 横向重复 Repeat-y 纵向重复 No-repeat 不重复，只显示一张图片 background-position: 水平方向 垂直方向; 背景图像定位 正值往右、往下移动；负值往左、往上移动 特殊的值 水平方向： left/center/right 垂直方向： top/center/bottom |
| 以上四个属性可以综合到一起 background: 颜色 图像 定位 重复； 顺序上不分先后顺序，可以是一个值或者多个值。 |
精灵图
CSS Sprite，翻译过来叫做精灵图/雪碧图，图片处理的一种方式
UI设计会把网页上一些修饰性的图标整合到一张图片上，需要哪一部分，通过背景定位查找对应的位置
优点：减少了对服务器请求次数
用法：
(1)将精灵图作为背景图
(2)通过背景定位定位到对应的图标部分
行高
line-height 设置一行所占高度的值
作用：
(1)让一行文本在盒子中垂直居中（盒子的高度和行高相同）
(2)控制段落中(多行文本)行间距
背景渐变
| 渐变通常线性渐变用的最多 Background-image: linear-gradient(颜色1,颜色2，颜色3…) 角度设置 Background-image: linear-gradient(角度deg, 颜色1,颜色2，颜色3…) 范围设置 Background-image: linear-gradient(角度deg, 颜色1 百分比,颜色2百分比，颜色3 百分比…) |
背景图片大小
| 没有设置默认是图片本身的大小 background-size: 水平方向 垂直方向 background-size: 100% 100%; 使用图片将盒子铺满，可能会出现变形 background-size: cover; 将整个盒子铺满，多余的部分被裁减，不变形 background-size: contain; 至少将图片完全显示，可能会有空白区域 |
元素的美化和装饰
1.边框的圆角
| Border-radius: 10px; 四个角度相同 Border-top-left-radius: 可以设置其中一个角度 Border-radius: 20px 40px; 左上/右下 右上/左下 Border-radius: 20px 30px 40px; 左上 右上/左下 右下 Border-radius: 10px 20px 30px 40px; 左上 右上 右下 左下 Border-radius: 50%; 正圆 或者 椭圆 Border-radius: 高度的一半； 胶囊型 |
2.盒子阴影
| Box-shadow: 值1：必须，水平方向的偏移量 值2：必须，垂直方向的偏移量 值3：可选，羽化，值越大模糊度越强 值4：可选，扩展半径 值5：可选，颜色，默认黑色 值6：可选，内外侧阴影，内侧inset，默认是外侧 |
3.去除表单中自带的外轮廓线
| Outline: none; |
浮动
float: left/right
目的：为了让多个盒子成一行展示
特点：会脱离文档流，不再占位
1.浮动产生的结果
| 父盒子中，如何子盒子都浮动起来，父盒子不能再被子盒子撑开 —— 高度塌陷 浮动盒子如果不设置宽度，宽度就是内容的宽度 可以让行内元素块状化，具有了宽高属性 浮动可以去除图片空白边距 浮动可以解决了外边距合并（父盒子中第一个子盒子的上边距合并） 浮动影响后边的盒子，通常父盒子中如果有一个子盒子浮动，就都浮动。 |
解决高度塌陷 —— 清除浮动
1.给父盒子设置高度
适用于在网页布局中，高度是确定的情况，例如：网页头部、导航条…
2.清除浮动 —— 溢出隐藏法
在浮动盒子的父盒子中添加溢出隐藏属性
overflow: hidden;
不足：有些定位到外部的盒子也会被隐藏
3.清除浮动 —— 额外标签法
在所有浮动盒子的最后边添加一个空的div，然后给div添加样式clear:both;
不足：会多出一个空标签
注意：只能添加一个块状标签，不能使用行内标签
4.清除浮动 —— 伪元素
| .clearfix::after{ content: “”; display: block; clear: both; } |
在所有浮动盒子的父盒子中调用clearfix
去除列表自带的样式
| ul { list-style: none; } |
文本处理
1.字号（字体大小）
| font-size 谷歌浏览器默认文字大小16px，最小不能小于12px 可以继承的 em 相对于父元素的文字大小 rem 相对于根元素html的文字大小 |
2.字体家族
| font-family: 字体1, 字体2,…. 值可以写一种或者多种；如果是多种，先查找第1个，如果没有这种会往后查找.. 注意：字体是有版权，如果是中文需要用引号包裹 |
3.字体体重（重量）
| font-weight: 字体体重 normal 正常大小 bold 加粗 100~900之间，是100的倍数，默认是400 |
4.颜色
| color: 文字颜色 |
5.文本水平对齐方式
| text-align: left(左侧) / center(居中) / right(右侧) |
6.行高
| line-height 文本在盒子垂直居中：行高和高度相同 控制段落的行间距 |
7.文本修饰线
| text-decoration: underline 下划线 text-decoration: line-through 删除线 text-decoration: none 无线条(用于取消自带的修饰线) |
8.首行缩进
| text-indent: 首行缩进 |
布局标签
header 定义头部
nav 定义导航
section 定义一个区域
aside 定义侧边栏
article 定义内容(文章)
footer 定义底部
定位
使用定位改变盒子的位置
静态定位(默认)、相对定位、绝对定位、固定定位、粘性定位
常用的定位：相对定位、绝对定位、固定定位
1.相对定位
position: relative
相对于元素原来的位置进行定位，可以使用left/right 、top/bottom来控制水平位置和垂直的位置
(1)相对定位没有脱离文档流，还会保留原来的位置，撑开父盒子，不影响父盒子
(2)对比外边距
外边距会影响到后边的盒子，相对定位不会挤开后边的盒子0
2.绝对定位
position: absolute
绝对定位会脱离文档流，不再占位
使用绝对定位的盒子会参照离自己最近有“非静态定位”的祖先元素。
通过left/right、top/bottom控制水平和垂直位置
如果要相对于父盒子，通常给父盒子设置相对定位：子绝父相
| 垂直居中 top:50%; margin-top: -自身高度一半; 水平居中 Left:50%; margin-left: -自身宽度一半; |
(1)行内元素定位后会块状化，具有了宽高属性
(2)定位中出现了重叠，通过z-index控制层级，值是一个整数，越大越靠前，默认是0
浮动特殊情况
| 在文档流下，浮动盒子的父盒子如果不设置高度，会出现高度塌陷 如果浮动盒子的父盒子也设置浮动，则会被子盒子撑开，不会出现高度塌陷 |
行内块
| 1.行内块水平居中 给父盒子设置文本水平居中 text-align:center; 2.去除行内块自带外边距 给父盒子设置字体大小为0 font-size:0; |
固定定位
position: fixed;
会脱离文档流，相对于当前的窗口
高级选择器
1.属性选择器
标签[属性名] 查找标签中含有指定属性
标签[属性名=”属性值”] 查找标签中属性为固定值的
标签[属性名^=”属性值”] 查看属性中以指定的值开始的元素
标签[属性名$=”属性值”] 查看属性中以指定的值结束的元素
标签[属性名*=”属性值”] 查找属性中含有某个值的元素
2.结构伪类选择器
| 查找第1个 :nth-child(1) 或者 :first-child |
| 查找最后1个 :nth-child(最后一个的编号) 或者 :last-child |
| 查找第n个 :nth-child(n) |
| 查找倒数第n个 :nth-last-child(n) |
| 查找奇数 :nth-child(odd) 或者 :nth-child(2n+1) 或者 :nth-child(2n-1) |
| 查找偶数 :nth-child(even) 或者 :nth-child(2n) |
| 查找倍数 :nth-child(3n) |
3.目标伪类选择器
:target
通过a标签的href属性触发目标伪类选择器，通过关联元素的id来进行查找，在目标元素上添加 :target
| c1”> |
弹性布局
之前接触的布局方式：流失布局、浮动布局、定位布局。
弹性布局（flex布局）：flexbox，弹性盒模型
优势：自动分配空间，不需要计算
劣势：父盒子需要高度
1.开启弹性布局
在父盒子中添加属性 display: flex
2.主轴的排列方向
| flex-direction 分为行(横向)模式和列(纵向)模式 row 行模式，正向排列 （默认的） row-reverse 行模式，反向排列 column 列模式，正向排列 column-reverse 列模式，反向排列 |
说明：主轴可以是水平，也可以是垂直；如果设置主轴为水平，垂直方向为交叉轴，如果设置主轴为垂直，水平方向为交叉轴。
3.容器和项目
| 父盒子叫做容器，给父盒子开启弹性布局 子盒子叫做项目，会将行内元素块状化 |
4.主轴的对齐方式
| Justify-content 定义项目在主轴上的对齐方式 flex-start 主轴起点对齐 flex-end 主轴终点对齐 center 居中对齐 space-between 两端对齐 space-around 每个项目平均分配间距 space-evenly 项目之间的间距是相同的 |
5.项目的换行
| flex-wrap no-wrap 不换行，默认的 wrap 换行，当容器的宽度小于项目宽度，会出现换行 wrap-reverse 在换行的同时，反向排列 |
6.主轴排列和项目换行的综合写法
| flex-flow: 主轴排列 项目换行 例如： row wrap |
7.交叉轴对齐方式
| align-items: flex-start 起点对齐 flex-end 终点对齐 center 居中对齐 |
注意事项：只是针对于交叉轴只有一行
弹性布局
1.交叉轴对齐
| 用于交叉轴有多行的情况 align-content: flex-start 开始对齐 flex-end 结束对齐 center 居中对齐 space-between 两端对齐 space-around 每个项目左右平均分配边距 space-evenly 项目之间平均分配边距 |
2.项目排序规则
| order 默认值是0，可以是负数，数字越小，排序越靠前 |
3.项目的增长规则
| flex-grow 用于对剩余空间的分配 默认为0，有剩余空间的时候，不会分配 如果设置为1，有剩余空间的时候，会自动放大，占全部剩余空间 如果每个项目中都有这个属性，则表示要分配剩余空间的比例 第1个项目1，第2个项目2，第3个项目1 1/(1+2+1) 2/(1+2+1) 1/(1+2+1) |
4.项目的收缩规则(了解)
| flex-shrink 项目在容器中的收缩规则，只有项目总的宽度超过了容器才会使用这个属性 默认值1，当容器空间不足时，项目默认收缩 如果值0，当容器空间不足时，项目不会收缩 当值为n，表示空间不足的时候，项目收缩的比例 例如：项目1收缩值1，项目2收缩值1，项目3收缩值2 1/(1+1+2) 1/(1+1+2) 2/(1+1+2) |
5.项目的初始尺寸(了解)
| flex-basis 项目在主轴上的初始尺寸，一旦这个属性设置以后原来宽度（高度）就会失效 如果主轴在水平方向，宽度会失效 如果主轴在垂直方向，高度会失效 |
6.综合写法
| flex: 增长规则 收缩规则 初始尺寸； 如果只写一个值，表示增长规则，例如 flex:1 |
过渡
表示元素两种样式的变化过程
| Transition: 要过渡的属性 总时长 延时 运行曲线 过渡的属性： all 代表所有的属性 可以省略 总时长：整个过渡的时长，单位是秒(s) 延时：在过渡执行前要等待的时长 可以省略 运动曲线：运动速度，通常使用匀速linear；默认是ease（先快再慢） cubic-bezier.com 注意事项：除了总时长和延时两者有先后之分，其它不分先后顺序。 |
转换(2D)
包含有位移、旋转、缩放、倾斜(斜切)
1.位移
| transform: translate(水平方向, 垂直方向) transform: translateX(水平方向) transform: translateY(垂直方向) |
转换的特点
不会脱离文档流，继续占位
属性值中使用的百分比相同对自身的值
只有行内块和块状元素可以使用，行内元素不能使用
2.旋转
| transform: rotate(角度deg) 沿着中心点旋转 transform: rotateX(角度deg) 沿着x轴旋转 transform: rotateY(角度deg) 沿着y轴旋转 |
3.设置转换中心点
| transform-origin: 水平方向 垂直方向; |
4.缩放
| transform: scale(倍数) 等比例缩放 transform：scaleX(倍数) 沿着x轴缩放 transform: scaleY(倍数) 沿着y轴缩放 |
5.倾斜(斜切) —— 了解
| transform: skew(水平方向, 垂直方向) 如果只写一个值表示水平方向 transform: skewX(水平方向) transform: skewY(垂直方向) |
动画
1.定义动画
| @keyframes 自定义动画名称{ from { 动画的开始属性 } to { 动画结束的属性 } } |
| 多组动画 @keyframes 自定义动画名称 { 0%{ } 20% { } .. 100% { } } |
2.调用动画
| animation: 动画名称 总时长 延时 运动曲线 运动次数 是否反向 播放状态 运动次数默认是1，无限循环infinite 是否交替，默认是不交替，交替是alternate 播放状态，默认是播放，running，暂停是paused |
| 控制动画暂停 animation-play-state: running/paused; |
兼容性
针对于低版本的浏览器，CSS中加入了浏览器专属前缀
谷歌/Safari -webkit-
火狐 -moz-
欧朋 -o-
文字阴影
text-shadow: 水平 垂直 羽化 颜色
响应式网页：根据设备的宽度自动切换
媒体查询
| @media (min-width: 576px) { } @media (min-width: 768px) { } @media (min-width: 992px) { } @media (min-width:1200px) { } @media (min-width:1400px) { } |
视口标签
为了让网页的宽度为设备的宽度
| 快捷键 meta:vp |
bootstrap
是Twitter公司的开发的UI框架，用于响应式网站开发的一款框架
使用文档
https://v5.bootcss.com/docs/5.1/getting-started/introduction/
1.容器
container 用于设置响应式的版心
container-fluid 宽度为100%的容器
2.断点
已经写好的媒体查询
3.表格
table是基础的类，也可以根据需要添加不同的类
table-striped 条纹效果，隔行换色
栅格化布局
将一个盒子分成了12份，在不同的设备宽度下，可以设置占的份数(n)
1400以上 col-xxl-{n}
1200以上 col-xl-{n}
992以上 col-lg-{n}
768以上 col-md-{n}
576以上 col-sm-{n}
1.设置盒子的偏移量
让盒子左侧留出空白列
offset-{n}
图标字体
1.下载图标字体和对应的CSS文件
2.在网页中引入CSS文件
3.查找图标对应的代码，粘贴即可
CSS预处理器 SCSS
SCSS
CSS预处理器，可以让CSS成为一种编程语言
增加了变量、函数、循环、判断.... 让CSS编程变的更加简洁清晰
除了SCSS以后，还有less、stylus等CSS预处理器
网址 www.sasscss.com
1.编译
(1)版本
早起SCSS文件的后缀名 .sass，版本3开始后缀名 .scss
(2)步骤
| 新建一个.scss文件 使用scss插件编译文件，就会生成css文件 |
CSS规则
1.注释
//注释的内容
2.嵌套
后代选择器可以嵌套在内
| .box { span{ } } 编译后 .box span{ } |
SCSS的基本语法
1.变量
使用 $声明变量；用于保存重复使用的值
| $width: 200px; 变量保存了一个长度值 $shadow: 5px 7px 5px rgba(0,0,0,0.5); 变量保存了一个阴影的值 .box { width: $width; box-shadow: $shadow; } |
2.父选择器
使用&代表上一级的选择器，也就是父选择器
搭配伪类、子代等选择器
| .box{ &:hover{ } &>span{ } } .box:hover{ } .box>span{ } |
混入
@mixin 创建混合指令的语法
@include 调用混合指令
| @mixin boa($a,$b,$c) { width: $a; height: $b; border-radius: $c; } .box { @include boa(400px,200px,5px); //混入进来 } |