display:inline-block，block，inlin

2019-06-11 本文已影响0人忧郁的冥

转载地址：https://www.cnblogs.com/hy-sunny/p/5602236.html

一、块级元素与行级元素

块级元素

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

ps:常见的块级元素:
<address>...</adderss>

<center>...</center> 地址文字

<h1>...</h1> 标题一级

<h2>...</h2> 标题二级

<h3>...</h3> 标题三级

<h4>...</h4> 标题四级

<h5>...</h5> 标题五级

<h6>...</h6> 标题六级

<hr> 水平分割线

<p>...</p> 段落

<pre>...</pre> 预格式化

<blockquote>...</blockquote> 段落缩进前后5个字符

<marquee>...</marquee> 滚动文本

<ul>...</ul> 无序列表

<ol>...</ol> 有序列表

<dl>...</dl> 定义列表

<table>...</table> 表格

<form>...</form> 表单

行级元素

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

ps：常见的行级元素:
<span>...</span>

<a>...</a> 链接

<br> 换行

<b>...</b> 加粗

<strong>...</strong> 加粗

<img > 图片

<sup>...</sup> 上标

<sub>...</sub> 下标

<i>...</i> 斜体

<em>...</em> 斜体

<del>...</del> 删除线

<u>...</u> 下划线

<input>...</input> 文本框

<textarea>...</textarea> 多行文本

<select>...</select> 下拉列表

二、display:[inline-block，block，inline]元素的区别

1、display：block

将元素显示为块级元素，从而可以更好地操控元素的宽高，以及内外边距，每一个块级元素都是从新的一行开始。

2、display : inline

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

3、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>

inline-block示例效果