神奇的display

曦罗
465 阅读8分钟

display可是个神奇的东西，通过修改display可以帮助组件实现“逆天改命”，变成其他组件的“模样”，当然，修炼之路不乏贫困，让我们一起来看看都有些什么神奇的display可供更改。

display:none

display:none，如同其名字，也就是将整个组件给弄没了，注意，这里的display：none与将该组件从dom树上彻底删除有着很大区别，display:none仅仅是将该组件隐藏，通常用于制作二级菜单：想将其display设置为none，然后当鼠标滑过一级菜单时再将其display改为block。

display:none可以让比较复杂的界面简洁化，使这个网页（界面）视觉重量减轻。除此之外，在排他算法中display:none也经常用到。

display:block、inline

根据css的规定，一些组件有着其默认的display值，常用的div的默认display值为block，为“块级元素”(block-level ),而作为块级元素，其高度、宽度、内距以及外距都可以进行调整。

块级元素特点：

  1. 每个块级元素都从新的一行开始（一块霸占一行）
  2. 在其本身的宽度不进行设置时，其宽度默认为其父级组件的宽度（body也算父级组件）。
  3. 可以设置padding和margin

常用的 块级元素有：

div、p、h1…h6、ol、ul、dl、table、address、blockquote （块引用）、form

<div style='display:inline’></div>

而如链接元素a，其默认display值为inline，为“行内元素”，它是依附于其他块级元素存在的，故行内元素是无法设置高度、宽度等属性，在设置margin时只有left、right的时候，与此同时可以设置padding（若想设置，应该将其display强制转化为block）

<span style='display:block’></span>

常用的行内元素有：

a、span、br、i、em、strong、label、q、var、cite、code（表示计算机源代码或者其他机器可以阅读的文本内容）什么是Flex布局

什么是inline-block

上文提到了display:block和display:inline，其中inline可以排列在一行但无法设置整个组件的高度与宽度,block可以设置组件大小但又只能单独一个组件占一行，为了解决这一尴尬的问题，inline-block孕育而生。

inline-block（融合行内于块级）结合了inline和block的特点，能够与其他行内元素共享一行的同时可以改变元素的高度以及宽度，同时还可以设置padding和margin。

img

设置为inline-block后，几个元素可以在同一行显示，这个效果跟浮动基本上一样，但也有不同。

inline-block Vs float

相同之处：效果能够基本上达到一样的效果

不同之处：设置浮动后容易导致父元素高度坍塌，而且float会导致元素脱离文本流；display:inline-block不会使元素脱离文本流。

我们来对对比一下display：inline-block和float的效果

img

img

设置overfloat:hidden防止父元素高度坍塌

如果每一个子元素高度相同，那么display:inline-block和float没有什么区别，但是每个子元素高度不同的时候float和inline-block的差距就比较明显了。

img

img

若要元素排满一行，换行后还要整齐排列，就要子元素的高度一致才行，不然就会出现图三的效果，而inline-block就不会。

inline-block存在的问题

大家可以看使用了display:inline-block后，每个组件之间会存在间隙问题（4px)，这个问题其实不是inline-block的问题，而是我们写标签时随手打的回车符（原来是你）。

去除空隙的方法也很简单，对父元素添加font-size：0，将空白符的大小变成0px，从而消除空隙。

img

总结

如果要使用横向排列，那就大胆的使用inline-block；如果使用文字环绕就要使用浮动了。

什么是flex

我们首先来解读一下flex是什么意思。flex就是flexible box的缩写，译为弹性布局，如同其名，弹性布局就是为了给盒型模型提供最大的灵活性。其中，每一个容器都可以指定为flex（行内元素也可：inline-flex)。Webkit为内核的浏览器，则必须加上-webkit前缀（如display: -webkit -flex)

使用Flex布局的元素称为称为 Flex 容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。在设置属性display=flex时，需要将其赋值于容器上，项目则不需要。

img默认存在两条主轴：水平的主轴（main axis）和垂直的交叉轴（cross axis)

Flex VS Float

我们经常需要完成将多个照片并排放置的工作，此时比较简单的做法就是设置float，但是float会出现父组件高度坍塌等问题，此时，我们就需要使用flex布局进行图片的放置。

