程序人生 A log of my life

CSS position和display

CSS规范中position的定义可以取四种值,并且又和其他属性,比如display,LRTB(left,right,top,bottom的缩写)相关,所以不容易理解清楚,下面是我的解释:

position

  • static - 默认值,对象遵循HTML定位规则,此时LRTB无效。

  • relative - 对象将依据LRTB等属性在正常位置基础上偏移。

  • absolute - 将对象从文档流中拖出,使用LRTB等属性相对于其最接近的一个有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据 body 对象。absolute定位时,margin失效。

  • fixed - 类似absolute,但是却直接相对于浏览器窗口,与父无关。

如果单从定义上看,这四种区别还比较模糊,尤其是relative和absolute是有点晕的,但结合应用场景,就很明确了,通常大部分元素都是static,如果想将某个元素脱离出来绝对定位,可以用absolute或者fixed,这时要看你希望相对的点,如果希望相对浏览器窗口固定,用fixed,如果希望相对父元素固定,用absolute。

但是注意absolute所相对的这个父元素必须不是static,通常就指定一下relative就好了,因为relative本身不改变元素的位置(前提是没有通过LRTB偏移),CSS这样设计的用意很容易理解,可以灵活的控制absolute元素想相对的元素,比如,想相对父的父,只要父为static,而父的父指定一下relative就可以了。

LRTB四个元素是可以同时用的,同时用的时候,如果元素大小未定,则修改元素大小,如果元素大小已经确定,则bottom和right被忽略。

display

  • display: none 不显示,也不分配空间(相当于元素从页面上删除)
  • display: flex Flex布局

flex

简单的说,Flex容器的几个属性:

  • display: flex; 申明容器使用flex布局,这是唯一一个必选设置
  • flex-direction 控制主轴方向,row为横排(缺省),column为竖排
  • flex-wrap 控制主轴方向溢出如何处理,缺省为滚动,wrap则折行
  • justify-content 控制主轴的布局,可选flex-start(缺省),flex-end,center,space-between,space-around
  • align-items 控制主轴垂直方面行内的布局,可选flex-start,flex-end,center,stretch,baseline (因为在垂直方向只有一个元素,所以没有space控制)
  • align-content 控制主轴垂直方面多行的布局,当然如果没有多行就不起作用了。

容器只对其下层的第一级元素进行布局,Flex元算的属性:

  • flex-grow 容器大于元素时,额外空间占比
  • flex-shink 容器大于元素时,收缩空间占比
  • flex-basis 初始元素大小,可以为auto
  • flex 由上面三个属性组合出来,如果没有flex,缺省为0 1 auto,如果有flex简写,比如flex 2,则等价于flex 2 1 0%,这点比较奇怪,但是最好计算,因为basis为0,则无需考虑shink。
  • align-self 对容器的align-items在子元素上的重载

    居中

经常的一个需求是让div里的buttong居中,严谨的说flex布局可以做到,但更简单的做法就是一个text-align:center; 这个很方便。

如果是fixed元素想居中,方法如下:

position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);