display 属性整理

介绍

属性

• none
  此属性是说不让元素显示
• block
  是对于行内元素来说的，例如span,a,i.em等。
• inline
  此属性值是针对块级元素的，使用该属性值，块级元素就不会一家为大，不再独占一行，如果其后的元素是行内元素，就会跟在这个块级元素后面显示。
• inline-block
  兼具二者特点
• flex
  设为Flex布局以后，子元素的float、clear和vertical-align属性将失效
  • flex-direction
    • row 沿主轴(水平)排列(左 -> 右)
    • row-reverse 沿主轴(水平)反向排列(右 -> 左)
    • column 竖直排列
    • column-revers 竖直反向排列
  • flex-wrap
    • nowrap (默认)元素不换行
      比如：一个div宽度100%，设置此属性，2个div宽度就自动变成各50%；
    • wrap 换行在上方
      比如：一个div宽度100%，设置此属性，第二个div就在第二行了；
    • wrap-reverse 换行在下方
  • flex-flow 是flex-direction属性和flex-wrap属性的简写形式
    默认值为row nowrap
  • justify-content 元素在主轴上的排列
    • center 居中排列
    • flex-start 从左或者上开始排列
    • flex-end 由右或者下开始排列
    • space-between 从左右两端或者上下两端开始排列

    • space-around 每个元素两侧的间隔相等,项目之间的间隔比项目与边框的间隔大一倍

      
      
      image
  • align-items 元素在主轴方向上的对齐方式
    • flex-start 靠左上对齐
    • flex-end 靠左下对齐
    • center 靠中间对齐
    • baseline 该值与'flex-start'等效

    • stretch 如果项目未设置高度或设为auto，将占满整个容器的高度(默认)

      
      
      image
  • align-content 在弹性容器内的元素没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）
    • flex-start 各行向弹性盒容器的起始位置堆叠
    • flex-end 各行向弹性盒容器的结尾位置堆叠
    • stretch 各行向弹性盒容器的中间位置堆叠
    • center 元素被拉伸以适应容器。各行将会伸展以占用剩余的空间
    • space-between 元素位于各行之间留有空白的容器内。各行在弹性盒容器中平均分布。

    • space-around 元素位于各行之前、之间、之后都留有空白的容器内。各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'center'。

      
      
      image

块级元素和行内元素的区别：

• 块级元素会独占一行，其宽度自动填满其父元素宽度
  行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化
• 块级元素可以设置 width, height属性，行内元素设置width, height无效（focus:块级元素即使设置了宽度，仍然是独占一行的）
• 块级元素可以设置margin 和 padding.
  行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。