摘要：问题： 在codepen上写了一个响应式页面，调试的时候没有问题。结果放到网站上，在手机上打开之后竟然和在电脑中的布局是一样的。 查阅资料之后知道响应式布局应该有这样一句话：<meta name="viewport" content="width=device-width,initial-scale 阅读全文

摘要：效果： 自动循环播放图片，下方有按钮可以切换到对应图片。 添加一个动画来实现图片切换。 鼠标停在图片上时，轮播停止，出现左右两个箭头，点击可以切换图片。 鼠标移开图片区域时，从当前位置继续轮播。 提供一个接口，可以设置轮播方向，是否循环，间隔时间。 点击查看demo 对HTML、CSS的要求： 必须 阅读全文

摘要：分析了两列自适应布局的实现思路后，会觉得三列自适应布局的实现原理其实和他一模一样，不过是多了一个盒子而已。 第一类，浮动在前： 方法一：float+margin 方法二：float+BFC 第二类，主要内容在前： 方法三：float+负边距+relative 这里和两列布局有些不同，在两列布局中，. 阅读全文

摘要：随便拿一个搜索引擎搜索一下“两列自适应布局”，都能得到很多种实现方法，这篇文章的重点是这些方法的底层逻辑是什么，他们是怎么得来的。 分析： 需要满足三个要求： ①两个盒子在同一行 ②右边的盒子需要占满剩下的空间 ③两个盒子不能重叠 这三个条件又分别有很多种实现方法（不考虑绝对定位）： 组合起来，会有 阅读全文

摘要：W3C规范在介绍margin时有这样一句话： Negative values for margin properties are allowed, but there may be implementation-specific limits. 于是，聪明的开发者们就发现了很多负边距的巧妙用法。 比 阅读全文