display之block,inline,inline-block简单分析

来源：互联网发布：我的世界pe村民交易js 编辑：程序博客网时间：2024/06/16 12:03

这三个总是傻傻分不清楚

一.display

讲解:

1.block:块元素,单独占一行,其它元素会挤在下边,可以设置宽高

2.inline:内联元素,可以和同类元素占一行显示,不可以设置宽高,宽高由内容决定

3.inline-block:行内块元素,可以同内联元素占一行显示,同时可以设置宽高

代码:

<span style="font-size:24px;"><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <style>        .red {border:1px solid red;}        .green {border:1px solid green;}        .blue {border:1px solid blue;}        .orange {border:1px solid orange;}    </style></head><body>    <div>        <div class="green" style="display:block;width:200px;height:200px;">这是块元素</div>        <div class="red" style="display:block;width:200px;height:200px;">这是块元素</div>        <div class="blue" style="display:inline;width:200px;height:200px;">这是内联元素</div>        <div class="blue" style="display:inline;width:200px;height:200px;">这是内联元素</div>        <div class="orange" style="display:inline-block;width:200px;height:200px;">行内块元素</div>        <div class="orange" style="display:inline-block;width:200px;height:200px;">行内块元素</div>    </div></body></html></span>

效果图:

0 0