CSS行高（line-height）及文本垂直居中原理

在CSS中，line-height 属性设置两段段文本之间的距离，也就是行高，如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了，比如下面的例子： Document div { width: 300px; height: 200px; border: 1px solid red; } sp

业界 2016年05月15日

（CSS） 带有右侧边栏的响应式页面的CSS样式

一、目的要创建一个响应式页面：右侧边栏为div.right-bottom，左侧内容为div.left-top。当窗口宽度大于700px时，随着窗口大小的变化，div.right-bottom的width与height固定不变，div.left-top的width与height自动调整。当窗口宽度小于700px时，上述div.left-top在上，div.right-bott

业界 2016年06月26日

CSS中的负边距

2015-04-22 时候写的老文，因为希望引用所以拿了出来。那天被一个同学问了一个问题，三列的div，要求父div的高度和三个div的高度都和三个中字数最多，也就是高度最高的那个一样高。试了试才发现确实有问题。在网上查到了解决方案，运用了一些很奇葩的代码，贴上来和大家分享。点击这里查看demo。之后仔细的百度了一下，发现了这么一个叫做内外补丁负值法的东西。不过百度内外补丁

技术开发 2016年07月03日

css实现div水平/垂直居中的N中方法

1、父div内部的所有子div水平居中// html 代码/*子元素纵向排列水平居中*/// css 代码.parent{ width: 400px; height: 600px; } .chil{ width: 120px; height: 120px; margin: 0 auto; }/*子元素横向排列且水平居中*///css代码.

业界 2016年07月01日

CSS3 3D变换之综合运用 - 3D bo

先上效果图吧点击'roll'按钮，会出现旋转的动画代码如下 div# camera{ width: 500px; height: 500px; outline: 1px solid black; margin:100px auto; position: relative; perspe

业界 2016年07月06日

JavaScript设计模式学习—单例模式

什么是单例模式简单点来说，单例模式就是确保某个类只有一个实例，并且最好只被创建过一次。对计算机来说，像打印机，线程池都是经典的单例模式。对于JavaScript所处的前端环境来说，像登录悬浮框，在整个页面中只会有一个，无论用户点击多少次，只会被创建一次。单例模式实现实例—登录框单例模式非常好理解，无非是办公室有个打印机，大家一起公用，没必要再每个人单独买一个了。所以按照这样

产品 2016年07月10日

css中的那些布局

因为最近心血来潮，就总结了一下css中的几种常见的多列布局。两列自适应布局两列自适应布局算是css布局里面最基础的一种布局了，不少网站在使用。这种布局通常是左侧固定，右边自适应，当然也有反过来的，道理一样，这里有好几种方法。 (张鑫旭老师的博客是左边流式布局，右边固定宽度）左浮动+margin 因为浮动会导致元素脱离文档流，所以下面的元素会占据浮动元素原来的位置。 这个时

业界 2016年07月18日