容器属性

  • flex-direction
  • justify-content
  • align-items
  • flex-wrap
  • align-content
  • flex-flow

1.flex-direction

项目（flex item)默认情况下是沿着主轴从main start 开始往main end 方向进行排序。而属性flex-direction决定了主轴的方向。其中flex-direction有四个取值（row(默认值)、row-reverse、column(自上而下）、column-reverse)

2.justify-content

这个属性主要用来排列主轴上各个项目(item)的位置，决定了项目在主轴上的对齐方式

属性值：

  • flex-start(默认值):与main start对齐
  • flex-end：与main end对齐
  • center：居中
  • space-between：flex items 之间的距离相等，与main start、main end两端对齐
  • space-evenly: flex items 之间的距离相等,flex items与main start 、main end 之间的距离等于flex items之间的距离
  • space-around :flex items 之间的距离相等,flex items与main start 、main end 之间的距离等于flex items之间的距离的一半

值得注意的是这些都是容器的属性

3.align-items

这个属性是用于决定项目（items)在纵轴上的对齐方式

属性值：

  • normal：在弹性布局中，效果和stretch一样
  • stretch：前提是items不设置高度，当flex items 在cross axis 方向的size为auto时，会自动拉伸至填充flex container(或者换句话说：如果项目未设置高度或设为auto，将占满整个容器的高度。)
  • flex-satrt:与cross start 对齐
  • flex-end:与cross end 对齐
  • center:居中对齐
  • baseline:与基准线对齐

4.flex-wrap

决定了flex container 是单行还是多行,默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

属性值：

  • nowrap(默认)：单行
  • warp：多行 //这个比较少用
  • wrap-reverse:多行（对比wrap，cross start 与cross end相反）

5.align-content

决定了多行flex items 在cross axis的对齐方式 用法与justify-content相似 一个是横轴。一个控制竖轴

属性值：

  • stretch(默认值)：与align-items的stretch类似，当items有高度的时候，无效果
  • flex-start:与cross start 对齐
  • flex-end :与cross end 对齐
  • center：居中对齐
  • space-between:flex items 之间的距离相等，与cross start、cross end两端对齐
  • space-evently: flex items 之间的距离相等,flex items与cross start 、cross end 之间的距离等于flex items之间的距离
  • space-around :flex items 之间的距离相等,flex items与cross start 、cross end 之间的距离等于flex items之间的距离的一半

img

flex项目属性（item属性）

1.order

order决定了该项目在容器中的顺序，可以设置为任意整数，默认为0，值越小，排的越靠前。

2. align-self

设置该属性可以覆盖容器的设置的align-items，属性值及其对应的效果与align-items一致。

3.flex-grow

决定了flex items如何扩展 可以设置为任意非父数字（小数，整数 0），默认为0 当flex container 在main axis方向上有剩余得size时，flex-grow属性才会有效

如果所有flex items 的flex-grow 综合sum不超过1，这直接乘以剩余size就是扩展大小、 如果超过1 扩展size=剩余size*flex-grow/sum

当设置flex:1时，每个子组件将会均匀的分布（水平）在flex容器中

4.flex-shrink

flex-shrink (shrink 缩小，收缩)与flex-grow相似，一个扩展，一个伸缩 可以设置为任意非父数字（小数，整数 0），默认为1 当flex items在main axis 方向上超过了flex container 的size flex-shrink属性才会生效、 如果所有flex items 的flex-shrink 总和sum超过1，每个flex item 收缩的size为： flex item 超出flex container 的size*收缩比例/每个flex items 的收缩比例之和 如果sum不超过1，每个flex item 收缩的size为： size = 超出的size * flex-shrink值 flex items收缩后的最终size不能小于min-width\min-height

5.flex-basis

用来设置flex items 在 main axis方向上的base size 默认为auto，可以设置具体的宽度数值 决定flex items最终base size 的因素，优先级从高到低

  • max-width\max-height\min-width\min-height
  • flex-basis width\height
  • 内容本身的size
avatar
文章
阅读
粉丝