CSS
CSS的中文叫做层叠样式表(英文全称：Cascading Style Sheets)，是用来表现HTML的样式的一种计算机语言，CSS的三要素：选择器 属性 属性值
CSS级联样式
1：内联样式，元素标签内的style标签属性添加标签属性值
2：内部样式，把代码写在 head 标签里的style标签内，需要用样式选择器来确定元素
3：外部样式，将样式单独写成一个css文件，使用时用link标签引用这个文件
❤注释
</…/> 注释 用在head里面, html注释只能用在body里面
选择器
- 标签选择器
- 类选择器
- ID选择器
- 通配符选择器
/*
通配选择器
作用：选中页面中的所有元素
语法: *
*/
*{ color: red; }
- 后代选择器
<style>
/*
子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素 > 子元素
*/
/* div.box > span{ color: orange; } */
/*
后代元素选择器：
作用：选中指定元素内的指定后代元素
语法：祖先 后代
*/
/* div span{ color: skyblue } */
/* div > p > span{ color: red; } */
/*
选择下一个兄弟
语法：前一个 + 下一个
选择下边所有的兄弟
语法：兄 ~ 弟
*/
p + span{ color: red; }
p ~ span{ color: red; }
</style>
- 复合选择器
/*
交集选择器
作用：选中同时复合多个条件的元素
语法：选择器1选择器2选择器3选择器n{}
注意点：
交集选择器中如果有元素选择器，必须使用元素选择器开头
*/
div.red{ font-size: 30px; }
.a.b.c{ color: blue }
/*
选择器分组（并集选择器）
作用：同时选择多个选择器对应的元素
语法：选择器1,选择器2,选择器3,选择器n{}
#b1,.p1,h1,span,div.red{}
*/
h1, span{ color: green }
- 属性选择器
<style>
/*
[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性和属性值的元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名*=属性值] 选择属性值中含有某值的元素的元素
*/
/* p[title]{ */
/* p[title=abc]{ */
/* p[title^=abc]{ */
/* p[title$=abc]{ */
p[title*=e]{ color: orange; }
</style>
- 伪类选择器
<style>
/*
伪类（不存在的类，特殊的类）
伪类用来描述一个元素的特殊状态
比如：第一个子元素、被点击的元素、鼠标移入的元素...
伪类一般情况下都是使用:开头
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 选中第n个子元素
特殊值：
n 第n个 n的范围0到正无穷
2n 或 even 表示选中偶数位的元素
2n+1 或 odd 表示选中奇数位的元素
- 以上这些伪类都是根据所有的子元素进行排序
:first-of-type
:last-of-type
:nth-of-type()
- 这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序
:not() 否定伪类
- 将符合条件的元素从选择器中去除
*/
/* ul > li:first-child{ color: red; } */
/* ul > li:last-child{ color: red; } */
/* ul > li:nth-child(2n+1){ color: red; } */
/* ul > li:nth-child(even){ color: red; } */
/* ul > li:first-of-type{ color: red; } */
/* ul > li:not(:nth-of-type(3)){ color: yellowgreen; } */
</style>
a标签的伪类选择器
<style>
/* :link 用来表示没访问过的链接（正常的链接）*/
a:link{color: red;}
/* :visited 用来表示访问过的链接 由于隐私的原因，所以visited这个伪类只能修改链接的颜色 */
a:visited{ color: orange; font-size: 50px;}
/* :hover 用来表示鼠标移入的状态 */
a:hover{ color: aqua; font-size: 50px; }
/* :active 用来表示鼠标点击 */
a:active{ color: yellowgreen; } </style>
伪元素选择器
<style>
p{font-size: 20px;}
/*
伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）
伪元素使用 :: 开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 元素的开始
::after 元素的最后
- before 和 after 必须结合content属性来使用
*/
p::first-letter{ font-size: 50px; }
p::first-line{ background-color: yellow; }
p::selection{ background-color: greenyellow; }
/*
div::before{ content: 'abc'; color: red; }
div::after{ content: 'haha'; color: blue; }
*/
div::before{ content: '『'; }
div::after{ content: '』'; }
</style>
属性 属性值
- 盒子模型
一：内边距 padding
表示本区域内容与本区域各个边框之间的距离
padding-left/top/right/bottom：100Px;内容与左 上 右 下边框之间格外增加100像素
padding：50px; 内容上下左右都是距离50像素
padding：50px 60px; 区域增加与边框上下距离为50像素，左右距离为60像素
padding：50px 60px 70px 80px； 区域增加与边框上右下左距离为50,60,70,80像素
注意：使用内边距区域会拉伸
二：外边距 margin
表示本区域对外的距离
margin-left/top/right/bottom：100px;区域与左 上 右 下边框之间格外增加的10像素
margin：50px; 区域距离上下左右都是距离50像素
margin：50px 60px; 区域距离上下为50像素，左右为60像素
margin：50px 60px 70px 80px； 区域距离上右下左为50,60,70,80像素
margin：0 auto; 区域距离上下为0，左右水平居中
三：边框
border: 1px dashed #CCFF33; 粗细 类型 颜色
border-width:10px; 边框粗细
border-color:#CCFF33; 边框 颜色
边框类型 border-style:solid; 实线 dashed; 虚线
/*
border-width: 10px;
默认值，一般都是 3个像素
border-width可以用来指定四个方向的边框的宽度
值的情况
四个值：上 右 下 左
三个值：上 左右 下
两个值：上下 左右
一个值：上下左右
除了border-width还有一组 border-xxx-width
xxx可以是 top right bottom left
用来单独指定某一个边的宽度
border-width: 10px;
border-top-width: 10px;
border-left-width: 30px;
*/
/*
border-color用来指定边框的颜色，同样可以分别指定四个边的边框
规则和border-width一样
border-color也可以省略不写，如果省略了则自动使用color的颜色值
*/
/*
border-style 指定边框的样式
solid 表示实线
dotted 点状虚线
dashed 虚线
double 双线
border-style的默认值是none 表示没有边框
*/
/*
border简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求
除了border以外还有四个 border-xxx
border-top
border-right
border-bottom
border-left
border: solid 10px orange;
border-top: 10px solid red;
border-left: 10px solid red;
border-bottom: 10px solid red;
*/
四：水平布局 垂直布局
/*
元素的水平方向的布局：
元素在其父元素中水平方向的位置由以下几个属性共同决定“
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 = 其父元素内容区的宽度 （必须满足）
0 + 0 + 0 + 200 + 0 + 0 + 0 = 800
0 + 0 + 0 + 200 + 0 + 0 + 600 = 800
100 + 0 + 0 + 200 + 0 + 0 + 400 = 800
100 + 0 + 0 + 200 + 0 + 0 + 500 = 800
- 以上等式必须满足，如果相加结果使等式不成立，则称为过度约束，则等式会自动调整 - 调整的情况：
- 如果这七个值中没有为 auto 的情况，则浏览器会自动调整margin-right值以使等式满足
- 这七个值中有三个值和设置为auto
width margin-left maring-right
- 如果某个值为auto，则会自动调整为auto的那个值以使等式成立
0 + 0 + 0 + auto + 0 + 0 + 0 = 800 auto = 800
0 + 0 + 0 + auto + 0 + 0 + 200 = 800 auto = 600
200 + 0 + 0 + auto + 0 + 0 + 200 = 800 auto = 400
auto + 0 + 0 + 200 + 0 + 0 + 200 = 800 auto = 400
auto + 0 + 0 + 200 + 0 + 0 + auto = 800 auto = 300
- 如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0 - 如果将三个值都设置为auto，则外边距都是0，宽度最大
- 如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值
所以我们经常利用这个特点来使一个元素在其父元素中水平居中 (width:xxxpx; margin:0 auto;)
*/
/*
元素的垂直方向的布局：
子元素是在父元素的内容区中排列的，
如果子元素的大小超过了父元素，则子元素会从父元素中溢出
使用 overflow 属性来设置父元素如何处理溢出的子元素
选值：
visible，默认值 子元素会从父元素中溢出，在父元素外部的位置显示
hidden 溢出内容将会被裁剪不会显示
scroll 生成两个滚动条，通过滚动条来查看完整的内容
auto 根据需要生成滚动条
overflow-x:
overflow-y:
overflow: auto;
*/
/*
垂直外边距的重叠（折叠）
- 相邻的垂直方向外边距会发生重叠现象
- - 兄弟元素
- - 兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）
特殊情况：
如果相邻的外边距一正一负，则取两者的和
如果相邻的外边距都是负值，则取两者中绝对值较大的
兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理
父子元素
- 父子元素间相邻外边距，子元素的会传递给父元素（上外边距）
- 父子外边距的折叠会影响到页面的布局，必须要进行处理
*/
五：行内元素的盒模型
/*
行内元素的盒模型
行内元素不支持设置宽度和高度
行内元素可以设置padding，但是垂直方向padding不会影响页面的布局
行内元素可以设置border，垂直方向的border不会影响页面的布局
行内元素可以设置margin，垂直方向的margin不会影响布局
*/
/*
display 用来设置元素显示的类型
可选值：
inline 将元素设置为行内元素
block 将元素设置为块元素
inline-block 将元素设置为行内块元素 ，行内块，既可以设置宽度和高度又不会独占一行
table 将元素设置为一个表格
none 元素不在页面中显示
*/
六：盒子的尺寸
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
padding: 10px;
border: 10px red solid;
/*
默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定
box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用）
可选值：
content-box 默认值，宽度和高度用来设置内容区的大小
border-box 宽度和高度用来设置整个盒子可见框的大小
width 和 height 指的是内容区 和 内边距 和 边框的总大小
*/
box-sizing: border-box;
}
- 定位 position
文档流：
文档流（normal flow）
- 网页是一个多层的结构，一层摞着一层
- 通过CSS可以分别为每一层来设置样式
- 作为用户来讲只能看到最顶上一层
- 这些层中，最底下的一层称为文档流，文档流是网页的基础
我们所创建的元素默认都是在文档流中进行排列，对于我们来元素主要有两个状态
在文档流中
不在文档流中（脱离文档流）
元素在文档流中有什么特点：
- 块元素
- - 块元素会在页面中独占一行(自上向下垂直排列)
- - 默认宽度是父元素的全部（会把父元素撑满）
- - 默认高度是被内容撑开（子元素）
- 行内元素
- - 行内元素不会独占页面的一行，只占自身的大小
- - 行内元素在页面中左向右水平排列，如果一行之中不能容纳下所有的行内元素，则元素会换到第二行继续自左向右排列（书写习惯一致）
- - 行内元素的默认宽度和高度都是被内容撑开
一 默认定位 position：static
系统默认的，可以省略不写
二 相对定位 position：relative
相对自己本身进行定位，相对原本位置的四个边框进行定位
使用相对定位，原本的位置空间会保留。往右边移动，就是左边加多少区域，因为相当于原来的区域的左边增加了多少区域。往下移动就是top加正的多少或者bottom加上负的多少。
参照物是自己
三 绝对定位 position：absolute
参照物是父级区域 可以随意定位 可以在父级区域里面也可以在外面
1 父级区域不是默认定位
根据父级区域进行定位，根据父级区域的四个边框进行定位
2 父级区域是默认定位
绝对定位的元素的位置相对于最近的已定位的祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（body）
使用绝对定位，原本的位置空间不会保留
4 固定定位 position：fixed
以浏览器窗口的四个边框进行定位
特点：不会随着鼠标滚动而动
层级： z-index:9； 0是最里层，9表示层数。这个区域浮动在这个区域原本的0层地方的第9层。
/*
定位（position）
定位是一种更加高级的布局手段,通过定位可以将元素摆放到页面的任意位置
- 使用position属性来设置定位
可选值：
static 默认值，元素是静止的没有开启定位
relative 开启元素的相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位
sticky 开启元素的粘滞定位
*/
/*
1:相对定位：
- 当元素的position属性值设置为relative时则开启了元素的相对定位 - 相对定位的特点：
1.元素开启相对定位以后，如果不设置偏移量元素不会发生任何的变化
2.相对定位是参照于元素在文档流中的位置进行定位的
3.相对定位会提升元素的层级
4.相对定位不会使元素脱离文档流
5.相对定位不会改变元素的性质块还是块，行内还是行内
- 偏移量（offset）
- 当元素开启了定位以后，可以通过偏移量来设置元素的位置 top - 定位元素和定位位置上边的距离
bottom - 定位元素和定位位置下边的距离
- 定位元素垂直方向的位置由top和bottom两个属性来控制
- 通常情况下我们只会使用其中一
- top值越大，定位元素越向下移动
- bottom值越大，定位元素越向上移动
left- 定位元素和定位位置的左侧距离
right- 定位元素和定位位置的右侧距离
定位元素水平方向的位置由left和right两个属性控制
通常情况下只会使用一个
left越大元素越靠右
right越大元素越靠左
*/
/*
2:绝对定位
当元素的position属性值设置为absolute时，则开启了元素的绝对定位
绝对定位的特点：
1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化
2.开启绝对定位后，元素会从文档流中脱离
3.绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开
4.绝对定位会使元素提升一个层级
5.绝对定位元素是相对于其包含块进行定位的
包含块( containing block )
正常情况下：
包含块就是离当前元素最近的祖先块元素
<div>
<div>
</div>
</div>
<div>
<span>
<em>hello</em>
</span>
</div>
绝对定位的包含块:
包含块就是离它最近的开启了定位的祖先元素，
如果所有的祖先元素都没有开启定位则根元素就是它的包含块html（根元素、初始包含块）
--绝对定位对水平布局的影响：
正常水平布局：
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 元素的宽度
当我们开启了绝对定位后:
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 = 包含块的高度
//使得绝对定位的值处于绝对定位父元素的正中间
.box1{
width: 500px;
height: 500px;
background-color: #bfa;
position: relative;
}
.box2{
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
margin: auto;
left: -80px;
right: 0;
top: 0;
bottom: 0;
}
<div class="box1">
<div class="box2"></div>
</div>
*/
/*
固定定位：
将元素的position属性设置为fixed则开启了元素的固定定位
固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样 唯一不同的是固定定位永远参照于浏览器的窗口口进行定位
固定定位的元素不会随网页的滚动条滚动
*/
/*
粘滞定位
当元素的position属性设置为sticky时则开启了元素的粘滞定位
粘滞定位和相对定位的特点基本一致，
不同的是粘滞定位可以在元素到达某个位置时将其固定
*/
层级
/*
对于开启了定位元素，可以通过z-index属性来指定元素的层级
z-index需要一个整数作为参数，值越大元素的层级越高
元素的层级越高越优先显示
如果元素的层级一样，则优先显示靠下的元素
祖先的元素的层级再高也不会盖住后代元素
*/
-
隐藏和显现
visibility::hidden;/* 隐藏 保留位置空间*/
visibility:visible;/* 显现*/
display:none;/* 隐藏 不保留位置空间*/
display:block;/显现/
opacity:0；/透明度的变化 范围是0-1 0为透明 1为不透明 -
优先级
大到小是：内联样式(10000 )——ID选择器(1000)——类选择器(100)——元素选择器(10)
！Importan 最高优先级别 叠加的选择器用数字相加 越大的就优先级越高
页面布局样式（css样式）
1：字体样式： font-**
font-size：字体大小 单位是像素px
font-weight：粗细
font-family：字体
font-style：italic 字体风格 斜体
font: italic bolder 78px “楷体”; 在一个里面设置字体所有属性
/*
font-face可以将服务器中的字体直接提供给用户去使用
问题：
1.加载速度
2.版权
3.字体格式
*/
@font-face {
/* 指定字体的名字 */ font-family:'myfont' ;
/* 服务器中字体的路径 */ src: url('./font/ZCOOLKuaiLe-Regular.ttf') format("truetype");
}
/*
字体相关的样式
color 用来设置字体颜色
font-size 字体的大小
和font-size相关的单位
em 相当于当前元素的一个font-size
rem 相对于根元素的一个font-size
font-family 字体族（字体的格式）
可选值：
serif 衬线字体
sans-serif 非衬线字体
monospace 等宽字体
- 指定字体的类别，浏览器会自动使用该类别下的字体
- font-family 可以同时指定多个字体，多个字体间使用,隔开
字体生效时优先使用第一个，第一个无法使用则使用第二个 以此类推
Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif
*/
图标字体
/*
图标字体（iconfont）
- 在网页中经常需要使用一些图标，可以通过图片来引入图标，但是图片大小本身比较大，并且非常的不灵活
- 所以在使用图标时，我们还可以将图标直接设置为字体，
然后通过font-face的形式来对字体进行引入
- 这样我们就可以通过使用字体的形式来使用图标
fontawesome 使用步骤
1.下载 https://fontawesome.com/
2.解压
3.将css和webfonts移动到项目中
4.将all.css引入到网页中
5.使用图标字体
直接通过类名来使用图标字体
class="fas fa-bell"
class="fab fa-accessible-icon"
*/
2：文本样式
color：颜色
line-height：字体添加 行高 每行的高度
text-align:center; left right 居中对齐 左对齐 右对齐
text-indent:2em; 字体缩进2个字符 em表示单位，一个汉字的大小也可以用像素作为单位
text-decoration:underline; 下划线； overline；上划线；none;去下划线 （文本装饰）
list-style：none ; 去点 (使用ul li时候常用样式)
/*
颜色单位：
在CSS中可以直接使用颜色名来设置各种颜色
比如：red、orange、yellow、blue、green ... ...
但是在css中直接使用颜色名是非常的不方便
RGB值：
- RGB通过三种颜色的不同浓度来调配出不同的颜色
- R red，G green ，B blue
- 每一种颜色的范围在 0 - 255 (0% - 100%) 之间
- 语法：RGB(红色,绿色,蓝色)
RGBA:
- 就是在rgb的基础上增加了一个a表示不透明度
- 需要四个值，前三个和rgb一样，第四个表示不透明度 1表示完全不透明 0表示完全透明 .5半透明
十六进制的RGB值：
- 语法：#红色绿色蓝色
- - 颜色浓度通过 00-ff
- - 如果颜色两位两位重复可以进行简写
#aabbcc ---> #abc
HSL值 HSLA值
H 色相(0 - 360)
S 饱和度，颜色的浓度 0% - 100%
L 亮度，颜色的亮度 0% - 100%
*/
/*
行高（line height）
行高指的是文字占有的实际高度
可以通过line-height来设置行高
行高可以直接指定一个大小（px em）
也可以直接为行高设置一个整数
如果是一个整数的话，行高将会是字体的指定的倍数
行高经常还用来设置文字的行间距
行间距 = 行高 - 字体大小
字体框
字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度
行高会在字体框的上下平均分配
*/
/*
text-align 文本的水平对齐
可选值：
left 左侧对齐
right 右对齐
center 居中对齐
justify 两端对齐
*/
/*
vertical-align 设置元素垂直对齐的方式
可选值：
baseline 默认值 基线对齐
top 顶部对齐
bottom 底部对齐
middle 居中对齐
*/
/*
text-decoration 设置文本修饰
可选值：
none 什么都没有
underline 下划线
line-through 删除线
overline 上划线
*/
/*
white-space 设置网页如何处理空白
可选值：
normal 正常
nowrap 不换行
pre 保留空白
*/
3：背景样式 background:颜色 图片 定位 平铺方式
背景颜色 background-color： ；
背景图片 background-image：（url） ；
背景定位 background-position:0px 10px;} X轴 y轴
背景平铺方式 background-repeat:no-repeat;不平铺 X-repeat; X轴平铺 Y-repeat; Y轴平铺
background-image 设置背景图片
可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色
如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满
如果背景的图片大于元素，将会一个部分背景无法完全显示
如果背景图片和元素一样大，则会直接正常显示
background-repeat 用来设置背景的重复方式
可选值：
repeat 默认值 ， 背景会沿着x轴 y轴双方向重复
repeat-x 沿着x轴方向重复
repeat-y 沿着y轴方向重复
no-repeat 背景图片不重复
background-position 用来设置背景图片的位置
设置方式：
通过 top left right bottom center 几个表示方位的词来设置背景图片的位置
使用方位词时必须要同时指定两个值，如果只写一个则第二个默认就是center
通过偏移量来指定背景图片的位置：
水平方向的偏移量 垂直方向变量
设置背景的范围
background-clip
可选值：
border-box 默认值，背景会出现在边框的下边
padding-box 背景不会出现在边框，只出现在内容区和内边距
content-box 背景只会出现在内容区
background-origin 背景图片的偏移量计算的原点
padding-box 默认值，background-position从内边距处开始计算
content-box 背景图片的偏移量从内容区处计算
border-box 背景图片的变量从边框处开始计算
background-attachment
背景图片是否跟随元素移动
可选值：
scroll 默认值 背景图片会跟随元素移动
fixed 背景会固定在页面中，不会随元素移动
background-size 设置背景图片的大小
第一个值表示宽度
第二个值表示高度
- 如果只写一个，则第二个值默认是 auto
cover 图片的比例不变，将元素铺满
contain 图片比例不变，将图片在元素中完整显示
background-color
background-image
background-repeat
background-position
background-size
background-origin
background-clip
background-attachment
backgound 背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置
并且该样式没有顺序要求，也没有哪个属性是必须写的
注意：
background-size必须写在background-position的后边，并且使用/隔开
background-position/background-size
background-origin background-clip 两个样式 ，orgin要在clip的前边
图片渐变
通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果
！！渐变是图片，需要通过background-image来设置
线性渐变，颜色沿着一条直线发生变化
linear-gradient()
linear-gradient(red,yellow) 红色在开头，黄色在结尾，中间是过渡区域
- 线性渐变的开头，我们可以指定一个渐变的方向
to left
to right
to bottom
to top
deg deg表示度数
turn 表示圈
- 渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，
也可以手动指定渐变的分布情况
repeating-linear-gradient() 可以平铺的线性渐变
radial-gradient() 径向渐变(放射性的效果)
默认情况下径向渐变的形状根据元素的形状来计算的
正方形 --> 圆形
长方形 --> 椭圆形
我们也可以手动指定径向渐变的大小
circle
ellipse
也可以指定渐变的位置
- 语法：
- radial-gradient(大小 at 位置, 颜色 位置 ,颜色 位置 ,颜色 位置)
- 大小：
- circle 圆形
- ellipse 椭圆
- closest-side 近边
- closest-corner 近角
- farthest-side 远边
- farthest-corner 远角
位置：
top right left center bottom
4：轮廓 阴影 圆角
outline:1px dashed; /边框 1像素 虚线/ 用法和border一模一样，轮廓线 不占用实际的像素，不影响页面布局
box-shadow:10px10px 50px rgb(o,o,o,.3);用来设置元素的阴影效果，阴影不会影响页面布局,阴影默认和元素重合，第一个数字是水平偏移量（正值右移，负值左移），第二个是垂直偏移量（正值下移，负值上移），第三个值是阴影的模糊半径，第四个值是阴影的颜色，一般用rgb(o,o,o,.3),.3是设置透明度
border-radius：10px; 用来设置圆角 圆角设置的圆的半径大小
/* 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%;
*/
5：重置样式表
专门用来对浏览器的样式进行重置的
reset.css 直接去除了浏览器的默认样式
normalize.css 对默认样式进行了统一
/*
默认样式：
通常情况，浏览器都会为元素设置一些默认样式
默认样式的存在会影响到页面的布局，
通常情况下编写网页时必须要去除浏览器的默认样式（PC端的页面）
*/
/*
body{ margin: 0; }
p{ margin: 0; }
ul{ margin: 0; padding: 0;
/*
去除项目符号
* /
* list-style:none; }
*
* */
/*
*{ margin: 0; padding: 0; }
*/
6 浮动
/*
通过浮动可以使一个元素向其父元素的左侧或右侧移动
使用 float 属性来设置于元素的浮动
可选值：
none 默认值 ，元素不浮动
left 元素向左浮动
right 元素向右浮动
注意，元素设置浮动以后，水平布局的等式便不需要强制成立
元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动
浮动的特点：
1、浮动元素会完全脱离文档流，不再占据文档流中的位置
2、设置浮动以后元素会向父元素的左侧或右侧移动，
3、浮动元素默认不会从父元素中移出
4、浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
5、如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移 6、浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高
简单总结：
浮动目前来讲它的主要作用就是让页面中的元素可以水平排列， 通过浮动可以制作一些水平方向的布局
*/
/*
浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，
所以我们可以利用浮动来设置文字环绕图片的效果
*/
/*
元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化
脱离文档流的特点：
块元素：
1、块元素不在独占页面的一行
2、脱离文档流以后，块元素的宽度和高度默认都被内容撑开
行内元素：
行内元素脱离文档流以后会变成块元素，特点和块元素一样
脱离文档流以后，不需要再区分块和行内了
*/
7：网页布局
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title>
<style>
header, main, footer{ width: 1000px; margin: 0 auto; }
/* 设置头部 */
header{ height: 150px; background-color: silver; }
/* 设置主体 */
main{ height: 500px; background-color: #bfa; margin: 10px auto; }
nav, article, aside{ float: left; height: 100%; }
/* 设置左侧的导航 */
nav{ width: 200px; background-color: yellow; }
/* 设置中间的内容 */
article{ width: 580px; background-color: orange; margin: 0 10px; }
/* 设置右侧的内容 */
aside{ width: 200px; background-color: pink; }
/* 设置底部 */
footer{ height: 150px; background-color: tomato; }
</style>
</head>
<body>
<!-- 创建头部 -->
<header></header>
<!-- 创建网页的主体 -->
<main>
<!-- 左侧导航 -->
<nav></nav>
<!-- 中间的内容 -->
<article></article>
<!-- 右边的边栏 -->
<aside></aside>
</main>
<!-- 网页的底部 -->
<footer></footer></body>
8：高度坍塌的问题
<style>
.box1{ width: 200px; height: 200px; background-color: #bfa; }
.box2{ width: 100px; height: 100px; background-color: orange; margin-top: 100px;
<style>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
//这段代码会出现高度塌陷
/*
高度塌陷的问题：
在浮动布局中，父元素的高度默认是被子元素撑开的，
当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离
将会无法撑起父元素的高度，导致父元素的高度丢失
父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱
所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理！ */
第一个解决办法：BFC
/*
BFC(Block Formatting Context) 块级格式化环境
- BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC
开启BFC该元素会变成一个独立的布局区域
- 元素开启BFC后的特点：
1.开启BFC的元素不会被浮动元素所覆盖
2.开启BFC的元素子元素和父元素外边距不会重叠
3.开启BFC的元素可以包含浮动的子元素
- 可以通过一些特殊方式来开启元素的BFC：
1、设置元素的浮动（不推荐）
2、将元素设置为行内块元素（不推荐）
3、将元素的overflow设置为一个非visible的值
- 常用的方式 为元素设置 overflow:hidden 开启其BFC 以使其可以包含浮动元素 */
第二个解决办法：clear
/*
如果我们不希望某个元素因为其他元素浮动的影响而改变位置，可以通过clear属性来清除浮动元素对当前元素所产生的影响
clear 作用：清除浮动元素对当前元素所产生的影响
可选值：
left 清除左侧浮动元素对当前元素的影响
right 清除右侧浮动元素对当前元素的影响
both 清除两侧中最大影响的那侧
原理：
设置清除浮动以后，浏览器会自动为元素添加一个上外边距，
以使其位置不受其他元素的影响
*/
最终解决办法： 使用after伪类
/*
.box1::after{
content: '';
display: block;
clear: both;
}
*/
/*
clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题，当你在遇到这些问题时，直接使用clearfix这个类即可
.clearfix::before,
.clearfix::after{
content: '';
display: table;
clear: both;
}
*/
9：动画 过渡 变形
过渡（transition）
- 通过过渡可以指定一个属性发生变化时的切换方式
- 通过过渡可以创建一些非常好的效果，提升用户的体验
/*
transition-property: 指定要执行过渡的属性
多个属性间使用,隔开
如果所有属性都需要过渡，则使用all关键字
大部分属性都支持过渡效果，注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡
transition-duration: 指定过渡效果的持续时间
时间单位：s 和 ms 1s = 1000ms
transition-timing-function: 过渡的时序函数
指定过渡的执行的方式
可选值：
ease 默认值，慢速开始，先加速，再减速
linear 匀速运动
ease-in 加速运动
ease-out 减速运动
ease-in-out 先加速 后减速
cubic-bezier() 来指定时序函数
https://cubic-bezier.com
steps() 分步执行过渡效果
可以设置一个第二个值：
end ， 在时间结束时执行过渡(默认值)
start ， 在时间开始时执行过渡
transition 可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟
*/
动画
动画和过渡类似，都是可以实现一些动态的效果，不同的是过渡需要在某个属性发生变化时才会触发，动画可以自动触发动态效果
/*设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤*/
@keyframes test { /*test 为名字*/
/* from表示动画的开始位置 也可以使用 0% */
from{
margin-left: 0;
background-color: orange;
}
/* to动画的结束位置 也可以使用100%*/
to{
background-color: red;
margin-left: 700px;
}
}
/*设置box2的动画*/
/* animation-name: 要对当前元素生效的关键帧的名字 */
/* animation-duration: 动画的执行时间 */
/* animation-delay: 2s; 动画的延时 */
/* animation-timing-function: ease-in-out; */
/*
animation-iteration-count 动画执行的次数
可选值：
次数
infinite 无限执行
*/
/*
animation-direction
指定动画运行的方向
可选值：
normal 默认值 从 from 向 to运行 每次都是这样
reverse 从 to 向 from 运行 每次都是这样
alternate 从 from 向 to运行 重复执行动画时反向执行
alternate-reverse 从 to 向 from运行 重复执行动画时反向执行
*/
/*
animation-play-state: 设置动画的执行状态
可选值：
running 默认值 动画执行
paused 动画暂停
*/
/*
animation-fill-mode: 动画的填充模式
可选值：
none 默认值 动画执行完毕元素回到原来位置
forwards 动画执行完毕元素会停止在动画结束的位置
backwards 动画延时等待时，元素就会处于开始位置
both 结合了forwards 和 backwards
*/
变形
变形就是指通过CSS来改变元素的形状或位置
变形不会影响到页面的布局
transform 用来设置元素的变形效果
平移(平移元素，百分比是相对于自身计算的)
- translateX() 沿着x轴方向平移
- translateY() 沿着y轴方向平移
- translateZ() 沿着z轴方向平移
平移
/* 设置当前网页的视距为800px，人眼距离网页的距离 */
perspective: 800px;
/*
z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，
距离越大，元素离人越近
z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果
必须要设置网页的视距
*/
x旋转
/*
通过旋转可以使元素沿着x y 或 z旋转指定的角度
rotateX()
rotateY()
rotateZ()
*/
/* transform: rotateZ(.25turn); */
/* transform: rotateY(180deg) translateZ(400px); */
/* transform: translateZ(400px) rotateY(180deg) ; */
transform: rotateY(180deg);
/* 是否显示元素的背面 */
backface-visibility: hidden;
缩放
/*
对元素进行缩放的函数：
scaleX() 水平方向缩放
scaleY() 垂直方向缩放
scale() 双方向的缩放
*/
/* 变形的原点 默认值 center*/
/* transform-origin:20px 20px; */
2130
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
