<!DOCTYPE html>
<html lang="en">
<head>
??? <meta charset="UTF-8">
??? <meta http-equiv="X-UA-Compatible" content="IE=edge">
??? <meta name="viewport" content="width=device-width, initial-scale=1.0">
??? <title>Document</title>
</head>
<body>
??? <h1>一级标签</h1>
??? <h2>二级标签</h2>
??? <h3>三级标签</h3>
??? <h4>四级标签</h4>
??? <h5>五级标签</h5>
??? <h6>六级标签</h6>
??? <p>段落标签</p>
??? <img src="" alt="">图片标签,src地址,alt文本替代
??? <a href=""target="_blank"></a>href为跳转地址 target:_blank(另起一页)、_self(本页面)、规定在何处打开 action URL。
??? text-decoration: none;没有下划线
??? <i></i> <em></em>倾斜标签
??? <div></div> <span></span>区域,盒子标签
??? <strong></strong><b></b> 强调加粗标签
??? <br>换行标签
??? <table>表格
??????? cellspacing:设置单元格的距离
??????? cellpadding:设置内容到单元格距离
??????? colspan:在行里合并列
??????? rowspan:在列里合并行,之后删除多余行列
??????? <thead>表头
??????????? <tr>表行
??????????????? <th></th>表行头
??????????? </tr>
??????? </thead>
??????? <tbody>表身
??????????? <tr>
??????????????? <td></td>
??????????????? <td></td>
??????????? </tr>
??????? </tbody>
??? </table>
??? <ul>无序列表
??????? <li></li>
??????? 去掉li前面的项目符号(小圆点)
??????? list-style: none;
??? </ul>
??? <ol>有序列表
??????? <li></li>
??? </ol>
??? <dl>自定义列表
??????? <dt></dt>列表头
??????? <dd></dd>
??? </dl>
??? <form action=""> target:_blank(另起一页)、_self(本页面)、规定在何处打开 action URL。
??????? <input type="text">单行文本字段 value?? ?指定输入字段的初始值
??????? <input type="button">按钮
??????? <input type="checkbox">多选框 checked:checked ?? ?指定该属性的复选框,默认显示为勾选状态
??????? <input type="password">密码栏
??????? <input type="radio">单选按钮 name要一致
??????? <input type="reset">重置按钮
??????? <input type="submit">提交按钮
??????? <input type="textarea">多行文本字段
??????? <input type="file">选择文件
??????? <label for="nan">男</label>for ?? ?input单选按钮里id=nan ?? ?指定 label 将绑定另一个表单元素的 ID 属性值
??????? <select name="" id=""><option value=""></option><option value=""></option><option value=""></option></select>下拉列表
??? </form>
??? 表单元素属于行内块,两者之间默认有缝隙,只需将其浮动起来就可以
??? <font-family></font-family>字体类型
??? <font-size></font-size>字体大小px
??? <font-weight></font-weight>字体粗细700=bold normal=400;
??? <font-style></font-style>字体风格
??? font-style: italic倾斜 normal正常,多数让i,em标签不倾斜
??? 复合属性,简写方式 其他可以省略,font-size和font-family不可省
??? font: font-style font-weight font-size/font-height font-family
??? font: italic 700 16px 微软雅黑
??? 对齐文本 左(默认) 右 居中
??? text-align: left right center;
??? 装饰文本 给文本添加下划线 删除线 上划线
??? text-decoration: none(默认,没有装饰线) underline overline line-though
??? 文本缩进 首行缩进2em两个文字大小
??? text-indent:? 2em 20px;
??? 行间距 行高
??? line-height: 26px;
??? 行高等于盒子高度可以使文字居中对齐
??? 外部样式引入
??? <link rel="stylesheet" href="">
??? 后代选择器 元素1 元素2{样式声明}
??? div ul li
??? 子选择器 元素1>元素2{样式声明}只选择最近的一级子元素
??? ul>a
??? <ul>
??????? <li>
??????????? <a href=""></a>只选择这个子元素
??????? </li>
??????? <li>
??????????? <a href=""></a>
??????? </li>
??? </ul>
??? 并集选择器 元素1,元素2{样式声明} 喜欢竖着写
??? div,
??? p,
??? a{} div 和 p 和 a标签
??? 伪类选择器 用:表示,:hover :first-child?? 链接伪类 结构伪类
??? a:link? 选择所有未被访问的链接
??? a:visited 选择所有已被访问的链接
??? a:hover? 选择鼠标指针位于其上的链接
??? a:active 选择活动链接(鼠标按下未弹起的链接)
??? 按顺序写lvha
??? :focus伪类选择器 用于选取获得焦点的表单元素
??? 焦点就是光标
??? input:focus{
??????? background-color:yellow;
??? }
??? 元素显示模式转换
??? 转化为块级元素: display:block
??? 转化为行内元素: display:inline
??? 转化为行内块元素: display:inline-block
??? 背景图片
??? backgroud-image: url()
??? 背景平铺
??? background-repeat: repeat no-repeat repeat-x repeat-y
??? 背景图片位置
??? background-position: x y
??? background-position: center left (中上位置)? 精准位置(20px 50px) 混合位置(center 20px)
??? 背景图片固定
??? background-attachment: scroll(图像随对象内容滚动) | fixed(图像固定)
??? 背景属性复合写法
??? background: 背景颜色 背景图片地址 背景平铺 背景图片滚动 背景图片位置
??? 背景颜色半透明
??? background: rgba(0,0,0,0.3)取值范围在0-1
??? 盒子模型
??? 边框border
??? bordder-width: 50px 粗细
??? border-style: solid 实线 dashed 虚线 dotted 点线
??? border-color: pink 颜色
??? 边框简写 border: 1px solid pink
??? border-top: 上边框?? border-bottom: 下边框??? border-left: 左边框??? border-right: 右边框
??? border-collapse: collapse 合并相邻的边框
??? 内边距 padding
??? padding-left: 左内边距??? padding-right: 右内边距??? padding-top: 上内边距??? padding-bottom: 下内边距
??? 内边距复合写法
??? padding: 5px 上下左右内边距
??? padding: 2px 2px 上下 左右内边距
??? padding: 2px 3px 4px 上 左右 下内边距
??? padding: 2px 3px 4px 5px 上右下左内边距 顺时针
??? 外边距 margin
??? margin-left: 左外边距 margin-right: 右外边距 margin-top: 上外边距 margin-bottom: 下外边距
??? margin 简写方式与 padding 一样
??? 外边距可以让块级盒子水平居中(盒子必须有宽度 只要左右设为auto)
??? margin: 0 auto
??? 行内 行内块元素水平居中对齐
??? 给其父元素添加 text-align: center
??? 外边距合并-嵌套块元素塌陷解决方法:
??? (父元素和子元素都有外边距时)
??? 1. 可以给父元素定义上边框
??? 2.可以给父元素定义上内边距
??? 3.可以给父元素添加 overflow: hidden
??? 浮动的盒子不会有外边距合并的问题
??? 清除内外边距
??? (css第一行代码)
??? * {
??????? padding: o;
??????? margin: 0;
??? }
??? 圆角边框
??? border-radius: 10px ;(数值 或百分比)
??? 正方形盒子,数值改为高度的一半可变为园
??? 矩形,数值改为高度一半可为(__)
??? border-top-left-radius
??? border-top-right-radius
??? border-bottom-right-radius
???? border-bottom-left-adius
???? 盒子阴影
???? box-shadow: h-shadow v-shadow blur spread color inset;
???? h-shadow: 必须,水平阴影的位置,允许负值
???? v-shadow: 必须,垂直阴影的位置,允许复制
???? blur: 可选 模糊距离
???? spread: 可选 阴影的尺寸
???? color: 阴影的颜色
???? inset: 将外部阴影改为内部阴影
???? 鼠标经过盒子出现阴影
???? div:hover {
???????? box-shadow:
???? }
???? 文字阴影
???? text-shadow: h-shadow v-shadow blur color
???? 浮动(float)
???? 浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.
???? 清除浮动
???? 由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,
???? 本质:清除浮动元素造成的影响
???? 选择器 {
???????? clear: 属性值; (left 不允许左侧有浮动元素 right both )?????? ?
???? }
???? 清除浮动的策略是: 闭合浮动
???? 清除浮动的方法:
???? 1.额外标签法也称为隔墙法,是w3c推荐的做法
???? 在最后的浮动盒子后面添加一个新标签 (必须是块级元素,不能是行内元素)
???? 2.父级添加overflow属性
???? overflow: hidden ,auto 或 scroll
???? 但是溢出部分会隐藏
???? 3.父级添加 :after伪元素
???? 选择器(clearfix):after {
???????? content: "";
???????? display: block;
???????? height: 0;
???????? clear: both;
???????? visibility: hidden;
???? }
???? 选择器 {
???????? IE6 ,7 专有
???????? *zomm: 1;
???? }
???? 4.父级添加双伪元素
???? 选择器.clearfix:before,
???? .clearfix:after {
??????? content: "";
??????? display: table;?????? ?
???? }
???? .clearfix:after {
???????? clear: both;
???? }
???? .clearfix {
???????? *zoom: 1;
???? }
???? css 属性书写顺序
???? 布局定位属性
???? 自身属性
???? 文本属性
???? 其他属性
???? 导航栏 nav 制作
???? 实际开发中用 li 包含链接 a 的做法
???? css定位 position
???? 定位=定位模式 (指定一个元素在文档中的定位方式) + 边偏移 (决定该元素的最终位置)
???? static : 静态定位
???? 选择器 {
???????? position : static;
???? }???? 静态定位按照标准流特性摆放位置,没有边偏移
???? relative : 相对定位
???? 选择器 {
???????? position: relative;
???? }?? 1. 相对自己原来的位置来移动;
???????? 2.原来在标准的位置继续占有,后面的盒子仍然以标准流的方式对待它(不脱标,继续保留原来的位置)
??? ?
???? absolute : 绝对定位 是在元素移动位置的时候,相对于它祖先元素来说的
???? 选择器 {
???????? position: absolute;
???? }? 1.如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位
??????? 2.如果祖先元素有定位(相对 绝对 固定定位),则以最近一级有定位祖先元素为参考点移动位置
??????? 3.绝对定位不再占用原有的位置
??????? 子绝父相
???? fixed : 固定定位 是元素固定于浏览器可视区域的位置
???? 选择器 {
???????? position: fixed;
???? }? 1.以浏览器的可视窗口为参照点移动元素
??????? 跟父元素没有关系
??????? 不随滚动条滚动
??????? 2.固定定位不在占用原先的位置
??????? 固定定位也是脱标的,其实固定定位也可以看作一种特殊的绝对定位
??????? 固定定位小技巧: 固定在版心右侧位置
??????? 1. 让固定定位的盒子 left: 50%;走到浏览器可视区的一半位置
??????? 2.让固定定位的盒子 margin-left: 版心宽度的一半距离
??? 粘性定位 sticky
??????? 选择器 {
??????????? position: sticky;
??????? }?? 1.以浏览器的可视窗口为参照点移动元素(固定定位特点)
??????????? 2.粘性定位占有原先的位置(相对定位特点)
??????????? 3.必须添加 top left right bottom 其中一个才有效
???? 边偏移 : top bottom left right
???? 定位叠放次序 z-index
???? 选择器 {
???????? z-index: 1;
???? } 数值默认为 auto ,数值越大,盒子越靠上
????? 如果属性值相同,则按照书写顺序,后来居上
????? 数字后面不能加单位
????? 只有定位的盒子才有 z-index 属性
??? 绝对定位的盒子居中
??? 加了绝对定位的盒子不能通过 margin: 0 auto 水平居中
??? left: 50% 让盒子的左侧移动到父级元素的水平中心位置
??? margin-left: -100px; 让盒子向左移动自身宽度的一半
??? 定位特殊特性
??? 绝对定位固定定位也和浮动类似
??? 1.行内元素添加绝对定位或者固定定位,可以直接设置高度和宽度
??? 2.块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小
??? 3.脱标的盒子不会触发外边距塌陷
??? 4.绝对定位(固定定位)会完全压住盒子
????? 浮动元素不同,只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字
????? 但是绝对定位(固定定位)会压住下面标准流所有内容
????? 浮动之所以不会压住文字,因为浮动产生的目的最初是为了做文字环绕效果,文字会围绕浮动元素
???? ?
????? 一个盒子既有 left 属性又有 right 属性,则默认 left
????? 元素的显示和隐藏
????? 1.display : none;隐藏对象? block : 除了转化为块级元素,还有显示元素的作用
????? display 隐藏元素后不再占有原来的位置
????? 2.visibility : hidden 元素隐藏?? visible 元素可视
????? visibility 隐藏元素后,继续占有原来的位置
????? 3.overflow : visible : 默认显示
????????????????? hidden : 溢出的部分隐藏
????????????????? scroll : 溢出的部分显示滚动条,不溢出也显示滚动条
????????????????? auto : 在溢出的时候显示滚动条,不溢出不显示滚动条
??????? 如果有定位的盒子,慎用 overflow: hidden 因为它会隐藏多余的部分
??? 精灵图 sprites
??? 移动背景图片位置 background-position 一般情况下精灵图都是负值
??? 字体图标 iconfont
??? icomoon 阿里iconfont字库
??? @font-face{
??????? font-family: 'icomoon';
??????? src: url('../fonts/icomoon.eot?7kkyc2');
??????? src: url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
??????????? url('../fonts/icomoon.ttf?7kkyc2') format('truetype'),
??????????? url('../fonts/icomoon.woff?7kkyc2') format('woff'),
??????????? url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
??????? font-weight: normal;
??????? font-style: normal;
??????? }
??????? 三角制作
??????? 宽度和高度都为0,只给边框大小,transparent
??????? width: 0;
??????? height: 0;
??????? <!-- 为了照顾兼容性 -->
??????? line-height: 0;
??????? font-size: 0;
??????? border: 5px solid transparent;
??????? border-bottom-color: red;
??????? 鼠标样式 cursor
??????? li {cursor: pointer;}
??????? default: 小白 默认? pointer: 小手 move: 移动 text: 文本 not-allowed: 禁止
??????? 轮廓线 outline
??????? input {outline: none;} 去掉表单默认的蓝色边框
??????? 防止拖曳文本域 resize
??????? textarea {resize: none;}
??????? vertical-align : 用于设置图片或者表单(行内块元素)和文字垂直对齐
??????? vvertical: baseline? 默认元素放置在父元素的基线上
?????????????????? top? 把元素的顶端与行中最高元素的顶端对齐
?????????????????? middle? 把元素放置在父元素的中部
?????????????????? bottom? 把元素的顶端与行中最低元素的顶端对齐
??????? 解决图片底侧空白缝隙(图片是行内块元素会和文字的基线对齐)
??????? 1.给图片添加 vertical-align: middle top bottom 等
??????? 2.把图片转化为块级元素 display: block;
??????? 单行文字溢出省略号显示
??????? 1.先强制一行内显示文本
???????? white-space: nowrap;
??????? 2.超出部分隐藏
???????? overflow: hidden;
??????? 3.文字用省略号代替超出的部分
???????? text-overflow: ellipsis;
??????? 多行文字溢出省略号显示
??????? overflow: hidden;
??????? text-overflow: ellipsis;
??????? 弹性伸缩盒子模型显示
??????? display: -webkit-box;
??????? 限制在一个块元素显示的文本的行数
??????? -webkit-line-clamp: 2;
??????? 设置或检伸缩盒对象的子元素的排列方式
??????? -webkit-box-orient: vertical;
??????? 布局技巧
??????? 1.margin 负值运用
??????? margin-left: -1px;
??????? 让每个盒子 margin 往左侧移动 -1px 正好压住相邻盒子边框
??????? 鼠标经过某个盒子的时候,提高当前盒子的层级即可(如果没有定位,则加相对定位(保留位置),
??????? 如果有定位,则加 z-index )
??????? 2.文字围绕浮动元素
??????? 3.行内块巧妙运用
??????? 4.css三角强化
??????? (只保留右边边框)盒子宽度和高度都为0,把上边框宽度调大,颜色透明,左边框和下边框宽度设为0
??????? border-color: transparent red transparent transparent ;
??????? border-style: solid;
??????? border-width: 100px 50px 0 0 ;
??????? <header> 头部标签
??????? <nev> 导航栏标签
??????? <article> 内容标签
??????? <section> 定义文档某个区域
??????? <aside> 侧边栏标签
??????? <footer> 尾部标签
??????? <audio> 音频标签 mp3格式
??????????? <audio src=""></audio>
??????????? autoplay: autoplay 音频自动播放
??????????? controls: controls 向用户显示播放控件
??????????? loop: loop 循环播放
??????? <video> 视频标签 mp4格式
??????????? <video src="文本地址" controls="controls"></video>
??????????? autoplay: autoplay 视频自动播放
??????????? controls: controls 向用户显示播放控件
??????????? width height : 宽度 高度
??????????? loop: loop 循环播放
??????????? preload: auto(预先加载视频) none(不应加载视频)
??????????? poster: lmgurl 加载等待的画面图片
??????????? mutted: mutted 静音播放
??????? 新增 input 类型
??????? type= search: 搜索框 email: 输入email格式 url: 输入url类型 date: 日期类型 time: 时间类型
????????????? month: 月类型 week: 周类型 number: 数字类型 tel: 手机号码 color: 生成一个颜色选择表单
??????? 新增表单属性
??????? <input type="text" required="required">
??????? required: required; 内容不能为空
??????? placeholder: 提示文本; 表单的提示信息,默认值将不显示
??????? input::placeholder {color:pink;}
??????? autofocus: autofocus; 自动聚焦属性,页面加载完成自动聚焦到指定表单
??????? autocomplete: off/on; 默认已经打开,需要放在表单内,同时加上name属性,同时成功提交
??????? multiple: multiple; 可以多选文件提交
??????? 新增选择器
????????? 一.属性选择器
??????? 1.利用属性选择器可以不用借助类或id选择器
??????? input[value] {color:pink;}
??????? 2.属性选择器还可以选择属性=值的某些元素
??????? input[type=text] {color:pink;}
??????? 3.属性选择器可以选择属性值开头的某些元素
??????? div[class^=icon] {color:pink;}
??????? 4.属性选择器可以选择属性值结尾的某些元素
??????? div[class$=data] {color:pink;}
??????? ?
????????? 二.结构伪类选择器
??????? 选择li里面的第一个孩子
??????? ul li :first-child {background-color: pink;}
??????? 选择li里面的最后一个孩子
??????? ul li :last-child {background-color: pink;}
??????? 选择第n个孩子 n可以是数字,关键字和公式
???????????????????? n如果是数字,就是选择第n个子元素,里面从1开始
???????????????????? n可以是关键字: even 偶数, odd 奇数
???????????????????? n可以是公式:常见的公式如下(如果n是公式,则从0开始计算,但是第0个元素或者超出了元素的个数会被忽略,也就是选择全部
??????????????????????? 2n : 偶数; 2n+1 :奇数; 5n:5 10 15...; n+5:从第五个开始,包括第五个,到最后; -n+5 : 前5个,包括第五个 )
??????? ul li : nth-child(n) {background-color: pink;}
??????? ul li: nth-of-type {}
??????? nth-child: 会把所有的盒子都排列序号,执行的时候先看 nth-child(1) 之后回去看前面 div 不同则不能执行
??????? nth-of-type: nth-of-type会把指定元素盒子排列序号,执行的时候首先看div指定的元素,之后回去看 nth-of-type(1)
?????? ?
????????? 三.伪元素选择器 可以帮助我们利用css创建新标签元素,而不需要HTML标签,从而简化HTML结构
??????? ::before 在元素内部的前面插入内容
??????? ::after 在元素内部的前面插入内容
??????? before 和 after 创建一个元素,但是属于行内元素
??????? 新创建的这个元素在文档是找不到的,所有称为伪元素
??????? 语法: element::before {}
??????? before 和 after 必须有 content 属性
??????? before 在父元素内容的前面创建元素,after在父级元素的后面插入元素
??????? 伪元素选择器和标签选择器一样,权重为1
??????? 巧妙使用:伪元素字体图标 \e91e
?????? ?
??????? 伪元素清除浮动
??????? .clearfix::after {
??????????? content: "";
??????????? display: block;
??????????? height: 0;
??????????? clear: both;
??????????? visibility: hidden;
??????? }
??????? .clearfix::before,.clearfix::after {
??????????? content: "";
??????????? display: table;}
??????? .clearfix::after{
??????????? clear: both;
??????? }
??????? css3盒子模型
??????? 1.box-sizing: content-box 盒子大小为width + padding + border (以前默认的)
??????? 2.box-sizing: border-box 盒子大小为 width;
??????? 如果盒子模型我们为了改为了 box-sizing: border-box ,那padding 和 border 就不会撑开盒子了(前提 padding 和border不会超过width宽度)
??????? *{
??????????? padding: 0;
??????????? margin: 0;
??????????? box-sizing: border-box;
??????? }
??????? css3其他特性
??????? css3滤镜filter:
??????? filter: 函数();例如 blur(5px);blur模糊处理,小括号数值越大就越模糊
??????? calc()计算
??????? width: calc(100%-80px);
??????? css3过渡 transition
??????? transition: 要过渡的属性 花费的时间 运动曲线 何时开始
??????? 1.属性 : 想要变化的css属性,高度宽度 背景颜色 内外边距都可以 如果想要所有属性都变化过渡,写一个all就可以
??????? 2.花费时间 : 单位是秒 0.5s;
??????? 3.运动曲线: 默认是ease 低速到加速; linear: 匀速; steps(2): 指定时间函数中的间隔数量,步长
??????? 4.何时开始: 单位是秒 可以设置延迟触发时间 默认是 0s
??????? 谁过渡给谁加
??????? 网站TDK三大标签SEO优化
??????? title :网站标题 网站名-网站介绍; kyeword : 关键字; description :网站说明
??????? 2D转换 transform 可以实现元素的位移: translate,旋转: rotale,缩放: scale等效果
??????? 二维坐标系
??????? transform: translate(x,y);或者分开写
??????? transform: translateX(n);
??????? transform: translateY(n);
??????? translate:不会影响到其他元素的位置,translate中的百分比单位是相对于自身元素的translate:(50%,50%)
??????? 对行内标签没有效果
??????? 盒子垂直居中 {
??????????? position: absolute;
??????????? top: 50%;
??????????? left: 50%;
??????????? transform: translate(-50%,-50%);
??????? }
??????? 旋转 rotate
??????? transform: rotale(度数)
??????? rotale里面跟度数,单位是deg rotale(45deg);
??????? 角度为正时,顺时针;负时为逆时针;默认旋转的中心点是元素的中心点
??????? 2D转换之旋转rotate?? css3 三角制作 div:hover::after
??????? 2D转换中心点 transform-origin: x y; 空格隔开
??????? x y 默认转换的中心点是元素的中心点(50% 50%);还可以给x y 设置像素或者方位名词(top bottom left right center )
??????? 缩放scale
??????? transform: scale(1 ,1)长宽,里面写的是数字不跟单位,倍数的意思,等比例缩放scale(2);
??????? 不影响其他的盒子,还可以设置缩放的中心点transform-origin: left bottom
??????? 转换综合写法: transform: translate() rotate() scale()等 同时有位移和其他属性,需要把位移放在最前面;
??????? css3动画animation 可以实现更多变化,更多控制,自动播放
??????? 先定义动画,再使用动画 (可以做多个状态的变化)
??????? @keyframs 动画名称 { from? to相当与0%和100% (里面的百分比要是整数)
??????????? 0% {? 开始状态
??????????????? transform: translate(0,0);
??????????? }
??????????? 25% {
??????????????? transform: translate(100px,0);
??????????? }
??????????? 50% {
??????????????? transform: translate(0,100px);
??????????? }
??????????? 75% {
??????????????? transform: translate(100px,0);
??????????? }
??????????? 100% {? 结束状态
??????????????? transform: translate(0,0);
??????????? }
??????? }
??????? 调用动画 animation-name: 动画名称;
??????? 持续时间 animation-duration: 2s;
??????? 动画常用属性: @keyframs: 规定动画
???????????????????? animation: 所有属性的简写,除了 animation-play-state 属性;
???????????????????? animation-name: 规定动画的名称;
???????????????????? animation-duration: 规定动画完成的时间
???????????????????? animation-timing-function: 规定动画的速度曲线,默认是"ease"
???????????????????? animation-delay: 规定动画何时开始,默认为0
???????????????????? animation-iteration-count: 规定动画播放的次数,默认是1,还有infinite 无限循环
???????????????????? animation-direction: 规定动画是否在下一周期逆播放,默认是 normal,altemate逆播放
???????????????????? animation-play-state: 规定动画是否正在运行或暂停,默认是running,还有pause (经常和鼠标经过等其他配合)
???????????????????? animation-fill-mode: 规定动画结束后状态,保持forwards回到起始baskwards
??????? 动画简写: animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束状态,
??????? opacity: 阴影度
??????? 3D转换 三维坐标系
??????? z轴:垂直屏幕 y轴竖直向下 x轴水平向右 transform: translate3d(x,y,zpx);
??????? 透视 perspective: 500px
??????? 透视写在观察元素的父盒子上
??????? 3D旋转 rotate3d transform: rotate3d(x,y,zdeg);
??????? 3D呈现 transform-style: flat(默认子元素不开启3D立体空间); preserve(子元素开启3D立体空间)代码写给父级,但是影响的是子盒子
??????? 私有前缀: -moz: 代表firefox; -ms: ie浏览器; -webkit: safari chorm; -o-:opera
??????? 布局视口 layout viewport
??????? 视觉视口 visual viewport
??????? 理想视口 ideal viewport
??????? meta 视口标签
??????? <meta name="viewport" content="width=device-width,user-scalable=no,
??????? initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
??????? with: 宽度设置是viewport宽度,可以设置device-width特殊值
??????? initial-scale: 初始缩放比,大于0的数字
??????? maximum-scale: 最大缩放比,大于0的数字
??????? minimum-scale: 最小缩放比,大于0的数字
??????? user-scalable: 用户是否可以缩放, yes或no(1或0)
??????? 标准的viewport设置
??????? 视口宽度和设备保持一致,视口的默认缩放比例1.0,不允许用户自行缩放,最大允许的缩放比例1.0,最小允许的缩放比例1.0
??????? 二倍图
??????? 物理像素 & 物理像素比
??????? 多倍图
??????? 背景缩放 background-size: 图片宽度 图片高度(里面的单位可以是%,相对父盒子);
??????? cover: 完全覆盖div盒子; content: 把高度和宽度等比例拉伸,宽度或者高度到达盒子则不会继续拉伸会有空白部分
??????? css3初始化 normalize.css
??????? css3盒子模型: box-sizing: border-box;
??????? -webkit-box-sizing: border-box;
??????? 点击高亮我们需要清除 设置为transparent完成透明
??????? -webkit-tap-highlight-color: transparent;
??????? 在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式
??????? -webkit-apperance: none;
??????? 禁用长按页面时弹出菜单
??????? img,a {-webkit-touch-callout: none;}
??????? 移动端常见布局
??????? 单独制作移动端页面
??????? 1.流式布局(百分比布局)
??????? 通过设置盒子的宽度设置为百分比
??????? max-width: 最大宽度 min-width: 最小宽度
??????? body设置{ width: 100%; min-width: 320px; max-width: 640px;
??????????? margin: 0 auto; font-size: 14px; font-famiy: -apple-system, Helvetice, sans-serif ;
??????????? line-height: 1.5; color: #666;
??????? }
??????? 二倍精灵图做法
???????? 在firework里面把精灵图等比缩放为原来的一半,之后根据大小测量坐标,注意代码里面backgrund-size也要写:精灵图原来宽度的一半
??????? 焦点图制作
??????? 2.flex弹性布局 display: flex;
??????? 任何一个容器都可以指定为flex布局
??????? 当父盒子设为flex布局后,子元素的float clear 和veritical-align属性将失效
??????? 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
??????? 常见父项属性: flex-direction: 设置主轴的方向 x轴? row: 默认值从左到右 row-reverse: 从右到左
??????????????????????????????????? column: 从上到下 column-reverse: 从下到上
???????????????????? justify-content: 设置主轴上的子元素排列方式
???????????????????????????????????? flex-start: 默认值从头部开始 如果主轴是X轴,则从左到右
???????????????????????????????????? flex-end: 从尾部开始排列
???????????????????????????????????? center: 在主轴居中对齐(如果主轴是X轴则水平居中)
???????????????????????????????????? space-around: 平分剩余空间
???????????????????????????????????? space-between: 先两边贴边再平分剩余空间
???????????????????? flex-wrap: 设置子元素是否换行 nowrap不换行? wrap换行
??????????????????????????????? 默认子元素不换行,如果装不开,会缩小子元素大小
???????????????????? aligin-content: 设置侧轴上的子元素的排列方式(多行)
???????????????????????????????????? 子项出现换行的情况
???????????????????????????????????? flex-start: 默认值从头部开始 flex-end: 从尾部开始排列 center: 在侧轴中间显示 pace-around: 子项在侧轴平分剩余空间
???????????????????????????????????? space-between: 子项在侧轴先两边贴边再平分剩余空间 stretch: 设置子项元素高度平分父元素高度??????????????????????????? ?
???????????????????? aligin-items: 设置侧轴上的子元素排列方式(单行)
????????????????????????????????? flex-start: 从上到下 flex-end: 从下到上 center: 垂直居中 stretch: 拉伸,默认值
???????????????????? flex-flow: 复合属性,相当于同时设置了flex-direction和flex-wrap
??????? 常见子项属性: flex: 1 ;子项目占的份数 可以是%
???????????????????? aligin-self: flex-end;控制子项自己在侧轴的排列方式
???????????????????? order: -1;默认是0,属性定义子项的排列顺序(前后顺序) 越小越靠前?????????? ?
?????? ?
??????? 背景线性渐变 : background: linear-gradient(起始方向,颜色1,颜色2,...)
?必须添加浏览器私有前缀 background: -webkit-linear-gradient(left,red,bllue)
????????????????????? background: -webkit-linear-gradient(left,top,red,bllue)??????????????????????? ?
???????????????????? ?
??????? 3.less+rem+媒体查询布局
??????? rem单位 相对于html元素 字体大小来说的
??????? rem 可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制
??????? em单位是父元素字体大小
??????? 媒体查询 可以针对不同的屏幕尺寸设置不同的样式
??????? @media mediatype and|not|only(media feature){
??????????? css3-Code;
??????? }??? 用@media开头 注意@符号
???????????? mediatype 媒体类型? all: 用于所有设备; print: 用于打印机和打印机预览; scree: 用于电脑屏幕 平板电脑 智能手机等;?????????? ?
???????????? 关键字 and not only
???????????? media featurre 媒体特性 必须有小括号包含? width: 定义输出设备中页面可见区域的宽度 min-width max-width
??????? @madia scree and (max-width: 800px) {
??????????? body {
??????????????? background-color: pink;
??????????? }
??????? }? 在屏幕上 并且 最大宽度是 800px 设置想要的样式
??????????? 媒体查询可以根据不同屏幕尺寸在改变不同的样式
??????? @madia scree and (min-width: 500px) and (max-width: 900px){
??????????? body {
??????????????? background-color: purple;
??????????? }
??????? }
??????? 媒体查询+rem 实现元素动态大小变化 媒体查询最好的方法是从小到大
??????? 引入资源 根据屏幕不同大小调用不同样式
??????? <link rel="stylesheet" media="mediatype and|not|only (meida feature)" href="mystylesheet.css">
??????? 维护css弊端
??????? less使用 新建后缀名.less文件
??????? less变量 @变量名: 值; div{ background-color: @变量名 }
???????????????? 变量名必须有@为前缀,不能包含特殊符号,不能以数字开头,大小写敏感
??????? less编译 将.less文件编译成.css文件 vscode中easyless
??????? less嵌套 子元素的样式直接写在父元素里
???????????????? 如果有伪类,交集选择器,伪类选择器 内层选择器的前面要加 &? a{&::after }
??????? less运算 + - * /? 运算符左右两侧要空格隔开
???????????????? 两个数参与运算 如果只有一个数有单位则最后的结果就以这个单位为准??? ?
???????????????? 两个数参与运算 如果两个数都有单位则以第一个单位为准
?????? ?
??????? rem适配方案 less+ 媒体查询+ rem?? flexible.js + rem
??????? 动态设置html标签字体大小
??????? 1.首先选一套标准尺寸 750为准 2.用屏幕尺寸除以我们划分的份数 得到html里面的文字大小
??????? 但是我们知道不同屏幕下的文字大小是不一样的 3.页面元素的rem值=页面元素在750像素下的px值 / html里面的文字大小
??????? 将设置好的comon.less引入到index.less里面
??????? @import "common";
??????? 4.混合布局