white-space、word-break、word-wrap（overflow-wrap）估计是css里最基本却又容易让人迷惑的三个属性了，估计很多人都有把它们搞混或用错的经历。必须系统整理一下，今天我们就把这三个属性彻底搞清楚！ 可以看到，nbsp;和</br>可以正常发…

像素是屏幕显示最小的单位，在一个1080p的屏幕上，它的像素数量是1920 * 1080，即横边有1920个像素，而竖边为1080个。一个像素就是一个单位色块，是由rgba四个通道混合而成。对于一个1200万像素的相机镜头来说，它有1200万个感光单元，它能输出的最大图片分辨率…

在Web应用中，实现动画效果的方法比较多，Javascript 中可以通过定时器 setTimeout 来实现，css3 可以使用 transition 和 animation 来实现，html5 中的 canvas 也可以实现。除此之外，html5 还提供一个专门用于请求动画…

css3这个相信大家不陌生了，是个非常有趣，神奇的东西！有了css3，js都可以少写很多！我之前也写过关于css3的文章，也封装过css3的一些小动画。个人觉得css3不难，但是很难用得好，用得顺手，最近我也在过一遍css3的一些新特性（不是全部，是我在工作上常用的，或者觉得有…

BFC(Block Formatting Context)，中文翻译为“块格式化上下文”。它有一个明显的特性，那就是如果一个元素拥有了 BFC 特性，那么它内部元素不受外部元素的影响，外部元素也不会受其内部元素的影响。 先来看看 MDN 对 BFC 的解释。 好像也没具体的说什…

熟悉水平居中和垂直居中的方法, 不为别的, 就为用的时候能够信手拈来. 下面直接步入正题.原文：16种方法实现水平居中垂直居中 水平居中 1) 若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中. 2) 若是块级元素, 该元素设置 ma…

缺点：如果有文字出现，布局就会错乱，导致扩展性不好。 3、将未浮动的middle挤了下去。 此时lefe和right都跟着被拉回来了，左右空出了200px。所以用相对定位把left,right拉回来； 如果某一列内容过多，文字会溢出。解决方法：等高布局；

此方法不会存在 IE 6 中3像素的 BUG，但 .left 不可选择， 需要设置 .left {position: relative} 来提高层级。 注意此方法增加了不必要的 HTML 文本结构。 相当于right也开启了bfc，就不会被left的浮动影响到。 设置 over…

将父元素的width和height设置的和子元素的大小一样，然后设置父元素parent的padding。此时padding会将子元素挤进父元素的中间位置； 绝对定位盒子模型有个特点：left+right+width+padding+margin=包含块的宽度；所以此时可以将le…