转载地址：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> 表单
<div>...</div>
行级元素
与其他元素在同一行上，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，不可以改变。
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示例效果
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属性的表象。
网友评论