定义
行内元素: 只占据它对应标签的边框所包含的空间
块级元素: 占据其父元素 (容器) 的整个空间
常见行内元素和块级元素
常见行内元素
<span><a><lable><strong><b><small><abbr><button><input><textarea><select><code><img><br><q><i><cite><var><kbd><sub><bdo>常见块级元素
<div><p><li><h1><h2><h3><h4><h5><h6><form><header><hr><ol><address><article><aside><audio><canvas><dd><dl><fieldset><section><ul><video>区别
- 块级元素会新起一行, 行内元素不会 (除非一行放不下)
- 块级元素可以设置
width,height属性 (仍独占一行), 行内元素设置无效
- 块级元素可以设置
margin和padding, 行内元素水平方向有效, 垂直方向无效
- 块级元素可以包含块级元素和行内元素, 行内元素不能包含块级元素
- 水平居中
- 块级元素: 需要设置父容器宽度才能居中,
margin: 0; width: 1000px; - 行内元素:
text-align: center
- 垂直居中
- 块级元素: 需要设置父容器高度才能居中,
margin: 0; height: 1000px; - 行内元素: 设置外层行高为行内元素的高度
height: 30px; line-height: 30px;