div标签的理解

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的⼀些特点。

就是可以⾃⼰定义宽度⾼度等，也不会独占⼀⾏，结合了两种元素的特点。