- 利用vscode编辑，Ctrl + N新建文件，保存为.html文件
- Ctrl + 加号键，Ctrl + 减号键可以放大缩小视图
- 生成页面骨架结构：输入！按下Tab键。
- 大文件夹为目录文件夹，大文件夹里的东西叫根目录
- css书写规范：
- 引入js：<script></script>
- 引入css：<link></link>、<style></style>
标签（上）
基础标签
- <h1>-<h6> 标题标签的内容只在一行显示，标签之外的内容下一行显示。
- 段落标签<p></p>；换行标签<br />（单标签）
加粗标签<strong></strong>或者<b></b>
倾斜标签<em></em>或者<i></i>
删除线<del></del>或者<s></s>
下划线<ins></ins>或者<u></u>
- 盒子分区：
<div>自己独占一行</div>；（大盒子）
<span>内容可以一行内显示</span>；（小盒子）
- 图像标签：
<img src="图像URL.jpg" />
alt ：替换文本，图像显示不出来的时候用文字替换
<img src="img.jpg" alt=“对图片的文字说明” />
title ：提示文本，鼠标放到图像上，有提示的文字跟着鼠标
<img src="img.jpg" alt=“对图片的文字说明”title="提示的文字" />
width：给图像设定宽度 height：给图像设定高度
<img src="img.jpg" alt=“对图片的文字说明”title="提示的文字" width="500" height="400" />
宽度和高度一般修改一个就可，避免一起修改出现压缩问题。
border：给图像设定边框
<img src="img.jpg" alt=“对图片的文字说明”title="提示的文字" width="500" height="400" border="15" />
相对绝对路径
相对路径：
同一级路径：图像文件位于HTML文件同一级 <img src="证件照.jpg" />
下一级路径/：图像文件位于HTML文件下一级 <img src="images/证件照.jpg" />
上一级路径../：图像文件位于HTML文件上一级 <img src="../证件照.jpg" />
绝对路径：图像文件在电脑中哪个位置或者图像在网络中的地址。（注意斜杆与相对路径不同）
超链接标签
外部链接 ：<a href="http://……">某网站名字</a> eg:<a href="http://qq.com">腾讯</a>
target：打开窗口的方式，默认值是 _self 即当前窗口打开页面；_blank 新窗口打开页面
<a href="http://www.qq.com" target="_blank">腾讯</a>
内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可，<a href="index.html">首页</a>. （链接到根目录里的网页）
空链接：当没有确定链接目标时，<a href="#">公司电话地址</a>.
下载链接：如果href里面地址是一个文件或者压缩包，点击会下载这个文件。
<a href="img.zip">下载文件</a>. 在网页中点开即下载。
网页元素链接：在网页中的各种网页元素在，如文本、图像、表格、音频、视频等都可以添加超链接
<a href="http://www.so.com" target="_blank"><img src="百度图标.jpg" /></a>
锚点链接：点击链接，可以快速定位到页面的某个位置。
- 在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第13集</a>.
- 找到目标位置标签，里面添加一个id属性=刚才的名字，如：<h3 id="two">第13集介绍</h3>.
注释和特殊字符
注释标签：便于程序员阅读和理解的文字，不显示在页面中。
注释<!-- 注释语句 --> ， 快捷键：ctrl + / 。
特殊字符：
- 空格符
- 小于号<
- 大于号>
标签（下）
表格标签
对齐方式 align：left 、center 、right
表格边框：border
内容和单元格之间的距离：cellpadding（像素值）
单元格之间的空白，默认2像素：cellspacing（一般为0比较好看）
可通过设置宽、高来调整单元格的大小：width、height
<table>（大框架）
<tr> （单元格）
<td>单元格内的文字</td> （单元格的内容）
……
</tr>
……
</table>
表头单元格：一般位于第一行，文字加粗居中显示。将<td></td>替换为<th></th>。
表格结构：表头<thead></thead>
表主体<tbody></tbody>
合并单元格：
- 跨行合并：rowspan="合并单元格的个数" 合并代码写在上侧
- 跨列合并：colspan="合并单元格的个数" 合并代码写在左侧
- 删除合并后多余的单元格
列表标签
无序列表：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
有序列表：
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
列表<ul>和<ol>里只能放<li>，但<li>里面啥都可以放。
自定义列表
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
表单标签
- 表单（收集用户信息）：表单域（区域）、表单控件（框框、按钮）、提示信息。
- 表单域：<form action="demo.php" method="POST" name="name1"></form>
- 表单控件：表单元素
<input type="属性值" />. input是个单标签
-
- type的属性值：
-
-
- text 文本框，用户可以在里面输入任何文字。 用户名：<input type="text" />.
- password 密码框，用户看不见输入的密码。 密码：<input type="password" />.
- radio 单选按钮，可以实现多选一。 性别：<input type="radio">
- checkbox 复选框，可以实现多选。 爱好：<input type="checkbox">
- submit 提交按钮，默认value值为“提交”。 <input type="submit" value="完成并提交" >
-
点击提交按钮，可以把表单域form里表单元素的值（已经填好）提交给后台服务器。
-
-
- reset 重置按钮，默认value值为“重置”。 <input type="reset" >
- button 普通按钮。（结合js使用） <input type="button" value="获取短信验证码" >
- file 文件域，上传文件使用。 上传头像：<input type="file" >，点击会跳出文件夹供选择。
-
-
- name：表单元素的名字，实现多选一。
-
-
- 单选按钮必须拥有相同的name值，才可以实现多选一。
-
密码：<input type="password" name="psw">
-
-
- 复选框也需要相同的name值。
-
-
- value：规定 input 元素的字符或者值。
- checked：单选按钮和复选框可以设置checked属性，页面打开可默认选中该按钮。
密码：<input type="password" name="psw" checked="checked">
-
- maxlength：规定输入字符的最大长度。
<label for="对应名称"></label>
用于绑定一个表单元素，当点击<label>标签时，浏览器会自动将光标转到对应的表单元素上，用来增加用户体验。
<label for="nan">男</label>
<input type="radio" name="sex" id="nan" />
<select>下拉列表，selected默认选项。
<form>
籍贯：
<select>
<option>广州<option>
<option selected="selected">深圳<option>
<option>揭阳<option>
</select>
</form>
<textarea></textarea>：文本域（特大号文本框）。
CSS
CSS语法规范
CSS由选择器以及一条或多条声明构成。在<head><style></style></head>之间。
h1 { color : red ; font-size : 25px ; } 以 ; 结尾
选择器(h1)是用于指定CSS样式的HTML标签，花括号是设置的具体样式。
CSS选择器
- 标签选择器：标签名作为选择器。
把某一类标签全部选出来，如所有的<div><span><p>等。（可以快速为页面中同类型标签统一设置样式）。
- 类选择器：.名称。（样式点定义，结构类(class)调用，开发类最多）
.yellow { color: pink; }
<div class="yellow">变成我喜欢的粉红色</div>
多类名：<div class="one two three"></div> 不同的名字用空格隔开。
- 可以把一些标签元素相同的样式（共同的部分）放到一个类里面；
- 这些标签可以调用这个公共的类，再调用自己独有的类；
- 从而节省CSS代码统一修改非常方便。
- id选择器：样式#定义，结构id调用，只能调用一次，别人切勿使用。
id选择器和类选择器最大的区别是：使用次数的不同，类选择器好比姓名，id选择器好比身份证号。
- 通配符选择器："*"来定义。
CSS文字属性：
字体：p { font-family="微软雅黑"; } Microsoft YaHei.
字号：body { font-size=16px; }
字体粗细：p { font-weight=normal /bold /bolder /lighter /700 ; }。
bold加粗=700；normal不加粗=400；（数字后面没有单位）
文字样式：p { font-style: normal /italic ; } 倾斜和不倾斜。一般是将斜体标签(em,i)改为不倾斜normal的字体.
复合属性：简写代码，顺序不能乱！属性之间用空格隔开。
font : font-style font-weight font-size/line-height font-family。
font : italic 700 16px 'Microsoft yahei'
其他属性不需要设置可以省略，但必须保留 font-size和 font-family属性，否则font属性将不起作用。
CSS文本属性：
- 文本颜色：color: 英文颜色、十六进制（最常用）、RGB代码。
- 对齐文本：text-align：只能设置水平对齐方式，默认左对齐。h1 { text-align=center/ right / left ; }
- 装饰文本：text-decoration：none默认/ underline下划线 / overline上划线 / line-through删除线。
- 文本缩进：text-indent首行缩进。可以用px或者em为单位，em是当前元素文字大小距离的单位，2em相当于两个字符的大小。p { text-indent: 2em; }
- 行间距：line-height 行与行之间的距离，测量行高：从上一行的最下沿量到下一行的最下沿即可，上下间距一样大的。 p { line-height: 26px; }
CSS引入方式
内部样式表（嵌入式）：写到html内部，将所有CSS代码单独放到一个<style>标签中。<style>一般放在<head>中，理论上也可以放在其他地方。
行内样式表：适用于修改简单样式，style是其属性。<p style="color: pink; font-size: 20px; ">阿里巴巴</p>。
外部样式表（使用最多）：单独建CSS文件，之后再引入HTML页面中使用。
在</head>之前引入CSS，<link rel="stylesheet" href="css文件路径">
chrome调试工具
在谷歌浏览器中打开网页，按F12键或右键查看。
调试：左边html右边css，将光标定到左上角小黑箭头可以定位到错误的文本，进行修改。
右侧css可以将光标定在需要修改的地方，按上下箭头进行放大和缩小像素值。改完之后复制到源代码进行粘贴，否则一刷新还是没变。
emmet语法生成html、css
父子级关系标签，可用>，比如 ul>li直接生成
<ul>
<li></li>
</ul>.
兄弟关系的标签，可用+，比如div+p直接生成
<div></div>
<p></p>
输入 .leibie 可直接生成div的类名称。<div class="leibie"></div>. 默认是div，也可以输入其他样式：
p.leibie 生成 <p class="leibie"></p>
p#one 生成 <p id="one"></p>
span.two 生成 <span class="two"></span>
h3#three 生成 <h3 id="three"></h3>
ul>li#four 生成 <ul> <li id="four"></li> </ul>.
大括号直接生成内容：div{文字}、Tab键。
div{今天学习emmet语法} tab生成<div>今天学习emmet语法</div>
.demo$*4生成<div class="demo1" class="demo2" class="demo3" class="demo4"></div> $是数字顺序（1，2，3，4…）
生成CSS样式：简写形式，简写第一个字母再Tab即可：
w200 tab 可以生成 width:200px;
lh26 tab 可以生成 line-height:26px;
tac生成 text-align: center;
tdn: text-decoration: none;
w : width;
h : height;
a{五彩缤纷}*3 即可生成3个链接
CSS复合选择器
后代选择器（重要）：
元素1 元素2 { 样式声明 }。元素1是父级，元素2是子级，中间用空格隔开。
ul li { color : pink; }即只改变ul里的 li 元素样式。
.leibie li a { 样式变化； } 即可修改类别为leibie的ul里的li的a。
子选择器（重要）：
只能选择亲儿子元素进行修改。 元素1>元素2{ 样式声明 }
<style>
div > p { 样式声明 } //即选择div里面所有最近一级 p 标签元素
</style>
并集选择器（重要）：
选择多组标签用于集体声明。
元素1，元素2，元素3 { 声明 }
伪类选择器（鼠标经过）：：hover、 ：first-child.
- 链接伪类选择器（按照LVHA顺序来写：lv包包hao）：
a : link { 样式 } /* 选择所有未被访问过的链接*/
a : visited { 样式 } /* 选择所有已被访问的链接 */
a : hover { 样式 } /* 选择鼠标指针经过的链接 */
a : active { 样式 } /* 选择活动链接（鼠标按下未弹起的链接） */
给链接指定样式要单独给 a 指定样式，给body指定样式链接不会变的。
实际开发（没有link visited active） ：
a { 样式 } 再写 a ：hover { 样式 } 。
- ：focus伪类选择器：
选取获得光标的表单元素。
input : focus {
background-color : yellow;
}
元素显示模式
块元素<div>：
- 比较霸道，自己独占一行。
- 宽、高、外边距及内边距都可以控制。
- 宽度默认是页面宽度
- 盒子里面可以放行内元素或者块元素。
注意：<p><h>里面不能放<div>
行内元素<span>：
- 一行可以显示多个。
- 宽、高设置无效。
- 默认宽度就是它内容本身的宽度。
- 行内元素不可以放块元素。
注意：链接不可以再放链接!
行内块元素<img /><input />：
- 一行内可以显示多个。
- 默认宽度就是它本身内容的宽度。
- 宽、高、外边距、内边距都可以控制。
元素模式转换：
加上 display : block; 即可将行内元素转换为块元素，也就是可以设置宽高。
加上 display : inline ; 即可将块元素转换为行内元素，不可设置宽高。
加上 display : inline-block; 即可将行内元素转换为块元素，也就是可以设置宽高。如在链接a里，设置链接的文字背景宽高等。
小技巧：
- CSS无法垂直居中，可以使 line-height 即间距等于高。
CSS的背景
背景颜色background-color : transparent（透明的）、color.
背景图片background-image : none默认，url ( 图片路径 ）。logo或者小图片都是用背景图片做。
背景平铺background-repeat : no-repeat 不平铺、repeat 平铺、repeat-x 横向平铺、repeat-y 纵向平铺。
背景图片会覆盖背景颜色。
背景图片位置background-position ：x y ;
-
- x y是 方位名词（left center right , top center button) 二者值与顺序无关，可以指定一个方位名词，另一个不写（默认居中）。
- 如果精确单位，则前者一定是x方向，后者是y方向。background-position : 20px 50px;
- 也可以混合使用 : background-position : 20px button ;
背景图像固定：视差滚动。background-attachment : fixed / scroll默认.
背景复合写法：顺序本无要求，但要规范。background : 背景颜色，背景图片地址，北京平铺，背景图像滚动，背景图像位置。
背景色半透明 background: rgba ( 0, 0, 0 , 0.3) 最后一个数在0-1之间，并且可以省略0，直接输 .3 .6 。
快速填充，shift+alt键+拖拽
CSS三大特性：层叠性、继承性、优先级
继承性：跟文字相关的样式可以继承，并不是啥都继承。
简化代码，子元素可以继承父元素的样式（text- , font- , line- 这些元素开头的可以继承，以及color属性）
优先级：继承或者* < 元素选择器 < 类选择器、伪类选择器、属性选择器< ID选择器 < 行内样式style < !important
一定要优先考虑使用样式规则的优先级来解决问题而不是 `!important`
盒子模型
边框border：
border-width：5px 边框的粗细
border-style ：soild 实线边框 dashed 虚线边框 dotted 点线边框
border-color：pink 边框颜色
简写复合写法：没有顺序
border：5px soild pink;
上边框：
border-top:5px soild pink;
下边框：
border-bottom:10px dashed purple;
合并相邻的边框：
border-collapse:collapse;
内边距（文字与边框的距离）
padding-top：上内边距
padding-bottom：下内边距
padding-left：左内边距
4种情况都要记住
如果不指定宽度和高度，padding值不会撑开盒子的大小
外边距（盒子之间的距离）
margin-top：上边距
margin-bottom：下边距
简写形式：与padding一致，可以写1234个参数
margin：30px
块级盒子水平居中
margin：0 auto
避免嵌套块元素垂直外边距塌陷问题：为父元素添加overflow:hidden BFC
清除网页默认内外边距：一般写在css第一行
* {
margin:0; // 清除外边距
padding:0; // 清除内边距
}
圆角边框
border-radius:30px
原理：即设置圆的半径，通过圆的半径来调节边角弧度。
两个参数：对角变化
盒子阴影
box-shadow:水平 垂直 模糊距离 阴影尺寸 颜色 内外阴影
box-shadow:10px 10px 10px -4px rgba(0,0,0,.3) inset外阴影不需要写
div:hover{
box-shadow:10px 10px 10px -4px rgba(0,0,0,.3)
}
文字阴影
text-shadow:50px 5px 3px -2px
浮动
标准流
标准流：标签按照规定好默认方式排序
块级元素独占一行，行内元素从左到右排序（span a i em)。
多个块级元素纵向排列找标准流，横向排列找浮动。
浮动的元素不会压住下面标准流的文字和图片，但会压住该盒子。文字环绕效果。
浮动
float:left right none
浮动元素的重要特性：
- 脱离标准普通流的控制，移动到指定位置（脱标）。
- 浮动的盒子不再保留原先的位置。
浮动不需要加display : inline-block，自动转换为行内块元素
清除浮动
由于父级盒子很多情况下，不方便给高度，但是盒子浮动又不占位置，最后父级高度为0，这个时候要清除浮动。
本质：清除浮动元素造成的影响。
语法：clear:both
- 额外标签法：隔墙法（少用）
在最后一个标签盒子的样式里添加：clear:both
最后一个新增的盒子必须是块级元素，不能是行内元素span等。
- 父级添加overflow
overflow:hidden;
- 伪元素法（大厂用得多）
.clearfix:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfox{
*zoom:1;
}
- 双伪元素法（小米，腾讯）
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}
ps切图
- 导出图层：图层菜单 --> 快速导出为PNG
- 合并图层：ctrl + e
- 使用cutterman切图，合并图层也可以。（窗口---扩展工具---cutterman）
transition属性
是个复合属性，包括以下几个子属性：
transition-property ：规定设置过渡效果的css属性名称，常用值 “all”全部css属性进行动画效果添加
transition-duration ：规定完成过渡效果需要多少秒或毫秒
transition-timing-function ：指定过渡函数，规定速度效果的速度曲线 常用值：关键字描述：linear ease-in ease-in-out
transition-delay ：指定开始出现的延迟时间
定位
定位 = 定位模式 + 边偏移
静态定位：{ position : static } 就是标准流，具有标准流的所有特性
相对定位：relative （自恋型）
{
position:relative; //定位模式
top:100px //边偏移
}
相对于自己原来的位置来移动（移动位置的时候参照自己原来的位置）；原来在标准流的位置继续占有，后面盒子任然以标准流的方式对待它（不脱标，继续保留原来的位置）
绝对定位：absolute
以祖级元素为准对齐，如果没有祖级元素或者父元素没有定位则以浏览器为准对齐。
{
position : absolute;
left : 0;
buttom : 0 ; //左下角
}
如果父级或者爷爷级有定位（绝对，相对，固定定位），则可以以父级或者爷爷级为准进行定位。
爸爸和爷爷都有定位，就近原则，爸爸。
.father {
position : relative
width : 300px;
height : 500px;
}
.son {
position : absolute;
left : 20px;
top : 30px;
}
绝对定位不占位置（脱标）
子绝父相
相对定位（不脱标） 占据位置
绝对定位（脱标） 不占据位置
固定定位fixed（重要）
position : fixed （脱标）跟绝对定位很像，元素相对于浏览器窗口来说是固定的，不会随着页面的滚动而改变位置。
定位叠放次序 z-index
{
z-index : 1;
}
数字越大，放在越上层。
而且必须是有定位的元素才可以加z-index。
行内元素添加绝对或者固定定位，可以直接设置高度宽度。
块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
绝对和固定地位会压住下面的文字和图片，但是浮动不会。
显示隐藏overflow
overflow : visible 默认不隐藏
overflow : hidden 不显示超过对象尺寸的内容，超出部分隐藏掉。清除浮动。
overflow : scroll 不管超出内容与否，总是显示滚动条
overflow : auto 超出自动显示滚动条，不超出不显示滚动条
CSS高级应用
精灵图
精灵图借助背景位置来实现：background-position
一般情况下精灵图都是负值，x 轴右边走是正值，左边走是负值。y 轴往上走是负值，往下走是正值。
background: url(images/sprites.png) no-repeat -155px -106px一般是负值
CSS三角
三角形：应用在类似于对话的框加上小三角，表示出处
div {
width: 0 ;
height: 0 ;
border: 50px solid transparent ; 50像素 实线 边框透明
border-left-color : pink 左侧边框颜色改为pink 此时是一个尖头指向右边的三角形。
}
cursor 鼠标样式
{ cursor : default } 小白
{ cursor : pointer } 小手
{ cursor : move } 移动（十字架）
{ cursor : text } 文本 工
{ cursor : not-allowed } 禁止
用户界面样式
表单轮廓线outline
input { outline : none; }
防止拖拽文本域：
textarea { resize : none }
vertical-align 属性
vertical-align: middle / bottom / top / basis
解决图片下方的小空白缝隙：
img { vertical-align : top / buttom /middle } 因为默认是基线对齐，所以有空隙
或者 display :
溢出文字省略号显示
强制文字一行显示，不允许换行：white-space:nowrap
超出部分隐藏：overflow:hidden
文字超出部分省略号代替：text-overflow:ellipsis
margin负值
{ margin-left : -1px } 边框与边框之间的边重叠
HTML5新增属性
多媒体视频：
<video src="media.mi.mp4" autoplay="autoplay" muted="muted" loop="loop" poster="media/1.png"></video>
自动播放、静音播放、循环播放、预先加载的图片
音频：
<audio autoplay="autoplay" controls="controls"></audio>
CSS新增属性选择器
<input type="text" name="" id="">
input[type=text]{
color:pink
}
div选择器中类名以icon开头的
div[class^=icon]{
color:red;
}
div选择器中类名以val结尾的{
div[class$=val]{
color : skyblue
}
CSS伪类选择器
ul li:first-child{ 第一个li
background-color:blue
}
ul li:last-child{ 最后一个li
background-color:purple
}
ul li:nth-child(3){ 第三个li
background-color:skyblue
}
ul li:nth-child(n){ 只能是n字母，相当于循环全选
background-color: #ccc
}
偶数
ul li:nth-child(even){ 偶数行
background-color: #ccc
}
ul li:nth-child(2n){ 相当于把偶数选出来了 等价于even
background-color: #ccc
}
奇数
ul li:nth-child(odd){ 奇数行
background-color: #ccc
}
ul li:nth-child(2n+1){ 相当于把奇数选出来了 等价于odd
background-color: #ccc
}
5 10 15 20
ul li:nth-child(5n){
background-color: #ccc
}
第5个开始
ul li:nth-child(n+5){
background-color: #ccc
}
CSS伪元素选择器（重点）
div: : before {
content: '我';
display: inline-block
width: 30px;
height: 50px;
}
div: : after {
content: '小猪佩奇';
}
<body>
<div>是</div>
</body>
// 我是小猪佩奇
.tudou::before{
content:'';
display:none;
position:absulute;
top:0;
left:0;
width:0;
height:0;
background:rgba(0,0,0,.4) url(images/arr.png) no-repeat center;
}
.tudou:hover::before{ //表示鼠标经过.todou这个类盒子时显示设置好的::before
display:block
}
CSS盒子border-sizing
当盒子的padding和margin值加在一起不超过盒子大小的时候，可以使用box-sizing来指定盒模型。
div {
box-sizing: border-box //盒子大小为width
// box-sizing: content-box 表示盒子width+padding+margin的大小
}
可以巧妙地在样式开头设置：
*{
maigin : 0;
padding : 0;
box-sizing : border-box;
//即默认该html文档的样式盒子都采用盒子大小的模式，放心加margin、padding值
}
滤镜模糊filter:blur(6px)
img {
filter : blur(5px);
}
img:hover {
filter : blur(0);
}
calc计算宽度
声明CSS属性值时执行一些计算
{
width : calc(100% - 30px)
}
可以使用+ - * /来进行计算。
CSS过渡transition
transition : 变化的属性 花费的时间 运动曲线 何时开始
div {
width : 200px;
height : 100px;
background-color : pink;
transition : width .5s ease 1s; 后面两个属性可以省略
}
div : hover {
width : 400px;
}
transition : all .5s ; 相当于把所有的属性都变了。（常用）
CSS 2D转换transform
translate
重点！特点：transform不会影响其他元素的位置。
div {
transform : translate(x,y)
// x就是x轴上移动位置，y是y轴上移动位置。
transform : translate(100px,60px);
transform : translateX(100px); // 表示只在x轴上移动，y轴上不移动。
transform : translateY(30px) ; // 表示只在y轴上移动，x轴上不移动。
}
transform中的百分比单位是相对于自身元素的
div {
transform : translateX (50%);
transform : translate(-50%,-50%); 水平垂直居中
}
translate对于行内元素是无效的。
旋转rotate
img {
transform: rotate(30deg) ;
// 即顺时针旋转30度，负值是逆时针
}
转换中心点transform-origin
transform-origin: x y ;
默认是：transform-origin: 50% 50%
切换到左下角：transform-origin: left buttom;
缩放scale
transform: scale(2); 放大
transform: scale(0.5); 缩小
transform: scale(2，1) 只放大宽度，高度不变
转换综合写法顺序
div {
width : 200px;
height : 200px;
background-color : skyblue;
transition : all .5s; 过渡
}
div : hover {
// 必须把位移放到最前面。 位移、旋转、放大，三者同时进行，边旋转变走变放大。
transform : translate(150px,50px) rotate(180reg) scale(1.2);
}
动画
@keyframes move { //move是自定义的名字
from { //0%
transform : translate (0,0);
}
to { //100%
transform : translate (1000px , 0);
}
}
div {
width : 200px ;
height : 300px;
background-color : skyblue;
animation-name : move;
animation-duration : 2s;
}
走一圈：关键帧，百分比就是总时间animation-duration的划分。
@keyframes movearound {
0%{
transform : translate ( 0,0 );
}
25% {
transform : translate ( 1000px, 0 );
}
50% {
transform : translate ( 1000px,500px );
}
75% {
tranaform : translate ( 0,500px );
}
100% {
transform : translate(0 ,0);
}
}
animation-iteration-count:infinite;循环播放。
综合写法：
animation : name duration timing-function delay iteration-count direction fill-mode;
暂停动画：
animation-play-state : paused; 经常和鼠标经过等其他配合使用。
速度曲线步长：step()
animation：name 4s step(10) forwards； 4秒内分为10步走。
写了step()就不需要写 ease/linear 等速度曲线了。
3D移动translate3d
transform:translate3d(0,100px,100px);
透视perspective
透视是模拟人的眼睛到屏幕的距离，单位是px，透视写在被观察元素的父元素上。
translateZ
写在子元素上，transform：translateZ(100)
3D旋转rotate()
transform：rotateX(-180deg); 结合动画 transition：all 1s
方向：左手准则。（手指方向为正值）
transform：rotateY(90deg);
方向：左手准则。
transform：rotateZ(360deg);
transform：rotate3d(x,y,z,deg) 少用。
3D呈现
transform-style : perserve-3d;开启3d，现在好像不用了。
less
less的使用
定义变量，起到全局作用，一个修改全部修改。
@color：deeppink;以@符开头，后面是自定义名称；
body {
background-color : @color;
}
区分大小写：@color 与 @Color 不同
@font14:14px;定义一个字体为14的变量；
a {
font-size : @font14 ;
}
easy less插件将less文件转化为css文件，<link>引入css进html即可。
less嵌套：
选择子元素：
.header {
width:200px;
height:100px;
background-color:pink;
a{
color : skyblue
& : hover {
color : blue;
}
}
}
在css文件中会自动选择:
.header a {
color : skyblue;
}
.header a:hover {
color : blue;
}
less运算
@border : 5px + 5;
div {
width : 100px + 50;
height : 300px + 20;
border : @border solid blue;
}
左右都要加空格，只需要加一个单位。
vm rem
相对单位：
1vw = 1/100视口宽度；
1rem = 1/10视口宽度；
视图宽度：375px;
盒子宽度100px；
换算为vm : width : 100/(375/100)；
350
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
