css-display属性

xiaoxiao2021-02-28  40

资料:

https://www.cnblogs.com/linfangshuhellowored/p/4934406.html

https://www.cnblogs.com/zhuzhenwei918/p/6058457.html

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

display 常见的属性有:none,block,inline,inline-block,inherit,flex。

块级元素和行内元素

示例:

div { border: 1px solid red; } span { border: 1px solid green; } <div style="width:100px;height:100px;margin:10px;">11</div> <div style="padding:10px;">11</div> <div>11</div> <div> <span style="font-size:20px;margin:10px;">111</span> <span style="font-size:30px;padding:10px;">1111</span> <span>11111</span> </div>

div,p,h1,li 是常见的块级元素;span,a,em,img 是常见的行内元素;

块级元素特点:

占一整行,宽度默认充满父元素宽度,修改后仍然占一行;可以设置高度,宽度,margin 和 padding;可以包含其他元素;默认属性为 block;

行内元素特点:

不单独占一行;同级的行内元素会从左到右,从上到下一次排列;不可以设置高,宽;高度一般由字体大小决定,宽度一般由内容的长度决定;margin 和 padding 只对水平方向有效,对竖直方向无效;可以通过设置左右的padding值来改变行内元素的宽度。一般不包含块级元素;默认属性为 inline;

display:none

表示不显示

display:block

使用后元素变为块级元素;

display:inline

使用后元素变为行内元素

display:inline-block

使元素既像 block 设置高、宽,又像 inline 不独占一行;

display:inherit

可以继承父元素的 display 属性

display:flex

是弹性布局(flexible box),设置后,float、clear、vertical-align 属性失效。任何一个元素都可以指定为 flex 布局。

父元素设置了 display:flex 后,(父元素)有以下属性可用:

flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content

其中:flex-direction决定了主轴的方向,其值有:row(默认值,自左向右)/row-reverse(自右向左)/column(主轴为垂直的,自上而下)/column-reverse(自下而上)。

flex-wrap定义一排容不下的时候是否换行,默认为nowrap不换行(一行容不下时,各条目的宽度会按比例缩小)。wrap为正常换行。wrap-reverse是换行时第一行跑到了下面,第二行跑到了上面(暂时还没想好如何描述更清楚)。

flex-flow是flex-direction和flex-wrap的合并写法。默认为row nowrap。

justify-content定义了条目在主轴上的排列方式:有左对齐flex-start(默认值),右对齐flex-end,居中对齐center,两端对齐space-between,等分space-around即每个条目两端的空隙相等。

align-item定义了条目在纵轴上的排列方式:有顶部对齐flex-start,底部对齐flex-end,居中对齐center,strecth(默认值,如果条目不设置具体数值的高度,则高度会沾满整个父元素的高度),baseline,以条目里的第一行文字的基线为准。

align-content定义了多跟轴线时,条目的在纵轴的对齐方式,如果只有一根主轴线则该属性不起作用。值和justify-content的值是一样的。

子元素拥有的属性:

orderflex-growflex-shrinkflex-basisalign-selfflex

order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

转载请注明原文地址: https://www.6miu.com/read-1950337.html

最新回复(0)