资料:
https://www.cnblogs.com/linfangshuhellowored/p/4934406.html
https://www.cnblogs.com/zhuzhenwei918/p/6058457.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-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-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的值是一样的。
子元素拥有的属性:
- order
- flex-grow
- flex-shrink
- flex-basis
- align-self
- flex
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
。后两个属性可选。