inline、block和inline-block的区别和相同处
2020-03-10 本文已影响0人
奋斗live
一、行内、块级、 行内块元素
首先我们要先了解以上三个的定义和区别
a、行内元素
与其他行内元素并排，不可设置长宽，默认宽度即内容的宽度
b、块级元素
独占一行，可设置长宽，默认宽度为父元素的宽度。
c、行内块元素
结合了行内元素和块级元素的优点。可设置长宽，也可以和其他行内元素并排
inline是行内元素，block是块级元素，inline-block是行内块元素
二、相互转换
可以采用display: inline(转换成行内元素)、block(转换成块级元素)、inline-block(转换成行内块元素)
如下图
<html>
<style>
.cat{background-color: red;display: block;}
.dog{background-color: blue;display: block;}
.pig{background-color: black;display: inline;}
.horse{background-color: green;display: inline;}
.chicken{background-color: #9cb945;display: inline-block;width: 100px;height: 100px;}
.frog{background-color: #aa00aa;display: inline-block;width: 100px;height: 100px;}
</style>
<body>
<div>
<span class="cat">cat</span>
<span class="dog">dog</span>
</div>
<div>
<div class="pig">pig</div>
<div class="horse">horse</div>
</div>
<div>
<div class="chicken">chicken</div>
<div class="frog ">frog</div>
</div>
</body>
</html>
image.png
三、注意
1、当inline-block遇到同类时（inline、inline-block），谁的margin、padding和line-height的大，就按照谁的来显示，如下
<html>
<style>
.chicken{background-color: #9cb945;display: inline-block;width: 100px;height: 100px;margin-top: 50px;}
.frog{background-color: #aa00aa;display: inline-block;}
.cat{background-color: red;display: inline}
.dog{display: inline;margin-top: 20px;}
</style>
<body>
<div>
<div class="chicken">chicken</div>
<div class="frog ">frog</div>
<div class="cat ">cat</div>
<div class="dog ">dog</div>
</div>
</body>
</html>
image.png
2、父元素设置为inline-block
如果要实现如下图所示，frog和cat在chicken和dog中间，
image.png
可以设置中间的parent为inline-block，然后其中元素采用块级元素进行显示
<html>
<style>
.chicken{background-color: #9cb945;display: inline-block;line-height: 0px;vertical-align:top;}
.parent{display: inline-block;}
.frog{background-color: #aa00aa;display: block;}
.cat{background-color: red;display: block;}
.dog{display: inline;margin-top: 20px;}
</style>
<body>
<div>
<span class="chicken">chicken</span>
<span class="parent">
<div class="frog ">frog</div>
<div class="cat ">cat</div>
</span>
<span class="dog ">dog</span>
</div>
</body>
</html>
3、块级元素能够设置width和height，而行内元素则是无效。当块级元素设置了长宽，当内容超过了尺寸的时候，就会涉及到元素的呈现行为，对于溢出元素内容区的元素如何处理，主要是通过overflow来指定（visible:内容不会被修剪，会呈现在元素之外、hidden：内容被修剪，并且其余内容不可见、scroll：内容被修剪，但是会显示滚动条、auto:内容如果被修剪，显示滚动条、inherit 从父元素继承overflow的属性值）
4、行内元素的水平方向margin、padding有效，垂直方向则无效。
5、若执意要让行内元素的margin、padding、width和height有效，可以采用float(浮动)、固定定位和绝对定位来实现，如下
<html>
<style>
.chicken{display:block;background-color: #9cb945;width: 100px;height: 100px;}
.parent{margin-top:50px;margin-left: 20px;width: 100px;height: 100px;position: absolute;}
.dog{}
</style>
<body>
<div>
<span class="chicken">chicken</span>
<span class="parent">
parent
</span>
<span class="dog ">dog</span>
</div>
</body>
</html>
image.png
