1. position属性 与相对定位不同，绝对定位是脱离原文档流的，绝对定位的元素会寻找有定位的父（祖）元素作为参照物，然后相对这个参照物来偏移。如果所有父（祖）元素都没有设置position属性值为relative或者absolute则该元素最终将对body进行位置偏移 给…

经典的上-中-下布局。 在上-中-下布局的基础上，加了左侧定宽 sidebar。 左边是定宽 sidebar，右边是上-中-下布局。 还是上-中-下布局，区别是 header 固定在顶部，不会随着页面滚动。 左侧 sidebar 固定在左侧且与视窗同高，当内容超出视窗高度时，在…

这是笔者整理的个人在CSS3动画上遇到的问题，全部都是笔者个人的经验，以及解决方案，并不相信网上会有重复的文章。大家可以点进每个小栏目的codeplay去地直观feel一下。 常见错误一：动画做完就disappear了！喂喂喂！没让你消失啊。code play~ 这个应该是an…

在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。 边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。…

这几个 API 使用得当的话，可以提高你应用的友好性。 这些 API 的示例代码我已放在 github 上，感兴趣的可以 clone 代码到本地运行。望给个 star 支持一下。 1. 监听屏幕旋转变化接口: orientationchange 这个 API 可以将你手机是否横…

在这篇文章我会介绍 9 个使你的 CSS 更加简洁优雅的使用技巧。这些技巧小生经常使用，觉得挺高效实用，所以也就有了这篇文章。 正文现在开始。 1. 建议使用 padding 代替 margin 我们在设计稿还原的时候，padding 和 margin 两个是常用的属性，但我们…

img元素默认样式导致，因为行内元素默认的垂直对齐方式基准线baseline，使得字体下方会有空隙。 1. 给定div边框border: 1px solid #ccc;后如图，两张图片之间有3px空隙，图片下方也将div撑出3px空隙： 2. 给div固定宽度width: 20…

划重点，这是一道面试必考题，很多面试官都喜欢问这个问题，我就被问过好几次了 要实现上图的效果看似很简单，实则暗藏玄机，本文总结了一下CSS实现水平垂直居中的方式大概有下面这些，本文将逐一介绍一下，我将本文整理成了一个github仓库，欢迎大家star 仅居中元素定宽高适用 ab…

今天是520。 一句温柔的问候，一束美丽的鲜花，一段真情的告白。 但是作为一名与众不同的程序员，我们可不仅仅拥有上面的传情方法，别忘了每个人的手上可是都有其他人不具备的神奇技能，就是我们每天辛辛苦苦敲下的代码。 在这个特殊的日子，就用我们手中的魔法代码，来给你的她（他）制作出一…