09 2018 档案

Bootstrap4.x 新增
摘要：页面默认声明 （1）每个元素都声明了box-sizing属性 （2）全局字体未设置但推荐使用16px （3）body上声明了全局的font-family, line-height,text-align,bankground-color :#fff; 字体声明 采用了设备字体栈的模式，不同的设备采用不 阅读全文
posted @ 2018-09-23 20:12 CodingSherlock 阅读(698) 评论(0) 推荐(0)
CSS3学习笔记-动画
摘要：使用关键帧声明动画@keframes，单位只能是百分比 ，如0%，格式如下： 或应用如下方式设置动画 通过animation属性来调用动画 属性详解 animation-name 动画名@keyframes后面的自定义名字，可以用none来覆盖任何动画 animation-duration 动画播放 阅读全文
posted @ 2018-09-22 23:14 CodingSherlock 阅读(99) 评论(0) 推荐(0)
CSS3学习笔记-过渡
摘要：过渡函数ease-in等实际上是贝塞尔曲线的实现 过渡函数还有一个step()函数，用于把整个操作领域划分成同样大小的间隔 step()图解 简写，多属性逗号隔开 触发方式 （1）伪元素触发 :hover :active :checked :focus （2）媒体查询触发@media设置断点 （3） 阅读全文
posted @ 2018-09-22 22:14 CodingSherlock 阅读(119) 评论(0) 推荐(0)
CSS3学习笔记-响应式布局
摘要：三种设置方式 max-width 媒体类型小于或等于时应用 only用来指定特定的媒体，可以排除不支持媒体查询的浏览器 弹性图片 img {max-width:100%;} 设置断点 主要断点 大于1024px 小于768px 小于640px 小于480px 小于320px 阅读全文
posted @ 2018-09-21 19:06 CodingSherlock 阅读(118) 评论(0) 推荐(0)
CSS3学习笔记-变形
摘要：translate() 移动元素 接受标准度量单位 translateX | translateY | translateZ | translate3d scale() 变大变小 接受一个十进制数 scaleX | scaleY | scaleZ | scale3d rotate() 旋转 径向度量 阅读全文
posted @ 2018-09-21 16:25 CodingSherlock 阅读(125) 评论(0) 推荐(0)
CSS3学习笔记-渐变
摘要：渐变可以应用与任何使用背景图片的地方 底部向顶部 顶部向底部 从左到右 从右到左 从左下到右上 从右上到左下 从左上到右下 从右下到左上 多色渐变 自定义渐变 径向渐变 圆形渐变 椭圆渐变 靠左上角 阅读全文
posted @ 2018-09-21 14:40 CodingSherlock 阅读(108) 评论(0) 推荐(0)
CSS3学习笔记-技术提示
摘要：css书写过程中的优先级 （1）display 及相关声明； （2）position 及相关的声明； （3） margin、padding 和 border 及相关声明； （4）字体/文本相关声明； （5）装饰相关声明。 样式表中的顺序按照html中出现的顺序进行编写 根据情况来书写后备代码 腻子脚 阅读全文
posted @ 2018-09-17 19:30 CodingSherlock 阅读(130) 评论(0) 推荐(0)
CSS3学习笔记-界面组件
摘要：纵向菜单 tips: 设置a标签display:block填充整个li区域，同时在a标签上设置边距 横向菜单 （1）ul设置overflow:hidden 强制包裹浮动元素，li设置float:left左浮动，a标签设置display:block （2）ul设置inline-block,li设置fl 阅读全文
posted @ 2018-09-17 15:32 CodingSherlock 阅读(150) 评论(0) 推荐(0)
CSS3学习笔记-页面布局
摘要：多栏布局的三种实现方案 固定宽度，流动，弹性 原则上应该控制布局宽度，而让内容决定布局高度 固定宽度布局 解决设置margin,padding或border后元素宽度变宽的方法 （1）设置box-sizing属性为border-box。存在兼容性问题，可以使用腻子脚本ployfill来解决。 （2） 阅读全文
posted @ 2018-09-16 21:22 CodingSherlock 阅读(357) 评论(0) 推荐(0)
CSS3学习笔记-字体和文字
摘要：字体 字体族font-family 通常需要给处字体栈以适应不同机器间的适配，多单词字体需要用引号 serif和sans-serif是最保险的方法 字体大小 设置font-size:62.5% 1em=10px em单位的相对大小会逐层复合 rem 相对于根元素的字体大小，不支持ie8极其以下的浏览 阅读全文
posted @ 2018-09-16 14:34 CodingSherlock 阅读(297) 评论(0) 推荐(0)
CSS3学习笔记-元素定位
摘要：内边距 边框 外边距 border border三个属性 border-wdith 默认值medium border-style 默认值none border-color 默认值 black border-radius小于border-width,元素内角为直角，大于时，元素内角的半径为两个值的差 阅读全文
posted @ 2018-09-16 12:44 CodingSherlock 阅读(208) 评论(0) 推荐(0)
CSS3学习笔记-选择器
摘要：类选择器 class="className" .className 选取class为className的元素 p.chassName 选取p标签中class为className的元素 .className1.className2 选取同时拥有.className1和.className2的元素 id 阅读全文
posted @ 2018-09-16 08:58 CodingSherlock 阅读(120) 评论(0) 推荐(0)
ES6 Iterator for...of
摘要：区别 （1）传统for循环：语法不够简洁 （2）ES5 forEach循环：不能正确响应break，continue，return （3）for...in循环：为普通对象设计，不适于遍历数组 可遍历对象 实现了[Symbol.Interator]方法的对象，例如数组，绝大多数类数组（NodeList 阅读全文
posted @ 2018-09-06 21:37 CodingSherlock 阅读(88) 评论(0) 推荐(0)
ES6 proxy
摘要：基本概念 ECMAScript标准委员会定义了一个由14种内部方法组成的集合，亦即一个适用于所有对象的通用接口。而proxy的存在即是为了覆写这些内部方法。 代理方式： 注意： （1）用Proxy代理的对象调用方法中的this指向Proxy （2）Proxy.revocable方法能够取消代理，该方 阅读全文
posted @ 2018-09-03 12:46 CodingSherlock 阅读(97) 评论(0) 推荐(0)
ES6 Symbol
摘要：基本概念 JavaScript的第七种数据类型 注意点 （1）Symbol()中的参数是该Symbol的描述。传入对象时会自动调用toString()方法转换为字符串。 （2）Symbol()定义对象的属性时，需要用方括号设置或读取。.运算符后面总是字符串，而Symbol()类型不是字符串。 （3） 阅读全文
posted @ 2018-09-01 16:07 CodingSherlock 阅读(113) 评论(0) 推荐(0)
ES6 let const
摘要：相同点 （1）声明的变量作用域为块级作用域 （2）全局作用域下声明的变量不是全局对象的属性 （3）没有变量提升 （4）不能重复声明同一变量名 （5）形如for的循环在每次循环时为变量创建新的绑定，for in ，for of ,for 不同点 const声明的是一个只读的常量。声明后不能改变，这里的 阅读全文
posted @ 2018-09-01 11:00 CodingSherlock 阅读(89) 评论(0) 推荐(0)