inline(行内)元素的特点:
- 行内元素不会独占一行,多个行内元素会排成一行,直到充满整行之后再换行。
- 行内元素不能设置width和height属性,它的宽和高是元素内容的宽和高。
- 设置margin和padding属性时,margin-top,margin-bottom,padding-top,padding-bottom无效。行内元素的padding-top和padding-bottom在浏览器中会显示出效果,但是并没有实际作用,对周围的元素没有影响。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hah</title>
<style>
.box1,
.box2 {
border: 2px dashed green;
}
.box1 {
margin-bottom: 30px;
}
.text1,
.text2 {
font-size: 14px;
background: grey;
}
.text2 {
padding: 10px;
}
</style>
</head>
<body>
<div class="box1">
<span class="text1">this is a test</span>
</div>
<div class="box2">
<span class="text2">this is a test</span>
</div>
</body>
</html>
效果:
box2虽然设置了padding,但是并不会因此撑开父元素。
常见的行内元素(span、img、a、lable、input、abbr(缩写)、em(强调)、big、cite(引用)、i(斜体)、q(短引用)、textarea、select、small、sub、sup,strong、u(下划线)、button(默认display:inline-block))
inline-block的特点:
1.设置为inline-block的元素仍然呈现为inline元素,但是其中的内容作为block内容呈现。
2.width,height,margin,padding属性有效。
3.相邻的元素仍然在同一行内排列。
block元素的特点:
- 块级元素前后会单独换行。
- 块级元素设置width,height,margin,padding属性有效。
常见的块级元素(div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre,HTML5新增的header、section、aside、footer)
替换元素的特点:
1.浏览器根据元素标签和属性决定显示的内容。
2.替换元素本身没有内容,是空元素。
3.替换元素有内在尺寸,width和height属性有效。
4.替换元素的margin和padding属性有效。
常见的替换元素:
img
input
textarea
select
这就是为什么img,input元素作为行内元素,但width,height,margin和padding属性都有效的原因。