在html中的标签元素 大体被分为三种不同的类型:
1、块状元素; 2、内联元素;3、内联块状元素。
特点:
1.块状元素:所谓的块状元素,就是会独占一行的的元素,无论他的内容有多少,他都会独占一整行,【可以设置宽高】
2.内联元素:所谓的内联元素,指的是只占自身大小的元素,不会独占用一行,【不可以设置宽高】
3.内联块状元素:所谓的内联块状元素,指的是只占自身大小的元素,不会占用一行,但是【可以设置宽高】
例子:
块状元素:
<div>我是第一个块状元素</div><div>我是第二个块状元素</div>
运行结果:如下,会独占一行,且可设宽高;
内联元素:
<span>我是第一个内联元素</span><span>我是第二个内联元素</span>
运行结果:如下,只占自行元素大小,不会独占一行,且不可设宽高;
内联块状元素:
<input style="height: 50px;" value="我是第一个内联块状元素" />
<input style="height: 50px;" value="我是第二个内联块状元素" />
运行结果:如下,不会独占一行,且可设宽高;
我们可以根据需要将元素进行转化:
需要哪种样式,设置display即可:
块状元素(block),内联元素(inline),内联块状元素(inline-block)
1.块状元素>>(转)>>内联元素
设置样式:display:inline;
2.块状元素>>(转)>>内联块状元素
设置样式:display:inline-block;
3.内联元素>>(转)>>块状元素
设置样式:display:block;
注意点
一般情况下:
只使用块元素去包含内联元素,而不会使用内联元素去包含一个块元素
a元素可以包含任意元素,除了他本身
p元素不可以包含任何块状元素
常用的块状元素有:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有:
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有:
<img>、<input>