margin/padding-top/bottom 的百分比
2014-11-06 18:49
239 查看
margin/padding-top/bottom 的百分比之所以按照 width 计算,其实理由很简单,就是要匹配主要的 use cases。那就是——要构建在纵横两个方向上相同的 margin/padding。如果两个百分比的相对方式不同,那用百分比就无法得到垂直和水平一致的留白。
有人也许会问,为什么不是垂 直方向上的 height 而是水平方向的 width?这其实容易理解。因为 CSS 的基本模型是着重于“排版”的需求,因此水平和垂直方向其实并不是同等权重的,更精确的说,是文字书写方向决定的。常见的横排文字时,我们排版的出发点是 水平宽度一定,而垂直方向上是可以无限延展的。竖排文字则相反。所以在竖排文字时,margin/padding-* 其实就都按照 height 而不是 width 计算了。类似的且大家更熟悉的是 margin-top/bottom
在垂直方向上的 collapse(或者当竖排文字时是 margin-left/right 水平方向上的 collapse)。为什么只有垂直方向 collapse 而水平就不呢?因为在典型的排版中,段落间的空白进行 collapse 是常见和方便的。而反过来水平方向上就几乎没有那样的需求(只有表格在两个方向上有对称的 border collapse 的需求)。同样的,在排版中,横向百分比控制是常见的需求,但是纵向其实很少这样的需求。有这样需求的其实是GUI界面布局,布局和排版的区别在这个答案 (在
CSS 布局中,用 float 好还是用 position 好?分别有什么优势?)我也提到过。
至于说死循环问题,其实这不是根本原因。大家可以想想 width 为什么就不存在死循环了呢?
BTW, 在现代web应用中,其实我们有更多的纵向横向布局分割需求,这是传统的百分比不能很好满足的,所以CSS3实际上加入了 vw 和 vh 单位(相对于viewport的宽度和长度百分比),这比较好的解决了传统CSS中margin/padding的百分比所不能满足的那些需求。
有人也许会问,为什么不是垂 直方向上的 height 而是水平方向的 width?这其实容易理解。因为 CSS 的基本模型是着重于“排版”的需求,因此水平和垂直方向其实并不是同等权重的,更精确的说,是文字书写方向决定的。常见的横排文字时,我们排版的出发点是 水平宽度一定,而垂直方向上是可以无限延展的。竖排文字则相反。所以在竖排文字时,margin/padding-* 其实就都按照 height 而不是 width 计算了。类似的且大家更熟悉的是 margin-top/bottom
在垂直方向上的 collapse(或者当竖排文字时是 margin-left/right 水平方向上的 collapse)。为什么只有垂直方向 collapse 而水平就不呢?因为在典型的排版中,段落间的空白进行 collapse 是常见和方便的。而反过来水平方向上就几乎没有那样的需求(只有表格在两个方向上有对称的 border collapse 的需求)。同样的,在排版中,横向百分比控制是常见的需求,但是纵向其实很少这样的需求。有这样需求的其实是GUI界面布局,布局和排版的区别在这个答案 (在
CSS 布局中,用 float 好还是用 position 好?分别有什么优势?)我也提到过。
至于说死循环问题,其实这不是根本原因。大家可以想想 width 为什么就不存在死循环了呢?
BTW, 在现代web应用中,其实我们有更多的纵向横向布局分割需求,这是传统的百分比不能很好满足的,所以CSS3实际上加入了 vw 和 vh 单位(相对于viewport的宽度和长度百分比),这比较好的解决了传统CSS中margin/padding的百分比所不能满足的那些需求。
相关文章推荐
- margin-top/bottom(padding-top/bottom)百分比以祖级宽度计算
- css padding-top padding-bottom margin-top margin-bottom采用百分比时参照对象
- margin-top、padding-top的值是百分比该如何计算
- margin-padding-left-top百分比算法
- margin-left,margin-bottom,margin-top,padding,padding-bottom,border-bottom的说明
- 行内元素为何不能设置margin-top、margin-bottom;padding-top、padding-bottom值
- 在CSS中span标签设置padding-top/bottom以及margin-top/bottom无效的解决方法
- margin,padding,top,left,transform:translate(10%,10%)等使用百分比的时候参造物的问题
- padding-top的值用的是百分比,实际显示的不是父元素高度的百分比,而是宽度的百分比!margin-top同理
- margin-top、padding-top的值为百分比
- 利用margin-bottom和padding-bottom实现三列等高的原理详解
- 【CSS黑科技2】CSS百分比实现高度占位自适应(margin/padding)
- padding-bottom,margin-bottom,overflow实现高度自适应
- padding和margin设置百分比
- IE6IE7IE8(Q) 中元素的 'padding-top' 遇到 'clear' 特性在某些情况下复制到 'padding-bottom'
- padding-top、margin-top和top的区别
- CSS margin-top,margin-bottom 的理解和应用
- 当margin和padding的值是百分比时,应该如何计算的?
- CSS 百分比 margin & padding
- ie6 margin-bottom及padding失效,