前端学习笔记：display（未完成）

这是本人学习的总结，主要学习资料如下

1、一般属性

display是css中的一个重要属性，它的值基本决定了元素的布局。这里就对它的值如何影响元素布局做一个总结。

display:block：这是默认值，元素会占据一整行，是个行级元素。
display:inline：它让元素不再占据一行，而是一个块级元素。但是元素不能再设置高度和宽度。
display:contents：布局方面和block一行，但这个值会让元素的container消失，只展示文字部分。所以那些background-color，border-color等属性都会失效。同时height也会失效。

2、flex系列

首先说一下最基本的display:flex。其他flex的属性都是在这个基础上延展其他的特性。

display:flex修饰的元素仍然是一个行级元素，就被修饰元素的排列而言，它与display:block产生的效果没有区别。

这个属性影响的是子元素的排列。它会让元素变成一个flex的容器。

接下来的重点就是flex容器和普通容器的区别。

2.1、flex容器的维度

一般来说，元素的排列我们需要考虑到两个维度，行和列。

比如下面的例子，div1是第一行的第一列元素，div2是第一行第二列，div3是第二行第一列。

<div style="display: inline-block; background-color: red; height: 40px">div1</div>
<div style="display: inline-block; background-color: green; height: 40px">div2</div>
<div style="display: block; background-color: blue; height: 40px" >div2</div>

请添加图片描述

但是在flex容器中，我们只需要考虑一维的排列。也就是说flex容器中只有一行或者一列。

还是上面的例子，三个div。把他们放在flex容器中，因为容器只有一行的空间，所以他们三个都在同一行排列。即使div3是display:block。

<div style="display:flex">
    <div style="display: inline-block; background-color: red; height: 40px">div1</div>
    <div style="display: inline-block; background-color: green; height: 40px">div2</div>
    <div style="display: block; background-color: blue; height: 40px" >div2</div>
</div>