css学习笔记（自用）

1.文本格式化标签
加粗
倾斜
删除线
下划线
2.快捷键
快捷注释 : ctrl + /

---

1.通配符 :*

2.复合选择器

后代选择器： 元素1 元素2 … { 声明样式 }
表示选择元素1里面的所有元素2
注意中间由空格分开

子元素选择器：元素1 > 元素2 {样式声明}
元素一是父级，元素二为子集
注意中间用 > 隔开
只选择子集 不选择子集的子集

并集选择器：元素1，
元素2 { 样式声明 }
可以选择任何选择器
语法规范 最后一个选择器不用加，
div，
p，
.fox {}

链接伪类选择器
伪类选择器最大的特点 用（:)表示
超链接伪类选择器声明顺序:link :visited :hover :active

focus伪类选择器（把获得光标的input表单元素选取出来）
用于选取获得焦点的表单元素，焦点是光标，一般情况是<input *>类表单元素才能获取

3.css的元素显示模式

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或其他行内元素
块内块元素	一行放多个行内块元素	可以设置宽度高度	它本身内容的宽度

4.显示模式的转换

• 转换为块元素：display: block;
• 转换为行内元素：display: inline;
• 转换为行内块元素：display: inline-block;

5.Snipaste截图工具

F1截图
F3贴图
Alt取色

6.背景色半透明

background: rgba(0,0,0,0.3);
rgba(红,绿,蓝,透明度) 透明度取值单位 0 ~ 1

7.盒子模型

border：边框 （宽度 样式 颜色）
content：内容
padding：内边距
margin：外边距 （盒子与盒子间的距离）

8.合并相邻边框

border-collapse：collapse;

9.外边距水平居中

条件：①块级元素设置了宽度
②块级元素的外边距都设置了auto
1.margin-left：auto；magin-right：auto；
2.margin：auto；
3.margin：0 auto；（上下边距为0 左右边距自动）

10.行内元素和行内快元素居中

给父级元素添加 text-align: center；

11.float

float属性用于创建浮动框，将其移到一边，直到左边缘触及包含块或另一个浮动框的边缘

特点：
1.脱离普通标准流的控制
2.浮动的盒子不再保留原先的位置
3.如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列
4.任何元素都可以浮动，不管原先处于什么模式。添加浮动后就可以直接设置高度和宽度

浮动注意点：
1.先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
2.一个元素浮动了，理论上其余的兄弟元素也要浮动（只会影响后面的元素）

12.清除浮动

• 由于浮动元素不再占用原文档的流的位置，所以它会对后面的元素排版产生影响