CSS动画

transition transition: property duration timing-function delay,property2...; 12//宽度 变化时间1s,背景颜色 变化时间0.5s 匀速变化 延迟1s执行transition: width 1s,background 0.5s linear 1s; transition用于设置元素样式改变时的过渡动画效果,是以下4项属性的简写 transition-property 属性名 transition-duration 过渡时间 transition-timing-function 过渡曲线 transition...

基线与vertical-algin

参考 eep dive CSS: font metrics, line-height and vertical-align vertical-align和line-height的关系 张鑫旭 em框(em square) 字符的em框大小受font-size影响,字符尺寸越大,em框越高. .baseline-0 span { background:#ccc; color: #555; } <p class="baseline-0"> <span style="font-family: Microsoft YaHei;fo...

CSS选择器

参考 选择器 MDN 选择器详解 MDN 优先级 MDN css属性选择器 结构 一个标准的CSS规则(rule)结构如下 body { color: yellow; margin: 40px; } 其由两部分组成,选择器(selector) 和声明块(declaration block)."声明块"由许多个"声明"(declaration)组成,写在"选择器"后,被一对大括号包裹. selector {declaration block}; 声明由"属性: 值"组成,这样的结构叫&q...

用Babel转换es6代码

Babel是个js编译工具,可以把es6语法转换成es5,从而兼容ie9/10. 参考 Babel 入门教程 阮一峰 怎样设置babel-polyfill babel 官网 babel 中文网 安装 本地安装(windows) #工程文件根目录下,用管理员模式执行 npm install --save-dev babel-cli babel-preset-env # Babel默认只转换语法,如果需要转义Array Promise之类的es6全局变量,需安装polyfill npm install --save-dev babel-polyfill 不建议全局安装,目前有些问题...

unicode字符处理

js的发布时间早于UTF,因此在unicode字符处理上,存在很多问题. 参考 Unicode与JavaScript详解 阮一峰 字符串的扩展 阮一峰 汉字 Unicode 编码范围 es6-features nicode String & RegExp Literal JavaScript has a Unicode problem chinese character regExp 什么是unicode Unicode是一种字符格式,包含世界上的所有字符. 其目的是为了解决传统字符编码的兼容问题,只要支持unicode,就能显示世界上的大部分语言. unicode字符的表...

负外边距的影响

元素外边距可以为零/正数/负数.我们可以设定外边距为负值,调整元素的位置. 特点 margin-left为负时向左移动,后面的元素也跟着移动 .box-1{width:250px; height:100px; border: 1px solid;} .child-1{float: left;background: #F4F4F5;height:100px;width:100px;} 行内元素也一样 .box-3{width:250px; height:100px; border: 1px solid;} .child-3{} ...

元素居中

参考 Centering in CSS: A Complete Guide position:absolute和margin:auto连用居中的原理 水平居中 行内(内联)元素水平居中 .box{text-align: center;} .box-1 {width:200px;border:1px solid;} inline element <style> .box-1 {width:200px;border:1px solid;} </style> <div class="box-1" styl...

块格式化上下文 BFC (Block Formatting Context)

BFC像一个箱子(一块独立的渲染区域),内部元素不受外部影响,拥有自己的渲染规则. 参考 CSS中的BFC规则 理解CSS中BFC 创建BFC 符合以下条件的元素会创建BFC 1 根元素 2 float: left | right 3 position: absolute | fixed 4 display:inline-block | table-cell | table-caption | flow-root 5 具有overflow属性,且值不为visible 6 column-span:all BFC规则 1 浮动元素参与容器高度计算 2 BFC 内部元素不受外部影响,反之...

清除inline-black元素间的缝隙

行内块元素间存在一定的空隙,可使用下列方法清除 1 删除两个元素标签间的空白符 <button>测试</button><button>测试</button> 测试测试 2 利用注释 <button>测试</button><!-- --><button>测试</button> 测试测试 3 设置容器属性 font-size: 0 <div style="font-size:0"> <button style="font-size:...

width: 100%相对于谁计算

当元素处于普通状态和拥有属性absolute时,其百分比宽度的计算的参照对象不相同. .box { width: 150px; height: 150px; background: yellow; border: 10px dashed black; position:relative; padding:10px; } .child { width: 100%; height: 100%; background: bl...