css基础
目录
第一章：css简介：
1.1、css层叠样式表
1.2、设置方式：
1.3、元素显示模式：块元素和行内元素
HTML元素一般分为块元素和行内元素两种。
1.4 基本语法：
第二章 常用选择器
1.1 常用选择器
1.2复合选择器
1.2.1 交集选择器：紧挨着
1.2.2 并集选择器：以逗号隔开
1.2.3 后代选择器：以空格隔开
1.2.4 子代代选择器：以>大于号隔开
1.3属性选择器
1.4伪类选择器
1.4.1 伪类： -child -of-type ：not（）
1.4.2 a元素的四个链接
1.5伪元素
1.6样式的继承性
1.7单位
1.7.1长度单位：
1.7.2颜色单位
第三章
3.1文档流：
3.2盒子模型
3.2.1.box-sizing用来设置盒子尺寸的计算方式（设置width和height的作用）
3.2.2. 轮廓
3.3.3. 阴影
3.2.4. 圆角
3.2.5椭圆
第四章布局
4.1.水平布局
4.2垂直方向布局
4.2.1（元素溢出）
4.2.2垂直外边距折叠
第五章 清除浏览器的默认样式
normalize样式
第六章 浮动
6.1浮动
6.2. 元素脱离文档流的特点
第七章：简单布局
7.1布局
7.2高度塌陷
7.2.1BFC
7.2.4伪类元素：：after 最终方案：这个方案相比较来说，比较完美。
7.2.55. clearfix
第八章 定位 position(宏观用浮动，细节用定位)
8.1 相对定位：relative
偏移量（offset）
8.2 绝对定位absolute（子绝父相）
8.2.1特点：
8.2.2绝对定位的布局：
水平垂直居中
8.3固定定位fixed
8.4粘滞定位sticky
第九章：元素的层级
第10章字体和文本样式
10.1. 字体相关的样式
10.1.2 图标字体（iconfont）
10.2文本样式
10.2.1行高line height（行间距）
10.2.2水平对齐
10.2.3垂直对齐
10.2.4文本缩进 text-indent
10.2.5文本修饰 text-decoration
第11章
11.1背景
11.2精灵图
11.3渐变linear-gradient
11.3.1渐变
11.3.2重复性渐变： background-image: repeating-linear-gradient(）;
径向渐变radial-gradient放射性的效果。
第12章表格table
12.1tr>td
12.3border-spacing border-collapse
第13章表单
13.1 .input系列
13.3.1 text 文本框
13.1.2 密码框password
13.1.3 提交按钮submit
13.1.4单选框radio
13.1.5多选框 checkbox
13.1.6文件上传 file multiple
13.2 下拉列表 select
13.4 texttarea文本域标签
13.5 label 标签
14章 过渡 transition与动画
第一章：css简介：
1.1、css层叠样式表
网页实际上是一个多层的结构，通过css可以分别为王爷的每一个层来设置样式。而最终我们只能看到只是王爷的最上边一层。
1.2、设置方式：
- 内联样式，行内样式：在标签内部通过style属性来设置元素的样式。 问题：只能呢还对一个标签生效，如果希望影响到多个元素时，必须对每一个元素设置。结构混乱。
- 内部样式表：将样式标签编写在head中的style标签中，通过css的选择起来选中元素并为其设置样式。可以同时为多个标签设置样式，并且修改一处，即可全部修改。只能对一个网页生效，里面的样式也不能进行复用。
- 外部样式表：将css样式写在新建一个的.css文件，然后通过link标签进行引入。将样式编写在外部的css中，可以使用到浏览器的缓存机制，从而加快网页的加快速度，提高用户的体验。
1.3、元素显示模式：块元素和行内元素
HTML元素一般分为块元素和行内元素两种。
块元素(block element)：
在标签中独占一行的称之为块元素。一般通过块元素进行网页布局。h标签，p标签，div标签，P标签，ul，ol标签。
特点：独占一行，可以设置行高列宽，默认宽度为容器的100%，默认高度是被内容（子元素）撑开，是一个容器盒子，可以放行内元素和块元素。
行内元素：(inline element)
在页面中可以一行多个存在的称为行内元素。a标签em标签，strong标签，i标签，del标签,u标签,span标签。
特点：一行多个元素，多个元素放一行，宽高直接设置无效。默认宽度为内容元素的宽度，只能放文本文字或者其他行内元素。 可以设置padding和margin，但是垂直方向的padding和margin不会影响页面的布局。
行内块元素：同时具有行内和块的特点。
特点：和相邻元素放一行，但之间会有空白缝隙，可以设置高和宽，本身内容的宽度及默认宽度。
元素显示模式的转化：
即一个模式的元素需要另一个模式的特性。
display用来设置元素显示的类型
| inline | 将元素设置为行内元素 |
| block | 设置为块元素 |
| inline-block | 将元素设置为行内块元素行内块，既可以设置宽度和高度又不会独占一行 |
| table | 将元素设置为一个表格 |
| none | 元素不在页面中显示，不显示是不显示了，但是原来属于他的位置也没了 |
注意点：
1，一般情况下会在块元素中放行内元素，而不会在行内元素放块元素。
2，块元素中基本什么都能放。
3，p，h元素中不能放任何的块元素。链接不能放链接，可以放链接，最好转化一下。
visibility用来设置元素的显示状态：
| visible | 默认值，元素在页面中正常显示 |
| hidden | 元素在页面中隐藏不显示，但是依然占据页面的位置 |
1.4 基本语法：
选择器：声明块，通过选择器可以选中页面中的指定元素，
声明块：通过声明块来只当要为元素设置的样式。由一个一个的声明组成，声明是一个名值结构。
第二章 常用选择器
1.1 常用选择器
-
元素选择器即标签选择器 标签名{ }
-
id选择器 #id属性值{}
-
类选择器或者class选择器 .class的属性值
-
通配符选择器 *
Document 这是一段文字
这是第二段段文字
这是三段文字
这是一段文字
这是一段文字
1.2复合选择器
1.2.1 交集选择器：紧挨着
1.2.2 并集选择器：以逗号隔开
1.2.3 后代选择器：以空格隔开
1.2.4 子代代选择器：以>大于号隔开
Document
这是p
这是第一段话
这是第二段话
这是第一段话
123455
1.3属性选择器
属性选择器：[]英文中括号
[属性名] 选择含有指定属性元素
[属性名=属性值] 选择含有指定属性和属性值的元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名*=属性值] 选择属性值中含有某些元素的的元素
Document
从明天起，
做一个幸福的人
喂马，劈柴，周游世界
从明天起，
关心粮食和蔬菜
我有一所房子，
1.4伪类选择器
1.4.1 伪类： -child -of-type ：not（）
不存在的类，用来描述一个元素的特殊状态比如：第一个子元素，被点击的元素，鼠标移入的元素，
伪类一般情况下都用：冒号开头，
-child在所有类型中进行排序
：first-child 第一个子元素
:last-child 最后一个元素
nth-child( ) 选中的第n个子元素
特殊值：
n 第n个， n的范围下0到正无穷
2n 或者even 表示选中的偶数位元素
2n+1或odd 表示选中的奇数数位元素
-of-type 在同类型中进行排序
: first-of-type 第一个子元素
:last-of-type 最后一个元素
nth-of-type 选中的第n个子元素
：not（）否定伪类，将符合条件的元素排除
Document
这是？
- 你，
- 一会看我，
- 一会看云。
- 我觉得，
- 你看我时很远，
- 你看云时很近。
1.4.2 a元素的四个链接
1 :link 没有访问过的链接
2 :visited 访问过的链接
由于隐私的原因,所以visited这个伪类只能修改链接的颜色
:link和:visited 这两个元素只适合a元素
3 :hover 鼠标移入的状态
4 :active 正在活动的链接
定义：
:hover 选择器用于选择鼠标指针浮动在上面的元素。选择器适用于所有元素
用法1：这个表示的是：当鼠标悬浮在a这个样式上的时候。
a的背景颜色设置为黄色
a:hover{
background-color:yellow;
} 这个是最普通的用法了，只是通过a改变了style
用法2: 使用a 控制其他块的样式：
使用a控制a的子元素 b：
.a:hover .b {
background-color:blue;
}
使用a控制a的兄弟元素 c(同级元素)：
.a:hover + .c {
color:red;
}
使用a控制a的就近元素d：
.a:hover ~ .d {
color:pink;
}
总结一下：
1. 中间什么都不加 控制子元素；
2. ‘+’ 控制同级元素(兄弟元素)；
3. ‘～’ 控制就近元素；
1.5伪元素
伪元素:页面中一些特殊的并不真实存在的元素
::first-letter 表示第一个字母
::first-line 第一行
::selection 选中的内容
最重要的部分是before和after
::after 元素的最后
::before 元素的开始 befo和after必须配合content属性使用
Document
假如生活欺骗了你？
不要悲伤 不要心急？
忧郁的日子里须要镇静？
相信吧 快乐的日子将会来临？
1.6样式的继承性
样式的继承：我们为一个元素设置样式，同时他的后代元素也会应用。
继承的设计是为了方便我们的开发，利用继承，可以将通用的样式设置到共同的祖先元素上，一次设置，全部元素都有。
注意：不是所有的样式都会被继承，比如：背景，布局相关的。
选择器的权重：
!important 最高优先级（慎用）
内联样式 1，0，0，0
id选择器 0，1，0，0
类和伪类选择器 0，0，1，0
元素选择器 0，0，0，1
通配选择器 0，0，0，0
继承的样式 没有优先级（最低）
a）比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的) （叠加原则）
b）选择器的累加不会超过其最大的数量级（例如类选择器再高也不会超过id选择器
c）如果优先级计算后相同，此时则优先使用靠下的样式（就近原则）
d）在某一个样式的后边添加 !important，则此时该样式会获取到最高的优先级，甚至超过内联样式（开发时慎用）
CSS选择器遵循
a）在相同级别：1、叠加原则 2、就近原则
b）id选择器> 类选择器 > 标签选择器
c）范围越小，优先级别越高
1.7单位
1.7.1长度单位：
像素
·····屏幕显示器实际上由一个一个的小点构成的
百分比：
······也可以设置为相较于父元素的百分比，跟随父元素的改变而改变。
em
····相对于元素自身的字体大小来计算
rem
·····相对于根元素即html的字体大小来计算
1.7.2颜色单位
在css直接使用颜色名称来设置颜色。
RGB值：通过三种颜色的不同浓度来配置出不同的颜色。red green blue。每一种颜色的范围在0~255（0%~100%之间）。语法：RGB（红色，绿，蓝）
RGBA:
在RGB的基础上增加了一个A表示透明度。需要4个值。前三个和RGB一样，第四个表示不透明度：1表示完全不透明，0表示完全透明，.5半透明
十六进制的RGB值：
语法：#红绿蓝。
颜色通过00--ff。颜色两位重复可简写。
第三章
3.1文档流：
网页是一个多层结构，一层覆盖一层，通过css可以分别为每一层设置样式。在地下的一层为文档流，文档流是网页的基础。对于我们而言,元素主要有两个状态，在文档流中，脱离文档流。
3.2盒子模型
css将页面中的所有元素都设置为了一个矩形盒子。将元素设置成矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置。
盒子模型的组成：边框(border)，内外边距(padding ,margin)，内容(content)。默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定。
内容（content）：width，height。
边框(border)：边框位于盒子边缘。
至少设置三个要素：
边框宽度：border-width
边框颜色：border-color
边框样式：border-style
border-width默认值，一般情况下都是3个像素，可以用来指定四个方向的边框的宽度。
除了border-width，还有一组border-xxx-width，xxx可以是top，right，left，bottom，用来单独制定某一个边的宽度。
border-color 边框的颜色：默认使用color的颜色值
border-top-color 上边框的颜色
border-right-color 右边框的颜色
border-bottom-color 下边框的颜色
border-left-color 左边框的颜色
border-style 边框的样式：没有默认值，必须指定。
border-style的三种重点样式：
| solid | 实线边框 |
| dashed | 虚线 |
| dotted | 点线 |
border-top-style 上边框的样式
border-right-style 右边框的样式
border-bottom-style 下边框的样式
border-left-style 左边框的样式
不论是border-width 、 border-color 、border-style 还是其衍生出来的属性写法，都可以指定每个方向的边框情况
设定几个值就决定了对应方向的宽度、颜色或样式
四个值：上 ，右 ，下， 左
三个值：上， 左右 ，下
两个值：上下， 左右
一个值：上下左右
其实不管设置几个值，只要记住：其顺序是按顺时针方向设置的，剩下的可以由矩形的对称性推导出来
border：简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求
border-top 上边框的宽度、颜色和样式
border-right 右边框的宽度、颜色和样式
border-bottom 下边框的宽度、颜色和样式
border-left 左边框的宽度、颜色和样式
内边距(padding）
内边距，也叫填充，是内容区和边框之间的空间
padding-top 上内边距
padding-right 右内边距
padding-bottom下内边距
padding-left 左内边距
padding内边距的简写属性，可以同时指定四个方向的内边距，规则和边框中属性值设置一样
注意：内边距的设置会影响到盒子的大小，背景颜色会延伸到内边距上
可以看出，当内外div宽度和高度一样时，由于outer设置了一个padding属性，其盒子大小被“撑大了”
盒子可见框的大小，由内容区、内边距和边框共同决定，所以在计算盒子大小时，需要将这三个区域加到一起计算
外边距（margin）
外边距，也叫空白边，位于盒子的最外围，是添加在边框外周围的空间。空白边使盒子之间不会紧凑地连接在一起，是CSS 布局的一个重要手段
注意：外边距不会影响盒子可见框的大小，但是外边距会影响盒子的位置和占用空间 一共有四个方向的外边距：
| margin-top 上外边距 | 设置正值，元素自身向下移动 设置负值，元素自身向上移动 |
| margin-right 右外边距 | 设置正值，其右边的元素向右移动 设置负值，其右边的元素向左移动上述说法并不准确，对于块元素，设置margin-right不会产生任何效果 |
| margin-bottom 下外边距 | 设置正值，其下边的元素向下移动 设置负值，其下边的元素向上移动 上述说法并不准确，对于块元素，会有垂直方向上的边距重叠问题（后面会细说） |
| margin-left 左外边距 | 设置正值，元素自身向右移动 设置负值，元素自身向左移动 |
元素在页面中是按照自左向右的顺序排列的，所以默认情况下，如果我们设置的左和上外边距则会移动元素自身，而设置下和右外边距会移动其他元素。 margin简写属性同padding。
3.2.1.box-sizing用来设置盒子尺寸的计算方式（设置width和height的作用）
可选值：
| content-box | 默认值，宽度和高度用来设置内容区的大小 |
| border-box | 宽度和高度用来设置整个盒子可见框的大小 |
width和height指的是内容区、内边距和边框的总大小
3.2.2. 轮廓
outline用来设置元素的轮廓线，用法和border一模一样
轮廓和边框不同点是，轮廓不会影响到可见框的大小
3.3.3. 阴影
box-shadow属性用于在一个元素的框架周围添加阴影效果,你可以设置多个由逗号分隔的效果,一个盒状阴影由相对于元素的X和Y的偏移量、模糊和扩散半径以及颜色来描述.
box-shadow用来设置元素的阴影效果，阴影不会影响页面布局。
比如：box-shadow: 10px 10px 5px rgba(0, 0, 0, .2);
- 第一个值-水平偏移量：设置阴影的水平位置
- 正值向右移动
- 负值向左移动
- 第二个值-垂直偏移量：设置阴影的垂直位置
- 正值向下移动
- 负值向上移动第三个值-阴影的模糊半径 第四个值-阴影的颜色
3.2.4. 圆角
border-radius属性使一个元素的外边框边缘的角变圆
你可以设置一个半径来做圆角，或者设置两个半径来做椭圆角
border-radius 用来设置圆角，圆角设置的是圆的半径大小
border-top-left-radiusborder-top-right-radiusborder-bottom-left-radiusaborder-bottom-right-radiusborder-radius 可以分别指定四个角的圆角四个值：左上 右上 右下 左下三个值：左上 右上/左下 右下两个值：左上/右下 右上/左下一个值：左上/右上/右下/左下
这里同样不需要死记硬背，只要记住遵循顺时针方向和矩形中心点对称原则。与border不同的是，border是从上开始顺时针设置，而圆角是从左上开始圆原理很简单，就是绘制正方形，并将四个圆角半径设置为正方形的一半.
3.2.5椭圆
只需要对上述样式对一点点的改动，设置width和height属性不相等即可
第四章布局
4.1.水平布局
元素在其父元素中水平方向的位置由以下几个属性共同决定：margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
一个元素在其父元素中，水平布局必须要满足以下的等式 margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素的宽度。以上等式必须满足，如果相加结果使等式不成立，则称为过渡约束。
4.2垂直方向布局
4.2.1（元素溢出）
子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出。 使用overflow/overflow-x/overflow-y属性来设置父元素如何处理溢出的子元素
overflow-x/y：单独处理水平或者垂直方向的布局
可选值：visible/hidden/scroll/auto
| 属性· | 说明 |
visible |
溢出内容会在父元素外部位置显示，默认值 |
hidden |
溢出内容会被裁剪，不会显示 |
scroll |
生成两个滚动条，通过滚动条来查看完整的内容 |
auto |
根据需要生成滚动条 |
4.2.2垂直外边距折叠
垂直外边距的重叠（折叠）：相邻的垂直方向外边距会发生重叠现象 兄弟元素： 兄弟元素间的相邻，垂直外边距会取两者之间的较大值（两者都是正值） 特殊情况： 如果相邻的外边距一正一负，则取两者的和 如果相邻的外边距都是负值，则取两者中绝对值较大 兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理
父子元素 ： 父子元素间相邻外边距，子元素会传递给父元素（上外边距） 父子外边距的折叠会影响到页面的布局，必须要进行处理。
处理方式1
1、我们转换思路，将对子元素的调整转为对父元素的调整
不调整子元素的margin，而是转而调整父元素的padding
可以看到父元素位置虽然正确了，但是高度却被“撑大了”。我们之前说过，padding属性会影响元素的大小
2、这里我们还需要计算并手动调整下父元素的高度
方法二
1、我们仍然保留子元素的margin-top属性，但是给父元素加一个上边框
在父元素上加一个border-top（上边框）
2、但是因为加了1px的边框，所以父元素盒子的高度也增加了1px。那我们就需要手动调整父元素的高度，同时让边框颜色与父元素盒子颜色保持一致。但是我们没有发现一个问题不难发现一个问题，子元素也往下移动了1px的距离。因为父元素高度少了1px，而子元素的margin-top是从边框下面开始算的，需要margin-top减去一个像素。
第五章 清除浏览器的默认样式
默认样式：浏览器会为元素设置一些默认的样式，
通过link引入reset文件进行清除浏览器的样式。
reset样式 官方地址：reset.css
normalize样式
官方地址：normalize.css这里并没有去除所有样式，因为normalize的作用不同于reset。reset是将所有默认样式去除，而normalize是将所有默认样式统一，这样在不同的浏览器里显示效果也是统一的。
第六章 浮动
6.1浮动
1 浮动的简介
通过浮动可以使一个元素向其父元素的左侧或右侧移动，使用float属性来设置于元素的浮动。
float的可选值：
| none | 默认值，元素不浮动 |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
注意
- 元素设置浮动以后，水平布局的等式便不需要强制成立
- 元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动
2. 浮动的特点
- 浮动元素会完全脱离文档流，不再占据文档流中的位置
- 设置浮动以后，元素会向父元素的左侧或右侧移动
- 浮动元素默认不会从父元素中移出
- 浮动元素向左或向右移动时，不会超过前边的浮动元素（先来后到的顺序）
- 浮动元素不会超过上边的浮动的兄弟元素，最多就是和它一样高
- 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
- 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以利用浮动来设置文字环绕图片的效果
简单总结：
- 浮动目前来讲它的主要作用就是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局
- 元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化
如何让清除浮动：
| 清除浮动 本质清除浮动元素脱离标准流带来的影响 策略 ：闭合浮动 | 1，额外标签法（隔墙法） 在父级的子元素的末尾添加一个新的元素（只能添加块级元素），给新的标签在style添加clear：both 属性 |
| 2 父级添加overflow属性 overflow：hidden。无法显示溢出的部分 | |
| 3父级添加afer伪元素 ，（也是添加了一个新的盒子）然后通过css调用 .clearfix:after{ content: ""; display: block; height: 0; clear: both; visibility: hidden; } |
|
| 4 父级添加双伪元素 .clearfix:after, .clearfix:before{ content:""; display: table; } .clearfix:after{ clear: both; } |
6.2. 元素脱离文档流的特点
块元素：
- 块元素不再独占页面的一行
- 脱离文档流以后，块元素的宽度和高度默认都被内容撑开
行内元素：
- 脱离文档流以后会，特点和块元素一样 。脱离文档流之后的特点很像行内块元素，不过存在一些差异。
脱离文档流以后，不用区分块元素和行内元素。
第七章：简单布局
7.1布局
目的
- 熟悉布局（块元素、浮动）
- 公共css部分复用
- 复习语义标签
Document 7.2高度塌陷
高度塌陷的问题：在浮动布局中 ，父元素的高度默认是被子元素撑开的。当子元素浮动后，其完全会脱离标准流，子元素脱流后，将会无法撑起父元素的高度，导致父元素的高度丢失。父元素高度丢失以后，其下的元素会自动上移。会导致布局混乱问题。所以必须解决。
7.2.1BFC
BFC块级格式化环境。 BFC是一个css中的隐藏的属性，可以为一个元素开启BFC。开启后该元素会变成一个独立的布局区域。
元素开启BFC后的特点： 1.开启BFC后不会被浮动元素所覆盖。 2，开启后子元素和父元素的外边距不会重叠。 3，开启BFC的元素可以包含浮动的元素。
可以通过一些特殊的方法来开启元素的BFC ，有很多方式，列举3种 1，设置元素的浮动 float（不推荐使用） 2，将元素设置为行内块元素 display：inline-block （不推荐使用） 3，将元素的overfolw设置为一个非visible的值。 常用的方式为元素设置overfolw：hidden开启BFC可以使其包含浮动。
7.2.3 Clear
如果我们不希望某个元素因为其他元素浮动的影响而改变位置，可以通过clear属性来清除浮动元素对当前元素所产生的影响
clear作用：清除浮动元素对当前元素所产生的影响（本质是为该元素添加一个上外边距，margin-top属性，值由浏览器自动计算）
可选值：
left 清除左侧浮动元素对当前元素的影响
right 清除右侧浮动元素对当前元素的影响
both 清除两侧中影响较大一侧元素的影响（注意，这里不是同时清除两侧的影响）
举例：没有添加 box3的clear之前效果图：由于绿色的盒子添浮动，脱离标准流，不占据位置，aaa所在的box3位置也发生改变，父元素的高度由box3撑起。
aaa
box3添加clear：both 之后，清除浮动带来的不良效果，实质是给box3增加了上外边框，使其可以撑起父元素
但是box3在结构上没有任何的意义 ，浮动的影响是在表现形式上出现的问题，可以通过表现来解决。
7.2.4伪类元素：：after 最终方案：这个方案相比较来说，比较完美。
在css中添加伪类元素::after，将伪类元素转换成块元素display，并清除clear浮动的后果。
相邻的垂直方向外边距会发生重叠现象。
7.2.5. clearfix
clearfix 这个样式就可以同时解决高度塌陷和外边距重叠的问题，当你在遇到这些问题时，直接使用clearfix这个类即可，他就可以帮你轻松搞定css中的两大难题。
.clearfix::before,
.clearfix::after{
content: '';
display: table;
clear: both;
}
其中.clearfix::before是为了解决外边距重叠问题
.clearfix::before{
content: '';
display: table;
}
.clearfix::after是为了解决高度塌陷问题
.clearfix::after{
content: '';
display: table;
clear: both;
}
两者合在一起，就可以完美地解决高度塌陷和外边距重叠这两大“世纪难题”了 。
第八章 定位 position(宏观用浮动，细节用定位)
将页面中的元素摆放在任意位置。，定位组成：定位模式+边偏移
可选值
| static | 默认值，静态定位， |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
| sticky | 粘滞定位 |
8.1 相对定位：relative
特点 ：
- 开启相对定位后，不设置偏移量，位置不改变，（原来的位置依旧保留，后面的元素不会自动占据他的位置）
- 相对位置参照元素在文档流中的位置进行定位。
- 提升元素的层级
- 相对定位后不会使文档脱离标准流
- 不会改变文档的性质，块还是块，行内依旧是行内（着重看定位之前的位置）
偏移量（offset）
当元素开启相对定位以后，可以通过偏移量来设置元素的位置
定位元素垂直方向的位置由top和bottom两个属性控制，通常情况下只会使用其中之一：
top值越大，定位元素越靠下。
bottom值越大，定位元素靠上。
定位元素水平方向的位置由left和right两个属性控制，通常情况下只会使用其中之一：
left越大，定位元素越靠右
right越大，定位元素越靠左
在页面文档流中，越靠下的元素开启相对定位后，其层级越高 （没有设置层级或层级z-index设置相同值时，优先显示靠下的元素）
浮动和相对定位的区别
- 参考系不同：浮动的参考系是其父元素；相对定位是相对于自身
- 可移动方向不同：浮动只能左右移动；相对定位是上下左右移动
- 影响不同：浮动会影响页面布局（包括下方元素位置影响和高度塌陷问题）；相对定位不对影响页面布局
- 性质不同：浮动会改变元素的性质（不再独占一行，其宽高都会被内容撑开）；相对定位不会改变元素的性质
- 文字环绕：浮动不会覆盖文字；相对定位可以覆盖文字
浮动和相对定位也有其相似之处：
- 浮动和相对定位都是移动位置，
- 浮动和相对定位不会从父元素中移出
8.2 绝对定位absolute（子绝父相）
8.2.1特点：
- 不设置偏移量，元素的位置不会发生变化，
- 无父元素或者父元素无相对定位relative，默认会以浏览器文档为定位，找最近的开启相对定位的父元素。
- 开启绝对定位后，元素会从文档流中脱离，不占据原有位置，
- 由于脱离标准流，会改变元素的性质，行内变块，块的高度被内容撑开，
- 绝对定位会使元素提升层级，
8.2.2绝对定位的布局：
水平方向的布局
我们之前说过，水平方向的布局等式：
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素的宽度
当使用绝对定位时，需要添加left和right两个值（此时规则和之前一样，只是多添加了两个值）
left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 其父元素的宽度
当发生过度约束时
如果9个值中没有auto，则自动调整right值以使等式满足（之前7个值是margin-right）
如果9个值中有auto，则自动调整auto的值以使等式满足
可设置auto的值：margin-left/margin-right /width/left/right
因为left和right的值默认是auto，所以如果没有设置left和right，当等式不满足时，则会自动调整这两个值.
水平居中
垂直方向的布局
垂直方向布局的等式的也必须要满足
top + margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom + top = 其父元素的高度
垂直居中
.box2 {
width: 100px;
height: 100px;
background-color: orange;
/* 左右外边距设置为auto */
margin-top: auto;
margin-bottom: auto;
/* 绝对定位 */
position: absolute;
top: 0;
bottom: 0;
}
水平垂直居中
目前，我们可以根据绝对定位进行元素的水平垂直双方向居中，所以这个方法只是其中之一
.box2 {
width: 100px;
height: 100px;
background-color: orange;
/* 左右外边距设置为auto */
margin: auto;
/* 绝对定位 */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
小结
- 水平布局等式：left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 其父元素的宽度
- 垂直布局等式：top + margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom + top = 其父元素的高度
- 只是在没有
auto时，会自动调整top/bottom/left/right
8.3固定定位fixed
将元素的position属性设置为fixed，是一种特殊的绝对定位。固定定位永远参照浏览器的可视窗口来定位，在文档流中不占据位置
8.4粘滞定位sticky
将元素的position属性设置为sticky，与fixed基本一致，不同的粘滞定位可以在元素到达某个位置时，固定住。
第九章：元素的层级
定位叠放次序z-index （z轴）
对于开启了定位元素，可以通过z-index属性来指定元素的层级
z-index需要一个整数作为参数，值越大元素的层级越高，元素的层级越高越优先显示- 如果元素的层级一样，则优先显示靠下的元素
- 祖先的元素的层级再高，也不会盖住后代元素
第10章字体和文本样式
10.1. 字体相关的样式
字体的一般属性
font-size |
字体的大小 |
font-weight |
字体粗细（正常normal，400。加粗blod，700，数值在100-900之间） |
font-style |
文字倾斜（正常normal，倾斜italic） |
font-family |
字体 |
| font复合属性 | 字体类型 |
-
em相当于当前元素的一个font-size -
rem相对于根元素的一个font-size。当然，字体的属性并不止这些。
常见的字体font-family分类：
- 无衬线字体系列（网页）
- 衬线字体系列
- 等宽字体系列
font-family可以同时指定多个字体，多个字体间使用，隔开
字体生效时优先使用第一个，第一个无法使用则使用第二个，以此类推
font-family: 'Courier New', Courier, monospace字体的简写属性：
font 可以设置字体相关的所有属性：
font: font-style font-variant font-weight font-size/line-height font-family；
其中某些值可以不写，会用默认值。（字体大小写在倒数第二，字体写在最后）
10.1.2 图标字体（iconfont）
图标字体简介
在网页中经常需要使用一些图标，可以通过图片来引入图标但是图片大小本身比较大，并且非常的不灵活，所以在使用图标时，我们还可以将图标直接设置为字体，然后通过@font-face的形式来对字体进行引入,这样我们就可以通过使用字体的形式来使用图标字体。
图标字体：
iconfont
官方网站：https://www.iconfont.cn/
iconfont是阿里的一个图标字体库，海量图标库，图标字体非常丰富
但是版权有点模横两可，如果需要商用，最好联系作者
不过一般情况下，公司企业都会有自己的UI设计团队，会自己去进行设计
这里使用方式大同小异，不过iconfont需要添加购物车后再添加至项目然后下载，下载包中有demo.html，详细介绍了使用方式iconfont也提供了一种在线方式，直接在我的项目中选择在线链接可以复制出一份@font-face的css代码。
Document
2通过伪元素设置
找到要设置图标的元素通过::before或::after选中
在content中设置字体的编码
设置字体的样式
Document
这里是字体图标
10.2文本样式
10.2.1行高line height（行间距）
文字占有的实际高度包括上边距和下边距和文字高度，可以通过line-height来设置行高,可以直接指定一个数字px/em,也可以直接为行高设置一个小数（字体大小的倍数）。
行高经常还用来设置文字的行间距：行间距 = 行高 - 字体大小。
内容的垂直居中：设置行高属性值=自身高度值，前提是文字是单行。
字体框
字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度，行高会在字体框的上下平均分配。
10.2.2水平对齐
text-align 文本的水平对齐
text-align属性值 |
对齐方式说明 |
|---|---|
left |
左侧对齐 |
right |
右侧对齐 |
center |
居中对齐 |
justify |
两端对齐 |
text-align：center 可以是哪些元素对齐：
- 文本
- span标签，a标签
- input标签，img标签
- 注意：要是以上元素居中，text-align：center必须给其父元素设置。
10.2.3垂直对齐
vertical-align 设置元素垂直对齐的方式：设置图片的对齐时注意，不使用vertical-align：baseline，使用其他的属性就可以使图片与元素所在的父盒子对齐。
vertical-align 属性值 |
对齐方式说明 |
|---|---|
baseline |
基线对齐 |
top |
顶部对齐 |
bottom |
底部对齐 |
middle |
居中对齐 |
10.2.4文本缩进 text-indent
text-indent 文本首行缩进，取值：em一个字体的大小。
10.2.5文本修饰 text-decoration
取值：可以给文本修饰添加颜色和样式。
| 属性值 | 效果 |
| underline | 下划线 |
| line-through | 删除线 |
| overline | 上划线 |
| none | 无装饰线 |
开发中经常会用text-decoration：none清除a标签默认的下划线。
white-space设置网页如何处理空白：
| normal | 正常显示 |
| nowrap | 不换行 |
| pre | 保留空白 |
第11章
11.1背景
| background-color | 设置背景颜色 |
| background-image | 设置背景图片 |
| background-repeat | 背景的重复方式 |
| background-position | 设置背景图片的位置 |
| background-clip | 设置背景的范围 |
| background-origin | 背景图片的偏移量计算的原点 |
| background-size | 设置背景图片的大小 |
| background-attachment | 背景图片是否跟随元素移动 |
background-image设置背景图片：
- 如果背景图片大小小于元素，则背景图片会自动在元素中平铺将元素铺满
- 如果背景图片大小大于元素，则背景图片一部分会无法完全显示
- 如果背景图片大小等于元素，则背景图片会直接正常显示
background-image: url(../../微信图片_20220919184139.png);background-repeat 设置背景图片的重复方式：
- repeat 默认值，背景图片沿着x轴和y轴双方向重复
- repeat-x 背景图片沿着x轴方向重复
- repeat-y 背景图片沿着y轴方向重复
- no-repeat 背景图片不重复
background-position 设置背景图片的位置
- 通过top left right bottom center 5个表示方位的词来设置背景图片的位置：使用方位词时必须要同时指定两个值，只写一个则第二个默认就是center
- 通过偏移量来指定背景图片的位置：水平方向偏移量、垂直方向变量（background-position：200px -120px ）
background-clip 设置背景的范围
- border-box 默认值，背景会出现在边框的下边
- padding-box 背景不会出现在边框，只出现在内容区和内边距
- content-box 背景只会出现在内容区
background-origin 背景图片的偏移量计算的原点
- border-box 背景图片的变量从边框处开始计算
- padding-box 默认值，background-position从内边距处开始计算
- content-box 背景图片的偏移量从内容区处计算
background-size 设置背景图片的大小:
第一个值表示宽度，第二个值表示高度；如果只写一个，则第二个值默认是auto
- cover 图片的比例不变，将元素铺满
- contain 图片比例不变，将图片在元素中完整显示
background-attachment 背景图片是否跟随元素移动（用的不多）
- scroll 默认值，背景图片会跟随元素移动
- fixed 背景会固定在页面中，不会随元素移动
总结：
- 可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色
- background 背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置并且该样式没有顺序要求，也没有哪个属性是必须写的。
background背景相关简写属性注意点：
- background-size必须写在background-position的后边，并且使用/隔开background-position/background-size
- background-origin 与background-clip 两个样式，orgin要在clip的前边
11.2精灵图
图片属于网页中的外部资源，外部资源需要浏览器单独发送请求加载。
浏览器加载外部资源时，是按需加载的，用则加载。看图一：会出现一个问题图片在交替过程中会闪烁，有空白，影响美观。
解决图片闪烁的问题，可以将多个小图片保存到一个大图片中，通过调整background-position来调整图片的位置。这种方法称为css-sprite，即精灵图，
示例：
精灵图的使用步骤：
- 确定使用的图标
- 测量图标大小
- 根据测量结果创建一个元素
- 将雪碧图设置为元素的背景图片
- 设置一个偏移量已显示正确的图片。
11.3渐变linear-gradient
11.3.1渐变
通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果
注意·：！！渐变是图片，需要通过background-image来设置。
线性渐变，颜色沿着一条直线发生变化 linear-gradient()。
linear-gradient(red，yellow)红色在开头，黄色在结尾，中间是过渡区域。线性渐变的开头，我们可以指定渐变的方向：
- to left
- to right
- to bottom
- to top
- deg表示度数
- turn表示圈
比如：渐变可以同时指定多个颜色，多个颜色在默认情况下平均分配,也可以手动指定渐变的分布情况。
div {
width: 100px;
height: 100px;
background-image: linear-gradient(to top, red, yellow);
}效果：
11.3.2重复性渐变： background-image: repeating-linear-gradient(）;
div {
width: 100px;
height: 100px;
background-image: repeating-linear-gradient(to top,red 0px ,yellow 10px);
}效果：
径向渐变radial-gradient放射性的效果。
div { width: 100px; height: 100px; background-image: radial-gradient(red, yellow); }
效果：
默认情况下，径向渐变圆心的形状胡根据元素的形状来计算：
- 正方形-----圆形
- 长方形-----椭圆形r
- 也可以手动来指定径向渐变的大小（circle，ellipse）
- 可以指定渐变的位置background-image:radial-gradient（大小 at位置，颜色位置，颜色位置，颜色位置）；
第12章表格table
12.1tr>td
通过table标签来创建一个表格，在table中使用tr表示表格中的一行，有几个tr就有几行，在tr中使用td表示一个单元格，有几个td就有几个单元格。
可以将一个表格分成三个部分：
- 头部
thead - 主体
tbody - 底部
tfoot th表示头部的单元格注意：
- 默认情况下元素在td中是垂直居中的，可以通过vertical-align来修改r
- 如果表格中没有使用tbody而是直接使用tr，那么浏览器会自动创建一个tbody，并且将tr全都放到tbody中， 所以说，tr不是table的子元素 。
12.2rowspan 跨行 colspan 跨列
属性用在td标签中，
rowspan指定单元格纵向跨越的行数。colspan用来指定单元格横向跨越的列数-
Document 日期 收入 支出 合计 11.11 100 100 0 500 100 400 200 400 12.3border-spacing border-collapse
border-spacing：指定边框之间的距离
日期
收入
支出
合计
11.11
100
100
0
11.12
500
100
400
200
400
效果：
border-collapse：设置边框的合并
border-collapse: collapse;将border-spacing改为border-collapse效果：
第13章表单
表单的作用：网页中的表单用于将本地的数据提交给远程的服务器。
form的属性
action：表单要提交的服务器的地址
13.1 .input系列
13.3.1 text 文本框
注意：数据要提交到服务器中，必须要为元素指定一个name属性值
文本框
13.1.2 密码框password
密码框13.1.3 提交按钮submit
13.1.4单选框radio
像这种选择框，必须要措定一个value属性，value属性最终会作为用户填写的值传递给服务器
13.1.5多选框 checkbox
13.1.6文件上传 file multiple
13.2 下拉列表 select
13.3 button按钮 双标签
上面两种写法实际上效果是一致的，区别在于：
input是自闭合标签，不需要就能结束；button不是自闭合标签，跟一般标签一样是成对出现的button因为不是自闭合标签，所以使用起来更灵活，可以嵌套其他的标签
13.4 texttarea文本域标签
用于留言建议，
属性：cols规定宽度，rows规定行高，及文本可见行数
效果
13.5 label 标签
用于绑定内容与表单标签的关系。
女
女效果：
由于第一组和第二组设置了不同的name，所以分为两组进行两种方法的实验。点击“男”以及“男字之前的圆圈”都可以选中男，是因为添加了label，扩大了选中的区域.
14章 过渡 transition与动画
1、过渡（transition）
- 通过过渡可以指定一个属性发生变化时的切换方式
- 通过过渡可以创建一些非常好的效果，提升用户的体验
属性值
- transition-property：指定要执行过渡的属性。 多个属性间使用,隔开； 如果所有属性都需要过渡，则使用all关键字； 大部分属性都支持过渡效果； 注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡；
- transition-duration：指定过渡效果的持续时间时间单位： s和ms（1s=1000ms）
- transition-delay：过渡效果的延迟，等待一段时间后在执行过渡
- transition-timing-function：过渡的时序函数 linear匀速运动：ease 默认值，慢速开始，先加速后减速 ease-in 加速运动 ease-out 减速运动 easeinout 先加速后减速 cubic-bezier()来指定时序函数 https://cubic-bezier.com steps() 分步执行过渡效果，可以设置第二个值： end，在时间结束时执行过渡（默认值） start，在时间开始时执行过渡
- transition：可以同时设置过渡相关的所有属性
只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟时间
/* transition: margin-left 2s 1s; */
transition-property: margin-left;
transition-duration: 2s;
transition-delay: 1s;