CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。CSS3 现在已被大部分现代浏览器支持,通过使用 CSS 我们可以大大提升网页开发的工作效率！
1.选择器
1.基础选择器
1.1 标签选择器
也称为元素选择器，使用HTML标签作为选择器的名称
1.2 类选择器
使用自定义的名称，以 . 号作为前缀，然后再通过HTML标签的class属性调用类选择器
以标签的class属性作为样式应用的依据
注意事项：
调用时不能添加 . 号
同时调用多个类选择器时，以 空格 分隔
类选择器名称不能以 数字 开头
1.3 ID选择器
使用自定义名称，以 # 作为前缀，然后通过HTML标签的id属性进行名称匹配
以标签的id属性作为样式应用的依据，一对一的关系
2.复杂选择器
1.复合选择器
标签选择器和类选择器、标签选择器和ID选择器，一起使用
必须同时满足两个条件才能应用样式
标签选择器和类选择器合起来使用
2.组合选择器
使用,号
将多个具有相同样式的选择器放在一起声明，使用逗号隔开
3.嵌套选择器
使用空格
在某个选择器内部再设置选择器，通过空格隔开
只有满足层次关系最里层的选择器所对应的标签才会应用样式
注意：使用 空格 时不区分父子还是后代，使用CSS-3中新增的 > 时必须是父子关系才行
4 .伪类选择器
根据不同的状态显示不同的样式，一般多用于 标签
四种状态：
- :link 未访问的链接
- :visited 已访问的链接
- :hover 鼠标悬浮到连接上，即移动在连接上
- :active 选定的链接，被激活
5.伪元素选择器
- :first-letter 为第一个字符的样式
- :first-line 为第一行添加样式
- :before 在元素内容的最前面添加的内容，需要配合content属性使用
- :after 在元素内容的最后面添加的内容，需要配合content属性使用
div::first-letter{
color: red;
}
div::first-line{
color: blue;
}
div::selection{
color: aquamarine;
}
input::placeholder{
color: aquamarine;
}
p::before{
content: "￥";
}
p::after{
content:".00"
}6.父子选择器
使用>符号
父选择器>子选择器{
样式属性:属性值;
样式属性:属性值;
......
}7.相邻选择器
使用+号
选择器1+选择器2 {
样式属性:属性值;
样式属性:属性值;
......
}8.属性选择器
使用[]选择具有某属性的
标记名称[属性选择符] {
样式属性:属性值;
样式属性:属性值;
......
}9.伪类选择器_结构伪类
first-child()
an+b的形式
div>:nth-child(5-n){
color: red;
}//常用
div>:nth-child(3){
color: red;
}
div:first-child{
color: green;
}
div>p:first-of-type{
color: blue;
}
div>p:last-of-type{
color: blueviolet;
}
div>p:last-child{
color: aquamarine;
}
div>p:nth-last-child(3){
color: cyan;
}
div>p:nth-last-of-type(4){
color: chocolate;
}//不太常用的结构伪类
//选择的是没有兄弟元素的span标签
span:only-child{
color: aqua;
}
//选择的是没有同类型兄弟的span标签
span:only-of-type{
color: coral;
}
//选中的是根元素
:root{
background-color: brown;
}
//选中的是没有内容的div，不能包含空格
div:empty{
//无效果
background-color: aqua;
}10.否定伪类
div>p:not(.fall)
{
color: red;
}11.UI选择器
//选中的是被选中的input
input:checked{
width: 100px;
height: 100px;
}
//选中的是被禁用的input
input:disabled{
background-color: green;;
}12.目标伪类
选择的是目标选中元素
div{
background-color: red;
height: 200px;
}
div:target{
background-color: green;
}13.语言伪类
div:lang(en)
{
background-color: red;
}
div:lang(ZH-cn)
{
background-color: green;
}优先级
行内 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器
格式
(a,b,c)
a: ID选择器的个数
b: 类、伪类、属性选择器的个数
c: 元素、伪元素 选择器的个数
2 CSS基本属性
1.CSS三大特性
1.层叠性：如果发生样式冲突，会根据一定规则（选择器的优先级，进行样式的层叠）
2.继承性：元素会自动拥有其父元素，或祖上元素的某些样式
- 规则：优先继承离得近的
- 常见的可继承属性：text-?? ,font-?? ,line-??,color
3.优先级：
行内 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器>继承的样式
2.颜色属性
表示方式
1.颜色名
p{
color: red;
}2.RGB
p{
color:rgb(138,43,226);
}p{
color: rgb(0%,0%,100%);
}3.RGBA
A表示的是透明度
p{
color: rgba(255, 0, 0, 0.5);
}4.HEX
每两位表示RGB,可以大写也可以小写，最好统一
p{
color: #87ce87;
}5.HEXA
后两位是透明度,IE浏览器不支持.
p{
color: #87ce8788;
}6.HSL
色相环
p{
color: hsl(色相，饱和度，亮度);
}
//饱和度 -加上灰色
p{
color: hsl(230,50%,30%);
}7.HSLA
p{
color: hsl(0,100%,50%,50%);
}3. 字体属性
1.字体属性及说明
属性 说明
font 简写属性。把所有针对字体的属性设置在一个声明中
font-size 设置字体的尺寸。常用单位为像素(px)
font-style 设置字体风格。Normal 为正常; italic 为斜体; oblique 为倾斜
font weight 设置字体的粗细。Normal 为正常; lighter 为细体; bold 为粗体; bolder 为特粗体
font- family 设置字体系列。例如“隶书”等，当指定多种字体时，用逗号分隔，如果浏览器不支持第一个字体，则会尝试下一个字体;当 字体由多个单词组成时由双引号括起来
2.字体大小
font-size
字体在chrome浏览器显示的最小文字为12px，默认为16px
3.字体族
font-family
如果写了多个字体，选择前面能够使用的字体
所写的字体必须属于同一个字体族（衬线字体，和非衬线字体）
- 衬线字体 () serif
- 非衬线字体 () sans-serif
.c1{
font-size: 12px;
font-family:"隶书";
}
//当前两个字体都失效会选择一个衬线字体
.c2{
font-size: 50px;
font-family: "华文彩云","楷体",serif;
}
//当前两个字体都失效会选择一个非衬线字体
.c3{
font-family: "Bradley Hand ITC","Microsoft YaHei",sans-serif;
}4.字体风格
font-style
italic 斜体 自动转成倾斜字体
oblique 斜体 字体设计的倾斜值（设计好的倾斜字体）
normal 普通
5.字体粗细
font weight
关键词
lighter 细
normal 正常
bold 粗
bolder 很粗 (很多字体不支持)
数值
100~1000
100~300 = lighter 400-500=normal 600以上=bold
.c4{
//关键字
font-weight: bolder;
font-weight: bold;
//数值
font-weight:200;
}6.字体复合属性
字体大小和字体组在最后两位，其他属性用空格隔开
.cc{
font:bold italic 100px "2华文彩云","华文琥珀";
}4.常用文本属性
1.文本颜色
color
2.文本间距
letter-spacing 字母间的距离
word-spacing 单词之间的空隙 根据空格判断，对中文不起作用
属性值为像素值（px） 正的距离增加，负的距离减小
.c1{
letter-spacing: 10px;
word-spacing: 10px;
}3.文本修饰
增加去掉划线，或者更改划线的样式
可选值
none 无装饰线(常用)
underline 下划线-常用(常用)
overline 上划线
line-through 删除线
dotted 虚线
wavy 波浪线
也可以指定颜色
.c2{
/*上划线*/
text-decoration: overline;
/*下划线*/
text-decoration: underline;
/*中间划线*/
text-decoration: line-through;
/*去掉划线*/
text-decoration: none;
/*wavy*/
text-decoration: overline wavy red;
}4.文本缩进
indent缩进，每个字是40px，缩进80px，即缩进两个字符
font-size: 40px;
text-indent: 80px;5.文本对齐
text-align
align对齐
center 居中
left 左对齐
right 右对齐
由于字体设计原因，文字最终呈现的大小，并不一定与font-size的值一致，可能大，也可能小
通常情况下，文字相对字体设计框，并不是垂直居中的，通常要靠下一些
6.行高
line-height
不能太小，并且不能小于等于font-size
1.normal
2.px
3.数字 参考自身font-size的倍数（常用）
4.百分比
div {
line-height:60px;
line-height:1.5;
line-height:150%;
}
行高为0会重叠，不能小于0
行高是可以继承的
height与line-height的关系
设置了height，高度就是height
没有设置height，高度就是line-heigh*行数
应用场景：
调整多行文字之间的间距
单行文字垂直居中
.c{
font-size: 20px;
line-height: 1.5;
}
.c{
font-size: 20px;
height: 400px;
background-color: skyblue;
line-height: 400px;
}7.文本对齐_垂直
对于单行元素
- 顶部 默认
- 居中
让height= line-height
- 底部
line-height = (height x 2) - font - size -x
8.vertical-align
默认基线对齐
top 顶部
bottom 底部
middle 基线加上x的一半对齐
一行的高度由最高的元素决定，并依照它对齐
vertical-align不能控制块级元素，操作行内元素(或操作表格)
5.列表属性
列表符号
none(不显示前面的符号，常用)
list-style-type: upper-roman
列表符号的位置
<style>
ul{
list-style-position: outside;
}
li{
background-color: orange;
}
</style>自定义列表符号
list-style-image: url("目录") ;
复合属性
没有顺序和数量的要求
list-style: upper-roman outside;6.表格相关属性
1.边框属性
border-width 边框宽度
- CSS中可用的长度值
border-color 边框颜色
- CSS中可用的颜色值
border-style 边框风格
- none 默认值
- solid 实线
- dashed 虚线
- dotted 点线
- double 双实线
border 边框复合属性 没有数量、顺序的要求
2.表格独有属性
table-layout 设置列宽度
- auto 自动，列宽根据内容计算（默认值）
- fixed 固定列宽，平均分
border-spacing 单元格的间距
- CSS中可用的长度值
- 生效的前提：单元格边框不能合并
border-collapse 合并单元表格
- collapse 合并
- separate 不合并
empty-cells 隐藏没有内容的单元格
- show 显示，默认
- hide 隐藏
生效前提：单元格不能合并
caption-side 设置表格标题的位置
- top 上面（默认）
- bottom 表格下面
/* 混合属性 */
border: 2px green solid;
/* 控制表的列宽 */
table-layout: fixed;
/* 单元格的间距 */
border-spacing: 0px;
/* 合并单元表格 */
border-collapse: separate;
/* 隐藏没有内容的单元格 */
empty-cells: hide;
/* 设置表格标题的位置 */
caption-side: top;3.背景相关属性
背景颜色
transparent 默认值透明
background-color: transparent;背景图片
小图片会一张一张拼接起来
background-image: url("文件目录");
/* 控制图片是否重复repeat是重复，no-repeat是不重复*/
/* 控制图片是否重复repeat-x是水平方向重复，repeat-y是垂直方向重复*/
background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
/* 控制背景图片的位置*/
/* 左上 */
background-position: left top;
/* 右中 */
background-position: right center;
/* 中中 */
background-position: center center
/* 两个相同可以简写 */
background-position: center;
/* 控制背景图片的位置 用具体大的像素值*/
background-position: 300;
background: skyblue url("文件目录");right left center 水平方向上
bottom center top 垂直方向上
控制背景图片的位置 用具体大的像素值
以左上角为基准，做xy轴
7.鼠标相关属性
pointer:小手
move:移动图标
text:文字选择器
crosshair 十字架
wait 等待
help 帮助
cursor: pointer; (自定义鼠标的图标，pointer->小手)
/* 设置鼠标样式 */
cursor: url("文件目录"),pointer;3.盒子模型
1.常用的长度单位
1.第一种单位是px
2.第二种是em（相当于font-size的倍数）
3.第三种是rem（相当于根元素的font-size的倍数）（默认html标签）
4.第四种是% （相当于其父元素的font-size的倍数）
.c2{
width: 50%;
height: 25%;
/* font-size: 150%; */
background-color: red;
}2.元素的显示模式
块元素（block）
独占一行，
默认宽度，排满父元素
默认高度：由内容撑开
可以通过CSS设置宽高
行内元素 （inline）
不独占一行，一行不能容纳下的行内元素，会在下一行继续从左到右排列
默认宽度：由内容撑开
默认高度：由内容撑开
无法通过CSS设置宽高
3.行内块元素 （inline-block）
img
在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行从左到由排列
默认宽度：由内容撑开
默认高度：由内容撑开
可以通过CSS设置宽高
3.总结各元素的显示模式
块级元素
主体结构标签：html,body
2.排版标签：h1~h6 hr p pre(按原文显示) div
3.列表标签：ul ol li dl dt dd
4.表格相关标签：table tbody thead tfoot tr caption
form,option
行内元素
文本标签：br em strong sup sub del ins
a label
行内块元素
图片 img
单元格 td th
表单控件 input textarea select button
框架标签 iframe
4.修改显示模式
display
none 元素会被隐藏
block 元素会作为块级元素隐藏
inline 元素会作为内联元素隐藏
inline-inline元素会作为行内块元素元素隐藏
<style>
div{
display: inline-block;
}
.c1{
width: 200px;
height: 200px;
background-color: red;
}
.c2{
width: 200px;
height: 200px;
background-color: orange;
}
.c3{
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>3.盒子的组成部分
外面为外边距，中间是内边距（补白），里面则是内容区
外边距
margin（不会影响大小，只影响位置）
边框
border
内边距
padding
内容
content
1.content
设置内容区域的最大宽度
不写宽度，可以使用min-width设置最小的宽度，用max-width设置最宽宽度
min-width：600px;
max-width：1000px
不写高度，可以使用min-height设置最小的宽度，用max-height设置最宽宽度
当文字比较少时，高度不会低于min-height，当文字过多时，高度不会超过max-height
min-height: 200px;
max-height: 800px;
2.默认宽度
不设置width属性时，元素所呈现出来的宽度
总宽度=父的content - 自身的左右margin
内容区的宽度 = 父的content - 自身的左右margin-自身的左右border - 自身的左右padding
3.padding
<style>
div{
/*width: 200px;
height: 200px; */
/* 左侧内边框 */
padding-left: 20px;
/* 上内边框 */
padding-top: 30px;
/* 右侧内边框 */
padding-right: 40px;
/* 底内边框 */
padding-bottom: 50px;
/* 复合属性 四边都是20px*/
padding: 20px;
/* 复合属性写两个值 上下 左右 */
padding: 20px 30px;
/* 复合属性写三个值 上 左右 下 */
padding:10px 20px 30px;
/* 复合属性写四个值 上 右 下 左 */
padding: 10px 20px 30px 40px;
background-color: red;
}
</style>padding的值不能为负数
行内元素的左右边距没有问题，但是上下内边距不能完美调整
块级元素、行内元素，四个方向内边距都可以完美设置
4.border
border-style
border-width
border-color
border
left right-top-bottom与style width color搭配使用
5.margin
调整与padding类似
margin-left
margin-right
margin-top
margin-bottom
margin 一个参数
margin 两个参数
margin 三个参数
margin 四个参数
margin的注意事项
1.子元素的margin，是参考父元素的content计算的。（因为是父亲的content中承载着子元素）
2.上margin、左margin：影响自己的位置；下margin、右margin：影响兄弟元素的位置
3.块级元素、行内元素、均可以完美设置四个方向的margin；但行内元素，左右margin可以完美设置，上下margin设置无效
4.margin的值也可以是auto（margin-left:auto 为能多右就往多右移动），如果给一个块级元素设置左右margin都为auto，该块级元素会在父元素中水平居中
5.margin的值可以是负数
margin塌陷问题
第一个子元素的上margin会作用在父元素上，最后一个子元素的margin会作用在父元素上
<style>
#c1{
height: 400px;
width: 400px;
background-color: gray;
}
.box1{
height: 100px;
width: 100px;
background-color: orange;
margin-top: 50px;
}
.box2{
height: 100px;
width: 100px;
background-color: red;
}
</style>解决措施
border: 1px solid red;padding: 10px;超出的隐藏
overflow: hidden;margin合并问题
margin合并问题
上下兄弟之间top和bottom的合并，相同合并，不相同取大值
左右兄弟之间left和right不会合并
<style>
.c1{
width: 100px;
height: 100px;
background-color: deepskyblue;
margin-bottom: 50px;
}
.c2{
width: 100px;
height: 100px;
background-color: deeppink;
margin-top: 60px;
}
</style>4.处理内容的溢出
overflow
overflow-x 横向
overflow-y 纵向
- scroll 滚动条 （不论是否溢出）
- visible 默认（显示）
- hidden 隐藏
- auto 如果溢出则显示滚动条
5.隐藏元素的两种方式
display 不占位
visibility 占位
<style>
.c1{
width: 100px;
height: 100px;
background-color: red;
margin-bottom: 100px;
/* 不占位 */
display: none;
/* 占位 */
visibility: hidden;
}
.c2{
width: 100px;
height: 100px;
background-color: orange;
}
</style>6.样式的继承
会继承的CSS样式
字体属性、文本属性、文字颜色等
不影响布局，不影响盒子模型
不会继承的CSS样式
边框、背景、内边距、外边距、宽高、溢出方式
7.元素的默认样式
浏览器设置的默认样式
a
h1~h6
p
ul、ol
body 8px的外边距
8.布局技巧
1.行内元素，行内块元素，可以被父元素当作文本处理
text-align line-height text-indent
9.元素之前的空白问题
1.去掉换行和空格
2.给父元素设置font-size:0，再给需要显示文字的元素，单独设置字体大小（推荐）
10.行内块的幽灵空白问题
1.vertical-align: top;
2.display: block;
3.font-size:0 然后再选中字体再设置字体大小
4.浮动
1.简介
文字环绕图片
用来布局
float:left right
2.特点
浮动之后
1.脱离文档流
2.不管浮动前是什么元素，默认宽高都由内容撑开，而且可以设置宽高
3.不会独占一行，可以与其他元素共用一行
4.不会margin合并，也不会margin塌陷，能够完美设置四个方向的margin和padding
5.不会像行内块一样被当作文本处理
3.浮动后的影响
对兄弟元素的影响：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响
对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素
4.消除浮动产生的影响
1.设置父元素的height
2.给父元素也设置浮动
3.overflow-hidden
4.在所有浮动元素的最后面加块元素，并设置clear: both
.box4{
clear: both;
}5.（推荐使用）
.outer::after{
content: "";
display: block;
clear: both;
}5.定位
1.相对定位
给元素设置position：relative 即可实现相对定位。
可以使用 left、right、top、bottom 四个属性调整位置。
参考点
相对自己原来的位置
特点:
1.不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。
2.定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
默认规则是:
定位的元素会盖在普通元素之上。
都发生定位的两个元素，后写的元素会盖在先写的元素之上。
3.left不能和right—起设置，top和bottom不能一起设置。
4.相对定位的元素，也能继续浮动，但不推荐这样做。
5.相对行为的元素，也能通过margin调整位置，但不推荐这样做。
注意：绝大多数情况下，相对定位，会与绝对定位配合使用。
2.绝对定位
给元素设置 position：absolute 即可实现绝对定位。
可以使用 left、right、top、bottom 四个属性调整位置。
参考它的包含块
1.对于没有脱离文档流的元素：包含块就是父元素;
2.对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都没定位，那包含块就是整个页面)
绝对定位元素的特点:
1.脱离文档流，会对后面的兄弟元素、父元素有影响。
2.left不能和right一起设置，top和bottom不能一起设置
3.绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主。
4.绝对定位的元素，也能通过margin调整位置，但不推荐这样做。
5.无论是什么元素（行内、行内块、块级）设置为绝对定位之后，
何为定位元素？ – 默认宽、高都被内容所撑开，且能自由设置宽高。
3.固定定位
给元素设置 position：fixed 即可实现固定定位。
可以使用left、right、top、bottom 四个属性调整位置。
参考它的视口
固定定位元素的特点
1.脱离文档流，会对后面的兄弟元素、父元素有影响。
2.left不能和right一起设置，top和bottom不能一起设置。
3.固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主。
4.固定定位的元素，也能通过margin调整位置，但不推荐这样做。
5.无论是什么元素（行内、行内块、块级）设置为固定定位之后，都变成了定位元素
一对于 PC浏览器来说，视口就是我们看网页的那扇“窗户”。
4.粘性定位
给元素设置 position：sticky 即可实现粘性定位。
可以使用left、right、top、bottom四个属性调整位置，不过最常用的是top值。
离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先。
粘性定位元素的特点
不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式。
最常用的值是top值。
粘性定位和浮动可以同时设置，但不推荐这样做。
粘性定位的元素，也能通过margin调整位置，但不推荐这样做。
- 粘性定位和相对定位的特点基本一致，不同的是：粘性定位可以在元素到达某个位置时将其固定。
5.定位的层级
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>定位的层级</title>
<style>
.outer{
background-color: gray;
height: 400px;
width: 400px;
padding: 20px;
border: 1px solid black;
position: relative;
}
.box{
font-size: 20px;
height: 100px;
width: 100px;
}
.box1{
background-color: aqua;
}
.box2{
background-color: red;
position: relative;
left:25px;
top: -75px;
}
.box3{
background-color: skyblue;
position: absolute;
left: 75px;
top:75px;
}
.box4{
background-color: chocolate;
position: fixed;
left:110px;
top: 110px;
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
</div>
</body>
</html>z-index
z-index:数值
1.定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
2.如果位置发生重叠，默认情况是：后面的元素，会显示在前面元素之上。
3.可以通过css属性 z-index 调整元素的显示层级
4.z-index的属性值是数字，没有单位，值越大显示层级越高。
5.只有定位的元素设置z-index才有效。
6.如果z-index值大的元素，依然没有覆盖掉z-index值小的元素，那么请检查其包含块的层级。
6.定位的特殊应用
注意：
1.发生固定定位、绝对定位后，元素都变成了定位元素，默认宽高被内容撑开，且依然可以设置宽高。
2.发生相对定位后，元素依然是之前的显示模式。
3.以下所说的特殊应用，只针对 绝对定位 和 固定定位的元素，不包括相对定位的元素。
让定位元素的宽充满包含块
1.块宽想与包含块一致，可以给定位元素同时设置left和right为0。
2.高度想与包含块一致，top和bottom设置为0。
让定位元素在包含块中居中
1.方案一
left:0;right:0.top:0;bottom:0;margin:auto;2.方案二:
left:50%;
top:50%;
margin-left：负的宽度一半
margin-top：负的高度一半;注意：该定位的元素必须设置宽高！！!
6.布局
1.版心
1.版心
在PC端网页中，一般都会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这是网页的版心。
版心的宽度一般是960~1200像素之间。
版心可以是一个，也可以是多个。版心png
2.常见布局名词
顶部导航条 topbar
页头 header、page-header
导航 nav、navigator.、navbar
搜索框 search、search-box
横幅、广告、宣传图 banner
主要内容 content main
侧边栏 aside、 sidebar
页脚 footer.page-footer
3.重置默认样式
1.通配选择器
* {
padding:0;
margin:0;
}2.reset.css
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}3.Normalize.css
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
appearance: none;
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
appearance: none;
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}7.HTML5
1.HTML5简介
HTML5是新一代的 HTML标准，2014年10月由万维网联盟（W3C）完成标准制定。
1.官网地址:
W3C 提供：https://www.w3.org/TR/html/index.html
WHATWG 提供：https://whatwg-cn.github.io/html/multipage
HTML5 在狭义上是指新一代的 HTML标准，在广义上是指：整个前端。
HTML5优势
1.针对Javascript，新增了很多可操作的接口。
2.新增了一些语义化标签、全局属性。
3.新增了多媒体标签，可以很好的替代flash。
4.更加侧重语义化，对于 SEO更友好。
5.可移植性好，可以大量应用在移动设备上。
3.HTML5兼容性
支持:Chrome、Safari、Opera、Firefox等主流浏览器。
IE 浏览器必须是9及以上版本才支持HTML5，且IE9仅支持部分HTML5新特性。
2.新增语义化标签
1.新增布局标签
header 整个页面，或部分区域的头部 双标签
footer 整个页面，或部分区域的底部 双标签
nav 导航 双标签
article 文章、帖子、杂志、新闻、博客、评论等。 双标签
section 内面中的某段文字，或文章中的某段文字（里面文字通常里面会包含标题）。 双标签
aside 侧边栏 双标签
main 文档的主要内容（WHATWG没有语义，IE不支持)，几乎不用。 双标签
hgroup 包裹连续的标题，如文章主标题、副标题的组合（W3C将其删除） 双标签
关于 article和section:
1.artical里面可以有多个section。
2.section强调的是分段或分块，如果你想将一块内容分成几段的时候，可使用section元素。
3.article比section 更强调独立性，一块内容如果比较独立、比较完整，应该使用article元素。
2.新增状态标签
meter标签
语义：定义已知范围内的标量测量。也被称为gauge(尺度），双标签，例如：电量、磁盘用量等。
常用属性如下:
high 规定高值
low 规定低值
max 规定最大值
min 规定最小值
optimum 规定最优值
value 规定当前值
progress 标签
语义：显示某个任务完成的进度的指示器，一般用于表示进度条，双标签，例如：工作完成进度等
常用属性如下:max 规定目标值。
value 规定当前值。
<span>电量:</span>
<meter max="100" min="0" value="10" low="20" high="80" optimum="90"></meter>
<br>
<span>当前进度:</span>
<progress max="100"></progress>3.新增列表标签
detalist 用于搜素框的关键字提示
details 用于展示问题和答案，或对专有名词进行解释
summary 写在details的里面，用于指定问题或专有名词
<form action="#" >
<input type="text" list="mylist">
<button>搜素</button>
</form>
<datalist id="mylist">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</datalist>
<hr>
<details>
<summary>如何</summary>
<p>123</p>
</details>4.新增文本标签
ruby 包裹需要注音的文字
rt 写注音，rt标签写在ruby的里面
mark 标记
<body>
<ruby>
<span>魑魅魍魉</span>
<rt>chi mei wang lia</rt>
</ruby>
<hr>
<div>
<ruby>
<span>魑</span>
<rt>chi</rt>
</ruby>
</div>
<hr>
<p>Lorem ipsum dolor sit amet <mark>consectetur</mark> adipisicing elit. Nemo, voluptatum magnam temporibus incidunt ad, soluta, ex molestiae sequ</p>
</body>3.新增表单功能
1.表单控件新增属性
placeholder 提示文字（注意：不是默认值，yalue 是默认值），适用于文字输入类的表单控件。
required 表示该输入项必填，适用于除按钮外其他表单控件。
autofocus 自动获取焦点，适用于所有表单控件。
autocomplete 自动完成，可以设置为on或off，适用于文字输入类的表单控件。
注意：密码输入框、多行输入框不可用
pattern 填写正则表达式，适用于文本输入类表单控件。
注意：多行输入不可用，且空的输入框不会验证，往往与required 配合。
<body>
<form action="#">
账号：<input type="text" placeholder="请输入账号" required autofocus autocomplete="on" pattern="\w{6}">
<br>
密码：<input type="password" placeholder="请输入密码" required >
<br>
性别：
<input type="radio" value="male" name="gender">男
<input type="radio" value="famale" name="gender" >女
<br>
爱好
<input type="checkbox" name="hobby" value="sing">唱
<input type="checkbox" name="hobby" value="jump">跳
<input type="checkbox" name="hobby" value="rap" >rap
<br>
其他：
<textarea name="text" cols="30" rows="10"></textarea>
<button >提交</button>
</form>
</body>2.input新增属性值
email 邮箱类型的输入框，表单提交时会验证格式，输入为空则不验证格式。
url url类型的输入框，表单提交时会验证格式，输入为空则不验证格式。
number 数字类型的输入框，表单提交时会验证格式，输入为空则不验证格式。
search 搜索类型的输入框，表单提交时不会验证格式。
tel 电话类型的输入框，表单提交时不会验证格式，在移动端使用时，会唤起数字键盘.
range 范围选择框，默认值为50，表单提交时不会验证格式。
color 颜色选择框，默认值为黑色，表单提交时不会验证格式。
date 日期选择框，默认值为空，表单提交时不会验证格式。
month 月份选择框，默认值为空，表单提交时不会验证格式。
week 周选择框，默认值为空，表单提交时不会验证格式。
time 时间选择框，默认值为空，表单提交时不会验证格式。
datetime-loca 日期+时间选择框，默认值为空，表单提交时不会验证格式。
3.form标签新增属性
novalidate
如果给form标签设置了该属性，表单提交的时候不再进行验证。
4.视频标签
video标签用来定义视频，它是双标签。
src URL地址 视频地址
width 像素值 设置视频播放器的宽度
height 像素值 设置视频播放器的高度
controls 向用户显示视频控件 （比如播放/暂停按钮）
muted 视频静音
autoplay 视频自动播放
loop 循环播放
poster 视频封面
preload auto / metadata/ none 视频预加载，如果使用autoplay，则忽略该属性。
none：不预加载视频。
metadata：仅预先获取视频的元数据（例如长度）
auto：下载整个视频文件，即使用户不希望使用它。
5.音频标签
audio标签用来定义音频，它是双标签。
src URL地址 音频地址
controls 向用户显示音频控件 （比如播放/暂停按钮）
muted 音频静音
autoplay 音频自动播放
loop 循环播放
preload 音频预加载，如果使用autoplay，则忽略该属性。
auto / metadata / none
none：不预加载音频。
metadata：仅预先获取音频的元数据（例如长度)
auto：可以下载整个音频文件，即使用户不希望使用它。
6.新增全局属性
contenteditable
表示元素是否可被用户编辑，可选值如下:
true：可编辑
false：不可编辑
draggable
表示元素可以被拖动，可选值如下:
true：可拖动
false：不可拖动
hidden 隐藏元素
spellcheck
规定是否对元素进行拼写和语法检查，可选值如下:
true：检查
false：不检查
contextmenu
规定元素的上下文菜单，在用户鼠标右键点击元素时显示。
data-*
用于存储页面的私有定制数据。
六、HTML5兼容性处理
添加元信息，让浏览器处于最优渲染模式
<！--设置IE总是使用最新的文档模式进行渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<！--优先使用 webkit(Chromium）内核进行渲染，针对360等壳浏览器-->
<meta name="renderer" content="webkit">
使用html5shiv让低版本浏览器认识H5的语义化标签
<!--[if lt ie 9]>
<script src="../sources/js/html5shiv.js"></script>
<![endif]-->扩展
1t 小于1te 小于等于gt大于gte大于等于！逻辑非
8.CSS3
1.CSS3概述
CSS3是CSS2的升级版本，它在CSS2的基础上，新增了很多强大的新功能，从而解决一些实际面临的问题。
CSS3 在未来会按照模块化的方式去发展： https://www.w3.org/Style/CSS/current-work.html
CSS3的新特性如下：
新增了更加实用的选择器，例如：动态伪类选择器、目标伪类选择器、伪元素选择器等等
新增了更好的视觉效果，例如：圆角、阴影、渐变等
新增了丰富的背景效果，例如：支持多个背景图片，同时新增了若干个背景相关的属性
新增了全新的布局方案—一弹性盒子
新增了Web字体，可以显示用户电脑上没有安装的字体
增强了颜色，例如： HSL、HSLA、RGBA几种新的颜色模式，新增opacity 属性来控制透明度
增加了2D和3D变换，例如：旋转、扭曲、缩放、位移等
增加动画与过渡效果，让效果的变换更具流线性、平滑性
2.CSS3私有前缀
W3C标准所提出的某个CSS特性，在被浏览器正式支持之前浏览器厂商会根据浏览器的内核，使用私有前缀来测试该 CSS特性，在浏览器正式支持该 CSS特性后，就不需要私有前缀了
·举个例子:
-webkit-border-radius:20px;
-moz-border-radius: 20px;
-ms-border-radius:20px;
-o-border-radius: 20px;
border-radius: 20px;
·查询 CSS3兼容性的网站：https://caniuse.com/
常见浏览器私有前缀
Chrome 浏览器：-webkit-
Safari浏览器：-webkit-
Firefox 浏览器:-moz-
Edge 浏览器:-webkit-
旧 IE浏览器：-mS-
3.CSS3新增长度单位
1.rem根元素字体大小的倍数，只与根元素字体大小有关。
2.vw 视口宽度的百分之多少 10vw 就是视口宽度的10%
3.vh 视口高度的百分之多少 10vh就是视口高度的10%。
4.vmax视口宽高中大的那个的百分之多少。
5.vmin 视口宽高中小的那个的百分之多少。
4.CSS3新增颜色设置方式
CSS3新增了三种颜色设置方式，分别是：rgba、hsl、hsla，由于之前已经详细讲解，此处略过。
5.CSS3新增选择器
css3 新增的选择器有：动态伪类、目标伪类、语言伪类、 UI 伪类、结构伪类、否定伪类、伪元素：
6.新增盒子模型相关属性
box-sizing
box-sizing: content-box;
box-sizing: border-box;
resize（加上overflow使用）
resize: horizontal; 水平可调整
resize: vertical; 竖直可调整
box-shadow(阴影)
<style>
.box1{
height: 400px;
width: 400px;
background-color: orange;
margin: 0 auto;
margin-top: 100px;
/* 水平位置 垂直位置 */
box-shadow: 10px 10px;
/* 水平位置 垂直位置 阴影颜色*/
box-shadow: 10px 10px blue;
/* 水平位置 垂直位置 阴影的模糊程度*/
box-shadow: 10px 10px 20px;
/* 水平位置 垂直位置 阴影的模糊程度 阴影颜色*/
box-shadow: 10px 10px 20px blue;
/* 水平位置 垂直位置 阴影的模糊程度 阴影的外沿 阴影颜色*/
box-shadow: 10px 10px 20px 10px blue;
/* 水平位置 垂直位置 阴影的模糊程度 阴影的外沿 阴影颜色*/
box-shadow: 10px 10px 20px 10px blue inset;
/* inset：内部阴影 不填：外部阴影*/
}
</style>
<body>
<div class="box1">
你好
</div>
</body>opacity(不透明度)
0~1的数
7.新增背景属性
1.background-origin
设置背景图的原点
- padding-box 从padding区域开始显示背景图像默认值
- border-box 从border区域开始显示背景图像
- content-box 从content区域开始显示背景图像
2.background-clip
设置背景图的向外裁剪的区域
- border-box 从border区域开始向外裁剪背景 默认
- padding-box 从padding-区域开始向外裁剪背景
- content-box 从content区域开始向外裁剪背景
- text 背景图只呈现在文字上
3.background-size
设置背景图的尺寸
1.用长度指定背景图片的大小,不允许负值
background-size:200px 300px;
2.用百分比指定背景图片的大小,不允许负值
background-size:100% 100%;
3.auto ： 背景图的真实大小 默认值
4.contain 将背景图片等比例缩放，使背景图片的宽或高，与容器的宽或高相等，再将完整背景图片包含在容器内，但要注意：可能会造成容器里部分区域没有背景图片
background-size:contain;
5.cover:将背景图片等比例缩放直到完全覆盖容器，图片会尽可能全的显示在元素上，但要注意：背景图片可能显示不完整 相对较好
background-size:cover;
4.background-复合属性
background:背景颜色 背景url 是否重复 位置 大小 / 原点 裁剪方式
如果origin和clip值一样，只写一个值，则clip和origin都设置;如果设置了两个值，前面的是origin，后面的是clip
size的值必须写在position值的后面，并且用/分开
5.多背景图
利用background复合属性
background: url() no-repeat left top,
url() no-repeat left bottom,
url() no-repeat right bottom,
url() no-repeat right bottom;8.新增边框属性
1.边框圆角
border-radius: 200px;
border-radius: 50%;在CSS3中，使用border-radius 属性可以将盒子变为圆角。
同时设置四个角的圆角:
border-radius:10px;
分开设置每个角的圆角（几乎不用)
border-top-left-radius
设置左上角圆角半径
1.一个值是正圆半径2.两个值分别是椭圆的×半径、y半径。
border-top-right-radius
设置右上角圆角半径:
1.一个值是正圆半径,
2.两个值分别是椭圆的×半径、y半径。
border-bottom-right-radius
设置右下角圆角半径：
1.一个值是正圆半径.
2.两个值分别是椭圆的×半径、y半径。
porder-bottom-left-radius
设置左下角圆角半径:
1.一个值是正圆半径
2.两个值分别是椭圆的×半径、y半径。
border-raidus：左上角x右上角x右下角x左下角x /左上y 右上y 右下y 左下y
2.边框外轮廓
outline-width：外轮廓的宽度。
outline-color：外轮廓的颜色。
outline-style：外轮廓的风格
none：无轮廓
dotted：点状轮廓
dashed：虚线轮廓
solid:实线轮廓
double：双线轮廓
outline-offset 设置外轮廓与边框的距离，正负值都可以设置
注意：outline-offset不是outline的子属性，是一个独立的属性。
outline复合属性
outline:50px solid blue;
9.新增文本相关属性
1.文本阴影
在CSS3中，我们可以使用text-shadow 属性给文本添加阴影。
text-shadow: h-shadow v-shadow blur color;
h-shadow 必需写，水平阴影的位置，允许负值
v-shadow 必需写，垂直阴影的位置，允许负值
blur 可选，模糊的距离。
color 可选，阴影的颜色
默认值：text-shadow：none表示没有阴影
2.文本换行
在CSS3中，我们可以使用white-space 属性设置文本换行方式。
normal 文本超出边界自动换行，文本中的换行被浏览器识别为一个空格。（默认值)
pre 原样输出，与pre标签的效果相同
pre-wrap 在pre效果的基础上，超出元素边界自动换行
pre-line 在pre效果的基础上，超出元素边界自动换行，且只识别文本中的换行，空格会忽略
nowarp 强制不换行
3.文本溢出
在CSS3中，我们可以使用text-overflow 属性设置文本内容溢出时的呈现模式。
clip 当内联内容溢出时，将溢出部分裁切掉。（默认值)
ellipsis 当内联内容溢出块容器时，将溢出部分替换为.….。
注意：要使得text-overflow 属性生效，块容器必须显式定义overflow 为非visible值，white-space 为nowrap值。
4.文本修饰
CSS3升级了text-decoration属性，让其变成了复合属性
text-decoration: text-decoration-line || text-decoration-style || text-decoration-color
子属性及其含义:
text-decoration-line 设置文本装饰线的位置none：指定文字无装饰（默认值）
underline：指定文字的装饰是下划线
overline：指定文字的装饰是上划线
line-through：指定文字的装饰是贯穿线
text-decoration-style 文本装饰线条的形状
solid：实线（默认）
double：双线
dotted：点状线条
wavy：波浪线
text-decoration-color文本装饰线条的颜色
5.文本描边
颜色
-webkit-text-stroke-color: aqua;
宽度
-webkit-text-stroke-width: 1px;
复合属性，设置宽度和颜色
-webkit-text-stroke: aqua 1px;
10.新增渐变
1.线性渐变
background-image : linear-gradient()
默认从上到下
to top
deg角度
调整渐变的位置
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box{
height: 200px;
width: 200px;
border: 1px solid black;
float: left;
}
.box1{
background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%)
}
.box2{
background-image: linear-gradient(to right, #e0c3fc 0%, #8ec5fc 100%)
}
.box3{
background-image: linear-gradient(red 50px,yellow 100px , green 150px);
}
.box4{
font-size: 80px;
text-align: center;
line-height: 200px;
font-weight: 200;
color: transparent;
background-clip: text;
background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%)
}
</style>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4">你好</div>
</body>2.径向渐变
background-image : radial-gradient()
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box{
height: 200px;
width: 200px;
border: 1px solid black;
float: left;
}
.box1{
background-image: radial-gradient( #e0c3fc 0%, #8ec5fc 100%);
}
.box2{
/* 关键词 */
background-image: radial-gradient(at left top,#e0c3fc 0%, #8ec5fc 100%);
}
.box3{
/* 通过像素值 */
background-image: radial-gradient(at 50px 100px,#e0c3fc 0%, #8ec5fc 100%);
}
.box4{
/* circle关键字 设置为正圆*/
background-image: radial-gradient(circle,#e0c3fc 0%, #8ec5fc 100%);
}
.box5{
/* 通过设置像素值，设置为正圆 */
background-image: radial-gradient(at 200px 200px,#e0c3fc 0%, #8ec5fc 100%);
}
.box6{
/* 设置区域 */
background-image: radial-gradient(#e0c3fc 0% 50px, #8ec5fc 100% 150px);
}
.box7{
/* 综合写法 */
background-image: radial-gradient(100px 50px at 150px 150px,#e0c3fc 0% 50px, #8ec5fc 100% 150px);
}
</style>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="box box5"></div>
<div class="box box6"></div>
<div class="box box7"></div>
</body>3.重复渐变
background-image: repeating-linear-gradient()
background-image: repeating-radial-gradient()
11.Web字体和字体图标
1.Web字体
<style>
@font-face {
font-family: 'c';
src: url(../font/Rainbow-Party-2.ttf);
}
.h{
font-family: 'c';
}
</style>
<body>
<h1 class="h">
ABDC
</h1>
</body>2.字体图标
- 相比图片更加清晰
- 灵活性高，更方便改变大小，颜色，风格
- 兼容性好
<style>
@font-face {
font-family: 'iconfont';
src: url('../font/font_img/iconfont.woff2t=1714807215615') format('woff2'),
url('../font/font_img/iconfont.woff?t=1714807215615') format('woff'),
url('../font/font_img/iconfont.ttf?t=1714807215615') format('truetype');
}
.iconfont {
font-family: "iconfont" ;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
<body>
<div class="box iconfont">


</div>
<span class="iconfont"></span>
</body><link rel="stylesheet" href="../font/font_img/iconfont.css">
<body>
<span class="iconfont icon-sousuo"></span>
</body><script src="../font/font_img/iconfont.js"></script>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-sousuo"></use>
</svg>4.在线使用
@font-face {
font-family: 'iconfont';
src: url('//at.alicdn.com/t/c/font_4532917_3e3p56tm3wy.woff2?t=1714808277434') format('woff2'),
url('//at.alicdn.com/t/c/font_4532917_3e3p56tm3wy.woff?t=1714808277434') format('woff'),
url('//at.alicdn.com/t/c/font_4532917_3e3p56tm3wy.ttf?t=1714808277434') format('truetype');
}
.iconfont{
font-family: 'iconfont';
}
<span class="iconfont"></span><link rel="stylesheet" href="//at.alicdn.com/t/c/font_4532917_3e3p56tm3wy.css">
<span class="iconfont icon-sousuo"></span><script src="//at.alicdn.com/t/c/font_4532917_3e3p56tm3wy.js"></script>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-sousuo"></use>
</svg>可以使用i标签引入
12.2D变换
transform
设置水平方向位移，需指定长度值；若指定的是百分比，是参考自身宽度的百分比。设置垂直方向位移，需指定长度值；若指定的是分比，是参考自身高度的百分比。一个值代表水平方向，两个值代表：水平和垂直方向。
1.位移
以左上位坐标原点
translate() translateX() translateY()
transform: translateX(50px) translateY(50px);
translateX(50%)位移自己宽度的50%
1.位移与相对定位很相似，都不脱离文档流，不会影响到其它元素。
2.与相对定位的区别：相对定位的百分比值，参考的是其父元素；定位的百分比值，参考的是其自身。
3.浏览器针对位移有优化，与定位相比，浏览器处理位移的效率更高。
4.transform 可以链式编写，例如:
transform: translateX(30px) translateY(40px);
5.位移对行内元素无效。
6.位移配合定位，可实现元素水平垂直居中
.box{
position:absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}2.缩放
transform: scale(1.5);
2D缩放是指：让元素放大或缩小
按比例缩放
scaleX 设置水平方向的缩放比例，值为一个数字，1表示不缩放，大于1放大，小于1缩小。
scaleY 设置垂直方向的缩放比例，值为一个数字，1表示不缩放，大于1放大，小于1缩小。
scale 同时设置水平方向、垂直方向的缩放比例，一个值代表同时设置水平和垂直缩放；两个值分别代表：水平缩放、垂直缩放。
scale的值，是支持写负数的，但几乎不用，因为容易让人产生误解。
借助缩放，可实现小于 12px的文字。
3.旋转
2D旋转是指：让元素在二维平面内，顺时针旋转或逆时针旋转
1.先给元素添加 转换属性transform
2.编写transform的具体值，相关可选值如下：
设置旋转角度，需指定一个角度值（deg)，正值顺时针，负值逆时针。
注意：rotateZ(20deg)相当于rotate(20deg），当然到了3D变换的时候，还能写：rotate(x，X，x)
4.扭曲
2D扭曲是指：让元素在二维平面内被“拉扯”，进而“走形”，实际开发几乎不用，了解即可
1.先给元素添加 转换属性 transform
2.编写transform的具体值，相关可选值如下:
skewX 设置元素在水平方向扭曲，值为角度值，会将元素的左上角、右下角 拉扯
skewY 设置元素在垂直方向扭曲，值为角度值，会将元素的左上角、右下角拉扯。
skew 一个值代表 skewX，两个值分别代表：skewX、skewY
5.多重变换
建议最后进行旋转，因为旋转会破坏坐标原点
6.变换原点
默认原点在中间，位移变换不参考原点
元素变换时，默认的原点是元素的中心，使用transform-origin可以设置变换的原点。
修改变换原点对位移没有影响，对旋转和缩放会产生影响。
如果提供两个值，第一个用于横坐标，第二个用于纵坐标。
如果只提供一个，若是像素值，表示横坐标，纵坐标取50%；若是关键词，则另一个坐标取50%
transform-origin：50%50%，变换原点在元素的中心位置，百分比是相对于自身
transform-origin：left top，变换原点在元素的左上角。
transform-origin:50px50px，变换原点距离元素左上角50px 50px的位置。
transform-origin:0，只写一个值的时候，第二个值默认为50%。
13.3D变换
transform
1.空间与景深
1.开启3D空间
重要原则：元素进行 3D变换的首要操作：父元素必须开启 3D空间!
使用transform-style开启3D空间
flat：让子元素位于此元素的二维平面内（2D空间)
preserve-3d：让子元素位于此元素的三维空间内（3D空间)
2.设置景深
何为景深？—— 指定观察者与Y=0平面的距离，能让发生3D变换的元素，产生透视效果，看来更加立体。
使用perspective 设置景深，可选值如下:
none：不指定透视–（默认值）
长度值：指定观察者距离z=0平面的距离，不允许负值.
注意：perspective 设置给发生3D变换元素的父元素!
2.透视点位置
所谓透视点位置，就是观察者位置；默认的透视点在元素的中心。
使用perspective-origin设置观察者位置（透视点的位置）
相对坐标轴往右偏移400px，往下偏移300px（相当于人蹲下300像素，然后向右移动400像素看元素）
perspective-origin: 400px 300px;
注意：通常情况下，我们不需要调整透视点位置。
3.位移
3D位移是在2D位移的基础上，可以让元素沿z轴位移
1.先给元素添加 转换属性transform
2.编写transform的具体值，3D相关可选值如下：
设置z轴位移，需指定长度值，正值向屏幕外，负值向屏幕里，且不能写百分比。
第1个参数对应×轴，第2个参数对应y轴，第3个参数对应z轴，且均不能省略。
4.旋转
3D 旋转是在20旋转的基础上，可以让元素沿×轴和y轴旋转，具体使用方式如下:
1.先给元素添加 转换属性 transform
2.编写transform的具体值，3D相关可选值如下：
设置×轴旋转角度，需指定一个角度值(deg)，面对×轴正方向：正值顺时针，负值逆时针。
设置y轴旋转角度，需指定一个角度值(deg)，面对y轴正方向：正值顺时针，负值逆时针。
前3个参数分别表示坐标轴：×，y，2，第4个参数表示旋转的角度，参数不允许省略。
例如：transform：rotate3d(1，1,1,30deg），意思是：x、y、z分别旋转30度。
5.缩放
3D缩放是在2D缩放的基础上，可以让元素沿z轴缩放
1.先给元素添加转换属性transform
2.编写transform 的层体值，3D相关可选值
scaleZ
scale3d
设置z轴方向的缩放比例，值为一个数字，1表示不缩放，大于1放大，小于1缩小。第1个参数对应×轴，第2个参数对应y轴，第3个参数对应z轴，参数不允许省略。
6.多重变换
多个变换，可以同时使用一个transform来编写
transform: translateZ(100px) scaleZ(3) rotateY(40deg);
注意点：多重变换时，建议最后旋转
7.背部
backface-visibility
backface-visibility:hidden
14.过渡
1.基本
过渡可以在不使用Flash动画，不使用JavaScript的情况下，让元素从一种样式，平滑过渡为另一种样式。
transition-property
作用：定义哪个属性需要过渡，只有在该属性中定义的属性（比如宽、高、颜色等）才会以有过渡效果。
1.none：不过渡任何属性
2.all：过渡所有能过渡的属性
3.具体某个属性名，例如：width若有多个以逗号分隔
常见的支持过渡的属性有：颜色、长度值、百分比、z-index、opacity、2D变换属性、3D变换属性、阴影
transition-duration
作用：设置过渡的持续时间，即：一个状态过渡到另外一个状态耗时多久。
默认值。
0：没有任何过渡时间
s或ms：秒或毫秒。
如果想让所有属性都持续一个时间，那就写一个值。
如果想让每个属性持续不同的时间那就写一个时间的列表。
transition-delay 延迟时间
transition-delay : 2s;
2.高级
transition-delay
作用：指定开始过渡的延迟时间，单位：s或ms
transition-timing-function
作用：设置过渡的类型
1.ease:平滑过渡 –默认值
2.linear:线性过渡
3.ease-in: 慢→快
4.ease-out：快→慢
5.ease-in-out:慢→快→慢
6.step-start：等同于 steps(1，start)
7.step-end:等同于steps(1, end)
8.steps( integer,?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数默认值为end。
9.cubic-bezie(number,number,number,number):特定的贝塞尔曲线类型
在线制作贝赛尔曲线：https://cubic-bezier.com
3.复合属性
transition 复合属性
- 如果设置了一个时间，表示duration；如果设置了两个时间，第一个是duration，第二个是delay；其他值没有顺序要求
transition: 1s 1s linear all;
4.案例
15.动画
1.使用
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outer{
width: 1000px;
height: 200px;
border: 1px solid black;
}
@keyframes yidong{
/* 第一帧 */
form{
}
/* 最后一帧 */
to{
background-color: blue;
transform: translateX(800px);
border-radius: 50%;
}
}
.inner{
width: 200px;
height: 200px;
background-color: orange;
/* 应用动画到元素 */
animation-name: yidong;
/* 持续时间 */
animation-duration: 3s;
/* 延迟时间 */
animation-delay: 0.5s;
/* 其他属性 */
/* 播放方式 */
animation-timing-function: linear;
/* 次数 */
/* animation-iteration-count: infinite; */
/* 方向 */
animation-direction: alternate;
/* forwards 最后一帧停住 不发生动画的状态*/
animation-fill-mode: forwards;
}
.outer:hover .inner{
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>animation-name：给元素指定具体的动画（具体的关键帧)
animation-duration：设置动画所需时间
animation-delay：设置动画延迟
.box {
/* 指定动画 */
animation-name: testKey;/*设置动画所需时间 */animation-duration:5s;/*设置动画延迟 */animation-delay:0.5s;
}
animation-iteration-count，指定动画的播放次数，常用值如下:
number：动画循环次数
infinite：无限循环
animation-direction，指定动画方向，常用值如下:
normal: 正常方向（默认)
reverse : 反方向运行
alternate：动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：动画先反运行再正方向运行，并持续交替运行
animation-fill-mode，设置动画之外的状态
forwards：设置对象状态为动画结束时的状态
backwards： 设置对象状态为动画开始时的状态
animation-play-state，设置动画的播放状态，常用值如下:
running运动（默认）
paused暂停
2.复合属性
只设置一个时间表示duration，设置两个时间分别是：duration和delay，其他属性没有数量和顺序要求。
animation: name 3s 0.5s linear alternate-reverse forwards;
备注：
animation-play-state一般单独使用。
3.动画与过渡
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outer{
width: 1000px;
height: 400px;
border: 2px solid black;
}
.inner{
width: 100px;
height: 100px;
}
.inner1{
background-color: green;
transition: 3s 0.5s linear;
}
@keyframes name{
from{
}
to{
transform: translateX(900px);
}
}
.inner2{
background-color: skyblue;
}
.outer:hover .inner1{
transform: translateX(900px);
}
.outer:hover .inner2{
animation-name: name;
animation-duration: 3s;
animation-delay: 0.5;
/* animation-play-state: paused; */
animation-fill-mode: forwards;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner inner1">1</div>
<div class="inner inner2">2</div>
</div>
</body>
</html>4.案例
16.多布局
指定列数
column-count: 2;
指定列的宽度
column-width: 220px;
复合属性
columns: 2;
间距
column-gap: 30px;
column-count：指定列数，值是数字
column-width：指定列宽，值是长度
columns：同时指定列宽和列数，复合属性；值没有数量和顺序要求
column-gap：设置列边距，值是长度
column-rule-style：设置列与列之间边框的风格，值与 border-style—致
column-rule-width ：设置列与列之间边框的宽度，值是长度
column-rule-color：设置列与列之间边框的颜色
coumn-rule：设置列边框，复合属性
column-span 指定是否跨列；值：none、all
17.伸缩盒模型
1.伸缩盒模型简介
2009年，W3C 提出了一种新的盒子模型–Flexible Box（伸缩盒模型，又称：弹性盒子）
它可以轻松的控制：元素分布方式、元素对齐方式、元素视觉顺序.………
截止目前，除了在部分IE 浏览器不支持，其他浏览器均已全部支持,伸缩盒模型的出现，逐渐演变出了一套新的布局方案–flex布局
1.传统布局是指：基于传统盒状模型，主要靠： display 属性+ position 属性+float 属性。
2.flex布局目前在移动端应用比较广泛，因为传统布局不能很好的呈现在移动设备上。
2.伸缩容器、伸缩项目
伸缩容器：开启了flex的元素，就是：伸缩容器。
1.给元素设置：display:flex或 display：inline-flex，该元素就变为了伸缩容器
2.display: inline-flex很少使用，因为可以给多个伸缩容器的父容器，也设置为伸缩容器
3.一个元素可以同时是：伸缩容器、伸缩项目
伸缩项目：伸缩容器所有子元素自动成为了：伸缩项目。
1.仅伸缩容器的子元素成为了伸缩项目，孙子元素、重孙子元素等后代，不是伸缩项目。
2.无论原来是哪种元素（块、行内块、行内），一旦成为了伸缩项目，全都会“块状化”
3.主轴和侧轴
主轴： 伸缩项目沿着主轴排列，主轴默认是水平的，默认方向是：从左到右（左边是起点，右边是终点）
侧轴： 与主轴垂直的就是侧轴，侧轴默认是垂直的，默认方向是：从上到下（上边是起点，下边是终点）
4.主轴方向
属性名：flex-direction
常用值如下:
1.row：主轴方向水平从左到右—- 默认值
2.row-reverse：主轴方向水平从右到左。
3.column：主轴方向垂直从上到下。
4.column-reverse：主轴方向垂直从下到上。
注意：改变了主轴的方向，侧轴方向也随之改变。
5.主轴上的换行方式
flex-wrap
wrap（自动换行）、nowrap(默认)（不换行）、warp-reverse（反向换行）
6.flex-flow
复合了flex-direction和flex-wrap
flex-flow: column-reverse wrap-reverse;
7.主轴对齐方式
属性名：justify-content
1.flex-start：主轴起点对齐。– 默认值
2.flex-end：主轴终点对齐。
3.center：居中对齐 （常用）
4.space-between：均匀分布，两端对齐（最常用）。
5.space-around：均匀分布，两端距离是中间距离的一半。
6.space-evenly：均匀分布，两端距离与中间距离一致。
8.侧轴对齐方式
8.1只有一行的情况
所需属性：align-items
1.flex-start：侧轴的起点对齐。
2.flex-end：侧轴的终点对齐。
3.center：侧轴的中点对齐。
4.baseline：伸缩项目的第一行文字的基线对齐。
5.stretch：如果伸缩项目未设置高度，将占满整个容器的高度。–（默认值)
8.2多行的情况
所需属性：align-content
1.flex-start：与侧轴的起点对齐
2.flex-end：与侧轴的终点对齐
3.cented 与侧轴的中点对齐
4.space-between：与侧轴两端对齐，中间平均分布
5.space-around：伸缩项目间的距离相等，比距边缘大一倍
6.space-evenly：在侧轴上完全平分
7.stretch：占满整个侧轴。—- 默认值
9.基准长度
1.flex-basis
概念：flex-basis 设置的是生轴方向的基准长度
备注：主轴横向：宽度失效；主轴纵向：高度失效
作用：浏览器根据这个属性设置的值，计算主轴上是否有多余空间，默认值auto，即：伸缩项目的宽或高
10.伸缩性
1.flex-grow（伸)
概念:
flex-grow 定义伸缩项目的放大比例，默认为0，即：纵使主轴存在剩余空间，也不拉伸（放大）
规则:
1.若所有伸缩项目的flex-grow 值都为1，则：它们将等分剩余空间（如果有空间的话）
2.若三个伸缩项目的flex-grow值分别为：1、2、3，则：分别瓜分到：1/6、2/6、3/6的空间
2.flex-shrink（缩）
概念：flex-shrink定义了项目的压缩比例，默认为1，即：如果空间不足，该项目将会缩小
收缩项目的计算，略微复杂一点，我们拿一个场景举例:
例如：
三个收缩项目，宽度分别为：200px、300px2aapx，它们的flex-shrink 值分别为：1、2、3
若想刚好容纳下三个项目，需要总宽度为700px，但目前容器只有400px，还差300px
所以每个人都要收缩一下才可以放下，具体收缩的值，这样计算:
1.计算分母：（200x1）+（300x2）+（200x3）=1400
2.计算比例：
项目一：（200×1）/1400=比例值1项目二：（300x2）/1400=比例值2项目三：（200×3)/1400=比例值3 3.计算最终收缩大小：
项目一需要收缩：比例值1×300
项目二需要收缩：比例值2×300
项目三需要收缩：比例值3×300
11.flex复合属性
flex 是复合属性，复合了:flex-grow 、flex-shrink、flex-basis
如果写flex：1 1 auto，则可简写为：flex：auto
如果写 flex：1 1 0，则可简写为：flex:1
如果写flex:0 θ auto，则可简写为：flex：none
如果写 flex：0 1 auto，则可简写为:flex:0 auto
flex-shrink、flex-basis 三个属性，默认值为0 1 auto –即flex初始值
12.项目排序
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0
13.单独对齐
通过align-self属性，可以单独调整某个伸缩项目的对齐方式
默认值为auto，表示继承父元素的align-items属性
18.响应式布局
1.媒体查询
1.all 所有设备
2.screen 电子屏幕
3.检测打印机
@media screen {
}2.媒体特性
@media (min-width:800px)
{
div{
background-color: red;
}
}width 检测视口宽度
max-width 检测视口最大宽度
min-width 检测视口最小宽度
height 检测视口高度
max-height 检测视口最大高度
min-height 检测视口最小高度
device-width 检测设备屏幕的宽度
max-device-width 检测设备屏幕的最大宽度
min-device-width 检测设备屏幕的最小宽度
orientation 检测视口的旋转方向（是否横屏）
1.portrait：视口处于纵向，即高度大于等于宽度
2.landscape：视口处于横向，即宽度大于高度
完整列表请参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media
3.运算符
and 并且
,、or 或
not 否定
only 肯定
4.常用域值
超小屏幕：<768px
中等屏幕：768px~992px
大屏幕：992px~1200px
超大屏幕：>1200px
19BFC
块格式化上下文，是Wen页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域
当开启了BFC后
1.其子元素不会再产生margin塌陷问题
2.自己不会被其他浮动元素覆盖
3.就算其子元素浮动，元素自身高度也不会塌陷
开始BFC
- 根元素
- 浮动元素
- 绝对定位、固定定位的元素
- 行内块元素
- 表格单元格
- overflow的值不为visible的块元素
- 伸缩项目
- 多列容器
- column-span为all的元素（即使该元素没有包裹在多列容器中）
- display的值，设置为flow-root
9.grid
.layout{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}display:grid 开启grid布局
grid-template-columns:1fr 1fr 表示每列两个元素
gap表示间距
.layout{
display: grid;
grid-template-columns:repeat(5,1fr);
gap: 30px;
}repeate(5,1fr) 重复5次1fr 类似1fr 1fr 1fr 1fr 1fr
.layout .box1{
grid-row: 1/3;
grid-column:1/3 ;
}1/3
1 ==>从第几列开始 3==》跨两列+自身一份2+1==3
10svg
1.svg
width svg的宽度 height svg的高度
<svg width="400" height="100">
<rect width="300" height="100" fill="blue" stroke-width="3" stroke="black"/>
</svg>2.rect
fill 矩形内部的填充颜色
stroke-width 描边的长度
stroke 描边的颜色
x 距离左边的距离
y距离上面的距离
fill-opacity 填充的透明度
stroke-opacity 描边的透明度
opacity 整体的透明度
<svg width="400" height="100">
<rect width="300" height="100" fill="blue"
stroke-width="3" stroke="black" stroke-opacity="0.9"
fill-opacity="0.1"/>
</svg>rx
ry
如果两个相等就是圆角，不相等则为椭圆
3.circle
cx 中心的x坐标
cy 中心的y坐标
r 圆的半径
<svg>
<circle cx="40" cy="40" r="40"/>
</svg>4.ellipse
cx 中心的x坐标
cy 中心的y坐标
rx 水平半径
ry 垂直半径
<svg>
<ellipse cx="60" cy="60" ry="30" rx="20" fill="tomato" stroke="black"/>
</svg>5.line
x1 y1 起始点的坐标
x2 y2 结束点的坐标
<svg width="500" height="210">
<line x1="0" x2="200" y1="0" y2="200" stroke="black" stroke-width="3"/>
</svg>6.polygon
points 每个点的坐标
<svg width="500" height="210">
<polygon points="200,20 300,30 200,40" stroke="black" stroke-width="1"/>
</svg>