关于CSS行内元素和块级元素的总结探究
2017-07-21 本文已影响0人
布袋猫g
源于一道简单的面试题：
行内元素和块级元素的区别是什么？
在总结的时候发现越写越多，干脆就单独拉出来做一个记录吧
在查阅中参考了很多人总结的资料，这里都有提到
格式上的区别
- 行内元素会在
一条直线上排列，在同一行水平方向排列 - 块级元素各占据一行，
垂直方向排列。 - 默认情况下，行内元素不会以新行开始，而块级元素会新起一行。
内容上的区别
- 一般情况下，行内元素只能包含
数据和其他行内元素。 - 而块级元素可以包含
行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。
注：这里的一般情况下是HTML4规范的说法
Paste_Image.png
在搜索这个问题的时候，在知乎发现了这样一个问题 a 标签为什么能够包含块级元素？
这里引用下高票回答，结合回答便对这个问题有了更好的认识
Paste_Image.png
width/height/padding/margin 属性上的区别
这里先要理解替换元素与非替换元素的概念
从元素本身的特点来讲，可以分为替换和不可替换元素。
- 替换元素
替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。
例如：浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，
又如根据<input>标签的type属性来决定是显示输入框，还是单选按钮等。
HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些
元素往往没有实际的内容，即是一个空元素，浏览器会根据元素的标签类型和属
性来显示这些元素。
- 不可替换元素
HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）。例如<p>是一个不可替换元素，文字“段落的内容”全被显示。
以下是结论：
- 块级元素width/height/margin的四个方向/padding的四个方向都正常显示，遵循标准的css盒模型，如div。
- 行内替换元素width/height/margin的四个方向/padding的四个方向都正常显示，遵循标准的css盒模型，如img，input。
- 行内非替换元素width/height不起作用，用line-height来控制高度，大部分行内元素均为行内非替换元素，如span，a，i，label等。
- 行内非替换元素padding左右起作用，上下不会影响行高，但是对于有背景色和内边距的行内非替换元素，背景可以向元素上下延伸，但是行高没有改变。因此视觉效果就是与前面的行重叠。
- 行内非替换元素margin左右作用起作用，上下不起作用，这是由于行内非替换元素的外边距不会改变一个元素的行高。
对于行内非替换元素举一个可视化栗子
html代码如下
<body>
<div class="top">上方元素</div>
<div class="container">
<span class="test">被有padding和margin的span包裹的文字内容</span>
<span>普通文字内容</span>
</div>
</body>
css代码如下
.top {
height: 100px;
width: 600px;
background: #eee;
}
.container {
width: 600px;
background: #ddd;
}
.test {
background: #ccc;
margin: 20px;
padding:20px;
}
效果图
Paste_Image.png
Paste_Image.png
我们发现虽然行内元素（这里指非替换元素）的padding和margin可以被设置，但是
- 设置的margin-top bottom被浏览器忽略了，不会对其它元素产生影响
- 设置的padding-top bottom由于不改变行高所以不会改变元素的上下位置，但实际上是存在的,从背景色可以看出。
对于行内替换元素可以从下面的图片看出，其margin和padding均有效，比如我们可以看出父容器被多撑出了margin + padding 的高度
参考资料：
https://www.zhihu.com/question/34952563
http://www.cnblogs.com/mabelstyle/p/3715891.html
https://www.w3.org/TR/html401/struct/global.html#h-7.5
CSS 权威指南
