Some CSS

word-break 指定了怎样在单词内断行
normal | break-all | keep-all | break-word
white-space 用来设置如何处理元素中的空白
normal | pre | nowrap | pre-wrap | pre-line

white-space

div嵌套img时多出的空白怎么解决
造成原因：img是inline元素，默认是基线(baseline)对齐，所以会留出基线以下的空白

baseline位置

解决方法：vertical-align: bottom或将img标签变为块级元素。或者将img高度设置为100%。

css中禁止textarea拖动：textarea{resize:none;}

http://www.imooc.com/article/4849margin:合并

当元素的position为：absolute的时候，display：inline/inline-block都会变成block。

text-align：justify（两端对齐）只有在文字换行时起作用。

使背景图片居中且覆盖：bacground-position：center center；background-size：cover；

input聚焦时，取消默认边框：input：focus{outline：none}

************************************************************************

visibility：hidden；与diaplay：none的区别？

visibility:hidden

设置元素的visibility为hidden也是一种常用的隐藏元素的方法，和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排。

适用于那些元素隐藏后不希望页面布局会发生变化的场景

display：none

将元素设置为display:none后，元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。

关于元素隐藏：http://www.imooc.com/article/4849

************************************************************************

给background-image设置透明度

div{    position: relative;        }

div:after{    content: '';    display: block;    width: 100%;    height: 100%;    position: absolute;    top: 0;    right: 0;    bottom: 0;    left: 0;    background: url(...);    opacity: 0.5;}

给background-image设置模糊

div:after{    content: '';    display: block;    width: 100%;    height: 100%;    position: absolute;    top: 0;    right: 0;    bottom: 0;    left: 0;    background: url(...);    filter: blur(5px);}

给background-image设置位置大小

background-size：cover（把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中）

contain（把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。）

percentage（以父元素的百分比来设置背景图像的宽度和高度。）

length（设置背景图像的高度和宽度）

************************************************************************

pointer-events：none用户可以穿透div，点击被它挡住的div。

filter（滤镜）：blur（高斯模糊）、brightness（亮度）、对比度，饱和度等等；

给背景加模糊，也是用伪元素：：before或：：after；