H5
第二天
-
网页 = 结构【HTML】 + 样式【CSS】 + 交互【JavaScript】
HTML5：html的第5个版本 + 前端技术的总称
html:超文本标记语言
超文本：除去文字之外，还可以有图片/视频/音频/超链接等
标记：是一种标记符号，形如<b></b> -
项目开发流程
- 项目经理/产品经理 UI 前端 后端 测试 运维
- 出原型图 出psd图 实现图转代码 搭建数据库/写接口实现功能
- 项目经理/产品经理 - UI - 前端 - 后端 - 测试 -运维
W3C:万维网联盟。 是web领域最具权威的机构，一个中立的公益性组织。
xhtml:可扩展的html
-
命名规则
- 使用数字/字母/下划线，不能数字开头！
- 使用对应内容的英文命名。
- 推荐使用驼峰命名。 aboutUs
-
基本结构
-
新建一个.html为后缀的html文件
-
快速生成基本结构==> 英文状态下!+enter 或者 html:5 + enter
<!DOCTYPE html> 文档声明 <html> <head> <meta charset='UTF-8'> 设置编码的方式 <title>网页标题</title> </head> <body> 内容区域 </body> </html>
-
-
html语法
- <开始标记 属性=“属性值” 属性=“属性值”>内容</结束标记>
- 属性：是对标签进行细节描述的东西
-
常用的标签
-
基础标签
- 标题 h1~h6
- 段落 p
- 换行 br
- 水平线 hr
-
文本标签
-
变大 big
-
变小 small 【不能小于浏览器支持的最小字体】
-
加粗 strong | b
-
倾斜 em | i
-
上标 下标
-
H<sup>2</sup> X<sub>3</sub> -
下划线 u
-
删除线 del
-
-
特殊符号
- 大于小于 > <
- 版权 商标 © ®
- 大小 空格 &emsp  
-
第三天
-
图片
- <img src='‘图片路径’ alt=‘图片出错时显示的内容’ />
-
超链接
- <a href=‘跳转地址’ target=‘_self 当前窗口打开 _blank 新标签页打开’>被标记的内容</ a>
-
路径
- 绝对路径：从盘符或协议出发得到的路径
- 相对路径：从当前文件出发得到的路径
- 同级 上级 下级
- ./ …/ /
-
列表
- 无序列表：ul li
- 有序列表：ol li
- 自定义列表【了解】 – 商城的二级导航 + 图文列表：dl dt名词/术语 dd解释说明
-
.布局标签
- 排版过程中使用到的标签 或者
- 注意：他们不会对元素内容有任何外观改变
div独占一整行，span有多宽占据多宽
当要实现一行内容中有某些文字有特殊效果的时候使用span,其他时候使用div - 【面试题】
- 行级元素：有多宽占据多宽，不可以设置宽高等
- 块级元素：独占一整行，可以设置宽高等
-
表单：在页面中负责数据采集功能的
-
表单标签：负责数据提交的地址和方式
-
表单域：数据填入的部分
-
表单按钮：点击提交数据
-
表单域
- 文本输入框
- 密码输入框
- 单选输入框
- 注意：同一组的单选选项，必须有相同的name属性值哦！
- 复选输入框
-
表单按钮：事件的标识-可以是提交/重置/普通按钮
<button type='submit'>提交按钮</button>-
<button type='reset'>重置按钮</button> -
<button type='button'>普通按钮</button>
-
-
表单标签：负责数据提交的地址和方式
-
<form action='数据提交的地址' method='数据提交的方式可以是get或者post'> 表单域 表单按钮 </form>
-
-
-
第四天
-
CSS：在页面中负责样式设置的
-
css:层叠样式表
-
css3：最新版本
-
语法： 选择器{ 属性：属性值; 属性：属性值; } -
设置文字的颜色 color:颜色; 设置文字大小 font-size:*px;
-
-
css的三种引入方式
-
行内式
-
<元素 style=" 属性:属性值;属性:属性值; " >内容</元素>
-
给下面的p标签设置文字大小为50像素，颜色为pink
-
<p style=" font-size:50px;color:pink;"> 这是内联式的方式实现的样式</p>
-
-
内部式
-
<head> ...之前基本结构的代码 <style> 选择器{ 属性：属性值; 属性：属性值; } </style> </head> 给下面的p标签设置文字大小为50像素，颜色为pink <head> <style> p{ font-size:50px; color:pink; } </style> </head> <p>这是内部式的方式实现的样式</p>
-
-
外链式
-
新建一个.css为后缀的css文件
-
在对应的html页面的head标签里面，写一个link标签,然后写对应css文件的路径
<head> ..之前基本结构的代码 <link rel="stylesheet" href='css文件的路径'> </head> -
在css文件里面写css代码！
-
-
推荐使用方式3！！！
-
-
选择器：是一种匹配模式，主要用于匹配想要做样式的元素。
-
基础选择器
-
选中所有的元素 --通配符/通用选择器 *{ }
-
选中所有指定的标签 --标签选择器 标签名{ }
-
选中所有有指定类名的元素 --类选择器 .类名{ }
<p class='这里填的就是元素的类名'></p> -
选中有指定id名的元素 --id选择器 #id名{ }
<p id="id名" ></p> -
类名是可以重复的，id名必须唯一！ id的优先级大于类！
-
选中e和f --组合选择器/并列选择器/分组选择器 e,f{ }
-
-
层级选择器
- 选中e的后代f e f{ }
-
-
优先级：当样式冲突的时候，比较选择器的权重之和，和越大越优先。和一致，后者覆盖前者。
-
!important 行内样式【内联式】 id class 标签 * 无穷 1000 100 10 1 0 属性：属性值 !important;
-
第五天
-
盒子模型
-
概念：是一种思维模型，主要用于页面布局。
-
由尺寸 + 内边距 + 外边距 + 边框组成。
-
尺寸
- 设置宽度 width:*px | *%;
- 设置高度 height:*px | *%;
- 如果是百分比，代表是该元素的父元素宽高的百分比
-
边框
- 设置四边的边框 border:*px 线型 颜色;
- 设置上边的边框 border-top:*px 线型 颜色;
- 设置下边的边框 border-bottom:*px 线型 颜色;
- 设置左边的边框 border-left:*px 线型 颜色;
- 设置右边的边框 border-right:*px 线型 颜色;
- 边框的线型有： solid实线 dashed虚线 dotted点线 double双线
-
内边距：盒子边框和他里面的内容之间的间隔
- 设置四边的内边距padding:*px; padding的属性值可以是1-4个，多个值用空格隔开。对应规则是：上出发，顺时针。有缺省，取对边。
- 设置上边的内边距 padding-top:*px;
- 设置下边的内边距 padding-bottom:*px;
- 设置左边的内边距 padding-left:*px;
- 设置右边的内边距 padding-right:*px;
- 注意：padding会撑大盒子哦！如果要保证盒子大小不变，记得修改宽/高哦！
-
外边距：盒子边框和之外的元素之间的间隔
- 设置四边的外边距 margin:*px;margin的属性值可以是1-4个，多个值用空格隔开。对应规则是：上出发，顺时针。有缺省，取对边。
- 设置上边的外边距 margin-top:*px;
- 设置下边的外边距 margin-bottom:*px;
- 设置左边的外边距 margin-left:*px;
- 设置右边的外边距 margin-right:*px;
-
margin的问题–垂直方向
- 粘连问题-父随子动
- 使用padding实现间隔 【注意高度哦！】
- 给父元素添加一个透明的上边框 border:1px solid transparent;
- 给父元素设置overflow:hidden [将父元素搞到另一个世界了-所有将儿子/父亲搞到另一个世界的方式都可以解决该问题哦！]
- 塌陷问题
- 在一个元素身上设置足够的间隔！
- 粘连问题-父随子动
-
细节说明
-
1.清除所有元素自带的内外边距 *{ margin:0; padding:0; } 2.盒子水平居中 margin:0 auto; 盒子垂直居中需要计算，然后用内外边距做 3.注意：行级元素不能设置垂直方向的内外边距和尺寸哦！！！ -
浮动:是一个布局属性，主要用于实现一行多列效果。
-
语法： float:left | right | none; 注意：float：left是让元素排列在父元素的左边。 如果要保证所有子元素排成一行，必须保证子元素占据的宽度之和小于等于父元素的宽度。 浮动会让元素脱离文档流
-
-
第六天
一、文本相关属性
1.文字大小
font-size：*px| * em |*rem；
em：是基于父元素的文字大小的倍数
rem：是基于根元素html文字大小的倍数
2.文字颜色
color：颜色的英文|#16进制值
3.粗细
font-weight:100~900|normal|bold;
400代表正常normal
700代表加粗bold
4.文字类型-宋体/微软雅黑
font-family:"字体类型1"o,“字体类型2”，“字体类型三”,…
5.文字样式-是否倾斜
font-style：normal正常|italic倾斜|oblique倾斜
6.文本修饰线
text-decoration:none没有线|underline下划线|line-through贯穿线；
7.文本水平对齐
text-align:left|right|justify 两端对齐；
注意：两端对齐要多行才能看到效果
行级元素无效
8.文本首行缩进
text-index：* px|* em
注意：行级元素无效
9.行高
line-height：*px
（块级行级元素都可）调整行间距
应用：
1.单行文本垂直居中，对于多行文本应该用内外边距微调
2.多行文本调整行间距
10.英文大小写切换
text-transform：capitalize首字母大写|lowercase小写|uppercase大写
11.字间距
letter-spacing：*px；
12.词间距
word-spacing：*px；
二、列表
2.1列表样式
去掉列表样式 ： list-style:none
三、背景
3.1背景相关属性
1.背景颜色：background-color：颜色
2.背景图片：background-image：url（图片地址）
3.背景平铺：background-repeat：no-repeat不重复
4.背景图起始位置：background-position：x的坐标值 y的坐标值|可以使用方向英文：top ，bottom，center
5.背景图的大小： background-size：宽度 高度；
6.(非老师课堂所讲)background-attachment：设置图片是固定还是随着页面滚动条滚动
| scroll | 默认值，图片会随着页面其余部分的滚动而移动 |
|---|---|
| fixed | 当页面的其余部分滚动时，背景图不会移动 |
| inherit | 继承父级元素设置的background-attachedt属性 |
7.背景的复合属性：
background：颜色 url（图片路径） 平铺方式 起始位置 高度；
属性值可以有1~多个，顺序可以换
注意：多属性与单属性写法：先写多属性，再写单属性（单后，复前）否则结果不生效
四、继承
-
概念
-
具有上下级关系的元素之间，上级元素的样式被下级拥有，这个现象就是继承
文本和列表相关属性会被继承
-
如果要给a元素设置样式，必须选中a本人【a默认自带的下划线和颜色优先级高于继承】
-
-
单行文本溢出显示省略号【面试题】
-
步骤
-
设置宽度 width：*px;
-
强制不换行 white-space：nowrap；
white-space:nomal 保持正常 white-space：nowrap 强制不换行 white-space：pre 保留原格式 -
超出的内容隐藏 overflow：hidden；
overflow：visible 可见 overflow：hidden 隐藏 overflow：scroll 滚动条 overflow：auto 自动调整是否出现滚动条 -
文本超出的标识设置为省略号 text-overflow：ellipsis；
多行文本溢出使用js
text-overflow：ellipsis 省略号 text-overflow：clip 裁剪 -
文章列表实现
-
项目搭建+流程
-
css—reset.css：解决默认差异+解决bug
-
--------*.css：对应页面的css
-
images:放所有页面的图片
-
*.html:对应页面的html文件
- 常用的命名
首页：index 导航：nav 页头：header 轮播：banner 版心：是控制页面主要内容的盒子，是一个公共的元素，他<u>需要有固定的宽度和居中效果</u>（标题必备）
-
-
day08
-
元素的分类
- 常规分类
- 块级元素：独占一行，可以设置宽高等
- 行级元素：有多宽占据多宽，不可以设置宽高/垂直方向的内外边距
- 行内块元素：有多宽占据多宽。可以设置宽高（
)[行在块里面]
- 可变元素：根据周围的元素决定自己的类型
- 非常规分类
- 置换元素：浏览器需要解析新标签的属性与属性值，才能决定渲染什么效果。input button
- 非置换元素：不是置换就是非置换
- 常规分类
-
元素类型的转换
- 语法：
display：inline行级|block块级|inline-block行内块|none隐藏 display的默认值是inline，列表标签的默认值为list-item -
元素的嵌套规则
- 块级元素里面可以有任何元素
- p元素里面只能有行级元素
- 行级元素里面只能有行级元素
- a标签可以包块级元素
- ul/ol，li他们必须配套出现
-
动态伪类选择器
e:hover 鼠标悬停在e身上 e：hover f 鼠标悬停在e身上，给里面的后代f设置样式 a:link {color: red;} /* 未访问的链接状态,必须给a */ a:visited {color: green;} /* 已访问的链接状态,必须给a */ a:hover {color: blue;} /* 鼠标滑过链接状态,可以随便给 */ a:active {color: yellow;} /* 鼠标按下去时的状态,必须给a */ -
垂直对齐属性：只有行内块元素支持该属性！
- vertical-align：top|middle中间|bottom下方|baseline默认值基线【对齐方式。在上方，在中间，在下面，在默认基线上对齐】
- 解决图片3px问题【给图片设置该属性，属性值不能为baseline默认基线】
- 图片与文字垂直方向上的对齐设置
- 表单标签垂直对齐【input和button】
- 表格中内容垂直对齐的设置
day09
-
定位：让元素排列到指定位置，特指position属性
-
语法
position：定位方式; left:*px; right:*px; top:*px; bottom:*px; -
定位方式
-
static静态定位 默认
-
fixed 固定位， 需要设置宽高 参照物为浏览器可视化窗口
-
脱离文档流
-
盒子完全居中【面试题】
-
方案一
position:fixed; top:50%; margin-top:盒子高度的一半【负数】 left:50%; margin-left:盒子宽度的一半【负数】 -
方案二
position:fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto;
-
-
-
-
relative相对定位
1. 基于自身位置定位- 不脱离文档流 会和其他元素一起排位置 定位距离和margin类似 不过margin可以设置颜色 定位距离不可以是属于空的
-
absolute绝对定位
1. 当没有父元素或者父元素没有定位，参照物是浏览器窗口的第一屏 2. 有父元素且父元素有定位，参照物为父元素 3. 脱离文档流
-
-
img图片和背景图的选择
- 经常更换，数据从数据库来，需要使用img
- 页面结构部分，使用img
- 精灵图必须使用背景图
-
锚点链接
-
a标签和div配合使用
<a href="#xx"></ a> <div id="xx"></ div>
-
-
z轴上的堆叠层次
- z-index：数字；
- 每个元素的默认值为0，该属性值可正可负，大的覆盖小的
- 元素必须设置非静态定位
day10
-
透明
- opacity：0~1 0完全透明1完全不透明
- 低版本有兼容性问题 解决filter:alpha(opacity=0~100)
- 如果元素设置透明，元素的后代也必有透明属性，即使不设置也不行 会有
- 如果只是颜色透明 rgba(r,g,b,opacity)
-
自适应概念
-
对于不同屏幕的宽高/分辨率/设备，都能显示正常
-
宽度自适应
- 使用百分比
- 不设宽度
- 使用最大最小宽度
- min-width:*px;
- max-width:*px;
-
高度自适应
-
不设高度
-
如果子元素有浮动，会脱离文档流，造成高度塌陷
-
清除浮动
-
在浮动元素末添加一个块级元素 设置样式clear：both;
-
伪元素清除**【重点】**
clearfix:after{ content:''; display:block; clear:both; height:0; //解决兼容 } -
父元素添加overflow：hidden；
有缺陷，当元素内容过多可能会有东西被隐藏
在项目中，如果高度可能不固定的时候，就不要设置高度，如果写了浮动，就给对应的父类设置clearfix类名，清除浮动
-
-
-
使用·百分比
-
实现一屏页面，必须加
html，body{height：100% }
-
-
使用最大最小高度
min-height：*px； max-height：*px；
-
-
-
查错方式
day11
-
表格
-
table
- 属性
- border=‘边框线的粗’
- cellspacing =‘双线边框的距离’
- cellpadding=‘内容和边框的距离’
- 行tr 列td
- colspan 跨列
- rowspan跨行
- 属性
-
表格行分组标签
- thead
- tbody
- tfoot
-
列分组标签
- col
- colgroup
-
表格标题标签
- caption
-
表格其他属性
-
设置表格细边框
border-collapse:collapse
-
设置边框之间的间隔
- border-spacing：*px
-
设置表格按份额等分宽度
- table-layout：fixed；
- 必须要设置宽度属性才会生效
-
-
-
表单
-
表单标签：负责数据提交的地址和方式
-
表单域：数据填入的部分
-
表单按钮
<from action="" method=""> <input type="text|password|radio|checkbox" name="" placeholder=""> <button type="submit|reset">按钮的内容</ button> </ from> -
其他标签
<fieldset> 表单字段集 <legend>表单字段集的标题</ legend> </ filedset> -
label标签：改善用户鼠标体验
-
语法1
<input id="xxx"> <label for="xxx"> -
语法2
<label> <input> </ label>
-
-
<input type=" text password radio checkbox file hidden 隐藏域 "> -
下拉列表
<select name="city" id=""> <option selected>北京</ option> 默认选择selected <option value="">北京</ option> 优先提交value的值 没有才提交后面的 <option>北京</ option> <option>北京</ option> </ select> -
textarea 多行文本域
<textarea name="" id="" cols="30" rows="10"></textarea>
-
-
BFC
-
块格式化上下文，是一个独立区域，区域于区域之间不会互相影响
-
触发BFC
- 浮动
- 绝对定位/固定定位
- overflow的值不为visible的时候：auto/hidden/scroll
- display值为inline-block |flex|inline-flex
-
应用
-
清除浮动
-
解决margin的bug
-
实现两列自适应布局
- 左边设置固定宽高，加左浮动
- 右边不设置宽度度，加overflow：hidden；
-
上边固定 下边自适应
-
上边固定高度
-
下边设置position：absolute | fixed；
-
top:上边高度 bottom：0； left：0； right：0；
-
-
-
-
-
伪元素选择器
-
e:before | :after 在元素内容前后插入内容
-
提示文字样式
e::placeholder{} -
鼠标选中文字样式
e::selection{}伪元素和伪类的区别: 伪元素是一个假的元素，伪类是一种临时的状态，只有状态被触发的时候才会生效 伪元素使用双冒号，伪类使用单冒号
-
day12
-
标签语义化
- 概念：有意义的标签，见明知意思，提倡用正确的标签描述对应的内容
- 优点：代码具有可读性，方便SEO/更新、维护
结构化标签:
-
<header></ header> 页头 <main></ main> 主题 <footer></ footer> 页脚 <nav></ nav> 导航 <aside></ aside> 侧栏 <article></ article> 文章 <section></ section> 独立区域/节/块·
图文列表标签
-
<figure> <img /> <figcaption></ figcapion> </ figure>
高亮显示
<mark></ mark>就加了个背景色
标题组
-
<hgroup></ hgroup> -
<hgroup> 新闻中心 <small>SSSSSDA</ samll> </ hgroup>
对话框
-
<dialog open></ dialog> 加了open才可以显示 一个框框框住文字
画布
-
<canvas></ canvas> 以后有大用
音频
-
<audio src="" controls(显示控件) autoplay自动播放 preload="auto"(预备加载) loop(循环播放) poster="图片路径"(定义第一帧图片) ></ audio>
视频
-
<video src="" controls(显示控件) width="" height="" autoplay自动播放 preload="auto"(预备加载) loop(循环播放) poster="图片路径"(定义第一帧图片) > <source src="视频格式一"</ source> <souece src="视频格式二"</ source> [如果不加src属性， 就加到video上，加了就不用加] [按顺序播放] </ video>
媒体标签
-
<embed src='音频视频图片'></ embed> 自带controls 不可以设置细节 音频视频图片都不太使用这个
-
input新增的type属性
-
email url number range 滑块 year month week time datetime-local datetime
-
-
表单的新属性
-
novalidate 设置该表单的数据不验证 autocomplete 设置提示/类似于历史记录 输入提示历史类似信息出来 -
input 新属性 需要配合novalidate使用
required 必填字段 min/maxlength 最大最小长度 autofocus 自动获取焦点 disabled 禁用 readonly 设置只读 checked 选择框默认选中
-
-
表单新标签
-
数据列表
<input list ="关联数据列表id"> <datalist id=''> <option>1</ option> <option>2</ option> <option>3</ option> </ datalist>
-
day13
-
选择器
-
属性选择器
E[attr] 选择元素E且有属性attr E[attr='val'] 选择元素E且有属性attr='val' E[attr^='f'] 选择元素E且有属性attr且值为f开头 E[attr$='l'] 选择元素E且有属性attr且值为l结尾 -
结构伪类选择器
:first-child 选择第一个元素 :last-child 选择最后一个元素 :nth-child(n) 选择第n个元素 :nth-last-child(n) 选择倒数第n个元素 :only-child 父类只有一个子元素 选中那个子元素（ 用于场景判定） e:first-of-type 选择第一个e元素 e:last-of-type 选择最后一个e元素 e:nth-of-type(n) 选择第n个e元素 e:nth-last-of-type(n) 选择倒数第n个e元素 e:only-of-type 父类只有一个子元素e 选中那个e元素 :enpty 选择没有内容的元素 :root 选择根元素 就是给html做样式 -
UI状态伪类选择器
input:enabled{ 可用状态下的样式} 选中可用的 input:disabled{ 禁用状态下的样式} 选中禁用的 input:checked{ 选中状态下的样式} 选中被选中的 -
否定伪类选择器
e:not(f) e元素中排除f 例：e:not(:first-child){} 同时排除多个 取个类名nn 然后e:not(.nn) 将nn加到需要的 -
目标伪类选择器
e:target 选择器可用于选取当前活动的目标元素。(锚点链接跳转的区域) 使用该选择器来对页面中的某个e元素（该元素的id当做页面中的锚点链接来使用并成功跳转后）指定样式 -
层级选择器
e f 选中e的后代有f e>f 选中e的子代所有f e+f 选中e相邻的元素f 只选中f e~f 选中e后面的所有f
-
-
c3浏览器前缀
-
css处理兼容性问题，添加私有前缀【面试题】
代表性浏览器 欧鹏 IE 火狐 谷歌/safari 欧鹏和谷歌 内核 presto trident gecko webkit blink 前缀 -o- -ms- -moz- -webkit- -
软件开发的两种思想
- 优雅降级：一开始先针对高版本浏览器完成功能和效果，在针对低版本进行兼容性处理以保证实现基本功能
- 渐进增强：先针对低版本浏览器完成基本功能，在针对高版本进行效果/功能的添加
-
-
c3新属性
-
文字阴影
text-shadow:*px *px *px color，。。。 水平偏移 垂直偏移 模糊度 文字颜色 多个阴影用逗号隔开 -
盒子阴影
box-shadow:水平偏移 垂直偏移 模糊度 延伸半径 颜色 inset。 加inset为内阴影 不加为外阴影 -
圆角
border-radius：*px | *%; border-radius ：20px/30px; 如果反斜杠符号“/”存在，“/”前面的值是设置元素圆角的水平方向半径，“/”后面的值是设置元素圆角的垂直方向的半径； border-radius ：30px; 如果没有“/”，则元素圆角的水平和垂直方向的半径值相等 4个值 4个角水平垂直一样，8个值:水平(4)，垂直(4)
-
day14
-
渐变
-
背景渐变
-
设置普通渐变 background：liner-gradient(颜色1，颜色2，…)
-
设置方向渐变 background：liner-gradient(to 方向，颜色1，颜色2…)
-
设置对角渐变 background：liner-gradient(to 方向 方向，颜色1，颜色2…)
-
设置渐变角度 background：liner-gradient(*deg,颜色1，颜色2…)
-
设置渐变角度 background：liner-gradient(颜色1 *%，颜色 *%)
【如果比例一样，就是两个明确的颜色】
-
-
径向渐变
- 设置普通渐变 background：radial-gradient(颜色1，颜色2，…)
- 设置渐变图案 background：radial-gradient(circle，颜色1，颜色2…)【默认ellipse椭圆】
- 设置渐变比例 background：radial-gradient(颜色1 %，颜色2%，…)
-
重复渐变,必须设置比例（颜色1 *%，颜色 *%）
线性渐变和径向渐变都属于CSS背景属性中的背景图片（background-image）属性。有时候希望创建在一个元素的背景上重复的渐变“模式”。在没有重复渐变的属性之前，主要通过重复背景图像（使用background-repeat）创建线性重复渐变，但是没有创建重复的径向渐变的类似方式。幸运的是，CSS3通过repeating-linear-gradient和repeating-radial-gradient语法提供了补救方法，可以直接实现重复的渐变效果。 A、重复的线性渐变 repeating-linear-gradient() 函数用于重复线性渐变： B、重复的径向渐变 repeating-radial-gradient()函数用于重复径向渐变：
-
-
字体图标
-
自定义字体
1.定义字体 @font-face{ font-family:'自己给字体取名字'； src:url('对应字体路径')； } 2.使用字体 选择器{ font-family:'步骤1中自己定义的名字'； }
-
-
过渡
-
transition：渐渐改变的属性名 执行时间 延迟时间 变化曲线，渐渐改变的属性名 执行时间 延迟时间 变化曲线，。。。。。
说明：渐变属性可以写为all，代表所有的属性都简介改变
变化曲线linear线性为匀速 默认：慢快慢（ease）
-
注意：过渡必须要有触发
过渡只能针对属性值可以数字化的属性！display不能使用过渡
-
-
转换(变形)
-
位移：位置的移动
- transform:translate(x,y)
- transform:translateX(x)
- transform:translateY(y)
- transform:translateZ(z)
- transform:translate3d(x,y,z)
-
放缩(放大缩小):里面是尺寸数字，代表对应方向的倍数
- transform:scale(x,y)
- transform:scaleX(x)
- transform:scaleY(y)
- transform:scaleZ(z)
- transform:scale3d(x,y,z)
-
旋转：里面写旋转的角度 *deg
-
transform:rotateX(x) rotateY(Y)
-
transform:rotateX(x)
-
transform:rotateY(y)
-
transform:rotateZ(z)
-
transform:rotate3d(*deg，x,y,z)
[这里的xyz是写数字，代表前面角度的多少倍]
-
-
斜切【了解】
- transform:skew(*deg *deg)
- transform:skewX(*deg)
- transform:skewY(*deg)
day15
-
弹性盒子：一种新的布局模式，有能力控制子元素的排列
-
语法
-
display:flex（块级弹性盒子） | inline-flex（行内弹性盒子）
-
-
专业术语:
-
容器：被设置成弹性盒子的元素 项目：容器的子元素 主轴：项目排列方向所在的周 侧轴/交叉轴：与主轴垂直的轴
-
-
容器的属性
1.flex-direction: row/column row-reverse/column-reverse 设置主轴方向 2.flex-wrap:nowrap（默认）/wrap/wrap-reverse 设置项目是否换行 3.flex-flow:row nowrap(默认) 以上两个属性的复合属性 4.justify-content：flex-start(默认)/flex-end/center/space-between(中间的宽度是两边的2倍)/space-around/space-evenly(把剩余空间均分) 设置项目排列方式 5.align-items:flex-start/flex-end/center/baseline（基线，文字下方）/stretch(默认值，拉伸铺满) 设置在侧轴的对齐方式 6.align-content:flex-start | flex-end | center | space-between | space-around| space-evenly| stretch（默认值） align-content在侧轴上执行样式的时候，会把默认的间距给合并。 必须配合flex-wrap才可以生效 设置**侧轴**上的排列方式 单轴无效 -
项目属性
1、order属性 order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。可以给负数 ->放大 2、flex-grow属性（适合制作2栏或者3栏自适应的布局） flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。 ->缩小 3、flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。（适合移动端溢出出滚动条的效果，前提是利用弹性布局写） 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。 负值对该属性无效。 4、flex-basis ==（等价）width属性 flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。 ->234的复合属性 5、flex属性 flex:1; flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。 附：flex:1; 是flex:1 1 auto;但是在新版本的浏览器对应的是 1 1 0%；0%意味着当容器宽度不够时，改项目的宽度只有内容区域的大小 ->项目单独的对齐方式：以侧轴为基线 6、align-self属性 align-self: auto | flex-start | flex-end | center | baseline | stretch;
3. 注意：弹性盒子中float,clear,vertical-align都失效 -
day16
-
响应式
- 概念：能够根据屏幕尺/设备类型/分辨率，自动调整部局，实现一个比较正常的部局,一套代码，适配终端
- 原理：利用媒体查询
- 关键字：@media
-
移动端适配
-
设置移动端视口
-
物理像素/设备像素：屏幕自身决定
-
css像素/逻辑像素：css中使用的像素
-
设备像素比dpr = 物理像素/逻辑像素
-
需要设置视口
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 这段代码的几个参数解释： width = device-width：宽度等于当前设备的宽度 initial-scale： 初始的缩放比例（默认设置为1.0） minimum-scale：允许用户缩放到的最小比例（默认设置为1.0） maximum-scale：允许用户缩放到的最大比例（默认设置为1.0） user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
-
-
移动端适配
-
使用百分比布局（宽高使用百分比设置）
- 固定的布局例如导航可以使用
-
使用rem单位 + js实现
-
rem:html文字大小的倍数
-
约定750px的设备，html的文字大小为100px即1rem = 100px
-
设备尺寸/html的文字 = 750/100（利用750的屏幕推算出具体屏幕的大小设置）
-
应设html文字大小 = 设备的尺寸/7.5
-
页面转化rem html文字大小100（约定的值） 使用js文件进行窗口监视改变html文字大小 js文件也是根据1rem=100px的比例 -
实际实现
- 量到多少就设置多少
- 一键转换单位
-
使用vw和vh,视口宽度为100vw视高度为100vh
-
-
-
-
多列布局
- 设置列数 column-count:*;
- 设置列宽 column-width:*px;
- 设置列间隔 column-gap:*px;
- 4设置列边框 column-rule:*px线形颜色;
day17
-
动画
-
定义动画
@keyframs 动画名P{ 0%{} *%{} 100%{} } -
绑定动画
- animation：动画名 执行时间 延迟时间 变化曲线 执行次数 执行方向
ease- 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）linear- 规定从开始到结束的速度相同的动画ease-in- 规定慢速开始的动画ease-out- 规定慢速结束的动画ease-in-out- 指定开始和结束较慢的动画cubic-bezier(*n*,*n*,*n*,*n*)- 运行您在三次贝塞尔函数中定义自己的值- 指定元素播放动画的循环次数，其可以取值为数字，其默认值为“1”；infinite为无限次数循环。
- “alternate”，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放,默认为开始到结束
- 定义多个动画同为一个动画名一起播放使用分号隔开
- 动画的播放状态
- animation-play-state:paused | runing;暂停/开始 动画的属性
- 动画不能命名为 paused runing
- animation：动画名 执行时间 延迟时间 变化曲线 执行次数 执行方向
-
-
3d相关属性
-
设置3d模型
transform-style:preserve-3d | flat
-
设置形变基点
transform-origin： *px *px；| 方向英文 left right bottom top
-
景深
perspective: *px
-
背面是否可见
backface-visibility: visible | hadden
-
day18
-
三角形
- 实现一个宽高为0的盒子
- 设置四边边框有粗度且透明（transparent）
- 设置对应方向为对应颜色
-
粘性定位
position:sticky; top left- 介于静态定位和固定定位，父亲内容滚动时，当滚动到子类指定粘性定位位置时变为固定定位
-
盒子的标准模式和怪异模式
box-sizing:border-box 怪异 content-box 标准- 区别：模型宽高的计算规则不一样
- 标准：盒子实际宽度 = width+ pdding +border
- 怪异：盒子实际宽度 = width
- margin不计算在盒子宽高
-
常见的兼容性问题图片
- 图片3px问题
- 设置
vertical-align不为默认值就可以
- 设置
- 图片形状
cursor：hand 手（低版本） | pointer 新版的手型
- 图片3px问题
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
