概念
-
内联元素
内联元素又叫行内元素，顾明思义，内联元素（inline element）不占据一整行，大小随内容而定，不可以设置宽度，也不可以设置高度，其宽度随着内容增加，高度随字体大小而改变。内联元素可以设置外边界，但外边界不对上下起作用，只能对左右起作用。常见的内联元素span、em、a等。 -
块级元素
块级元素（block element）生成一个元素框，（默认地）它会填充其父级元素的内容，旁边不能有其他元素，它在元素框之前和之后生成了“分隔”符。块级元素总是在新行上开始并占据一整行，宽度和高度以及外边距和内边距都可以控制，宽度始终与浏览器宽度一样，与内容无关。块级元素可以容纳内联元素和其他块元素。常见块元素div, p, h
原文链接：https://www.jianshu.com/p/4ddfd209d719
他们之间的转换是通过display实现：
这里我们有两个块级元素分别独占一行
如果我们设置display:inline，他们就变为行内元素不在独占一行。
<style>
div {display:inline;}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
</body>
这个时候我们设置它的宽，高和margin，宽高不起作用。margin只对左右起作用。
同样的如果我们有内联元素我们可以让它变为块级元素：
display：inline-block表示它是内联元素但是具有块级元素的属性，即可以设置宽高和边距。本质就是它不独占一行，其它的和块级元素基本无差别。
1062
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
