css定位篇-display
2018-06-17 本文已影响0人
护念
我们在许多时候，都会看到display这个东东，它对于布局的影响还是挺大的。需要学习下：
1 、 block 块级元素（默认下的div p h 等标签）
2 、inline 内联元素 （默认下的 span a img等）
3 、 inline-block 行内块
4 、 none 不显示元素 且 不占文档流
5、flex弹性布局
inline-block 内联块
它类似于内联元素，但和内联元素不同的是：
1 、它可以有自己的高度、宽度
2、 在布局上可以方便的替换 浮动
3 、行内块，在视口宽度调整时，还可以调整一行显示的数量
内联元素 VS 行内块
<style type="text/css">
#inline {
height: 100px;
width: 100px;
border: 5px solid yellow;
}
#inline-block {
display: inline-block;
height: 100px;
width: 100px;
border: 5px solid pink;
}
</style>
<body>
<a href="#">一个a标签的元素 </a>
<span id="inline">内联元素,虽然设置了高度 宽度 但是展现不出来</span>
<span id="inline-block"> 行内块，设置高度宽度后展现出来了</span>
</body>
image.png
行内块可替换浮动布局
<style type="text/css">
h3 {
text-align: center;
}
#inline-block {
height: 200px;
width: 200px;
display: inline-block;
border: 5px solid pink;
margin-left: 2em;
margin-top: 0.5em;
}
#after-inline-block {
margin: 10px;
border: 5px solid yellow;
}
</style>
<body>
<h3> 行内块 </h3>
<div id="inline-block">
行内块
</div>
<div id="inline-block">
行内块
</div>
<div id="inline-block">
行内块
</div>
<div id="inline-block">
行内块
</div>
<div id="inline-block">
行内块
</div>
<div id="inline-block">
行内块
</div>
<div id="inline-block">
行内块
</div>
<div id="inline-block">
行内块
</div>
<div id="inline-block">
行内块
</div>
<div id="inline-block">
行内块
</div>
<div id="after-inline-block"> 我不用清除浮动，回到块级元素 </div>
</body>
image.png
