发布于

css3 新增的width配置

fill-available：自动充满剩余的空间

fit-content：根据元素内容自动收缩，保持水平的block状态

max-content：容器有多宽就有多宽，一般是内容会一行排下去不会换行

min-content：取容器内宽度最小的元素为宽度

发布于

CSS3 box-shadow

box-shadow 属性记录（IE9+）

box-shadow: x y blur spread color inset;

x:表示水平（即X轴）阴影的位置。正值使阴影出现在元素的右边，负值出现在元素的左边

y:表示垂直（即Y轴）阴影的位置。正值使阴影出现在元素的下边，负值出现在元素的上边

blur:模糊距离，通过将x,y设置为0，调大模糊距离可以实现四周阴影效果

spread:元素到阴影的距离，正值会让阴影向各个方向按照指定的数值延伸。负值会让阴影收缩得比元素本身尺寸更小，通过将x,y设置为0，调大距离可以实现四周阴影效果

color:颜色

inset：【inset/outset】内外阴影选择

发布于

IE浏览器兼容性标记

X-UA-Compatible 从IE8开始支持

content=”IE=8″ 代表当前IE浏览器以IE8的文档模式渲染；

content=”IE=EmulateIE8″ 如果网页开头带有 <!DOCTYPE> 标记，则模拟 IE8，否则则模拟IE5；

content=”IE=edge” 代表总是使用当前IE浏览器的最新版本；

content=”IE=edge,chrome=1″ 代表如果安装了 Google Chrome Frame （谷歌浏览器內嵌框架）则使用谷歌浏览器内核模式，否则使用最新的IE模式

 

发布于

typeof

用typeof可以检测出变量的基本数据类型[Number、String、Null、Undefined、Symbol、Boolean]，但是null的typeof返回是object

发布于

os.EOL 和path.sep

os.EOL是node在系统中换行的常量

  • \n 在 POSIX 系统上
  • \r\n 在 Windows系统上

参考地址：http://nodejs.cn/api/os.html#os_os_eol

path.sep是node在系统中的路径片段分隔符

  • Windows 上是 \
  • POSIX 上是 /

参考地址：http://nodejs.cn/api/path.html

发布于

React Portals

render() {
  return ReactDOM.createPortal(
    this.props.children,
    domNode, // 可以是任何的dom，而不是父组件的dom
  );
}
发布于

React Context(上下文)

如果组件多层嵌套，props就要进行层层手动传递，比较麻烦，为此可以使用Context；

最外层的父组件childContextTypes 和 getChildContext 来声明需要往下传递的context，其子组件只需要contextTypes 去访问他，必须要手动传递；

问题：如果某组件的shouldUpdate返回false那么context不会更新，因为context的更新是根据props和state的更新来决定getChildContext是否需要重新触发

参考文档：http://www.css88.com/react/docs/context.html

context不更新的解决办法：https://medium.com/@mweststrate/how-to-safely-use-react-context-b7e343eff076