css中的百分比

萌发这篇文章名字的想法,是源自于在页面布局的过程中经常会使用到的一些css属性,看似熟悉,却又陌生。

css这东西真是,入门太简单,精通太难。指定尺寸时候的px、em、%、数字123,已经足够让人混乱了。,特别是%这个东西,相信很多做前端很久的人都不定清楚地知道css当中每个可以设置尺寸的属性当中,是相对于什么的百分比。这里做一下简单的归类解释。

我始终相信,基础知识真的很重要,看似牛逼复杂的布局,都是基础知识组合的结果。如果css和js基础不扎实,工具用的再溜也可能写的很蛋疼的代码。

说了一堆乱七八糟的,下面进入正题。

css当中常用属性的百分比:

width: 基于父元素的width
height: 基于父元素的height
margin(top, right, bottom, left): 基于父元素的width
padding(top, right, bottom, left): 基于父元素的width
left, top, right, bottom: 基于父元素的width, height, width, height
font-size: 基于继承得到的font-size
line-height: 基于当前字体的font-size
transform(left, top): 基于自身的left, top

上面这些都是我会经常用到的css属性的百分比。下面分别详细解释三个。以下例子皆是这种情况:父元素div1,嵌套一个子元素div2。

1. margin和padding

我想你已经发现一件很蛋疼的事情了,那就是margin和padding这两个鬼,不管你是写margin-top还是margin-left还是margin-right还是margin-bottom,都是基于父元素的width属性来设置的。比如当父元素div1的width等于20px,在给子元素div2的margin设置5%的时候,不管是上下左后,都会计算得到4px……这真是个蛋疼的东西,相信学习css的人都会遇到过信心满满地写margin-top:50%想实现垂直居中的效果,没想到顶距却是宽度的50%。。。

2. height

可以给子元素div2的height设置50%,会基于父元素div1的height来计算。但是注意了,必须是父元素div1显示地在css里面写上height等于多少多少,如果没写,那么父元素div1的高度就是自动撑开的,那么子元素div2里面height的50%将不会有任何效果。

然而width就不用,任何时候给div2的width设置50%,都会生效。

3. transform

上面的最后一个是transform,是css3的新属性。在这个属性出来之前,想要实现垂直居中是一件比较麻烦的事情,需要在父元素和子元素都写不少代码(有机会单独写一篇文章介绍垂直居中)。当然我说的难不是一个固定width和height的div里面放一个知道width和height的图片,这有太多方法实现垂直居中了。难就难在两个div,父div1和子div2宽度高度都不定的时候。

当我从别人的代码里发现css3新属性transform设置left和top是基于自身的width和height的时候,简直天哪!救星啊!这完全是来拯救我们前端工作人员垂直对齐的布局的。。。

那么问题来了,transform怎么简单地实现垂直居中呢?可以和position等于absolute的top相结合一下。例子还是父div1嵌套子div2,两个div宽度高度都不定,需求是把div2垂直居中显示在div1中。用transform可以简单地实现:

div1{position:relative;}
div2{position:absolute;top:50%;translate:transform(0, -50%);}

颤抖吧!就是这么强大!

当然和可以和其他苏醒结合,原理就是先向下偏移父元素的50%,在向上偏移自身的50%。


暂时就这样吧。。。敲完这篇文章再次发现,Always真的很不适合写技术文章。

13 COMMENTS
  1. 2017/03/06
    沐风

    ALWAYS不适合写技术文章,这是要出新主题的节奏么~~

    • 2017/03/06
      咚门
      @沐风 没想法,做一个新主题还要比Always好看有点困难。
  2. 2017/03/08
    雅岚

    Mark之,以备不时之需,哈哈哈。。想当年改样式表,杀人的心都有了。。(魔女飘走)

    • 2017/03/10
      咚门
      @雅岚 对css不熟悉的话改样式真的很蛋疼……
  3. 2017/03/09
    Meow

    你把字调大点,会杀了你么。

    • 2017/03/10
      咚门
      @Meow 不调了,都1.8了,字体还是延续这样吧先。
  4. 2017/03/15
    Elizen

    哎,现在这些人里,我真的最期待你出一个单栏主题,写笔记用的,我现在超级头疼这个。

    给你个例子,https://dailyio.me,你要把它扒了,我出钱买。

    • 2017/03/16
      咚门
      @Elizen 额,看了一下,严重怀疑你的欣赏水平……这个主题还没以前你用的木木那个好看吧。
      • 2017/03/16
        Elizen
        @咚门 我是想要一个纯记笔记类型的博客,图片什么的最好都不要了,木木那个我本来是想用的,但是那个被我改坏了,各种毛病...什么邮件回复不好用啊,头像缓存也不对啊...反正已经没得用了,要不我就不找了。
        • 2017/03/16
          咚门
          @Elizen 自己搞一个吧,你上面链接那种,自己搞一个三无产品来用用很快的。话说你不是好久之前就说自己要做一个吗……
        • 2017/06/25
          AoaBo
          @Elizen 推荐大雄的主题,或Desnote-pro
    • 2017/03/17
      JJlin
      @Elizen 周末我看能不能把他扒了
    • 2017/04/29
      雨帆
      @Elizen 严重怀疑你的审美
LEAVE A REPLY

loading