div标签的理解

在HTML里面，div标签是一个块状元素，不会和其他元素排列在同一行，会默认和下面的元素换行，但是如果我们需要把几个div标签排在同一行，需要怎么做？

第一种：修改块状元素

源码：

<div id="div1">这是第一个
 </div>
<div id="div2">这是第二个
 </div>
<div id="div3">这是第三个
 </div>

这是div块，默认是换行排列，如果不添加css样式，运行效果是这样的

三个div块竖着排列，因为div是块状元素，不会和其他元素排在同一列。

如果需要排在同一列，那就需要在写css样式的时候添加一行代码

          <style type="text/css">
            #div1 {
              display: inline-block;
              width: 200px;
              height: 200px;
              background-color: darkcyan;
            }#div2 {
              display: inline-block;
              width: 200px;
              height: 200px;
              background-color:darkkhaki;
            }
            #div3 {
              display: inline-block;
              width: 200px;
              height: 200px;
              background-color:darkkhaki;
            }
            </style>

需要添加一个display: inline-block;运行效果是这样的：

第二种：向右浮动

需要把css语句离修改一句

把display: inline-block;

修改为float: left;

需要在三个div的css里面都要添加

运行效果是：

第三种：flex布局

用一个div包裹需要并行排列的三个div

然后在写css的时候再添加一行约束

源码：

html代码：

        <div class="div">
                <div id="div1">这是第一个
                </div>
                <div id="div2">这是第二个
                </div>
                <div id="div3">这是第三个
                </div>
        </div> 

css代码：

          <style type="text/css">
            .div {
              display:flex;
            }
            #div1 {
              display: inline-block;
              margin-left: 30px;
              width: 200px;
              height: 200px;
              background-color: darkcyan;
            }#div2 {
              display: inline-block;
              margin-left: 30px;
              width: 200px;
              height: 200px;
              background-color:darkkhaki;
            }
            #div3 {
              display: inline-block;
              margin-left: 30px;
              width: 200px;
              height: 200px;
              background-color:darkkhaki;
            }
            </style>

　　

运行出来的效果是这样的：

拓展知识点：

display的几个属性值，inline、block、inline-block

inline是行内元素，可以与其他元素在同一行，不能自定义修改宽度高度等，大小根据内容大小决定。

block是块状元素，不可以与其他元素在同一行，独占一行，可以自定义宽度高度等。默认前后加一个空行。

inline-block：结合了inline和block的一些特点。就是可以自己定义宽度高度等，也不会独占一行，结合了两种元素的特点。