CSS
体验css
div是默认占一行，两个div会占两行。
span是接着一行
层叠样式表（css）是一种样式表语言，用来描述html文档的呈现（美化内容）。
书写位置：title标签下面添加style双标签，style标签里书写CSS代码
<title>css初体验</title>
<style>
/* 选择器{}*/
p{
/*css属性*/
color：red；
}
</style>
<p>
体验css
</p>
css引入方式
-
内部样式表：学习使用
css代码写在style标签里面 -
外部样式表 ：开发使用
css代码写在单独的css文件中（.css）在HTML使用linkv标签引入
<link rel="stylesheet" href="./my.css"> -
行内样式：配合JavaScript使用
css写在标签的Style属性值里
<div style="color:red;font-size:20px;">这是div</div>
标签和类选择器
标签选择器：使用标签名作为选择器->选中同名标签设置相同的样式。
类选择器：查找标签，差异化的设置标签的显示效果，在标签中使用类选择器时不加点。
步骤：
* 定义类选择器-> .类名
* 使用类选择器-> 标签添加class = "类名"
<style>
//定义类选择器
.red{
color: red;
}
//使用类选择器
<div class="red">这是div标签 </div>
</style>
通配符选择器：查找页面所有标签，设置相同样式。
* {
color:red;
}
画盒子
目标：使用合适的选择器画盒子,盒子只能用div标签来画，因为span是一行。
<style>
.one{
color: aqua;
height: 200px;
width: 200px;
background-color: antiquewhite;
}
.two{
color:blue;
height: 200px;
width: 200px;
background-color: aqua;
}
</style>
<div class="one">
盒子1
</div>
<div class="two">
盒子2
</div>
字体修饰属性
-
字体大小要注意加单位px，否则不生效
-
字体粗细的属性值可以是数字也可以是关键字
数字： 正常 400 加粗700
关键字：正常 normal 加粗 bold
-
字体倾斜：
em标签默认倾斜
正常不倾斜：normal
倾斜： italic
-
行高：
数字+px
数字（当前标签字体大小的倍数）
line-height:30px; /*当前标签字体大小为16px*/ line-height:2;想要文字在盒子里垂直居中那需要使得文字的行高等于盒子的高度；(只适用于单行文字)
-
字体族（字体类型）
直接写字体类型：font-family: 楷体；
-
font复合属性：就是指把对字体的多个属性的设置整合成一行代码，用于在开发前期统一公共样式
div { font: italic 700 30px/2 楷体; 倾斜 加粗 字号/行高 字体 } -
文本缩进
数字+px
数字+em(推荐：1em=当前标签的字号大小)
p { text-indent: 2em; }//首行缩进两个字号大小 -
文本对齐方式
left ：左对齐
center ：居中
right ：右对齐
text-align: center如果想对齐图片，需要在图片上加个父级标签，对父级标签使用对齐方式会使图片对齐，代码如下：
<style> div { text-align : center; } </style> <div> <img src="./1.jpg" alt="图片加载失败"> </div> -
文本修饰线
属性名：text-decoration
属性值：
none 无
underline 下划线
line-through 删除线
overline 上划线
-
复合选择器
定义：由两个或多个基础选择器，通过不同的方式组合而成。
作用：更准确，更高效的选择目标元素（标签）。
后代选择器
作用：选中某元素的后代元素
选择器写法：父选择器 子选择器{css属性}，父子选择器之间用空格隔开，会选中所有的后代
<style>
div span{
color:red;
}
</style>
<span> span 标签</span>
<div>
<span>这是div的儿子span</span>
<p><span>这是div的孙子</span></p>
</div>
子代选择器
作用：选中某元素的儿子元素（最近的子级）
选择器写法：父选择器>子选择器{css属性}，父子选择器之间用大于号隔开。
<style>
//选中div标签下一级的span
div > span{
color:red;
}
</style>
并集选择器
作用：选中多组标签设置相同的样式。
选择器写法：选择器1，选择器2，…,选择器n{css属性}，选择器之间用，隔开。
<style>
p,span,div {
color: blue;
}
</style>
<p>p标签</p>
<div>div标签</div>
<span>span标签</span>
交集选择器
作用：交集选择器选中同时满足多个条件的元素
选择器写法： 选择器之间连写，没有任何符号，如果交集选择器中有标签选择器，标签选择器必须写在最前面
<style>
.box{
color: red;
}
p.box{
color: blue;
}
</style>
<P class="box">p标签，使用了类选择器</P>
<P>p标签</P>
<div class="box">div标签，使用了类选择器</div>
伪类选择器
作用：伪类表示元素状态，选中元素的某个状态设置样式
鼠标悬停状态：选择器:hover{css属性},任何标签都可以设置鼠标悬停的状态
<style>
.box{
color: red;
}
a:hover{
color: red;
}
</style>
<a href="#">a标签</a>
<div class="box">div标签</div>
伪类-超链接(拓展)
超链接一共有四个状态
：link 访问前
：visited 访问后
：hover 鼠标悬停
：active 点击时（激活）
如果要给超链接设置以上四个状态，需要按LVHA的顺序
CSS三大特性
继承性：
子级默认继承父级的文字控制属性。
例如直接用标签选择器body设置字体size为30px，所有的字体大小都为30px，除了自己的标签对字体有设置的
层叠性：
相同的属性会覆盖：后面的CSS属性覆盖前面的CSS属性
不同的属性会叠加：不同的CSS属性都生效
优先级：
也叫权重，当一个标签用了多种选择器时，基于不同种类的选择器的匹配规则。
规则：选择器优先级高的样式生效。
公式：通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
(选中标签的范围越大，优先级越低)
<style>
*{
color: red !important;
}
div {
color: green;
}
.ck{
color: blue;
}
#test {
color: purple;
}
//最终显示的是红色
</style>
<div class="ck" id="test" style="color: aqua;">div标签</div>
优先级叠加计算规则
叠加计算：如果是复合选择器，则需要权重叠加计算。
就是一个标签被多个复合选择器选择了，把每个复合选择器所含有的子选择器按照（0，0，0，0）的样式列出然后进行比较。
公式：（每一级之间不存在进位）
（行内样式，id选择器个数，类选择器个数，标签选择器个数）
规则：
- 从左向右依次比较选择器的个数，如果同一级个数多优先级高，如果个数相同，则向后比较
- ！important权重最高
- 继承权重最低
<style>
/* (0,0,2,1) */
.c1 .c2 div{
color: blue;
}
/* (0,1,0,1) */
div #box3{
color: green;
}
/* (0,1,1,0) */
#box1 .c3{
color: orange;
}
</style>
</head>
<body>
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">
这行文本是什么颜色
</div>
</div>
</div>
</body>
继承权重最低：如果一个复合选择器精确找到了标签本体，那就不算继承，如果找到了标签的父标签，那根据继承原则，本体会继承父标签的字体修饰属性，这时继承权重最低，不用考虑。
Emmet写法
代码的简写方式，输入缩写VSCode会自动生成相应的代码。
- HTML
- CSS：大多数间歇方式为属性单词的首字母
背景属性-拆分写法
背景图
网页中，使用背景图实现装饰性的图片效果
属性名：background-image（bgi）
属性值：url（背景图url）
<style>
div{
width: 500px;
height: 500px;
/* 背景图默认是平铺（复制）的效果 */
background-image: url(./a.jpg);
}
</style>
背景图平铺方式
属性名：background-repeat（bgr）
属性值：
no-repeat 不平铺
repeat 平铺
repeat-x 水平方向平铺
repeat-y 垂直方向平铺
背景图位置
属性名：background-position（bgp）
属性值：水平方向位置，垂直方向位置
关键字：
关键字取值方式写法，可以颠倒取值顺序
可以只写一个关键字，另一个方向默认为居中；数字只写一个值表示水平方向，垂直方向为居中
背景图缩放
作用：设置背景图大小
属性名：background-size（bgz）
常用属性值：
- 关键字
- cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
- contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白
- 百分比
- 数字+单位（例如px）
背景图固定
作用：背景不会随着元素的内容滚动。
属性名：background-attachment（bga）
属性值：fixed
背景复合属性
属性名：background（bg）
属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定（空格隔开各个属性值，不区分顺序）
div{
width:400px;
height:400px;
backround:pink url(#) no-repeat right center/cover;
}
显示模式
标签（元素）的显示方式
作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容。
- 块级元素
- 独占一行
- 宽度默认是父级的100%
- 添加宽高属性生效
- 行内元素
- 一行共存多个
- 尺寸由内容撑开
- 加宽高不生效
- 行内块元素 （图片）
- 一行共存多个
- 添加宽高属性生效
- 默认尺寸由内容撑开
转换显示模式
属性名： display
属性值：
block 块级
inline-block 行内块
inline 行内
结构伪类选择器
作用：根据元素的结构关系查找元素
选择器 说明
E：first-child 查找第一个E元素
E：last-child 查找最后一个E元素
E：nth-child(N) 查找第N个E元素(第一个元素N值为1)
伪元素选择器
作用：创建虚拟元素（伪元素），用来摆放装饰性的内容
选择器 说明
E::before 在E元素里面最前面添加一个伪元素
E::after 在E元素里面最后面添加一个伪元素
注意点：
- 必须设置content：“”属性，用来设置伪元素的内容，如果没有内容，则空下即可
- 伪元素默认是行内显示模式
- 权重和标签选择器相同
- 就是选中一个标签，在前面和后面选择一块区域加内容，默认是行内，宽高不生效
盒子模型
作用：布局网页，拜访盒子和内容
组成
- 内容区域 width&height
- 内边距 padding（出现在内容与盒子边缘之间）
- 边框线 border
- 外边距 margin（出现在盒子外面）
边框线
属性名：border（bd）
属性值：边框线粗细，线条样式 颜色（不区分顺序）
常用线条样式
属性值 先调样式
solid 实线
dashed 虚线
dotted 点线
设置单方向边框线
属性名：border-方位名词（bd+方位名词首字母，bdl）
属性值：边框线粗细 线条样式 颜色（不区分顺序）
内边距
作用：设置内容与盒子边缘之间的距离
属性名：padding/padding-方位名词
div{
//四个方向内边距相同
padding:30px;
//单独设置一个方向的内边距
padding-top：10px；
}
padding多值写法：为了简化代码
一个值是上下左右都是那个值。
两个分别是上下和左右
三个是上，左右，下
四个是上，右，下，左
尺寸计算
盒子尺寸 = 内容尺寸+ border尺寸 + 内边距尺寸
结论：给盒子加border/padding会撑大盒子
解决：
手动做减法，减掉border/padding的尺寸
内减模式：box-sizing：border-box（自动给做减法，不会撑大盒子）
外边距
作用：拉开两个盒子之间的距离
属性名：margin
属性值：粗细，不会撑大盒子
可以单独写一个方向也可以一次写多个方向，同上。
外边距-版心居中：margin：0 auto；表示上下边距为0，左右为auto。版心居中盒子必须有宽度，没宽度无法居中。
清除默认样式
清除标签默认的样式，比如默认的内外边距。
* {
//通配符选择器选中所有标签
margin:0;
padding:0;
box-sizing：border-box；
}
//去掉列表的序号
li {
list-style：none；
}
元素溢出
作用：控制溢出元素的内容的显示方式。（内容多，超出盒子的宽和高）
属性名：overflow
属性值 效果
hidden 溢出隐藏
scroll 溢出滚动（无论是否溢出，都显示滚动条位置）
auto 溢出滚动（溢出才显示滚动条位置）
外边距问题-合并现象
场景：垂直排列的兄弟元素，上下margin会合并
现象：取两个margin中的较大值生效
外边距问题-塌陷问题
场景：父子级的标签，子级的添加上外边距会产生塌陷问题
现象：导致父级一起向下移动
解决方法：
- 取消子级margin，父级设置padding
- 父级设置overflow：hidden
- 父级设置border-top
行内元素-内外边距问题
场景：行内元素（span）添加margin和padding，无法改变元素的垂直位置
解决方法：给行内元素添加line-height可以改变垂直位置
盒子模型-圆角
作用：设置元素的外边框为圆角
属性名：border-radius
属性值：数字+px/百分比
提示：属性值是圆角半径，写多个值是从左上角开始顺时针。
盒子模型-阴影
作用：给元素设置阴影效果
属性名：box-shadow
属性值：X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影
注意：
- X轴偏移量和Y轴偏移量必须书写
- 默认是外阴影，内阴影需要添加inset
标准流
标准流也叫文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个。
浮动
作用：让块元素水平排列(如果给一个父级的几个子级添加了浮动，如果父级没有设置高度，就会引发脱标现象，就是下面的元素会上来重叠，主要是因为父级没有高度，子级又浮动了，相当于父级里面没有东西，子级没把父级的高度撑开，子级浮动到了第二层，父级高度为0自然下面的元素会重叠上来)
属性名：float
属性值：
- left：左对齐（从左到右排列）
- right：右对齐（相反）
特点：浮动之后顶对齐，具备行内块显示模式的特点
清除浮动
场景：浮动元素会脱标（两个盒子重叠在一起），如果父级没有高度，子集无法撑开父级高度（可能导致页面布局错乱）
解决方法：清除浮动（清除浮动带来的影响）
方法一：额外标签法
-
在父级元素的最后添加一个块级元素，设置CSS属性 clear：both
.clearfix{ clearfix:both; } <div> <div>子集1</div> <div>子集2</div> <div class="clearfix"></div> </div>
方法二：单伪元素法
.clearfix::after{
//content必须有，将来哪里出问题哪里调用clearfix这个类，和额外标签法相同，不过用的是伪元素法，也是在父级标签的最后加一个块级的标签，类似于一个函数，函数的功能是在浮动的父级标签最后加一个块级标签
content:"";
display:block;
clear:both;
}
方法三：双伪元素法
//before解决外边距塌陷问题，after清除浮动
.clearfix::before,.clearfix::after{
content:"";
display:table;
}
.clearfix::after{
clear:both;
}
方法四：overflow
-
父元素添加CSS属性
overflow:hidden
flex布局
flex-认识
Flex布局也叫弹性布局，适合结构化布局，提供了强大的空间分布和对齐能力。Flex模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活。
flex-组成
设置方式：给父级元素设置display：flex，子元素可以自动挤压或拉伸
组成部分：
-
弹性容器
-
弹性盒子
-
主轴：默认在水平方向
-
侧轴/交叉轴：默认在垂直方向
描述 组成
创建flex容器 display：flex
主轴对齐方式 justify-content
侧轴对齐方式 align-items
某个弹性盒子侧轴对齐方式 align-self
修改主轴方向 flex-direction
弹性伸缩比 flex
弹性盒子换行 flex-wrap
行对齐方式 align-content
主轴对齐方式
属性名：justify-content
属性值 效果
flex-start 默认值，弹性盒子从起点开始依次排列
flex-end 弹性盒子从终点开始依次排列
center 弹性盒子沿主轴居中排列
space-between 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间（间距在盒子之间，开头和结尾没有）
space-around 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧（每个盒子左右两边都有空白）
space-evenly 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等（均匀）
侧轴对齐方式
属性名
-
align-items 当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
-
align-self 单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）
属性值 效果
stretch 弹性盒子沿着侧轴线被拉伸至铺满容器（弹性盒子没有设置侧轴方向尺寸则默认拉伸）
center 弹性盒子沿着侧轴局中排列
flex-start 从起点开始
flex-end 从终点开始
修改主轴方向
主轴默认在水平方向，侧轴默认在垂直方向
属性名：flex-direction：column；
弹性伸缩比
作用：控制弹性盒子的主轴方向的尺寸。
属性名：flex
属性值：整数数字，表示占用父级剩余尺寸的份数。
弹性盒子换行
弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。
属性名：flex-warp
属性值
- wrap：换行
- nowrap：不换行（默认）
定位
作用：灵活的改变盒子在网页中的位置
实现：
- 定位模式：position
- 边偏移：设置盒子的位置
- left
- right
- top
- bottom
相对定位
position：relative
改变位置的参照物是自己原来的位置，不脱标，占位
绝对定位
position : absolute
使用场景 : 子级绝对定位，父级相对定位（子绝父相）
脱标，不占位置，到了第二层。
参照物：先找最近的已经定位的祖先元素；如果所有祖先元素都没有定位，参照浏览器可视区域改位置，绝对定位的盒子变成行内块
小窗口居中:
- 绝对定位
- 水平、垂直边偏移为50%
- 子级向左、上移动自身尺寸的一半
- 左、上的外边距为自身尺寸的一半
- transform：translate(-50%，-50%)；
img{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%，-50%);
}
固定定位
使某个标签固定在浏览器某一位置，在滚轮滑动时保持位置不边
position ： fixed；
脱标，不占位，参照物是浏览器的窗口。会导致显示模式变为行内块
堆叠层级 z-index
默认效果：按照标签书写顺序，后来者居上
作用：设置定位元素的层级顺序，改变定位元素的显示顺序
z-index取值是整数，默认是0，取值越大显示顺序越靠上
CSS精灵
也叫CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，在background-position精确的定位出背景图片的位置。
优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度
实现步骤：
- 创建盒子，盒子尺寸与小图尺寸相同
- 设置盒子背景图为精灵图
- 添加background-position属性，改变背景图位置
- 使用PxCook测量小图片左上角坐标
- 取负数坐标为background-position属性值（向左上移动图片位置）
意思就是为了优化速度，把一些小图片集合在了一张大图片上，然后设置和需要的小图片尺寸一样的盒子，用bgp来移动背景图来达到不向服务器请求就显示很多小图片的功能。
//第一个盒子li显示了之后，第二个默认和第一个图片一样，按照尺寸移动背景图的位置来更换现实的图片
.service li h5 {
width 39px;
height 29px;
background:url(a.png) 0 -123px;
}
.service li:nth-child(2) h5{
background-position : -41px -123px;
}
字体图标
字体图标：展示的是图标，本质是字体
作用：在网页中添加简单的、颜色单一的小图标
优点：
- 灵活性：灵活的修改样式，例如 尺寸、颜色等
- 轻量级：体积小、渲染快、降低服务器的请求次数
- 兼容性：几乎兼容所有主流浏览器
- 使用方便：先下载后使用
字体图标-使用字体
-
引入字体样式表（iconfont.css)
-
标签使用字体图标类名
-
iconfont：字体图标基本样式（字体名，字体大小等等）
-
icon-xxx：图标对应的类名
-
垂直对齐方式 vertical-align
vertical-align : middle
往自己标签中尺寸最大的标签上添加，所有的同级别标签会一起对齐。如果最下面有空白，是因为浏览器把行内块、行内标签当作文字处理，默认按照基线对齐。
效果：图片img的下面有空白，转块级不按照基线对齐，空白就消失了
过渡 transition
作用：可以为一个元素在不同状态之间切换的时候添加过渡效果
属性名：transition（复合属性)
属性值：过度的属性 花费时间（s）
提示：
- 过度的属性可以是具体的CSS属性
- 也可以为all（两个状态属性值不同的所有属性，都产生过渡效果）
- transition设置给元素本身
img{
width:200px;
height:200px;
transition:all 1s;
}
img:hover{
width:500px;
height:500px;
}
透明度 opacity
作用：设置整个元素的透明度（包含背景和内容）
属性名：opacity
属性值：0-1
- 0：完全透明
- 1：不透明
- 0-1之间小数：半透明
光标类型 cursor
作用：鼠标悬停在元素时指针显示样式
属性值：
default：默认值，通常是箭头
pointer：小手效果，提示用户可以点击
text：工字形，提示用户可以选择文字
move：十字光标，提示用户可以移动
搜索引擎优化SEO
作用：提高搜索排名
title，description，keyword
代码如下：
meta name="description" content="xxx"
可以简写为meta：desc就会有代码提示
keyword同上
Favicon图标
网页图标，出现在浏览器标题栏，增加网页辨识度
图标：favicon.ico,一般存放到网站的根目录里
通过link引入就行
//简写为link：favicon就会有代码提示
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
平面转换-平移
属性：
transform：translate（x轴移动距离，y轴移动距离）
取值：
- 像素单位数值
- 百分比（依照盒子自身尺寸计算结果）
- 正负均可
这个属性可以和定位配合使用，定位在中心后，会有自身尺寸的偏移，并不在中心，还得向左移向上移自身尺寸的百分之50才能实现完全居中。在以前是算像素来进行居中的，算出盒子的宽和高向左上移动百分之50.但是有了transform属性，直接写百分之五十就行，因为他是依照盒子自身尺寸计算结果
代码如下：
//鼠标移入到父盒子，son改变位置
.father:hover .son{
//像素
transform:translate(200px,100px);
//百分比
transform:tranlate(50%,100%);
//只写一个数表示水平方向
transform:translate(100px);
transform:translateY(100px);
}
平移实现居中效果
.box{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:200px;
height:100px;
}
平面转换-旋转
transform：rorate（360deg）
取正数顺时针，负数逆时针
平面转换-改变转换原点
- 默认情况下，转换原点是盒子中心点
- 属性
- transform-origin：水平原点位置，垂直原点位置；
- 取值
- 方位名词（left、top、right、bottom、center）
- 像素单位数值
- 百分比
平面转换-多重转换
- 多重转换技巧：先平移再旋转
transform:translate() rotate();
- 旋转会改变坐标轴向，如果先旋转再平移会导致异常
- 多重转换：以第一种旋转形态的坐标轴为准
平面转换-缩放
- 改变元素的宽高属性可以实现，但是是从左上角开始缩放
- 属性
- transform:scale(缩放倍数)；
- transform:scale(x轴缩放倍数，y轴缩放倍数)
- 技巧
- 通常，只为scale()设置一个值，表示X轴和Y轴等比例缩放
- 取值大于1表示放大，小于1表示缩小
平面转换-倾斜
transform：skew(30deg);//deg是角度度数的单位
平面转换-渐变
- 渐变是多个颜色逐渐变化的效果，一般用于设置盒子背景，最后一个颜色不写逗号
- 分类
- 线性渐变
- 径向渐变
- 属性
- background-image：linear-gradient（渐变方向，颜色1 终点位置，颜色二 终点位置）
- 取值
- 渐变方向：可选
- to 方位名词
- 角度度数
- 终点位置
- 百分比
- 渐变方向：可选
//图片渐变的效果
.mask{
width:100%;
height:100%;
background-image:linear-gradient(
transparent,//透明
rgba（0，0，0，0.5）
)
}
径向渐变
-
作用：给按钮添加高光效果
-
属性：
background-image：radial-gradient（
半径 at 圆心位置，
颜色一 终点位置，
颜色二 终点位置
）；
-
取值
- 半径可以是两条，则为椭圆
- 圆心位置取值：像素单位取值/百分比/方位名词
div{
width:100px;
height:100px;
border-radius:50%;
background-image:radial-gradient(
//半径50px，水平居中，垂直居中
50px at center center,
red,
pink
)
}
给按钮添加高光效果：
button {
background-image:radial-gradient(
//半径为30px，圆心在30px，20px
30px at 30px 20px,
//从半透明的白色变为透明
rgba(255,255,255,0.2),
transparent
);
}
空间转换
- 加了个z轴，垂直于屏幕向外为正方向
- 也叫3d转换
- 属性：transform
- transform：translate3d（x，y，z）
视距 perspective
作用：指定了观察者与Z=0平面的距离，为元素添加透视效果
属性：（添加给直接父级，取值范围800-1200）
perspective:1000px
空间-旋转
transform：rotateZ（值）
transform：rotateX（值）
左手法则-根据旋转方向确定取值正负
左手握住旋转轴，拇指指向正值方向，其他四个手指弯曲方向为旋转正值方向
立体呈现-transform-style
作用：设置元素的子元素是位于3d空间中还是平面中
属性名：transform-style
属性值：
flat：子级处于平面中
perserve-3d：子级处于3d空间
呈现立体图形的步骤
1.父元素添加transform-style：perserve-3d
2.子级定位，把几个面定位到一起
3.调整子盒子的位置（位移或者旋转），前后分开
缩放
属性：
transform：scale3d(x,y,z);
transform:scaleX();
transform:scaleY();
transform:scaleZ();
动画-animation
-
过渡：实现两个状态之间的变化过程
-
动画：实现多个状态间的变化过程，动画过程可控（重复播放，最终画面，是否暂停）
-
实现步骤
-
定义动画
-
//大括号里写css @keyframes 动画名称{ from {} to{} } @keyframes 动画名称{ 0%{} 10%{} ... 100%{} } -
使用动画
在需要使用动画的标签的选择器里加入animation属性
animation:动画名称 动画花费时常百分比表示的是动画时常的百分比
-
animation:动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态
- 动画名称和动画时长必须赋值
- 取值不分先后顺序
- 如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
-
animation：changes 1s steps（3）//名字叫changes的动画在一秒内分三个阶段完成
-
animation：changes 1s 2s//第一个是动画时常，第二个是延迟时间
-
animation：changes 1s 3//代表重复播放三次，如果要一直播放把三换成infinite
-
animation：changes 1s infinite alternate//alternate表示的是反向播放
-
animation：changes 1s forwards//使得动画在执行完毕时停留在结束状态
-
无缝动画原理：复制开头图片到结尾位置（图片累加宽度=区域宽度）
精灵动画制作步骤
-
准备显示区域
盒子尺寸与第一张精灵小图尺寸相同
-
定义动画
移动背景图（移动距离=精灵图宽度）
-
使用动画
steps（N），N与精灵小图的个数相同
//精灵图长宽为1680*140 div{ w140+h140; background-image:url(); animation:run 1s steps(12) infinite; } @keyframe run{ from{ background-position:0 0; } to{ background-position:-1680 0; } } -
移动端
视口
显示HTML网页的区域，用来约束HTML尺寸
有了视口标签可以实现网页的宽度和逻辑分辨率的宽度一样
//视口标签
<meta name="viewport" content="width=device-width,initial-scale=1.0">
-
width=device-width:视口宽度=设备宽度
-
initial-scale=1.0：缩放一倍
二倍图
-
现阶段设计稿参考iphone6/7/8，设备宽度375px产出设计稿
-
二倍图设计稿尺寸750px
适配方案
- 宽度适配：宽度自适应
- 百分比布局
- Flex布局
- 等比适配：宽高等比缩放
- rem
- vw
rem
-
rem单位，是相对单位
-
rem单位是相对于HTML标签的字号计算结果
-
1rem=1HTML字号大小
-
给html标签加上字号
-
html{ font-size:40px; } 3rem=3*40px=120px
-
媒体查询
媒体查询能够检测视口的宽度，然后编写差异化的css样式
当某个条件成立，执行对应的css样式
@media(媒体特性){
选择器{
Css属性
}
}
//视口宽度是375，网页背景颜色是绿色
@media(width:375px){
body{
background-color:green;
}
}
目前rem布局方案中，将网页等分为10份，HTML标签的字号为视口宽度的1/10
rem-flexible.js
-
flexible.js是手机淘宝开发出来的一个用来适配移动端的js库
-
核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size
<body> <script src=".js/flexible.js"></script> </body>px转换为rem的方法
rem单位的尺寸 = px单位数值/基准根字号
x = 68px / 37.5
x为几rem
68px为需要转换的px
37.5是视口的宽度除以10，因为默认视口宽度分成十份
less-简介
- less是一个CSS预处理器，Less文件后缀是.less.扩充了CSS语言，使得CSS具备一定的逻辑性、计算能力
- 注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件
- VS Code 插件：Easy LESS，保存less文件后自动生成对应的CSS文件
less-计算
-
加减乘直接写计算表达式就
-
除法需要添加小括号或者.
.box{ width:100./20px; width:(100/20px); }
less-嵌套
在选择器里继续选择子代，可以同时给父代和子代一起写css
.father{
color:red;
.son{
width:200px;
}
}
//“&”不生成后代，使用如下
.father{
color:red;
.son{
width:200px;
&:hover{
color:blue;
}
}
}
less-变量
概念：容器，存储数据
作用：存储数据，方便使用和修改
语法：
定义变量：@变量名：数据；
使用变量：CSS属性：@变量名；
less-导入
作用：导入less公共样式文件，在less中导入另外的less文件，例如公共样式
语法：导入：@improt “文件路径”；
提示：如果是less文件可以省略后缀
less-导出
写法：在less文件的第一行添加//out：存储url
提示：文件夹名称后面添加/
//out：./index.css
//out: ./css/
less-禁止导出
写法：在less文件第一行添加：//out：false，就不会生成对应的css
适配方案
- 相对单位
- 相对视口的尺寸计算结果
- vw：viewport width
- 1vw = viewport width
- vh：viewport height
- 1vh = 1/100视口高度
vw布局
- 确定设计稿对应的vw尺寸（1/100视口宽度）
- 查看设计稿宽度 确定参考设备宽度（视口宽度） 确定vw尺寸（1/100视口宽度）
- vw单位的尺寸 = px单位数值 /（1 / 100视口宽度）
- vw不能和vh混用，可能会导致盒子变形
响应式网页
解决方案：
-
媒体查询
@media（媒体特性）{
选择器{
样式
}
}
媒体特性：
-
max-width：最大宽度（书写顺序从小到大）
-
min-width：最小宽度（书写顺序从大到小）
-
-
Bootstrap
Bootstrap
使用步骤：
-
引入Bootstrap CSS文件
<link rel = "stylesheet" href = "./Bootstrap/css/bootstrap.min.css"> -
调用类名：container：响应式布局版心类
<div class = "container">测试</div>
Bootstrap 栅格系统
栅格化是指将整个网页的宽度分成12等分，每个盒子占用的对应的份数
例如：一行排4个盒子，则每个盒子占3份即可（12/4=3）
常用布局类
- col - * - *：列（例如：col-xxl-3）
- row：行
Bootstrap-全局样式
button类
- btn：默认样式
- btn-success：成功
- btn-warning：警告
- 。。。
- 按钮尺寸：btn-lg/btn-sm
表格类：
- table：默认样式
- table-striped：隔行变色
- table-success：表格颜色
- 。。。
Bootstrap-组件
- 引入样式表
- 引入js文件（有动态功能才需要引入js）
### less-嵌套
在选择器里继续选择子代，可以同时给父代和子代一起写css
```html
.father{
color:red;
.son{
width:200px;
}
}
//“&”不生成后代，使用如下
.father{
color:red;
.son{
width:200px;
&:hover{
color:blue;
}
}
}
less-变量
概念：容器，存储数据
作用：存储数据，方便使用和修改
语法：
定义变量：@变量名：数据；
使用变量：CSS属性：@变量名；
less-导入
作用：导入less公共样式文件，在less中导入另外的less文件，例如公共样式
语法：导入：@improt “文件路径”；
提示：如果是less文件可以省略后缀
less-导出
写法：在less文件的第一行添加//out：存储url
提示：文件夹名称后面添加/
//out：./index.css
//out: ./css/
less-禁止导出
写法：在less文件第一行添加：//out：false，就不会生成对应的css
适配方案
- 相对单位
- 相对视口的尺寸计算结果
- vw：viewport width
- 1vw = viewport width
- vh：viewport height
- 1vh = 1/100视口高度
vw布局
- 确定设计稿对应的vw尺寸（1/100视口宽度）
- 查看设计稿宽度 确定参考设备宽度（视口宽度） 确定vw尺寸（1/100视口宽度）
- vw单位的尺寸 = px单位数值 /（1 / 100视口宽度）
- vw不能和vh混用，可能会导致盒子变形
响应式网页
解决方案：
-
媒体查询
@media（媒体特性）{
选择器{
样式
}
}
媒体特性：
-
max-width：最大宽度（书写顺序从小到大）
-
min-width：最小宽度（书写顺序从大到小）
-
-
Bootstrap
Bootstrap
使用步骤：
-
引入Bootstrap CSS文件
<link rel = "stylesheet" href = "./Bootstrap/css/bootstrap.min.css"> -
调用类名：container：响应式布局版心类
<div class = "container">测试</div>
Bootstrap 栅格系统
栅格化是指将整个网页的宽度分成12等分，每个盒子占用的对应的份数
例如：一行排4个盒子，则每个盒子占3份即可（12/4=3）
常用布局类
- col - * - *：列（例如：col-xxl-3）
- row：行
Bootstrap-全局样式
button类
- btn：默认样式
- btn-success：成功
- btn-warning：警告
- 。。。
- 按钮尺寸：btn-lg/btn-sm
表格类：
- table：默认样式
- table-striped：隔行变色
- table-success：表格颜色
- 。。。
Bootstrap-组件
- 引入样式表
- 引入js文件（有动态功能才需要引入js）
- 复制结构，修改内容
822
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
