display:inline-block 行内块
inline-block 可以将 html 元素设置为行内块元素
行内块元素都拥有以下属性或特点: 1.可设置宽度, 2.可设置高度 3.不自动换行
<div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 200px;
height: 200px;
background-color: #000;
display: inline-block;
}
.box2 {
width: 200px;
height: 200px;
background-color: green;
display: inline-block;
}
.box3 {
width: 200px;
height: 200px;
background-color: blue;
display: inline-block;
}
添加 inline-block 前:
添加 inline-block 后:
float浮动
float 属性指定一个盒子(元素)是否应该浮动。
被设置 float:left/right 的元素将会脱离文档流,影响自己还影响周围的元素对齐进行环绕,且该元素变成 block 块级盒子,多元素都设置浮动并不会堆叠在一起,而是会按照顺序排列。
<style > * {
margin: 0;
padding: 0;
}
.box1 {
width: 200px;
height: 200px;
background-color: #000;
float: left;
}
.box2 {
width: 200px;
height: 200px;
background-color: green;
float: left;
}
.box3 {
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
添加 float 浮动前:
添加 float:left 浮动后:
##两者间的区别
1、inline-block盒子间的空隙
对比两者的效果图我们可以发现,同样的 div 布局,使用 inline-block 会产生空隙,空隙是从何而来?其实是由于三个 div 布局时,换行导致产生的空格。
<div>
<div class="box1"></div><div class="box2"></div><div class="box3"></div>
</div>
将box1,box2,box3一行书写,将不会产生空格。
2、box2中添加文字看看效果
inlin-block的效果:
float的效果:
前者添加文字后发生了下沉,后者并没有。
前者是由于行内块元素的对齐方式默认是vertical-align:baseline
,以父元素的底部为对齐才呈现如此效果。
float浮动则是按照盒子浮动顺序排列,并且紧贴在一起
3、给box2设置外边距看看效果
我们给box2设置margin-top:300px
让其下移300像素看看两者的区别
行内块:
浮动:
注:红色线框是我给三个盒子的父级设置的边框。
这时我们会发现,使用行内块显示的元素会整体下移。
这是由于浏览器认为他们是同一行级的元素。设置一行中的任意一个外边距,都将会影响整行的位置。
使用浮动的元素会导致父级盒子塌陷,原本是由子元素高度决定的,但是浮动后,导致子元素们脱离了文档流,失去了元素高度,使之父级高度塌陷了。
解决方法:
方法1.给父元素设置height
,设置具体的高度。
方法2.给父元素添加overflow:hidden
。
方法3.给父元素添加个空标签,设置样式clear:both
。或者给父元素添加伪元素box::after{content:'';clear:both;display:block}