20.文字控制属性
-
字体大小：font-size
-
字体粗细：font-weight
-
字体倾斜：font-style
-
行高：line-height
-
字体族：font-family
-
字体复合属性：dont
-
文本缩进：text-indent
-
文本对齐：text-align
-
修饰线：text-decoration
-
颜色：color
字体大小
-
属性名：font-size
-
属性值：文字尺寸单位px
p{
font-size： 30px;
/*一定要写单位*/
}
字体粗细
-
属性名：font-weight
-
属性值
-
数字
-
关键字
-
/*不加粗*/ font-weight: 400; /*加粗*/ font-weight: 700;
字体倾斜
作用：清除文字默认倾斜效果
属性名：font-style
属性值
-
正常（不倾斜）：normal
-
倾斜：italic
行高
作用：设置多行文本的间距
属性名：line-height
属性值
-
数字+px
-
数字（当前标签font-size属性值的倍数）
行高=上间距+文本高度+下间距
【行高-垂直居中】
技巧：行高属性值=盒子高度属性值
字体族
属性名：font-family
属性值：字体名
font-family： 楷体;
font复合属性
使用场景：设置网页文字公共样式
一个属性对应多个值
font：倾斜，加粗，字号/行高，字体【必须按顺序书写】
div{
font: italic 700 30px/2 楷体；
}
notice：字号和字体值必须书写
21.文本修饰属性
文本缩进
属性名：text-indent
属性值：
-
数字+px
-
数字+em（推荐：1em=当前标签的字号大小）
p{
text-indent: 2em;
}
文本对齐方式
作用：控制内容水平对齐方式
属性名：text-align
-
left：左对齐（默认）
-
center：居中对齐
-
right：右对齐
p{
text-align: center;
}
水平对齐方式-图片
同上
文本修饰线
属性名：text-decoration
-
none：无
-
underline：下划线
-
line-through=删除线
-
overline=上划线
文字颜色
color 文字颜色
属性名：color
-
颜色关键字,颜色英文单词，red,green,blue
-
rgb表示法，rgb(r,g,b)，r,g,b表示红绿蓝三原色，取值：0~255
-
rgba表示法，rgba(r,g,b,a),a表示透明度，取值：0~1
-
十六进制表示法，#RRGGBB，两两一组
p{
/*color: red;*/
/*color: rgb(0,255,0)*/
/*color: rgba(0,0,0,0.5)*/
/*color: #0000ff*/
}
22.复合选择器
定义：由两个或更多个基础选择器组成
后代选择器
后代选择器：选中某元素的后代元素
写法：父选择器 子选择器{CSS属性}，之间用空格隔开
div span{
color: red;
}/*接下来div标签中所以span都能变red*/
/*div下只要有span，子，孙都能red*/
【选中所有后代】
子代选择器
子代选择器：只选择子代元素
写法我“父选择器>子选择器{CSS属性}，之间用>隔开
并集选择器
并集选择器：选中多组标签设置相同样式
写法：选择器1，选择器2，....，选择器N{CSS属性}，选择器直接用，隔开
交集选择器
交集选择器：选中同时满足多个条件（选择器）的元素
写法：选择器1选择器2{CSS属性}，连着写
标签选择器必须写最前面
23.伪类选择器
基础
伪类选择器：伪类表示元素状态，选中元素某个状态设置样式
鼠标悬停状态：选择器:hover{CSS属性}
<style>
a:hover{
color: red;
}
.box:hover{
color: red;
}
</style>
<a href="#">标签</a>
<div class="box">div标签</div>
伪类-超链接
超链接一共4个状态
-
:link 访问前
-
:visited 访问后
-
:hover 鼠标悬停
-
:active 点击时（激活）
按LVHA顺序写
24.CSS 三大特性
化简代码/定位问题，之后解决
-
继承性
-
层叠性
-
优先级
继承性
继承性：子级默认继承父级的文字控制属性
如果标签自己有样式生效自己的
层叠性
特点：
-
相同属性会覆盖：后面的CSS属性覆盖前面的CSS属性【相同覆盖】
-
不同的属性会叠加：不同的CSS属性都生效【不同叠加】
优先级
也叫权重
规则：优先级高的生效
【!important>行内样式>id选择器>类选择器>标签选择器>通配符选择器】
*{
color: red !important;
}
优先级-叠加计算规则
复合选择器要考虑
（行内样式，id选择器个数，类选择器个数，标签选择器个数）
-
从左向右比个数，数量多优先级高
-
!important最高
-
继承最低
25.Emmet写法
简写方式
26.背景属性-拆分写法
背景图
背景图：装饰性的图片效果
属性名：background-image(bgi)
属性值：url(背景图URL)
背景图平铺方式
属性名：background-repeat(bgr)
属性值
-
no-repeat 不平铺
-
repeat 平铺
-
repeat-x 水平方向平铺
-
repeat-y 垂直方向平铺
背景图位置
属性名：background-position(bgp)
关键字
-
left
-
right
-
center
-
top
-
bottom
【也可以写坐标数字+px，正负都行】（默认左上角）混用也可以
背景图缩放
属性名：background-size(bgs)
常用属性值
-
关键字
-
cover：等比例放大，肯部分看不见
-
contain：等比例但是一边成了就不变了，可能有留白
-
-
百分比：根据盒子尺寸计算
-
数字+单位（例如：px）
背景图固定
属性名：background-attachment(bga)
属性值：fixed
背景复合属性
属性名：background(bg)
属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定（空格隔开各个属性值，不区分顺序）
div{
width: 400px;
height: 400px;
background: pink url(./images/1.png) no-repeat right center/cover;
}
27.显示模式
显示模式：标签（元素）的显示方式
作用：选择合适的标签放内容
-
块级元素（div）
-
独占一行
-
宽度默认是父级的100%
-
添加宽高属性生效
-
-
行内元素（span）
-
一行可以显示多个
-
设置宽高属性不生效
-
宽高尺寸由内容撑开
-
-
行内块元素（img）
-
一行可以显示多个
-
设置宽高属性生效
-
宽高尺寸由内容撑开
-
转换显示模式
属性名：display
属性值
-
block 块级
-
inline-block 行内块
-
inline 行内
28.结构伪类选择器
基础
作用：根据元素结构关系查找元素
-
E:first-child:查找第一个E元素
-
E:last-child:查找最后一个E元素
-
E:nth-child(N):查找第N个E元素
li:first-child{
background-color: red;
}
nth-child(公式)
作用：根据元素结构关系查找多个元素
-
偶数：2n
-
奇数：2n+1；2n-1
-
5的倍数：5n
-
第5个以后：n+5
-
第5个以前：-n+5
29.伪元素选择器
作用：创建虚拟元素（伪元素），放装饰性内容
-
E::before:在E里面的最前面加一个伪元素
-
E::after:在E里面的最后面加一个伪元素
【必须设置content:" "属性设置伪元素内容，没内容引号内留空】
【默认是行内显示】
【权重=标签选择器】
<style>
div::before {
content: "我"；
width: 100px;
height: 100px;
background-color: red;
}
div::after {
content: "你"；
}
</style>
<body>
<div>
爱
</div>
</body>
/*显示结果为我爱你，其中我为行内结果的显示，宽高不变化*/
30.盒子模型
组成
作用：布局网页，摆放盒子内容
组成部分
-
内容区域--width & height
-
内边框--padding（内容与盒子边之间）
-
边框线--border
-
外边距--margin（盒子外面）
div{
width: 200px;
height: 200px;
background-color: pink;
padding: 20px;/*盒子会被撑大，四个方向都会变大*/
border：1px solid black;/*边框线颜色*/
margin: 50px;/*也会大，也是四个方向都大*/
}
<div>
div标签
</div>
边框线-border
属性名：border
| 属性值 | 线条样式 |
|---|---|
| soild | 实线 |
| dashed | 虚线 |
| dotted | 点线 |
/*border: 1px soild black;*/ /*border: 2px dashed black*/ /*border: 3px dotted blcak*/
设置单方向边框线
属性名：border-方位名词【bd+方位名词首字母如bdl】
属性值：边框线粗细 线条样式 颜色
div{
border-top: 2px solid red;
border-right: 2px dashed black;
border-bottom: 3px dotted white;
border-left: 7px solid blue;
}
内边距-padding
作用：内容与盒子边框之间的距离
属性名：padding/padding-方位名词
div{
padding: 30px;/*四个方向内边距相同*/
/*单独设置一个方向的内边距*/
padding-top: 30px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 60px;
width: 200px;
height: 200px;
background-color: pink;
}
多值写法
| 取值个数 | 示例 | 含义 |
|---|---|---|
| 1 | padding: 10px | 四个方向都为10px |
| 2 | padding: 10px 20px 40px 80px | 上右下左的顺序 |
| 3 | padding: 10px 40px 80px | 上 左右 下 |
| 4 | padding: 10px 80px | 上下 左右 |
【顺时针转一圈，没有的和对面的一样】
尺寸计算
-
默认情况
-
盒子尺寸=内容尺寸+border尺寸+内边距尺寸
-
-
结论：给盒子加border/padding会撑大盒子
-
解决
-
手动减法：减掉border/padding的尺寸
-
内减模式：box-sizing:border-box
-
div{
width: 200px;
height: 200px;
background-color:pink;
padding: 20px;
box-sizing: border-box;/*内减模式*/
}
外边距-margin
作用：拉开两个盒子之间的距离
属性名：margin
【与padding属性写法含义相同】
div{
margin: 30px;/*四个方向内边距相同*/
/*单独设置一个方向的内边距*/
margin-top: 30px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 60px;
width: 200px;
height: 200px;
background-color: pink;
}
版心居中效果
margin: 100px auto;/*盒子一定要有宽度*/
清除默认样式
例如：默认的内外边框
<h1><p><body>有默认外边距
<ul>有默认内外边距
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*这个时候小例没有头前面标标了，那是因为没有外边距标在外面显示不到的地方，但是还存在*/
li{
list-style: none;/*这可以把标标去掉*/
}
元素溢出-overflow
作用：控制溢出元素的内容的显示方式
属性名：overflow
属性值
| 属性值 | 效果 |
|---|---|
| hidden | 溢出隐藏 |
| sroll | 溢出滚动（无论是否溢出，都显示滚动条位置） |
| auto | 溢出滚动（溢出才显示滚动条位置） |
overflow: hidden: overflow: sroll; overflow: auto;
sroll
auto
外边距问题-合并现象
场景：垂直排列的兄弟元素，上下margin会合并
现象：取两个margin中较大值生效
.one{
margin-bottom: 50px;
}
.two{
margin-top: 20px;
}
/*两个是上下叠一起的都有margin，最后结果发现是50px*/
外边距问题-塌陷问题
场景：父子级的标签，子级的添加上外边距会产生塌陷问题
现象：导致父级一起向下移动
<style>
.father{
width: 300px;
height: 300px;
background-color: pink;
}
.son{
width: 100px;
height: 100px;
background-color: orange;
}
</style>
<div class="father">
<div class="son"> div son </div>
</div>
/*这样就会出现塌陷问题*/
解决方法：
-
取消子级margin，父级设置padding【配合box-sizing: border-box】
-
父级设置overflow:hidden
-
父级设置border-top
行内元素-内外边距问题
场景：行内元素添加margin和padding，无法改变元素垂直位置【水平会变】
解决：给行内元素添加line-height改变垂直位置
span{
/*margin和padding属性无法改变垂直位置*/
margin: 50px;
padding: 20px;
/*行高可以改变位置*/
line-height: 100px;
}
圆角
作用：设置元素的外边框为圆角
属性名：border-radius
属性值：数字+px/百分比
【属性值是圆角半径】
<style>
div{
margin: 50px auto;
width: 200px;
height: 200px;
background-color: orange;
border-radius: 20px;
/*圆角多值也是和padding差不多，左上开始，顺时针，没有的和对角的值相同*/
}
</style>
-
常见应用-正圆形状
-
给正方形盒子设置圆角属性值为宽高的一半/50%
-
-
常见应用-胶囊形状
-
给长方形盒子设置圆角属性为盒子高度的一半
-
<style>
.img1{
width: 200px;
height: 200px;
boder-radius:100px;
border-radius:50%;/*正方形越到50越圆，50%以后不变*/
}
.img2{
width:200px;
height: 80px;
background-color:orange;
border-radius; 40px;
}
</style>
阴影
作用：给元素设置阴影效果
属性名：box-shadow
属性值：x轴偏移量 y轴偏移量 模糊半径 扩散半径 颜色 内外阴影
注意：
-
x轴偏移量和y轴偏移量必须书写
-
默认是外阴影，内阴影要加inset
<style>
div{
margin: 50px auto;
width: 200px;
height: 80px;
background-color:orange;
box-shadow: 2px 5px 10px 1px rgba(0,0,0,0.5);
}
</style>
31.浮动
标准流
也叫文档流，指的是标签在页面中默认的排布方式
如：块元素独占一行，行内元素一行显示多个
基本使用与布局（脱标）
作用：让块元素水平排列【让div水平排列】
属性值：float
属性值：
-
left：左对齐
-
right：右对齐
<style>
.one{
width: 100px;
height: 100px;
background-color: brown;
float: left;
}
.two{
width: 200px;
height: 200px;
background-color: orange;
/*float: left会让两个div在一排里靠在一起*/
float: right;/*最右边*/
}
</style>
<div class="one">one</div>
<div class="two">two</div>
特点：顶对齐，具备行内块显示特点，会脱标
【有浮动的时候最好一起用，不然只用了一个会有浮起来的效果】
产品区域布局
例子
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.product{
margin: 50px auto;
width: 1226px;
height: 628px;
background-color: pink;
}
.left{
float: left;
width: 234px;
height: 628px;
background-color: skyblue;
}
.right{
float: right;
width: 978px;
height:628px;
background-color: brown;
}
.right li{
float: left;
margin-right: 14px;
margin-bottom: 14px;
width: 234px;
height: 300px;
background-color: orange;
}
.right li:nth-child(4n){
margin-right: 0;/*这个是改过的*/
}
</style>
<body>
<div class="product">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
【有父级宽度不够的问题，这样子盒子也可能会掉下来】
【最后结果】
清除浮动
场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能会页面布局错乱）
解决方法：清除浮动（清除浮动给其他盒子带来的影响）
方法一：额外标签法
-
在父元素内容的最后一个添加一个块级元素，设置CSS属性clear:both
方法二：单伪元素法
.clearfix::after{
content: ""
display: block;
clear: both;
}
方法三：双伪元素法
.clearifx::before,
.clearfix::after{
content:"";
display: table;
}
.clearifx::after{
clear: both;
}
方法四：overflow
-
父元素添加CSS属性overflow:hidden
总结
-
浮动属性float，left表示左浮动，right表示右浮动
-
特点
-
浮动后的盒子顶对其
-
浮动后的盒子具备行内块特点
-
父级宽度不够，浮动的子级会换行
-
浮动后的盒子脱标
-
-
清除浮动：子级浮动，父级没有高度，子级无法撑开父级高度，效果有问题
-
双伪元素法
-
-
拓展：浮动的本质作用是实现图文混排的效果
32.flex布局
认识
flex布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化，提供了强大的空间分布和对齐能力
flex不会产生脱标现象网页更简单更灵活
组成
设置方式：给父元素设置display:flex,子元素可以自动挤压或拉伸
组成部分：
-
弹性容器
-
弹性盒子
-
主轴：默认在水平方向
-
侧轴/交叉轴：默认在垂直方向
<style>
.box{
display: flex;
height: 300px; /*弹性容器*/
border: 1px soild black;
}
.box div{
width: 200px;
height: 100px; /*弹性盒子：沿着主轴方向排列*/
background-color: pink;
}
</style>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</body>
flex布局
主轴对其方式
属性名：justify-content
| 属性值 | 效果 |
|---|---|
| flex-start | 默认值，弹性盒子从起点开始以此排列 |
| flex-end | 弹性盒子从终点开始依次排列 |
| center | box沿主轴居中排列 |
| space-between | box沿主轴均匀排列，空白间距在box之间 |
| space-around | box沿主轴均匀排列，空白间距在box两侧 |
| space-evenly | box沿主轴均匀排列，box与容器之间间距相等 |
侧轴对齐方式
属性名
-
align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式【给弹性容器设置】
-
align-self：单独控制某个弹性盒子的侧轴对齐方式【给弹性盒子设置】
| 属性值 | 效果 |
|---|---|
| strech | 弹性盒子沿着侧轴线被拉伸至铺满容器 |
| center | box沿侧轴居中排列 |
| flex-start | box从起点开始依次排列 |
| flex-end | box从终点开始依次排列 |
修改主轴方向
属性名：flex-direction
| 属性值 | 效果 |
|---|---|
| row | 水平方向，从左向右（默认） |
| column | 垂直方向，从上到下 |
| row-reverse | 水平方向，从右向左 |
| column-reverse | 垂直方向，从下到上 |
<style>
.box{
display: flex;
/*主轴变成垂直方向：侧轴自动变换到水平*/
flex-direction: column;
justify-content: center;
align-items; center;
width: 150px;
height: 120px;
background-color: pink;
}
img{
width: 32px;
height: 32px;
}
</style>
<body>
<div class="box">
<img src="#">
<span>媒体</span>
</div>
</body>
弹性伸缩比
作用：控制弹性盒子的主轴方向的尺寸
属性名：flex
属性值：整数数字，表示占用父级剩余尺寸的份数
【默认时候主轴是靠内容撑开，侧轴是和父级一样填充的】
<style>
.box{
display: flex;
height: 300px;
border: 1px soild black;
}
.box div{
bcakground-color: pink;
}
.box div:nth-child(1){
width: 200px;
}
.box div:nth-child(2){
flex: 1;
}
.box div:nth-child(3){
flex: 2;
}
</style>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
弹性盒子换行
弹性盒子可以自动挤压或压缩，默认时，所有弹性盒子都在一行显示
属性名：flex-wrap
属性值
-
wrap：换行
-
nowrap：不换行（默认）
行对齐方式
属性值：align-content
属性值
| 属性值 | 效果 |
|---|---|
| flex-start | 默认值，弹性盒子从起点开始依次排序 |
| flex-end | 从终点开始依次排序 |
| cneter | 弹性盒子沿主轴居中排列 |
| space-between | 弹性盒子沿主轴均匀排列，空白间距分在盒子之间 |
| space-around | 弹性盒子沿主轴均匀排列，空白间距分在盒子两侧 |
| space-evenly | 弹性盒子沿主轴均匀排列，盒子与容器距离相等 |
【对单行弹性盒子不生效】
33.做一个网页
项目目录
存放网站的第一层文件夹，内部包含当前网站所有素材，html，css，图片，javascript等
-
stduy
-
images文件夹：存放固定使用的图片素材：logo，样式修饰图之类的
-
uploads文件夹：存放非固定使用的图片素材：商品图，宣传图需要上传的图片
-
css文件夹：存放CSS文件（link标签引入）
-
base.css：基础公共样式：清除默认样式，设置网页基本样式
-
index.css：首页CSS样式
-
-
index_html：首页HTML文件
-
【定义一个版心居中的代码，未来谁用就调用它】
.wrapper{
margin: 0 auto;
width: 1200px;
}
网业制作思路
-
布局思路：先整体再局部，从外到内，从上到下，从左到右
-
CSS实现思路
-
画盒子，调整盒子范围——>宽高背景色
-
调整盒子位置——>flex布局，内外边距
-
控制图片，文字内容样式
-
header区域-布局
通栏：宽度与浏览器窗口相同的盒子
标签结构：通栏>版心>logo+导航+搜索+用户
logo制作技巧
logo功能
-
单击跳转到首页（有超链接）
-
搜索引擎优化：提升网站百度搜索排名
实现方法
-
标签结构：h1>a>网站名称（搜索关键字）
-
CSS样式
.logo a{
display: block;
width: 195px;
height: 41px;
background-image: url(../images/logo.png)
/*隐藏文字*/
font-size: 0;
}
导航制作技巧（nav）
功能
-
单击跳转页面
实现方法
-
标签结构：ul>li*3>a
-
优势：避免堆砌a标签，网站搜索排名降级
-
布局思路
li设置 右侧margin
a设置 左右padding
搜索区域（search）
实现方法：
-
标签结构：.search>input+a/button
【去掉表单控件的焦点框】
outline: none
【placeholder属性】
.search input::placeholder{
font-size 14px;
color: black;
}
【行内块和行内垂直方向对齐方式】
vertical-align: middle:
banner导航
34.定位
作用：灵活的改变盒子在网页中的位置【两个标签压住】
实现：
-
定位模式：position
-
边偏移：设置盒子的位置
-
left
-
right
-
top
-
bottom
相对定位
div{
position: relative;
top: 100px;
left: 200px;
}
/*1.改变位置的参照物是自己原来的位置
2.不脱标，占位
3.标签显示方式特点 不变*/
决对定位
position: absolute
场景：子级绝对定位，父级相对定位【子绝父相】
<style>
img{
width: 400px;
}
.news{
position: relative;
width: 400px;
height: 350px;
background-color: white;
}
.news span{
position: absolute;
top: 0;
right: 0;
width: 92px;
height: 32px;
background-color: rgba(0,0,0,0.6)
text-align: center;
line-height: 32px;
color: #fff;
}
</style>
<body>
<div class="news">
<img src="#" alt="">
<span>展会活动</span>
<h4>开大会</h4>
</div>
</body>
/*
1.脱标，不占位
2.参照物，先找自己最近的已经定位的祖先元素：如果所有祖先都没定位则参照浏览器可视区位置
3.显示模式特点改变:宽高生效（具备行内块特征）
*/
定位居中
步骤
-
绝对定位
-
水平，垂直边偏移量为50%
-
子级向左，上移动自身尺寸的一半
-
左，上的外边距= -尺寸的一半
-
transform:translate(-50%,-50%)
<style>
img{
position: absolute;
lefr: 50%;
top: 50%;
margin-left: -265px;
margin-top: -127px;
或者
transform: translate(-50%,-50%);/*更方便*/
}
</style>
固定定位
position: fixed
场景：元素的位置在网页滚动是不会改变
<style>
div{
position: fixed:
top 0;
right: 0;
width: 500px;
/*
1.脱标，不占位
2.参照物，浏览器窗口
3.显示模式特点 具备行内块特点
*/
}
</style>
堆叠层级z-index
默认效果：按照标签书写顺序，后来者居上
作用：设置定位元素的层级顺序，改变定位元素的显示顺序
【取值是整数，默认是0，取值越大显示顺序越靠上】
定位-总结
| 定位模式 | 属性值 | 是否脱标 | 显示模式 | 参照物 |
|---|---|---|---|---|
| 相对定位 | relative | 否 | 保持标签原有显示模式 | 自己原来位置 |
| 绝对定位 | absolute | 是 | 行内块特点 | 1.已经定位的祖先元素2.浏览器可视区 |
| 固定定位 | fixed | 是 | 行内块特点 | 浏览器窗口 |
35.CSS精灵
CSS精灵，也叫CSS Spites，是一种网页图片应用处理方式，把网页中一些背景图片整合到一张图片文件中，再background-position精确的定位出背景图片的位置
优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度
实现步骤：
-
创建盒子，盒子尺寸与小图尺寸相同
-
设置盒子背景图为精灵图
-
添加background-position属性，改变背景图位置
-
先测量小图片左上角坐标
-
取负数坐标为background-position属性值（向左上移动图片）
-
36.字体图标
体验
字体图标：展示的是图标，本质是字体
作用：在网页中添加简单的，颜色单一的小图标
优点
-
灵活性：灵活地修改样式，如：尺寸，颜色等
-
轻量级：体积小，渲染快，降低服务器请求次数
-
兼容性：几乎兼容所有主流浏览器
-
使用方便：先下载再使用
下载字体
-
iconfont图标库 https//www.iconfont.cn/
-
下载字体
登录——素材库——官方图标库——进入图标库——选图标，加入购物车——购物车，添加至项目，确定——下载至本地
使用字体
-
引入字体样式表（iconfont.css）
2.标签使用字体图标类名
-
iconfont：字体图标基本样式（字体名，字体大小等等）
-
icon-xxx：图标对应的类名
<span class="iconfont" icon-xxx"></span>
上传矢量图
-
作用：项目特有的图标上传到 iconfont 图标库，生成字体
37.CSS修饰属性
垂直对齐方式 vertical-align
属性名：vertical-align
属性值
| 属性值 | 效果 |
|---|---|
| baseline | 基线对齐（默认） |
| top | 顶部对齐 |
| middle | 居中对齐 |
| bottom | 底部对齐 |
<style>
div{
border: 1px soild black;
}
img{
/*vertical-align: middle;*/
/*顶对齐：最高内容的顶部*/
/*vertical-align: top;*/
/*底对齐：最高内容的底部*/
/*vertical-alignn: bottom;*/
/*因为浏览器把行内块，行内标签当作文字处理，默认按基线对齐*/
/*效果：图片img的低下有空白，转成块级不按基线对齐，空白消失【display: block;也可以让低下空白消失】*/
}
</style>
<body>
<div>
<img src="./images/1.webe"alt="">
i iove you
/*vertical-align放在高的标签里*/
</div>
</body>
过渡 transition
作用：可以为一个元素在不同状态之间切换的时候添加过渡效果
属性名：transition（复合属性）
属性值：过度属性 花费时间（s）
提示：
-
过度属性可以是具体的CSS元素
-
也可以为all（两个状态属性值不同的所有属性，都产生过渡效果）
-
transition设置给元素本身
如要让图片img产生效果
<style>
img{
width: 200px;
height: 200px;
transition: all 1s;
}
img:hover{
width: 500px;
height: 500px;
}
</style>
透明度 opacity
作用：设置整个元素的透明度（包含背景和内容）
属性名：opacity
属性值：0~1
-
0：完全透明（元素不可见）
-
1：不透明
-
0~1之间的小数：半透明
opacity: 0; opacity: 1; opacity: 0.5;
光标类型 cursor
作用：鼠标悬停在元素上时指针显示样式
属性名：cursor
属性值
| 属性值 | 效果 |
|---|---|
| default | 默认值，通常是箭头 |
| pointer | 小手效果，提示用户可以点击 |
| text | 工字型，提示用户可以选择文字 |
| move | 十字光标，提示用户可以移动 |
570
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
