1简介
CSS主要作用：CSS用来设置网页中元素的样式 ，就是为html添加类似于字体，颜色的一种语言，文件扩展名为.css。
1.1特点
-->可设置多种文档样式外观，包括文本和背景属性，任何元素都可以设置。
-->易修改和使用。
-->可以在多个页面中使用同一个CSS样式表，在任何页面文件中都可以使用。
-->一个元素可以多次设置同一个样式，但在浏览器中看到的是最后一次设置的
-->css的样式表可以更大程度的缩减页面的体积，减少下载时间
1.2样式分类
根据CSS代码所在的位置可分为：内联样式，内部样式表，外部样式表。
1.2.1内联样式
内联样式也叫行内样式，定义在元素的style属性里
语法：style=" 属性：值 ；属性：值； "
例如：div中：<div style="color: red;">你好</div>
注意：只能对一个html元素生效，不能重用，不建议在开发中使用。
1.2.2内部样式表
将样式定义到html中的<head>元素中的子元素<style>中，使用选择器来定位要设置的样式的元素
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS内部样式表</title>
<style>
/* 为了让CSS可读性更强，你可以每行只描述一个属性: */
#d1 {
background-color: orange;
width: 500px;
height: 200px;
}
</style>
</head>
<body>
<div id="d1">
一个div
</div>
</body>
</html>
优点：
-
可以同时为多个HTML元素设置样式，方便复用
-
并且修改时只需要修改一处即可全部应用
缺点：
-
内部样式表只能对一个网页起作用，它里边的样式不能跨页面进行复用
1.2.3外部样式表
1.外部样式表，是将css代码编写到CSS文件中，文件的扩展名为.css，然后通过link标签将css文件引入到HTML文档中。
二.选择器
2.1基本选择器
1.标签选择器
结构： 标签名{css属性名：属性值；}
作用：通过标签名，找到页面中所有的这类标签，设置样式
注意：标签选择器选择的是一类标签，而不是单独的一个，标签选择器无论嵌套关系有多深，都能够找到对应的标签。
如：<style>
p{
color: red;
}
</style>
<body>
<p>
标签选择器
</p>
</body>
2.类选择器
结构： .类名{css属性名：属性值；}
作用： 通过类名，找到页面中所有的带有这个类名的标签，设置样式
注意：
-
所有的标签上都有class属性，class属性的属性值成为类名（类似于起了一个名）
-
类名可以由数字，字母，下划线，中划线组成，但是不能以数字开头或者中划线开头
-
一个标签中可以同时有多个类名，类名之间用空格隔开
-
类名可以重复，一个类选择器可以同时选中多个标签
例如：
<style>
.one{
color: red;
}
</style>
<body>
<div class="one">
类选择器
</div>
</body>
3.id选择器
结构： #id属性值{css属性名：属性值;}
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意：
->所有的标签上都有id属性
->id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的
->一个标签上只能有一个id属性值
->一个id选择器只能选中一个标签
例如：<style>
#one{
color: red;
}
</style>
<body>
<div id="one">
id选择器
</div>
</body>
class类名和id属性值之间的区别
-
class类名相当于姓名，可以重复，
-
一个标签中可以有多个class类名
-
id属性值相当于身份证号码，不可重复，一个标签里面只能有一个ID属性值
类选择器和id选择器之间的区别
-
类选择器以.开头；id选择器以#开头
-
实际开发中的情况 类选择器用的最多 id一般配合js来使用，除非情况特殊，一般不要给id设置样式 实际开发中会遇到冗余代码的抽取
4.通配符选择器:
结构： *{css属性名：属性值}
作用：找到页面中所有的标签，然后设置样式
注意：
-
开发中应用极少，只有在特殊的情况下才会使用
-
在小页面中可能会用于去除页面中默认的margin和padding, 案例如下：
<style>
* {
color: red;
}
</style>
<body>
<div>
通配符选择器
</div>
</body>
2.2复合选择器
1.交集选择器：
语法： 选择器1选择器2{css属性名：属性值}
作用：选中页面中同时满足多个选择器的标签，紧挨着的
结果：找到标签中既能被选择器1又能被选择器2选中的标签，设置样式
2.并集选择器：
语法： 选择器1,选择器2{css样式}
作用：同时选择多组标签，设置相同的样式
结果：找到选择器1和选择器2选中的标签，设置样式
3.关系选择器：有四种
4.属性选择器：
2.5伪类选择器
1.元素选择伪类选择器：
:前有空格代表从子类开始数，无空格代表从所在级数开始。
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(n) 选中第n个子元素 ,n的范围0到正无穷
even 或 2n 表示选中偶数位的元素
odd 或 2n+1 表示选中奇数位的元素
以上这些伪类都是根据所有的子元素进行选择
以下这些伪类都是在同类型元素中进行选择
:first-of-type
:last-of-type
:nth-of-type(n)
2.否定伪类选择器
:not() 括号里传入其他选择器，但是不支持复合选择器的传入
3.a链接的伪类
:link 表示未访问过的a标签
:visited 表示访问过的a标签
以上两个伪类是超链接所独有的
由于隐私的问题，所以visited这个伪类只能修改链接的颜色
以下两个伪类是所有标签都可以使用
:hover 鼠标移入后元素的状态
:active 鼠标点击后，元素的状态
2.6伪元素选择器（5种）
虚假的元素，实际上是没有的，但是css为了设置一些样式，默认提供的，一般都用在段落标记中
p::first-letter 首字符
p::first-line 首行
p::selection 选中的
::before 第一个字符之前
::after 最后一个字符之后
before和after必须配合contend一起使用(before,after所写的内容无法选中且永远在最前和最后)
2.7选择器的权重
优先级越高就先使用谁，一般优先级如下：
内联样式 >id选择器>类和伪类选择器>元素选择器>默认状态
2.8样式的继承
CSS样式继承是指子元素会继承父元素的某些样式属性。常见的可以继承的CSS属性包括 font-family 、 color 、 font-size、line-height。
2.9单位的讲解
1.像素：屏幕（显示器）实际上是由一个一个的小点点构成的
2.百分比：相对于其父元素属性的百分比
3.em：是一个相对单位。em是相对于当前元素内的字体大小来计算的
4.rem：rem是相对于根元素的字体大小来计算
5.color：颜色单位，一般就是用表示这个颜色的英语单词表示颜色
三.盒子模型
3.1 盒子模型
每一个HTML元素都可以是一个盒模型，它们堆积起来就是页面。优点是可以将元素放在任何地方，可以通过调整宽和高来充满整个屏幕，在CSS中，盒模型是用来对元素进行设计和布局的，由内到外好汉实际内容区，内边距，边框，外边距四个部分。
1.内容区content：用来放文本或者子元素
2.内边距padding：内容区与边框的距离
3.边框border：围绕在内边距外边的框
4.外边距margin：边框以外的区域
3.2 content
1.盒模型的内容区，可以放文本，子元素
2.属性：width（宽），height（高），background-color（背景颜色）
3.3 padding
1.内容区到边框的距离，是透明的，没有颜色，有上左下右四个内边距。
padding-top：上内边距
padding-right：右内边距
padidng-bottom：下内边距
padding-left：左内边距
语法：padding: 上 右 下 左;
padding: 上 左右 下;
padding: 上下 左右;
padding: 上下左右;
3.4 border
1.元素的边框
2.三个维度属性：border-width（边框宽度） border-color（边框颜色）border-style（边框样式）
代码演示：
<style>
div {
border-width: 5px;
border-color: blueviolet;
border-style: solid;
width: 300px;
height: 300px;
}
</style>
3.边框的线条样式：
- none: 默认无边框
- dotted: 点虚线
- solid: 实线
- double 双线条
- dashed 虚线
- groove: 定义3D沟槽边框。效果取决于边框的颜色值
- ridge: 定义3D脊边框。效果取决于边框的颜色值
- inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
- outset: 定义一个3D突出边框。 效果取决于边框的颜色值
3.5 margin
1.定义元素周围的空间，作用一般是用来设置该元素所在的网页位置
2.margin-top：上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:左外边距
注意：可以简写 margin： 上 右 下 左（顺时针）
margin：上 左右（表示左右的距离一样） 下
margin : 上下 左右（上下距离一样，左右距离一样）
margin：上下左右（上下左右的距离一样）
上下左右可以只用具体值，左右可以使用百分比，左右可以使用auto，这样会依赖于浏览器，但有居中效果。
块元素的整个宽度等于父元素的width：margin-left+boder-left+padding-left+width(内容区的宽度)+padding-right+border-right+margin-right。在设置元素的外边距时，当右外边距被强制约束为某一个值时，如果整个宽度没有达到父元素的width，那么右外边距则自动填充。
设置的值失效。外边距不会影响盒子可见框的大小，但是外边距会影响盒子的位置，margin会影响到盒子实际占用空间
3.6盒子水平布局
1.元素在其父元素中水平方向的位置由margin-left，border-left，padding-left，width（内容区的宽度），padding-right，border-right，margin-right这几个属性决定的。
2.一个元素在其父元素中，水平布局必须满足以下等式：
父元素的内容区宽度=margin-left+boder-left+padding-left+width(内容区的宽度)+padding-right+border-right+margin-right。（如果不满足，则某一个属性会自动填充，然后满足等式）
有两种情况：
->第一种:七个值里面没有auto，都是固定值，浏览器会自动调整margin-right的值使等式成立。
->第二种：有auto的情况，width，margin-left，margin-right可以设置为auto。（如果某个值为auto，则会自动调整为auto的那个值使等式成立）
-如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0
- 如果将三个值都设置为auto，则外边距都是0，宽度最大
- 如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值
3.7盒子垂直布局
1.垂直距离，只需要设置上下外边距，上下边框的宽，上下内边距以及height即可
2.元素的整个垂直大小， 要考虑上下外边距，边框的宽度，上下内边距，以及width。如果发生了溢出，可以使用以下属性来设置， 注意，是在父元素里设置。
overflow:
可选值:
visible: 默认值，表示可见
hidden : 将溢出的内容裁剪
scroll: 添加了上下和左右的滚动条设置
auto: 根据需求自动添加滚动条
3.8外边距的折叠
只有上下外边距可能发生重叠现象。
1.兄弟之间的外边距重叠：兄弟元素间的相邻垂直外边距会取两者之间的较大值如果相邻的外边距一正一负，则取两者的和，如果相邻的外边距都是负值，则取两者中绝对值较大的
2.父子之间的外边距重叠 ：父子元素间相邻外边距，子元素的会传递给父元素（上外边距）
父子外边距的折叠会影响到页面的布局，必须要进行处理 （只需要父元素添加border属性）
解决方法：父元素需要设置border
3.9行内元素的盒模型
1.行内模型不支持设置宽度和高度，是被内容数据撑起来的，可以设置padding，border，margin，垂直方向上的都无效。
2.如果想要设置行内元素的宽和高，可以使用display，转化为块元素的样式进行设置
display属性可选：none（隐藏），block（变成块元素的样式，但是不会变成块元素），inline（变成行内元素的样式）inline-block（变成行内的块元素，同时具有内联和块元素的样式的特点）
3.10默认样式
通常情况下，html标签都带有自己的默认css样式。比如，body里的元素并不是紧贴左侧和顶部，因为body的margin有个默认值8px。再比如，p元素的上下外边距默认是1em等。
我们在写网页时，这些默认的样式大多数时候都可能会影响我们自己设定的布局，因此，通常我们都会去除这些默认的样式。
由于各个元素的默认样式不一样，有些是相同的，有些是不同的，因此不能都提取到一个选择器中，要单独设置。
可以借助第三方的css样表，进行重置样式。比如
-
reset.css： 该文件的作用，是取消几乎所有元素的默认样式
-
normalize.css: 该文件的作用，是设置一些通常的尺寸。
需要哪一个，就使用link 引入即可. link标签应该放置在style标签的上面，避免覆盖掉自定义的样式
3.11盒子尺寸
默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定。其实这个盒子可见框大小，是由一个属性box-sizing来控制的。
box-sizing: 决定了盒子尺寸的计算方式，也就是整个盒子可见框的大小。其有两个可选值：
-
content-box ：默认值， 属性width和height 用来规定内容区的大小。
因此盒子可见框大小由内容区，内边距和边框共同决定。
-
border-box : 属性width和height用来规定整个可见框的大小，就不再是内容区了。因此内容区的大小则是自适应了。
比如设置了width为200，边框为5，内边距为5，那么内容区的宽就是200-5
*2-5*2 = 180了。
3.12轮廓和圆角
1.outline用来设置元素的轮廓线，用法和border一模一样，但是轮廓不会影响可见框的大小
2.box-sahdow用来设置元素的阴影效果，阴影不会影响页面布局：第一个值 水平偏移量 设置阴影的水平位置 正值向右移动 负值向左移动，第二个值 垂直偏移量 设置阴影的水平位置 正值向下移动 负值向上移动，第三个值 阴影的模糊半径， 第四个值 阴影的颜色。如：box-shadow：0px 0px 50px red；
3.border-radius: 用来设置圆角 圆角设置的圆的半径大小
- border-top-left-radius
- border-top-right-radius
- border-bottom-left-radius
- border-bottom-right-radius
border-top-left-radius:50px 100px; */
border-radius 可以分别指定四个角的圆角
四个值： 左上 右上 右下 左下
三个值： 左上 右上/左下 右下
两个值： 左上/右下 右上/左下
border-radius: 20px / 40px; */
将元素设置为一个圆形
border-radius: 50%;
四.元素的浮动
4.1文档流层
1.css将整个页面当成一个多层的结构：
-人所看到的是最顶层。
- 最底层称之为文档流层，
- 所有的元素，默认都是布局在文档流层的。如果不在文档流层，就在其他层(先不管)
- 文档流层里的元素
- 块元素
->单占一行
->块元素的宽，默认状态下是要撑满父元素的，也就是由父元素决定
->块元素的高，默认状态下是内容区的数据所占大小
-> 块元素是垂直排列，自上而下。
- 行内元素
-> 只占本身大小
2->行内元素的宽和高是由内部的文字或元素决定的。
3->行内元素的排列，从左到右，当在一行装不下时，会自动换行，继续从左到右(与书写顺序一致)
4.2浮动的简介
1.通过浮动可以使一个元素向其父元素的左侧或右侧移动，使用float属性来设置元素的浮动
可选值：none（默认：元素不浮动） left（元素向左浮动）right（元素向右浮动）
注意，元素设置浮动以后，水平布局的等式便不需要强制成立
元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动
2.特点：
->浮动元素会完全脱离文档流，不再占据文档流中的位置
->设置浮动以后元素会向父元素的左侧或右侧移动，
->浮动元素默认不会从父元素中移出
->浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
->如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
->浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高
4.3浮动的其他特点
1.浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以利用浮动来设置文字环绕图片的效果。
2.元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化
3.脱离文档流的特点：脱离文档流以后，不需要再区分块和行内了
4.4高度坍塌的问题
1.有时候，父元素的高度不需要设置具体值，会被子元素撑开。但是如果子元素设置了浮动效果，就会出现高度坍塌问题，父元素会失去高度，到时页面布局混乱
4.5高度坍塌的几种解决方案
1.给父元素一个高度
2.给父元素添加属性：overflow：hidden（缺点：当子元素定位到父元素外的时候，不希望溢出部分隐藏，此方法不适合使用。）
3.在最后一个浮动的元素后面添加一个空的div并给该元素添加属性：clear:both;（缺点：在页面添加无意义的div，形成冗余代码）
4.万能清除浮动法：
在父元素中内容的最后添加一个伪元素来实现
父元素选择符::after{
content:"";
display:block;
clear:both;
}
最合适的方法推荐使用
4.6 clearfix
1.
clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题，当你在遇到这些问题时，直接使用clearfix这个类即可
在父元素的class属性上，添加clearfix.
在style中设置
.clearfix{
content:"";
display: table;
clear: both;
}
注意： clearfix是css中内置的class的值, 不能随便起名，必须用这个词。
五.元素定位
5.1简介
1.定位是一种更加高级的布局手段，通过定位可以将元素摆放到页面的任意位置，使用position属性来设置定位。
可选值： static 默认值，元素是静止的没有开启定位
relative 开启元素的相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位
sticky 开启元素的粘滞定位
5.2relative相对定位
特点： ->元素开启相对定位以后，如果不设置偏移量元素不会发生任何的变化
->相对定位是参照于元素在文档流中的位置进行定位的
->相对定位会提升元素的层级
->相对定位不会使元素脱离文档流
->相对定位不会改变元素的性质块还是块，行内还是行内
5.3偏移量（offset）:
当元素开启了定位以后，可以通过偏移量来设置元素的位置
top:定位元素和定位位置上边的距离（top值越大，定位元素越向下移动）
bottom:定位元素和定位位置下边的距离（bottom值越大，定位元素越向上移动）
left：定位元素和定位位置的左侧距离（left越大元素越靠右）
right：定位元素和定位位置的右侧距离（right越大元素越靠左）
5.4.绝对定位
当元素的position属性值设置为absolute时，则开启了元素的绝对定位
特点：
->开启绝对定位后，如果不设置偏移量元素的位置不会发生变化
->开启绝对定位后，元素会从文档流中脱离
->绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开
->绝对定位会使元素提升一个层级
->绝对定位元素是相对于其包含块进行定位的
5.5包含块：
包含块就是离当前元素最近的祖先块元素。
绝对定位的包含块：包含块就是离它最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启相对定位则根元素就是它的包含块。html（根元素，初始包含块）
5.6.固定定位：
将元素的position属性设置为fixed则开启了元素的固定定位， 固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样，唯一不同的是固定定位永远参照于浏览器的视口进行定位，固定定位的元素不会随网页的滚动条滚动
5.7.粘滞定位：
当元素的position属性设置为sticky时则开启了元素的粘滞定位，粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定。
5.8.绝对定位元素的布局
水平布局： left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含块的内容区的宽度
当我们开启了绝对定位后:水平方向的布局等式就需要添加left 和 right 两个值
当发生过度约束：如果9个值中没有 auto 则自动调整right值以使等式满足；如果有auto，则自动调整auto的值以使等式满足
可设置auto的值：margin width left right，因为left 和 right的值默认是auto，所以如果不指定left和right，则等式不满足时，会自动调整这两个值。
垂直方向布局的等式的也必须要满足：top + margin-top/bottom + padding-top/bottom + border-top/bottom + height = 包含块的高度
5.9.元素的层级
1.对于开启了定位元素，可以通过z-index属性来指定元素的层级，z-index需要一个整数作为参数，值越大元素的层级越高，元素的层级越高越优先显示，如果元素的层级一样，则优先显示靠下的元素， 祖先的元素的层级再高也不会盖住后代元素。
六.动画
6.1过渡
1.通过过渡可以指定一个属性发生变化时的切换方式，通过过渡可以创建一些非常好的效果，提升用户的体验
2.transition-property: 指定要执行过渡的属性
多个属性间使用,隔开
如果所有属性都需要过渡，则使用all关键字
大部分属性都支持过渡效果，注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡
3.transition-duration:指定过渡效果的持续时间
时间单位：s 和 ms 1s = 1000ms
4.transition-timing-function:过渡的时序函数， 指定过渡的执行的方式 ：
ease 默认值，慢速开始，先加速，再减速
linear 匀速运动
ease-in 加速运动
ease-out 减速运动
ease-in-out 先加速 后减速
cubic-bezier() 来指定时序函数
https://cubic-bezier.com
steps() 分步执行过渡效果
可以设置一个第二个值：
end ， 在时间结束时执行过渡(默认值)
start ， 在时间开始时执行过渡
5. transition-delay:过渡效果的延迟，等待一段时间后在执行过渡
6. transition ：可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟
6.2动画
1.动画和过渡类似，都是可以实现一些动态的效果，不同的是过渡需要在某个属性发生变化时才会触发，动画可以自动触发动态效果。
2.设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤
@keyframes test{
/* from表示动画的开始位置 也可以使用 0% */
from{
margin-left: 0;
background-color: orange;
}
/* to动画的结束位置 也可以使用100%*/
to{
background-color: red;
margin-left: 700px;
}
}
animation-name: 要对当前元素生效的关键帧的名字
animation-duration: 动画的执行时间
animation-delay
animation-timing-function: ease-in-out
animation-iteration-count
animation-direction
3.指定动画运行的方向，可选值：
normal 默认值 从 from 向 to运行 每次都是这样
reverse 从 to 向 from 运行 每次都是这样
alternate 从 from 向 to运行 重复执行动画时反向执行
alternate-reverse 从 to 向 from运行重复执行动画时反向执行
4.animation-play-state: 设置动画的执行状态 ，可选值：
running 默认值 动画执行
paused 动画暂停
5.animation-fill-mode: 动画的填充模式，可选值：
none 默认值 动画执行完毕元素回到原来位置
forwards 动画执行完毕元素会停止在动画结束的位置
backwards 动画延时等待时，元素就会处于开始位置
both 结合了forwards 和 backwards
6.3变形
1.变形就是指通过CSS来改变元素的形状或位置， 变形不会影响到页面的布局
2.transform 用来设置元素的变形效果：
- 平移：（平移元素，百分比是相对于自身计算的）
translateX() 沿着x轴方向平移
translateY() 沿着y轴方向平移
translateZ() 沿着z轴方向平移
3.z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，距离越大，元素离人越近， z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果，必须要设置网页的视距
6.4旋转
1.通过旋转可以使元素沿着x y 或 z旋转指定的角度， rotateX（）， rotateY()， rotateZ()
2.对元素进行缩放的函数： scaleX() 水平方向缩放， scaleY() 垂直方向缩放，scale() 双方向的缩放
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
