html注释语法html语法标记/标签/元素：尖括号中的第一个单词- 双标签: 成对出现的标签，结束标签的后面一定要带 /- 单标签/空标记: 单独出现的标签,后面的/可带可不带属性：标签后面用空格隔开的单词，可以加单标签里也可以加双标签里面- 属性和属性值之间用 = 连接- 一个标签可以有多个属性，多个属性之间没有顺序的
文章类的标签文章的标题 h1-h6特点：双标签/h1-h6字体越来越小/加粗效果/自动换行段落 p特点：双标签/自动换行
文章类的标签文章的标题 h1-h6特点：双标签/h1-h6字体越来越小/加粗效果/自动换行段落 p特点：双标签/自动换行加粗 : b和strong的区别：语义上有区别，strong表强调 推荐使用strong特点：双标签/可以在同一行显示倾斜 i/em i和em的区别：语义上有区别 em表强调，推荐使用em特点：双标签/可以在同一行显示下划线 u/ins u和ins的区别：语义上有区别 ins表强调，推荐使用ins特点：双标签/可以在同一行显示删除线 del 特点：双标签/可以在同一行显示上标 sup下标 sub
强制换行 br 单标签水平线 hr 单标签特殊字符空格 版权符号© © 注册商标® ® 左尖括号< <右尖括号 > >
图片标签 img(重要) 单标签属性src:图片路径- 绝对路径a.直接讲线上的地址复制过来即可，但是如果图片被下架了，地址会失效- 相对路径a.如果你和你要找的人在同一个目录下面，且是平级的直接图片名.后缀就行b.如果你要找的人在某个文件夹下面的话，要先进去文件 文件名/ 表示进去c.如果自己和要找的人都被文件包裹的话，需要先出去 ../ 表示出一级width: 数值;图片宽度 像素px单位可加可不加height: 数值;图片高度 像素px单位可加可不加alt：图片没有加载出来的时候给用户的提示，提升用户体验title: 鼠标悬停到图片身上的时候的提示
超链接标签 a特点：双标签/自带颜色和下划线/鼠标样式为手型/可以在同一行显示属性href:跳转的地址target:窗口的打开方式- 自身窗口打开 _self- 新开窗口打开 _blank超链接的应用（地址的写法和图片路径的写法一样的） 1. 跳转在线网站 2. 跳转到本地的页面 3. 预览图片 4. 下载文件
表格标签
快速生成表格 table>tr行数>td列数 按下tab
表格 table
border="数字" 外层边框的粗细
bordercolor="颜色值" 边框的颜色
width="数值" 宽度
height="数值" 高度
align="left/center/right" 水平位置 左中右
bgcolor="颜色值" 背景色
cellspacing="数值" 单元格之间的间距
cellpadding="数值" 单元格内的填充
行 tr(调整整个一行)
align="left/center/right" 水平位置 左中右
valign="top/middle/bottom" 垂直位置 上中下
列 td(调整某个单元格)
align="left/center/right" 水平位置 左中右
valign="top/middle/bottom" 垂直位置 上中下
width="数值" 宽度
height="数值" 高度
colspan="合并单元格的个数" 列合并
rowspan="合并单元格的个数" 行合并
表格新增标签
标题标签 caption 直接居中
列标题标签 th td换成th即可 加粗且居中
行分组标签 a.表格结构倾斜 b.利于浏览器分批次解析
thead 表头 一般只有一组，将表格列标题对应的行放进去
tbody 表体 可以有多组，一般放表格内容区
tfoot 表尾 一般只有一组，将合计或者总计对应的行放进去
布局标签
区块标签 div
特点：双标签/自动换行
小文本 span
特点：双标签/可以在同一行显示
认识css htmlCSS(cascading style sheet):层叠样式表样式表- 行内(内联)样式表<标签 style="css属性1:css属性值1;css属性2:css属性值2;">常见的css样式宽度 width:数值px; 0可以不带单位高度 height:数值px;0可以不带单位字体颜色 color:颜色单词;背景色 background-color:颜色单词;
内部样式表注意：一般会把内部样式表放到head里面，先把样式加载出来，提前准备css语法选择器+多条声明选择器{css属性:css属性值; 声明css属性:css属性值; 声明css属性:css属性值}- 属性和属性值之间 : 连接- 一条声明结束后用 ; 结尾 最后一条声明; 可加可不加选择器(选择元素的一种方式)标签选择器 语法：标签名{} 通过标签名去选择
外部样式表- 在css文件夹内创建 文件名.css的文件，里面根据css语法写内容即可- 通过link引入外部样式表，link标签是单标签，一般放到head里面，也是让浏览器先加载样式link:关联外部样式表rel: 关联文件的属性 stylesheet: 样式表type: 关联的这个文件的类型，默认就是texts 所以type可有可无href: 关联的文件的路径
选择器
标签选择器 语法格式 标签名{}
id选择器 语法格式 #id名{}
- 起id名的时候，不能重复，类似于人的身份证号
class类选择器 语法格式 .class名{}
-
起class名的时候，可以重复的，类似于人的名字
-
如果多个标签的样式是一样的话，可以起一个相同的class名
-
一个标签可以同时拥有多个class名，多个之间用空格隔开
起id和class名规范
-
不要使用中文
-
不要用数字打头
-
名字一般和内容需要相关
通配符选择器
- {
margin: 0;
padding: 0;
}
列表属性
列表符号类型 list-style-type
-
disc 实心圆
-
square 实心方块
-
circle 空心圆
-
decimal 数字
-
upper-alpha大写字母 -lower-alpha 小写字母
-
upper-roman 大写罗马 lower-roman小写罗马
-
none 去掉列表符号 常用
列表符号的位置(不常用) list-style-position 一般要去掉，所以位置就无所谓了
-
outside 在li的外面
-
inside 在li的里面
列表图片(不常用) list-style-image:url(小图标的路径) 图片大小没法更改所以不常用
边框属性边框样式 border-style- solid 实线 - dashed 虚线- dotted 点状线- double 双实线边框粗细(宽度) border-width:数字px;边框颜色 border-color:颜色值;默认和字体颜色一样复合写法 border:[边框粗细] 边框样式 [边框颜色];- 没有顺序- 边框样式必须的单方向的边框 border-方向(top/right/bottom/left): [边框粗细] 边框样式 [边框颜色];border-方向:0/none;
背景属性
背景色 background-color:transparent(透明，背景色)/颜色值
背景图 background-image:url(背景图路径);
背景图重复 background-repeat:
repeat 默认重复
repeat-x 横向重复
repeat-y 纵向重复
no-repeat 不重复
背景图位置 background-position:水平 垂直;
-
数字px， 水平向右为正，反之，垂直向下为正，反之
-
关键字 水平：left/center/right 垂直：top/center/bottom
-
只写一个值，另外一个方向直接居中
背景属性复合写法
background:颜色 背景图路径 背景图重复 背景图位置 背景图固定;
- 没有顺序
img引入的图片和背景图引入的图片有啥区别
img引入的图占位置，背景图不占位置
背景图固定
background-attachment:scroll(滚动，默认值)/fixed(固定)
默认背景图会跟随滚动滚动，固定的话，图不动，外层区域和内容动
元素的显示模式(元素类型)
块级元素(div/p/h1-h6/ul
/ol/dt/dd/hr)
- 自动换行
- 可以设置宽高
- 块级元素一般会作为容器去包裹别的元素,但是p不可以包裹块级元素(自己也不行)
内联元素(span/a/b/i/em/u/ins/del/sup/sub)
- 可以在同一行显示
- 不可以设置宽高
- a标签有时候可以嵌套块级元素
内联块元素(img)
- 可以设置宽高
- 可以在同一行显示
伪类(某种状态)选择器
超链接的选择器:link{} 超链接没有访问之前的样式 只针对超链接，样式不生效的话，需要清除缓存
超链接的选择器:visited{} 超链接访问之后的样式 只针对超链接
元素:hover{} 鼠标滑过 针对所有的元素
元素:active{} 鼠标按下 针对所有的元素
注意：
-如果同时要给a加四种状态的话，需要根据 爱(love)恨(hate)法则的顺序添加，否则样式会错乱
- class(类)选择器和伪类选择器的权重值都是10
浮动属性
float:none(不浮动，默认值)/left(左浮动)/right(右浮动)
应用场景：让纵向排列的元素横向排列
特点：
1. 块级元素如果想要一左一右排的话，必须都加浮动，因为不加会独占一行
2. 浮动元素在父元素里面一行放不下的时候，会换到下一行
浮动的特点
1. 浮动加在内联元素身上，会让内联元素变块级元素
2. 浮动元素会脱离文档流，会遮挡住后面的元素，但是不会遮挡文字
- 清除浮动 clear:none/left/right/both 清除浮动元素给自己带来的影响
- 只对块级元素生效
认识盒模型
内容区(content): 1. 放内容的区域 2.内容区由宽高形成
内填充(padding):
值的设置
padding:数值px; 四周
padding:数值px 数值px; 上下 左右
padding:数值px 数值px 数值px;上 左右 下
padding:数值px 数值px 数值px 数值px; 顺时针
单方向填充
padding-left/right/top/bottom:数值px;
特点：
1. padding会把盒子撑大,如果不想被撑大，需要在原来的宽高的基础上减去对应方向的值
100
100+10=110
（100-10)+10=100
2. padding值不可以为负数
3. padding对内联元素来说，上下不准确，左右是正常的
4. 可以用来调整内容区的位置
页面概念
版心：浏览器放大或者缩小，永远处在水平居中的位置
通栏: 浏览器放大或者缩小，宽度永远和浏览器是一样宽页面板块常见布局
版心 设置margin:auto;板块居中
通栏 设置width:100%; 和浏览器一样宽 版心+通栏
盒模型组成
内容区(content)
内填充(padding) 会变大盒子
边框(border) 边框会撑大盒子
外边距(margin)
margin值的设置和padding值一样
特点
- margin不会撑大盒子的
- margin可以设置负数的
- 对内联元素上下不生效，左右正常
- 调整盒子和盒子之间的距离
margin的特殊情况
一、margin:auto; auto一个值,是四周，表示自动,只能实现块级元素的水平居中
二、margin的重叠：给上面的元素加下边距，给下面的元素加上边距的时候，边距会产生重叠，以最大值显示,左右会相加
三、margin的传递:给元素里面的第一个子元素，设置上外边距的时候，会错误的把外边距加在父元素身上，
- 用padding实现
- 给父元素设置边框
- 给父元素设置overflow:hidden;(溢出隐藏)
- 给该元素或者给父元素设置浮动
四、缩进属性对内联元素不生效
css属性继承：加在祖先元素身上的属性，可以作用到子元素身上
可以继承属性
- 字体类 font-size/font-weight/font-style/font-family/font-variant
- 文本类 color/text-align
ne-height/text-indent/letter-spacing/word-spacing
- 列表类 list-style-type
st-style-positio
st-style-image
st-style
不能继承
width/height/text-decoration/float/border/padding/margin/background/display
继承的权重值最低
- 通过祖先元素去改自己的本身的样式是改不掉的
- 超链接自带的颜色必须改自己才行，继承过来的覆盖不掉
-超链接自带的颜色必须改自己才行，继承父元素的覆盖不掉
溢出属性
overflow/overflow-x/overflox-y:
visible 溢出正常显示
hidden 溢出隐藏
scroll 溢出显示滚动条
auto 自动，溢出显示滚动条，不溢出正常显示
内联块/内联元素水平居中：在包裹其容器的身上，添加text-align:center;
块级元素水平居中：margin:auto;
伪元素选择器
第一个字符 只针对块级元素
:first-letter{} ::first-letter{}
第一行 只针对块级元素
:first-line{} ::first-line{}
给元素里面的前面添加内容，内联元素 content必须有
:before{
content:"内容"
}
::before{}
给元素里面的后面添加内容，内联元素 content必须有
:after{
content:"内容"
}
::after{}
高度解决方案
1. 给高度塌陷的元素设置overflow:hidden;(触发BFC)
优点：简单
缺点：会把溢出的部分隐藏掉
2.
a.在浮动元素的后面添加一个块级元素(clear只对块生效)
b.在该元素的身上设置清除浮动的属性clear:none/left/right/both
优点：没有功能上的问题，主要是代码质量问题
缺点：代码冗余(多余)
3.
完美清除法(伪元素选择器法)
利用cass类名可以有多组的特点 给需要解决高度塌陷的
元素设置一个共同的类名 clearfix，再结合伪元素选择器
.clear12‘fix::after{
content:""；
clear:both
display:block
}
BFC(Block Formatting Context):块级格式化上下文，页面中比较特殊的区域
触发条件
1. overflow:hidden/scroll/auto
2. float:left/right
3. display:inline-block/table-caption(表格标题)/table-cell(表格单元格)/flex(弹性盒)/inline-flex(内联弹性盒)
4. position:absolute(绝对定位)/fixed(固定定位)
特点
1. 在BFC区域内，浮动元素的高度会计算在内 主要解决高度塌陷
2. 在BFC区域内的元素不会影响到外面的元素 解决margin的bug
表单集(域)
form
action: 提交路径
method: GET/POST 提交方式
表单元素
文本输入框
密码输入框
单选框 单选需要起一个相同的name属性值
多选框
提交按钮
重置按钮
普通的按钮
下拉列表
选项1
html属性：
checked 默认选中
placeholder 提示信息
表单标签
围绕表单的边框区域
该表单区域的标题信息（套到fieldset里）
文件上传
多行文本域 css属性 resize:none 禁止用户拉伸所放
隐藏域
图片上传
普通按钮 按钮文字
表单属性
checked 默认选中
disabled 禁止选中
selected 下拉默认选中
value 默认值，页面中默认显示，值和后台相关
name 和后台对接的名
边框实现三角形（块级元素）
div{
width:0;height:0; 宽高设置为0
border:数值px solid transparent;四周透明
border-方向:数值px solid 颜色; 需要方向的边框留下
}
基线位置 vertical-align
baseline 基线位置
bottom 底线
middle 中线
top 顶线
解决图片底部留白的问题
img{display:block}
img{vertical-align:bottom/middle/top}
img{float:left}
给容器设置 font-size:0;
css图片整合(css sprite)/雪碧图/精灵图
必须使用背景图，且结合background-position属性使用
优点：
1. 减少图片的体积(大小)
2. 减少http的请求次数
缺点：
需要频繁的调整背景图的位置，比较麻烦
定位
position
static 默认值，静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
sticky 粘性定位
相对定位 position:relative
参考物: 元素本身的位置
移动方向和距离：left/right/top/bottom:数值px;可以为负数
eg：
跳跳 你站起来向前走100米
1. 从自己的位置站起来--对应元素本身位置
2. 向前--对应方向
3. 100米--对应距离
注意：
1. 如果left和right同时存在的话 左生效，右不生效
2. 如果top和bottom同时存在的话，上生效，左不生效
3. 方向一定要和定位结合使用，否则不生效
4. 移动之后，元素会占据原来的位置(不脱离文档流)
绝对定位 position:absolute;
参考物：有(1)定位属性的(position:relative/absolute)(2)祖先元素
1. 如果祖先元素都带了定位属性，找就近的带定位属性的结构
2. 如果祖先元素都没带定位属性，参考浏览器的第一屏窗口
移动方向和距离:left/right/top/bottom:数值px/数值%
绝对定位
参考物：有定位属性(position:relative/absolute/fixed)的祖先元素
子绝父相
eg:
跳跳 向前走100米，看哪个区域内有插小红旗
- 有插小红旗 ---对应有定位属性 position
- 向前--对应方向
- 100米--对应距离
特点
1. 脱离文档流会挡住后面的元素和里面的文字
2. margin:auto失效
3. 会让内联元素变块
4. 如果宽度不设置又设置了绝对定位，宽度是由内容撑开
宽高自适应回顾
块级元素宽度自适应
1. 不设置宽，宽跟随父元素
2. 设置百分数，宽参考父元素
内联元素宽度自适应
1.宽度由内容撑开
内联块宽度自适应
1. 设置了宽度就是设置的宽度
2. 不设置宽，由内容撑开
高度自适应
1. 高度不设置由内容撑开
2. 高度设置百分数，参考父元素
特殊情况
块级元素如果不设置宽度，正常是跟随父元素，但是如果加了浮动或者加了绝对定位，宽度由内容撑开
绝对定位 position:absolute;
参考物：有定位属性的祖先元素
- 如果祖先都带定位属性，参考最近的带有定位属性的结构
- 如果祖先都没带定位属性，参考浏览器的第一屏(初始包含块)
包含块：给定位元素提供参考系的区域
移动方向和距离：left/right/top/bottom:数值px/数值%;
特点
(1)脱离文档流,会遮挡住后面元素及文字
(2)会让内联元素变块
(3)margin:auto失效
(4)如果元素不设置宽度，又加了绝对定位，由内容撑开
(5)设置百分数参考参考物，不一定是父元素
应用：
元素的水平垂直居中1
div{
position:absolute;
left:50%; 移动到参考物的宽度中心的右侧
margin-left:-当前元素宽度的一半;向左拉取
top:50%; 移动到参考物的高度中心的下侧
margin-top:-当前元素高度的一半;向上拉取
}
元素的水平垂直居中2（值不一定是0，只要一样就可以实现居中）
div{
position:absolute;
left:0;right:0;
top:0;bottom:0;
margin:auto;
}
/*
二级菜单难点
1. 注意结构的位置 写到一级li的里面
2. 一级菜单会影响到二级菜单的样式，所以二级的样式要重新写
3. 二级菜单有时候需要位移，用绝对定位去移动，参考一级li
4. 二级菜单初始要隐藏，display:none;最后添加滑过一级让二级显示 display:block
*/
固定定位 position:fixed;
参考物：浏览器窗口
移动方向和距离：left/right/top/bottom:数值px/数值%
特点：
1. 脱离文档流，遮挡住后面的元素及文字
2. margin:auto会失效
3. 内联元素会变块
4. 不设置宽度，且加固定定位，宽度由内容撑开
粘性定位 position:sticky;
参考物：浏览器窗口
移动方向和距离：top:数值px;
特点：
在没达到设置的top值之前，类似于相对定位，占位置，达到top值之后，
类似于固定定位，不跟随滚动条滚动，一般设top:0;靠到浏览器顶部，实现吸顶效果
css3层级选择器
后代选择器 选择器 选择器{}
子代选择器 选择器>选择器{}
相邻的后面的兄弟选择器 选择器+选择器{}
相邻的后面的兄弟们选择器 选择器~选择器{}
css3属性选择器(权重值10)
[属性名]{} 属性名选择
[属性名="属性值"]{} 属性名和属性值匹配
[属性名^="值"]{} 属性值以该值打头
[属性名$="值"]{} 属性值以该值结尾
[属性名*="值"]{} 属性值中包含该值
伪元素选择器(权重是1)
元素::selection{} 鼠标选中文字 改变背景色和字体颜色
元素::placeholder{} 输入框中提示信息的文字样式
css3状态伪类选择器
表单元素:enabled{} 可编辑表单
表单元素:disabled{} 不可编辑的表单
表单元素:checked{} 单选或者多选被选中
表单元素:focus{} 鼠标获取表单焦点的时候
label 用来绑定单选或者多选的按钮 让点击文字的时候也可选中框
男 for的属性值为单选或者多选的id名
css3结构性伪类
带child的(子元素得是亲兄弟)
子元素:first-child{} 众多子元素的第一个
子元素:last-child{} 众多子元素的最后一个
子元素:nth-child(n){} 众多子元素的第几个 odd:奇数 even 偶数 也可以是数学表达式 (2n/3n这样)
子元素:nth-last-child(n){} 众多子元素的倒数第几个
带type的
子元素:first-of-type{} 众多子元素的第一个
子元素:last-of-type{} 众多子元素的最后一个
子元素:nth-of-type(n){} 众多子元素的第几个 odd:奇数 even 偶数 也可以是数学表达式 (2n/3n这样)
子元素:nth-last-of-type(n){} 众多子元素的倒数第几个
区别：如果子元素都是同一个的话，没有区别，不是同一个的话，child要看选择的孩子是第几个，括号中写几，type是看该类型的孩子总共是几个，然后再看是第几个
锚点:利用超链接和id名实现页面中不同板块的跳转
链接文字
板块
目标伪类：锚点跳转到该板块后，样式才生效
目标元素:target{}
权重问题
!important 无限大(一般使用较少，因为后期要覆盖的话比较麻烦，但是可以用来检测是不是因为权重所产生的样式不显示的问题)
行内 1000
id 100
class(类)/伪类(动态/状态/目标/结构性) 10
标签/伪元素 (::after ::before ::first-line) 1
通用 0
继承 最低
浏览器的私有前缀：因为css3属性刚出来的时候浏览器支持效果不理想，所以浏览器给需要显示在自己身上的属性的前面添加了属于自己浏览器的前缀，让其可以准确且完美的显示出来，目前大部分浏览器都支持，所以前缀其实不加也可以
谷歌浏览器 -webkit-
欧朋浏览器 -o-
ie浏览器 -ms-
火狐浏览器 -moz-
css3属性(id8及以下不支持)
边框圆角 border-radius:数值px/数值%
盒子阴影 box-shadow:水平偏移 垂直偏移 [模糊程度] [模糊大小] [模糊颜色] [阴影的位置inset(里面)]; 向右和向下为正
文字阴影 text-shadow:水平偏移 垂直偏移 [模糊程度] [模糊颜色];向右和向下为正
盒模型
标准盒模型 box-sizing:content-box;
总宽 = 内容区的宽width + padding的左右 + border的左右 + margin的左右
怪异盒模型 box-sizing:border-box;(如果盒子加完padding或者border后被撑大，可以使用该属性，会自动计算内容区的大小)
总宽 = width + margin的左右
过渡属性
transtion-property:属性名; 需要看到变化的属性
transition-duration: 数字s/ms 1s=1000ms 过渡执行的时间 必须
transition-delay: 数字s/ms 过渡延迟时间
transition-timing-function:linear(匀速)/ease(慢-快-慢)/ease-in(慢开)/ease-out(慢结束)/ease-in-out(慢开慢结束) 过渡执行效果
复合写法
transition: [需要看到变化的属性] 执行时间 [延迟时间] [执行效果]
- 没有顺序
- 只有一个时间代表执行时间
- 两个时间的话，第一个是执行时间，第二个是延迟时间
- 数值类/颜色 可以有缓慢 尤其是display不支持过渡
- 过渡加给变化的元素，加到原本元素是滑上去和离开都有过渡效果，加到hover里面是只有滑上去有效果，离开立马恢复
css3渐变属性
线性渐变
background-image/background:linear-gradient([方向,]颜色1,颜色2,颜色3~)
方向,默认向下 to bottom
- to top / to left /to right
- to left top/to right top/to left bottom/to right bottom
- 数值deg
重复性的线性渐变(将渐变范围限制后，在宽度或者高度区域重复出来)
background-image/background:repeat-gradient([方向,]颜色1 数值px,颜色2 数字px,颜色3~ 数字px)
eg：宽度上划分区间 0-宽度 0-30 纯色 30-40 渐变色 40-宽度 纯色
background-image: repeating-linear-gradient(to right,red 30px,yellow 40px);
径向渐变
background-image/background:radial-gradient([方向,]颜色1,颜色2,颜色3~)
方向和背景图位置一样设置
重复性的径向渐变
background-image/background:repeatging-radial-gradient([方向,]颜色1 数值px,颜色2 数字px,颜色3~ 数字px)
注意：设置径向渐变的方向的时候，如要在值的前面添加浏览器的前缀
2d和3d变形属性
变形位移{transforme对内联元素无效}
x轴位移 transform: translateX(数值px/%) 向右为正
y轴位移 transform: translateY(数值px/%) 向下为正
z轴位移 transform: translateZ(数值px/%) 向前为正
xy轴位移
transform:translateX(数值px/%) translateY(数值px/%)
transform:translate(x位移值,y位移值) 写一个值代表的的x轴位移
形成3d空间 transform-style:flat(2d平面)/preserve-3d(3d空间) 加在变形元素的父元素身上
xyz位移
transform:translateX(数值px/%) translateY(数值px/%) translateZ(数值px/%)
transform:translate3d(x,y,z) 三个值必须都在，没有位移就写0
位移实现元素的水平垂直居中1. 子元素宽高任意改变，可以自适应变化2. 子元素不设置宽高，也可以识别到50%
div{
position:absolute;
left:50%;top:50%;
transform:translate(-50%,-50%); 向上和向左位移当前元素宽高的一半
}
2d和3d变形旋转
x轴旋转 transform:rotateX(数值deg)
y轴旋转 transform:rotateY(数值deg)
z轴旋转 transform:rotateZ(数值deg)
景深 perspective:数值px; 值越大,距离越远，看到的越小 值越小，离得越近 越大，加到变形元素的父元素身上
变形原点 transform-origin:水平 垂直; 加到元素原本的身上，不要加hover里面
css3变形缩放
x轴缩放 transform:scaleX(数值) 1:不缩放 0:隐藏 0-1缩小 >1放大
y轴缩放 transform:scaleY(数值) 1:不缩放 0:隐藏 0-1缩小 >1放大
z轴缩放 transform:scaleZ(数值) 1:不缩放 0:隐藏 0-1缩小 >1放大
xy都缩放
transform:scaleX(数值) scaleY(数值)
transform:scale(x,y) 一个值代表x和y
xyz都缩放
transform:scaleX(数值) scaleY(数值) scaleZ(数值)
transform:scale3d(x,y,z)
css3变形旋转
xy都旋转 transform:rotateX() rotateY()
z轴旋转 transform:rotateZ()
transform:rotate()
xyz都旋转
transform:rotateX() rotateY() rotateZ()
transform:rotate3d(a,b,c,d) abc:0/1 0不旋转 1旋转 d:旋转度数
既位移，又旋转 用一个属性，设置两个值
transform:rotateY(60deg) translateX(300px); 旋转后坐标轴会改变，位移沿着新的坐标轴移动
transform:translateX(300px) rotateY(60deg)
css3变形倾斜 3d里面没有倾斜
x轴倾斜 transform:skewX(数值deg)
y轴倾斜 transform:skewY(数值deg)
xy都倾斜 transform:skewX(数值deg) skewY(数值deg)
css3动画属性
定义动画
@keyframes 动画名{
关键帧
from{}
to{}
}
@keyframes 动画名{
关键帧划分的是时间，告诉元素在啥样的时间干啥样的事
0%{}
20%{}
40%{}
60%{}
……
100%{}
}
使用动画
animation-name:动画名; 必须
animation-duration:数值s/ms 必须 动画执行时间
animation-delay:数值s/ms 动画延迟时间
animation-timing-function:linear 动画执行效果
animation-interation-count:数值/infinite(无限次)
animation-play-state:running(一直动)/paused(暂停)，一般结合hover使用，滑过的时候暂停
animation-fill-mode:backwards(默认结束后会回到开始的关键帧)/forwards(结束的关键帧);动画停留的关键帧
animation-direction: normal(0-100%.默认)/reverse(100%-0%)/alternate(0%-100%-0%) 动画执行的方向;
animation: 动画名 执行时间 [延迟时间] [执行效果] [次数] [停留的关键帧] [执行方向]
动画和过渡的区别
1. 动画可以不借助hover自己动起来
2. 动画可以无限次执行
3. 动画可以有多个状态，hover只有开始和结束两个状态
背景图属性
背景图大小 background-size:宽度 高度;
- 数值px/%
- cover 覆盖，背景图会不断放大，直到充满整个容器，可能会出现显示不全的情况
- contain 背景图会不断放大，碰到盒子边缘的时候会停止放大，可能会出现容器有留白的情况
复合写法：background: 颜色 路径 重复 位置/大小
背景图起始位置 background-origin
padding-box 默认从padding区域开始显示
border-box 从border区域开始显示
content-box 从内容区域开始显示
背景图裁切位置 background-clip
- content-box 从内容区外被裁切
- border-box 从边框区外被裁切
- padding-box 从padding区外被裁切
多背景
多张背景之间用,隔开 各自设置各自的属性
单位
px
%
em 1em=16px em跟随字体大小
rem 1rem=16px rem跟随根元素html的字体大小
vw viewport(视口宽) 1vw=1%的视口宽 100vw=视口宽
vh viewport(视口高) 1vw=1%的视口高 100vh=视口高
vw和百分数的区别
没有滚动条的时候，100%和100vw设置和浏览器一样宽的时候是一样的
有滚动条的时候，100vw会把滚动条宽度也算进去
css3弹性盒属性
父容器
形成弹性盒 display:flex
子项在主轴的位置 justify-content:
- flex-start 默认值，主轴起点
- flex-end 主轴终点
- center 主轴中心
- space-between 主轴两端
- space-around 中间是两端的2倍
- space-evenly 平均
子项在交叉轴的位置 align-items
- stretch 默认拉伸，交叉轴如果是竖着的，不设置高拉伸，横着的不设置宽拉伸
- flex-start 交叉轴起点
- flex-end 交叉轴终点
- center 交叉轴中心
换行 flex-wrap
- nowrap 不换行
- wrap 换行
- wrap-reverse 反向换行
多行/多列在交叉轴的位置 align-content
- stretch 不设高或者不设置宽，拉伸
- flex-start 交叉轴起点
- flex-end 交叉轴终点
- center 交叉轴中心
- space-between 交叉轴两端
- space-around 中间是两端的2倍
- space-evenly 平均
主轴方向 flex-direction
- row 从左到右
- row-reverse 从右到左
- column 从上到下
- column-reverse 从下到上
复合写法
flex-flow:换行 主轴方向;
子项
某个子项在交叉轴的位置 align-self
- stretch 不设高
- flex-start 交叉轴起点
- flex-end 交叉轴终点
- center 交叉轴中心
子项排序 order:0/数值 值越大越靠后，可以是负数
子项放大 flex-grow:0(默认 不放大)/数值
子项压缩 flex-shrink:1(默认 压缩) / 0(不压缩)
子项宽度 flex-basis:auto/数值px
flex:子项放大 子项压缩 子项宽度
一般设置flex:1/flex-grow:1;让子项放大
宽度自适应
- 不设置宽，和父元素一样宽
- 设置百分数，跟随父元素
max-width:数字px;最大宽，宽度可以无限跟随父元素，但是不能超过该值
min-width:数字px;最小宽，宽度可以无限跟随父元素变小，但是不能小于该值
高度自适应
- 不设置高 由内容撑开
- 设置百分数，参考父元素
max-height:数字px; 最大高 高度可以无限撑大，但是不能超出该值，内容依然会溢出，只不过盒子高度限制死了
min-height:数字px; 最小高 高度可以无限变小，但是不能低于该值
/* 强制换行 */
word-break: break-all;
viewport： 视口(移动端开发需要设置)
布局视口：css所作用的看不到的区域,一般大小为980
可视视口：能够看得到的区域
完美视口：布局视口的宽和可视视口的宽设置一样width=device-width
initial-scale=1.0 初始缩放 1:不缩放
user-scalable="yes“" 是否允许用户缩放
媒体查询外部样式的使用：根据不同的窗口大小 引入不同的css
浏览器的内核(解析代码的机制)
Trident 代表作 ie浏览器
Gecko 代表作 火狐
WebKit 代表作 苹果 & 谷歌旧版本
Blink 代表作 谷歌 & 欧鹏
透明度 rgba(0-255,0-255,0-255,0-1)
rgba和opacity的区别
1. rgba只透明背景色，opacity既透明背景又透明文字
opacity在ie8下不支持，但是ie提供了兼容(支持的)写法
ie的过滤器
filter:alpha(opacity=value) value的取值 1-100
1就是opacity的0 100是1 50就是0.5
