两列自适应布局方案整理

2016-02-09
阅读 4 分钟
26.1k
前提本文讨论的是两列自适应布局:左列定宽/不定宽,右列自适应。虽然分这两种情况,但实际上不定宽的方案同样适用于定宽的场景,因此不定宽的方案泛用度更高。左列定宽,右列自适应margin + float {代码...} {代码...} 这个方法其实已经是兼顾到低版本IE的完善版本了,缺点是代码冗长,而且有两个关键知识点比较难理解...

水平、垂直居中布局方案整理

2016-02-06
阅读 3 分钟
8.7k
inline-block是个很特殊的属性,既有inline文本的特性,又有block布局的特性;因此,用上inline-block,既可以让div像文本一样居中(text-align: center;),又不会影响div本身的宽高。这个方案有个缺陷,就是由于在parent上设置了text-align: center,因此child里的元素都会继承这个text-align: center,需要重新设置个...

巧用margin/padding的百分比值实现高度自适应(多用于占位,避免闪烁)

2015-12-31
阅读 4 分钟
70.7k
本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说,left/right以父元素的width为参照物好理解,但是top/bottom为什么也是以父元素的width为参照物的呢?网上众说纷纭,关键还是看W3C的规范: