display:inline-block，block，inline的区别与用法

时间 2019-11-08

标签 display inline block 区别用法栏目 CSS 繁體版

原文原文链接

1、首先要了解什么是块级元素与行级元素css

块级元素html

会占领页面的一行，其后多个block元素自动换行、能够设置width，height，设置了width后一样也占领一行、一样也能够设置 margin与padding属性。浏览器

ps:常见的块级元素:div,img,ul,form,p等spa

行级元素code

与其余元素在同一行上，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，不能够改变。orm

ps：em，strong，br,input等htm

display:inline-block，block，inline元素的区别blog

一、display：block将元素显示为块级元素，从而能够更好地操控元素的宽高，以及内外边距，每个块级元素都是重新的一行开始。图片

二、display : inline将元素显示为行内元素，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，不能够改变。多个相邻的行内元素排在同一行里，知道页面一行排列不下，才会换新的一行。input

三、display：inline-block看上去值名inline-block是一个混合产物，实际上确是如此，将元素显示为行内块状元素，设置该属性后，其余的行内块级元素会排列在同一行。好比咱们li元素一个inline-block，使其既有block的宽度高度特性，又有inline的同行特性，在同一行内有不一样高度内容的元素时，一般要设置对齐方式如vertical-align: top;来使元素顶部对齐。

例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>display:inline-block</title>
    <style type="text/css">
        li{
            width:200px;
            text-align: center;
            list-style: none;
            display: inline-block;
            background-color: #eee;
        }
    </style>
</head>
<body>
 <ul>
     <li><a href="#">inline-block</a></li>
     <li><a href="#">inline-block</a></li>
     <li><a href="#">inline-block</a></li>
     <li><a href="#">inline-block</a></li>
     <li><a href="#">inline-block</a></li>
 </ul>
</body>
</html>

display:inline-block，block，inline示例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #inline p{
            display: inline;
            background-color:red ;
            width:300px;/*这里设置无用*/
        }
        #inline-block p{
            display: inline-block;
            background-color:red ;
            width:100px;
            padding:10px;
        }
        #block p{
            display: block;
            background-color: red;
            width:100px;
            padding:20px;
        }
        div{
            margin:20px;
            background-color: #eee;
        }
    </style>
</head>
<body>
     <div id="inline">
        display:inline 在同一行，而且宽度就等于文字内容的宽度且设置宽度无用<p>内容内容内容内容内容内容内容</p>内容内容内容内容内容内容
     </div>
     <div id="inline-block">
        display:inline-block  既有行级元素的特性，也有块级元素的特性，所以在同一行，能设置宽高，margin，padding<p>内容内容内容内容内容内容内容</p>内容内容内容内容内容内容
     </div>
     <div id="block">
        display:block 块级元素会自动换新行，占领一行,能够设置宽高，margin，padding <p>内容内容内容内容内容内容内容</p>内容内容内容内容内容内容
     </div>
</body>
</html>

须要注意的是：

低版本的ie浏览器（ie6 ie7）是不支持display:inline-block;因此理论上ie是不识别的，可是在 ie 内核下有个部分叫作 hasLayout，只要触发了它，这个元素就能够设置高宽从而使行级元素拥有了display:inline-block属性的表象。