HTML5（Hyper Text Markup Language超文本标记语言）
注释
<!--注释代码-->
基本代码解释
<!--DOCTYPE:告诉浏览器我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<head><!--head标签是网页的头部-->
<meta charset="UTF-8"><!--meta标签用来描述一些网页的信息-->
<!--meta一般用来做SEO-->
<meta name="keywords" content="搜索关键字描述">
<title>Title</title><!--title标签是网页的标题-->
</head>
<body><!--body标签是网页的主体-->
</body>
</html>
基本标签
标题标签
<h1>
可以由h1写到h6对应相应的等级
</h1>
段落标签
<p>
可以将文本分段<br>不需要特定样式也可以使用换行标签分段
</p>
水平线标签
<hr>会出现一条分割线
字体样式标签
<strong>粗体</strong>
<em>斜体</em>
特殊符号
空格：
大于号：>
版权所有符号：©
等等更多的可以查询百度
图像标签
<img src="图像地址" alt="图像替代文字（一般相对路径）" title="鼠标悬停提示字" width="图像宽度" height="图像高度">
超链接标签
<a href="连接路径也可以是id，name名跳转到id，name处" target="链接在那个窗口打开常用值_self：在自己网页打开默认,_blank:新页面打开"></a>可以去qq添加联系我的链接
行内元素和块元素
块元素独占一行（p ，h1到h6……）行内元素不独占一行宽度由内容决定(a,strong……)
列表标签
无序列表<ol> <li></li></ol>有序列表<ul> <li></li></ul>自定义列表<dl> <dt>列表名字</dt> <dd>内容</dd></dl>
表格
<table border="边框宽度"> 行<tr rowspan="跨行合并（纵向）"> 列<td colspan="要合并的列数（横向） 注意该行后面的列要删掉"></td> </tr></table>
<table border="边框宽度"> <thead>头部<th>表示头部单元格</th></thead> <tbody>主体</tbody> <tfoot>底部</tfoot>无论写在结构那网页出来始终在最后其他以此类推</table>
设置元素在块元素内水平居中（用得不多）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I7py931T-1623307322127)(E:\文章\前端的学习\9.png)]
表格css属性
border显示表格边框需要设置该元素border-spacing指定表格边之间的距离（因为表格出来是双实线）border-collapse设置表格边框合并table tr：nth-child（odd，even，2n，2n+1）设置表格隔行变色注意：表格当中如果没有tbody浏览器会自动创建一个tbody将所有tr包含在内所以table>tr选择器选择不到 ：默认元素在td中垂直居中vertical-align设置td内元素对齐方式
视频和音频元素
视频标签<video src="文件位置" controls控制条 autoplay自动播放></video>音频标签<audio src="文件位置" controls控制条 autoplay自动播放></audio>
页面结构分析
<header>标题头部区域内容</header><footer>标记脚部区域的内容</footer><section>web页面中独立的区域</section><article>独立的文章内容</article><aside>相关内容或者应用（常用于侧边栏）</aside><nav>导航类辅助内容</nav>
iframe内联框架
<iframe src="引用页面地址" name="框架标识名"> 可以设置宽度高度 name于a标签的targe写同样值搭配使用可以在框架内打开链接 </iframe>
表单
按钮与输入框
<form method="规定如何发送表单数据常用值get显示、post隐藏（在url当中）" action="向何处发送表单数据" maxlangth="最长能写几个字符" size="文本框长度"> <p>名字：<input name="name" type="text"></p>type值：radio单选框 name要一样同一组 checked表示默认选中那个选项 value表示默认值是什么 autocomplete关闭自动补全（可以写在form内关闭form下所有自动补全） readonly设置为只读（数据会提交） disabled设置为禁用（数据不会提交） autofocus自动获取焦点（光标默认在那） checkbox多选框 button普通按钮 需要value指定名字 image图片按钮 submit提交按钮 reset重置按钮 color颜色选择框 email邮件输入框会检查邮件是否合法 <button type=""> 按钮标签type可以是三个按钮值当中的一个 包含属性可以添加一些结构，图片 </button> <p>密码：<input name="pass" type="password"></p> <p> <input name="Buton" type="submit" value="提交"> <input name="Reset" type="reset" value="重填" src="图片地址"> </p></form>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V0Bf2cit-1623307322132)(E:\文章\前端的学习\1.png)]
下拉框
<select name="列表名称"> <option value="选项的值">子选项</option> selected表示默认选中那个选项</select>
文本域
<textarea name="" cols="显示多少列" rows="显示多少行">文本内容</textarea>
文件域
<input type="file" name="">
邮件验证
<input type="email" name="">
URL验证
<input type="url" name="">
数字验证
<input type="number" name="名字" max="最大值" min="最小值" step="每次点击上升数">
滑块
<input type="range" name="名字" max="最大值" min="最小值" step="每次点击上升数">
搜索框
<input type="search">
表单的应用
所有表单都可以加的属性
readonly:只读
disabled:禁用
hidden:隐藏
增强鼠标可用性（点击文字自动跳动到输入框）
<lable for="索引到input的id">点击文字后跳到input标签输入内容</lable><input type="text" id="mark">
表单初级验证
<input type="text" name="" placeholder="输入提示信息">输入控件提示文字属性<input type="text" name="" required 表示该输入框不能为空>非空判断<input type="text" name="" pattern="可以去百度搜索常用正值表达式">
https://www.jb51.net/tools/regexsc.htm
CSS3(Cascading Style Sheet层叠级联样式表)
学习网站：菜鸟教程
关于css代码写在哪怎么写
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--规范写法<style>可以编写css代码--> <link rel="stylesheet" href="指向地址">外部写css样式引入到html <style> h1{ 选择器选择h1标签改变h1样式 color:red;改变字体颜色 } </style> </head> <body> <h1> </h1> </body></html>
CSS的四种导入方式
优先级：行内样式>内部样式>外部样式（但是遵循就近原则谁离h1标签近谁就可以优先使用）
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--规范写法<style>可以编写css代码--> **第三种** <link rel="stylesheet" href="指向地址">外部写css样式引入到html <style>**第二种** @import url("指向地址");**第四种** h1{ 选择器选择h1标签改变h1样式 color:red;改变字体颜色 } </style> </head> <body> <h1 style="">**第一种** </h1> </body></html>
选择器
作用：选择页面上的某一共元素或者某一类元素
基本选择器
优先级：不遵循就近原则固定优先级 id选择器>class选择器>标签选择器
1.标签选择器
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*标签选择器会选择页面上所有的和h1标签*/ h1{ } </style> </head> <body> <h1> 内容 </h1> </body></html>
2.类选择器
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*类选择器 .+class名称{}*/ .sd{ } </style> </head> <body> <h1 class="sd sd2">class可以多个，用空格隔开 内容 </h1> </body></html>
3.id选择器
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*类选择器 #+id名称{}id名称不能*/ #sd{ } </style> </head> <body> <h1 id="sd"> 内容 </h1> </body></html>
4.通配选择器*
*{选择所有的标签}
复合选择器
交集选择器
作用：选中同时满足条件的元素
语法：选择器1选择器2……
注意：如果有标签选择器必须使用标签选择器开头
div.red{选择标签是div并且class元素为red（如果有标签选择器必须使用标签选择器开头）id因为有唯一性所以不使用 }
并集选择器
作用：同时选择多个元素
语法：选择器1，选择器2……
注意：
div,.red{同时选择div和.red}同时选择多个选择器
关系选择器
子元素选择器
作用：选定指定父元素当中的指定子元素
语法：父元素>子元素
span>div{选择span子元素是div的元素}
后代选择器
作用：选定指定元素当中的指定的所有后代元素
语法：祖先 后代
span div{选择span当中的所有div元素}
兄弟选择器
1
作用：选定下一个兄弟元素
语法：前一个+后一个
span+div{选择span下面的兄弟元素也就是相邻的兄弟元素的下面的第一个元素}
2
作用：选定下的所有兄弟元素
语法：前一个~后面兄弟
span~div{选择span下面的所有div兄弟元素}
属性选择器
[属性名]选择含有指定元素的元素
p[title]{表示选择含有title属性的p标签}
[属性名=属性值]选择含有指定属性值的元素
p[title=abc]{选择含有title属性的p标签并且title值等于abc}
[属性名^=属性值]选择属性值以指定值开头的元素
p[title^=abc]{选择含有title属性的p标签并且title值以abc开头}
[属性名$=属性值]选择属性值以指定值结尾的元素
p[title$=abc]{选择含有title属性的p标签并且title值以abc结尾}
[属性名*=属性值]选择属性值含有指定值的元素
p[title*=abc]{选择含有title属性的p标签并且title值含有abc}
伪类选择器
：first-child 选择第一个固定的标签的子元素
ul>li：first-child{选择ul下第一个子元素并且标签为li}
：last-child 选择最后一个固定的标签的子元素
ul>li：last-child{选择ul下最后一个子元素并且标签为li}
：nth-child （n）选择第n个标签固定的子元素
特殊值
直接写n全部选中
写2n或者even表示选中偶数位
写2n+1或者odd表示选中奇数位
ul>li：nth-child（3）{选择ul下第3个子元素并且标签为li}
：first-of-type
：last-of-type
：nth-of-type（）
这三个选中器与上面的选者器功能一一对应唯一区别在于下面这三个是相对与指定标签排序的忽略其他多余的元素（同类型标签）而child的选择器是相对于全部标签的第n个并且要等于固定标签才会生效（所有标签）
：not为否定伪类排除符合条件的元素如：：not（：nth-of-type（1））排除第一个
a元素的伪类
没访问过（正常的链接）的链接伪类 a：link
访问过的链接伪类 a：visited 由于隐私原因只能修改颜色
以上两个子适用于a标签
用来表示鼠标移入的状态 ：hover
表示鼠标点击的状态 ：active
伪元素选择器
：：first-letter表示选择第一个字母
：：first-line表示选择第一行
：：selection表示选择的内容
：：after元素结束的位置必须结合content属性来用表示在最后面的位置插入元素
：：before元素开始的位置必须结合content属性来用表示在最前面的位置插入元素
关于继承
背景布局等相关的不会被继承
选择器的权重（优先级）
内联样式（行类样式） 1,0,0,0 所以尽量不要使用内联样式
id选择器 0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器 0,0,0,1
通配选择器 0,0,0,0
继承样式 没有优先级
比较优先级时需要将所有选择器的优先级进行加减计算，最后优先级越高则越优先显示分组选择器单独计算
但是不管叠加多少选择器也不会超过其大一级的权重，如类选择器叠加不会超过id选择器跨越不了数量级
如果两个选择器权重一样则越靠下的优先生效
在某个选择器样式语句后面加上！important会获得最高优先级甚至超过内联样式慎用
关于大小单位
可以写px像素、%百分比相对于父元素的百分比、em相对于元素字体大小来计算的、rem相对于根元素{html}字体大小来确定默认1em等于16px
关于颜色单位
英语单词来定义颜色、RGB、RGBA相对于rgb多了个0到1的透明属性、十六进制颜色#十六进制颜色代码、hsl和hsla不常用
关于布局
文档流（normal flow）
在文档流当中元素的特点：块元素：独占一行、默认宽度是父元素的全部（会把父元素撑满）、默认高度由内容撑开（或者子元素）、无 论宽度多少都会独占一行
行内元素：不会独占一行、宽高由内容撑开、会自动换行
盒子模型（box model）
盒子一般由：内容区（content）、边框（border）、内边距（padding）、外边距（margin）
盒子可见框大小由内容区 内边距 边框共同决定计算盒子大小需要三个值相加
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2VFQ2JhT-1623307322142)(E:\文章\前端的学习\2.png)]
内容区
width设置盒子内容区宽度
height设置盒子内容区高度
边框
边框属于盒子边缘
设置边框：
- 边框宽度 border-width 默认3px
- border-width设置四个方向边框宽度A:四个值顺序是上，右，下，左 B:三个值上，左右，下C两个值上下，左右D一个值上下左右
- border-xxx-widthxxx可以是top（上）、right（右）、bottom（下）、left（左）单独指定某一边宽度
- border-width设置四个方向边框宽度A:四个值顺序是上，右，下，左 B:三个值上，左右，下C两个值上下，左右D一个值上下左右
- 边框颜色 border-color也有着和boorder一样的定义规则省略不写默认黑色如果有color属性则生效color的属性值
- 边框样式 border-style 也有着和boorder一样的定义规则
- solid 实线
- dotted 点状虚线
- dashed 线状虚线
- double 双实线
border简写属性：
border:边框样式 边框颜色 边框宽度（没有顺序要求）border-right/top/left/bottom：none表示关闭某一边标签
内边距
内容区和边框之间的距离（内边距设置会影响盒子内容区大小且背景颜色会延申到内边距上）
padding-right/top/left/bottom：表示分别设置四个方向的内边距
padding：设置四个方向内边距宽度A:四个值顺序是上，右，下，左 B:三个值上，左右，下C两个值上下，左右D一个值上下左右
外边距
margin-right/top/left/bottom：表示分别设置四个方向的外边距也就是元素相对于父元素的距离
margin：设置四个方向内边距宽度A:四个值顺序是上，右，下，左 B:三个值上，左右，下C两个值上下，左右D一个值上下左右
可以负数向反方向移动
设置上、左元素的外边距会移动元素 设置下、右元素的外边距会移动其他元素
盒子的水平布局
水平方向布局由：margin-left、border-left、padding-left、width、padding-right、border-right、margin-right且这几个值加起来等于其父元素内容区的宽度（必须满足）
自动调整：没有auto的情况下不满足自动调整在margin-right上 witdh值默认是auto且如果有多个auo则调整witdh
margin:0 auto;如果将左右外边距设置auto则将元素相对于父元素水平居中
盒子垂直方向布局
默认情况父元素高度由内容撑开 子元素高度大于父元素高度则超出父元素（溢出）
overflow：处理内容溢出的问题除此之外overflow-x单独处理水平方向overflow-y单独处理垂直方向
- visible 默认子元素会从父元素溢出在父元素外部的位置显示
- hidden溢出的内容将会隐藏，被裁剪
- scroll生成滚动条来查看完整内容
- auto根据需要生成滚动条
外边距的折叠
垂直外边距重叠（折叠）
相邻垂直方向外边距会发生重叠现象
兄弟元素之间相邻垂直外边距两者都是正值会取两者之间的最大值、一正一负会取两者之间的和、两者都是负数取两者绝对值较大的值
父子元素之间子元素的上外边距会传递给父元素如果父元素有边框则不会合并父子元素外边距
行内元素的盒子模型
大体上和块元素盒子模型一样
不同：
- 行内元素不支持设置宽高
- 行内元素可以设置padding但是垂直方向的padding不会影响页面布局
- 行内元素可以设置border但是垂直方向的border不会影响页面布局
- 行内元素可以设置margin但是垂直方向的margin不会影响页面布局，且水平方向外边距不会合并
- disply属性转化元素的显示类型
- inline 设置为行内元素
- block 设置为块元素
- inline-block 设置为行内块元素（即可设置宽高也不会单独占一行）
- table 将元素设置成一个表格
- none 元素不在页面中显示
visibility属性
可选值：
- visible 默认值在页面中正常显示
- hidden 元素隐藏不显示，但是还是占据页面位置
默认样式
浏览器会有一些默认样式一般四使用通配选择器清除
margin、padding、list-style
盒子尺寸（box-sizing属性）
box-sizing用来设置盒子尺寸的计算方式
可选值：
- content-box默认值宽度和高度用来设置内容区的大小
- border-box宽度和高度用来设置可见框大小即边框+内容区+内边距的大小（也就是调整内容区大小使得等式成立）
轮廓和圆角、阴影
outline属性
border：会影响页面布局使得下面的元素向下移动outline：不会影响页面布局不会影响可见框大小 使用方法和border一样
box-shadow属性
box-shadow：npx（阴影左侧偏移量相当于margin-left） npx（垂直偏移量相当于margin-top） npx（阴影模糊半径） red（设置阴影颜色） 用来设置元素阴影效果阴影不会影响布局
border-radius属性
border-radius：npx（设置圆角半径大小）用来设置圆角（除了这个单独的值以外还有border-top-left-radius属性左上角圆角以此类推）border-top-right-radius：npx（设置圆角x方向半径大小）npx（设置圆角y方向半径大小）border-radius：npx（左上） npx（右上） npx（右下） npx（左下）border-radius：npx（左上） npx（右上、左下） npx（右下） border-radius：npx（左上、右下） npx（右上、左下）border-radius：50%设置为圆形
浮动
使用float属性来设置元素的浮动
可选值：
-
none默认值，元素不浮动
-
left元素向左浮动
-
right元素向右浮动
元素设置浮动之后脱离文档流，不占用文档流位置，下方的元素会向上移动，等式不需要强制成立
浮动的特点
- 父元素会完全脱离文档流，不在占用文档流当中的位置
- 设置浮动以后元素会向父元素的左侧或者右侧移动
- 浮动元素不会重父元素中移不会超过父元素出
- 浮动元素不会盖住其他浮动元素
- 如果浮动元素的上方是一个没有浮动的元素则浮动元素无法上移
- 浮动元素不会超过其他浮动的父元素，最多和他一样高
- 元素设置浮动后下面的文字会向上移动但不会被浮动元素盖住会环绕浮动元素显示
块元素脱离文档流特点
-
块元素不再独占一行
-
宽度、高度默认由内容撑开（可以指定高度和宽度）
行内元素脱离文档流特点
-
行内元素脱离文档流以后会变成块元素，特点和块元素一样
也就是说脱离文档流不需要区分行内元素还是块元素了
网页的布局
<header>头部标签</header><main>网页主体标签</main><footer>网页底部</footer>
浮动高度塌陷问题（BFC）
一般来说父元素高度不写死由内容撑开
高度塌陷问题：子元素浮动后脱离文档流无法撑开父元素的高度这就是高度塌陷问题导致页面布局混乱
解决方法
开启BFC（Block Formatting Context)
BFC是css中一个隐藏的属性开启BFC后元素变成一个独立的布局区域
特点：
1.开启bfc的元素不会被元素浮动覆盖2.开启BFC后子元素和父元素外边距不会重叠3.开启BFC的元素可以包含浮动元素不会出现塌陷问题
开启BFC的一些方法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q0nC1sxT-1623307322157)(E:\文章\前端的学习\3.png)]
可以通过特定方法开启元素的BFC
- 设置元素浮动（不推荐）
- 将元素设置为行内块元素（不推荐）
- 将元素的overflow设置为一个非visible的值（用auto或者hidden）可以临时用同时子元素外边距不会影响父元素(有缺陷)
clear元素
作用：
清楚浮动元素对当前元素的影响
可选值：
- left清除左侧浮动元素对当前元素的影响
- right清除右侧浮动元素对当前元素的影响
- both清除两侧
清除浮动后浏览器自动为浮动元素增加一个上外边距以使其位置不受不影响
高度塌陷最完美解决方案
.box1{ border:10px red solid;}.box2{ width:100px; height:100px; background-color:#bfa; float:left;}.box::after{ clear:both; conter:''; display:block;}
<div class="box1"> <div class="box2"> </div></div>
解决子元素与父元素外边距重叠
.box1{ width:100px; height:100px; background-color:#bfa;}.box2{ width:200px; height:200px; background-color:#bfa; maring-top:100px;}.box::before{//解决子元素与父元素外边距重叠 conter:''; display:table;}
<div class="box1"> <div class="box2"> </div></div>
clearfix（同时解决高度塌陷和外边距重叠）
.clearfix::before,<!-选中元素最前面-->.clearfix::after{<!--选中元素最后面--> content:"";<!--添加空内容--> display:table;<!--解决高度塌陷和外边距重叠--> clear:both;<!--解决高度塌陷-->}
position属性（定位）
定位是一种更加高级的布局手段
可选值：
- static默认的。元素静止没有开启定位
- relative开启元素相对定位
- absolute开启元素绝对定位
- fixed开启元素固定定位
- sticky开启元素粘滞定位
relative相对定位==参照物：原来的位置
-
开启相对定位后元素需要设置偏移量否者元素没有变化
偏移量（offset）当开启定位以后可以设置偏移量调整元素位置且不会影响别人可选值：top、right、bottom、left
2.当top：0px；left：0px；时元素回到原位（相对于原来在文档流中的位置定位）
3.相对定位会提高元素层级可以覆盖其他元素
4.相对定位不会脱离文档流（原来的位置还是占一个空间）
5.相对定位不会改变元素性质块还是块行内还是行内
absolutes绝对定位==参照物：开启定位祖先元素的左上角
1.开启绝对定位后元素需要设置偏移量否者元素的位置没有变化
2.开启绝对定位以后元素会脱离文档流
3.绝对定位会改变元素的性质行内变成块，块的宽高被内容撑开
4.相对定位会提高元素层级可以覆盖其他元素
5.相对于其包含块进行定位
图片错了是绝对定位！图片错了是绝对定位！图片错了是绝对定位！图片错了是绝对定位！图片错了是绝对定位！
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MJK88W8o-1623307322160)(E:\文章\前端的学习\4.png)]
包含块（containing block）：
正常情况下：包含块就是离当前元素最近的祖先块元素
<div> <span>相对于span来说包含块是div <em>相对于em来说包含块是div因为span是行内元素 </em> </span></div>
开启绝对定位情况下：离他最近的开启定位的祖先元素就是他的包含块
如果所有的祖先元素都没有开启定位则相对于根元素进行定位（html根元素、初始包含块）
fixed固定定位==参照物：浏览器视口
固定定位也是一种绝对定位所以大部分特点都和绝对定位一样
唯一不同的是固定定位永远参考于浏览器视口进行定位
浏览器视口：可以看到的位置（也就是说固定的位后元素可以跟着滚动条走）
sticky粘滞定位==参考物：视口
设置粘滞定位以后滑动滚动条到固定位置不动在到位前元素可以跟随滚动条动
元素的层级（z-index）
对于开启定位的元素可以通过z-index来决定元素的层级
z-index需要一个整数作为参数，值越大元素层级越高（元素层级越高也就越优先显示）
如果元素层级一样则优先显示靠下的元素（结构上）祖先元素的层级再高也不会盖住后代元素
font字体族
color：red；可以设置字体颜色（主要，一般来说），边框颜色，前景色font-size：15px；设置字体大小【px一个像素】【em相当于当前元素的一个字的大小】【rem相当于根元素一个字的大小】font-family：宋体；设置字体格式【serif衬线字】【sans-serif非衬线字】【monospace等宽字体】这些字体代表一个类可以设置多个字体用逗号隔开{第一个字体没有用第二个}/*font-face可以将服务器中的字体直接提供给用户使用，加载速度慢，版权问题，格式问题也可选两个用逗号隔开*/@font-face{ font-family：指定字体名字； src：url（服务器当中字体位置）；}
图标字体（iconfont）
在网页中经常使用一些图标，可以使用图片但图片不灵活，内存大
所以在使用图标时候可以直接将图标设置为字体
然后通过font-face来对图标进行引入这样我们就可以使用字体的方式使用图标
直接百度搜索图标字体库 ~~~font awesome iconfont阿里巴巴【添加购物车》添加到项目》图标管理》全部放入文件夹下 》用法类似font awesome】
font awesome
- 使用步骤
- 解压
- 将css和webfonts移动到我们项目文件下且两个文件夹必须在同一个同一级文件夹下
- 将all.css引入到网页中
- 使用图标字体
- 直接使用类名使用图标字体一般fab和fas开头
- 直接使用\加字符编码同时设置font-family到指定字体库，如果fas类还有font-wight设置到900
- &#x加字符编码前提该元素类由fas或者fab
行高（line-height）
指文字在页面占有的实际高度（两行字之间的距离）单位可以是em也可以是px不加单位直接写整数表示当前字体的倍速
字体框：font-size就是设置字体框大小
行高会在字体框上下平均分配
可以使用行高设置垂直居中
字体简写属性
注意
-
行高可以省略不写，如果不写使用默认值可以将line-height写在font后面来覆盖font行高
font：字体粗细 字体样式（斜体还是） 字体大小/行高 字体族
font-weigh：100~900一般不用，一般normal或者bold
font-style：normal（正常的）italic（斜体）
文本样式
text-align：对齐方式left（左对齐）right（右对齐）center（水平居中）justify（两端对齐两边字体紧紧贴边）
vertical-align：设置元素垂直对齐方式baseline（默认值基线对齐：子元素相对于父元素文字基线对齐）top（顶部对齐 可以消除引入图片缝隙）bottom（底部对齐）middle（居中对齐不好）垂直居中一般用line-height npx（直接写值）
text-decoration：underline（下划线【后面加颜色改变下划线颜色再加样式改变下划线样式】）none（什么都没有默认值a除外）line-throuh（删除线）overline（上划线）
wite-space：设置网页如何处理空白normal（默认值正常）nowrep（不换行）pre（不换行）
wite-space:nowrep;不换行overflow:hidden;裁剪多出的内容width:200px;限定高度text-overflow:ellipsis;溢出内容设置省略号上面代码结合起来可以使溢出内容用省略号表示
还有很多字体样式需要百度
背景
background-color:设置背景颜色background-image:url(图片路径)注：加引号为了防止有特殊符号加不加都行 设置背景图片 -如果背景大于图片自动复制平铺当背景 -如果元素小于图片将背景图片显示不完整 -如果背景图片和元素一样大则正常显示背景颜色和背景图片可以同时设置background-repeat：repeat(默认值，背景沿着x和y，双方向重复)repeat-x（沿着x方向重复）repeat-y（沿着y方向重复）no-repeat（背景图片不重复） 设置背景重复方式background-position：top,left,right,bottom,center来设置图片位置如：top right（右上，把元素分成九宫格）使用时候必须两个值否者默认为center 设置背景图片位置background-position：水平偏移量，垂直偏移量 偏移量设置 设置背景图片位置background-clip：border-box（默认值背景会出现在边框下面）padding-box（背景不会出现在边框会出现在内边距）content（背景只会出现在内容区） 设置背景范围background-origin：padding-box（从内边距处开始计算）content-box（背景图片偏移量从内容区计算）border-box（背景图片偏移量从边框处计算） 背景偏移量计算原点background-size：宽度（可以像素，百分数） 高度（可以像素，百分数） （如果只写一个值宽度固定高度auto），cover（图片比例不变将元素铺满）contain（完整等比例显示图片） 改变背景大小background-attachment：scroll（默认值背景跟随元素移动）fixed（背景图片固定在页面不会随元素滚动而滚动，背景相对于视口定位） 设置背景是否跟随元素移动background：没有顺序可以写background的所有值但是，背景大小必需要在背景位置后面加/再写背景大小 ，background-origin必须在前 background-clip在后
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YWOwwPtC-1623307322164)(E:\文章\前端的学习\5.png)]
防止加载图片闪烁将三个按钮图片合成一张图片，这样浏览器加载就只用加载一次
CSS-Sprite（雪碧图）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fRlt6UWI-1623307322172)(E:\文章\前端的学习\6.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V0eXryaJ-1623307322175)(E:\文章\前端的学习\7.png)]
渐变
线性渐变
background-image:linear-gradient(方向，颜色，颜色，……)
多个颜色默认平均分配【可以在颜色后面加xxxpx（0px到xxxpx都是一个颜色）表示颜色开始渐变的位置也可以百分数 】
方向：to right 从左向右渐变
to left 从右向左渐变
to bottom 从上到下渐变
to top 从下到上渐变
xxxdeg deg表示度，几度
xxxturn turn表示圈，几圈
可以平铺的线性渐变
background-image:repeating-linear-gradient(方向，颜色，颜色，……)
多个颜色默认平均分配【可以在颜色后面加xxxpx用后一个颜色的xxxpx减去前一个颜色的xxxpx表示颜色渐变的范围，假设不足以占满元素则平铺复制占满元素 】
方向：to right 从左向右渐变
to left 从右向左渐变
to bottom 从上到下渐变
to top 从下到上渐变
xxxdeg deg表示度，几度
xxxturn turn表示圈，几圈
径向渐变（放射）
background-image:radial-gradient(大小（形状）at位置，形状，颜色，颜色，……) 默认径向渐变形状按元素形状计算 正方形：圆形 长方形：椭圆
形状：
xxxpx xxxpx ：径向渐变中心大小
circle：正圆
ellipse：椭圆（但是元素正方形不会椭圆）
也可以是（closest近；side边；farthest远；corner角）[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9ZSKO4EM-1623307322180)(E:\文章\前端的学习\8.png)]
位置（在形状后面加上at xxxpx xxxpx）：
top right 右上或者像素确定位置以此内推（top right center bottom left）
一些技术
hover的应用
.a :hover+.c{
display：block；
表示当鼠标移入a时显示a的兄弟元素c}
min-width：一般设置在body可以限制最小宽度为固定大小（浏览器窗口缩小时页面不会变形）
纯css写出一个三角形
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MSyfOgCd-1623307322186)(E:\文章\前端的学习\10.png)]
使元素固定不动无论视口大小的变化
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8HllnuGr-1623307322189)(E:\文章\前端的学习\11.png)]
设置网站图标（在浏览器上方可以看到）
<link rel="icon" href="图片路径">一搬网站图标存在根目录下名字一般叫做favicon.icon(官网加favicon.icon)
其他属性
transition属性
/*transition:用于为样式设置过度效果*/transition:height 3s；高度发生变化时用三秒钟去切换（高度花3秒变化）auto到某个值无法确定所以需要给动画过度的值给确定的值
text-indent属性
text-index首行缩进-9999隐藏文字
visibility属性
visibility：visible可见、hidden元素不可见、inherit继承父类值、collapse在表格内删除一行不影响布局，如果用在元素上会呈现hidden
:focus伪类
input:focus/*获取input焦点后的样式*/
CSS动画
过渡
transition:height 2s;高度变化使用2s变化完成 all 2s;所有属性发生变化的时候都花费两秒过渡【不写默认all】
过渡（transition）【通过过度属性可以指定一个属性发生变化的切换方式，通过过渡可以创建一些非常好的效果提升用户体验】
过渡的另外四个属性
transition-property ：指定要执行过渡的属性，可以写多个值使用逗号隔开【必须】
height，width，color……（如果所有2属性都需要过渡使用all关键字）
大部分属性都支持过渡效果（值可计算一般都可以auto不行无法计算）
transititon-duration：指定过渡效果的持续时间【必须】
时间单位s和ms 1s=1000ms
2，1s……
transition-timing-function：过渡时序函数，指定动画过渡方式
可选值
ease默认值，慢速开始，先加速再减速
linear匀速运动
ease-in加速运动
ease-out减速运动
ease-in-out慢速开始后减速与ease速度有细微差别
eubic-bezier（）贝塞尔曲线来指定时许函数http:///cubic-bezier.com
steps(n，end)分布执行过渡效果相当于将时间分成n份到达时间后跳跃前行【end（默认值）表示分段时间结束后跳跃前行，也可以是start在分段时间开始跳跃前行】
transition-delay：ns：过渡效果延迟，等待相应的n秒时间后执行（不算在动画执行时间里）
transition：综合设置【唯一顺序要求如果要写延迟要求第一个时间是持续时间第二个时间才是延迟其他没有顺序要求 】
动画
动画和过渡类似，都是可以实现一些动态效果【不同的是过渡需要在某个属性发生变化时才会触发动画可以自动触发】
设置动画必须先设置关键帧，关键帧设置动画执行的每一个步骤
.box{ animation-duration:2s;动画执行总时间 animation-delay;过渡效果延迟，等待相应的n秒时间后执行（不算在动画执行时间里） animation-timing-function：过渡时序函数，指定动画过渡方式 以上属性均和transition差不多 animation-name:test;要对该元素生效关键帧的名字}@keyframes test{ /*表示动画开始位置to也可以换成0%*/ from{ } /*中间可以写0%到100%*/ /*表示动画结束位置from可以换成100%*/ to{ }}
animation-name:test;要对该元素生效关键帧的名字
animation-iteration-count：n；动画执行次数【n次】另外infinite是无限次执行
animation-direction：指定动画运行的方向
可选值
normal从from到to执行每次一样
reverse从to到from执行每次一样
alternate从from向to运行重复执行动画时反向执行（就是来回来回都有过渡）
alternate-reverse从to向from运行重复执行动画时反向执行（就是来回来回都有过渡）
animation-play-state：设置动画执行状态（控制动画运行状态实现一些交互）
可选值
runing默认动画执行
paused动画暂停
animation-fill-mode：动画填充模式
可选值
none默认值，动画执行完毕元素回到初始位置
forwards动画执行完毕停到to的位置
backwards动画延迟等待时元素就会处于开始位置（意思就是在延迟等待的时候动画就会处于from）
both结合了forwards和backwards
animation：综合属性【如果设置延迟要求第一个时间是持续时间第二个时间才是延迟其他没有顺序要求】
练习百度搜索sprite animation
变形
变形指通过css来改变元素形状或者位置
变形不会影响页面布局
变形属性：transfrom：可以写多个值空格隔开，且一个元素只有一个transfrom生效
平移（类似于以元素中心点为原点）：translateX(像素、百分比（相对于元素大小）) 沿着x轴平移
translateY(像素、百分比（相对于元素大小）) 沿着y轴平移
translateZ(像素、百分比（相对于元素大小）) 沿着z轴平移，默认没有近大远小的概念即就是透视效果
实现垂直水平居中：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LtIP56l4-1623307322192)(E:\文章\前端的学习\12.png)]
3723
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
