CSS中,html中的标签元素大体被分为三种不同的类型:块状元素(display:block)、内联元素(又叫行内元素display:inline)和内联块状元素(display:inline-block)。可以通过代码来相互转换。
一.常用的块状元素有:
<div>、<p>、<h1>-<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
块级元素特点:
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致)。默认高度等于子元素高度。父子均是块级元素时,子块的高度可能冲破父级的限制
二.常用的内联元素有:
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
内联元素特点:
1.和其他内联元素都在一行上;
2.可以通过margin、padding来改变左右的距离,但不可以改变上下的距离,导致width、height、line-height失效或。可以使用border。
3.内联元素之间有空白区域,空白区域的形成是因为<span>之间有回车,在html中,空格、制表符、回车都属于空白符,多个空白符都会视为一个空格,空格的大小由父级<div>的font-size决定。注意:只有内联(内联块)与内联(内联块)之间的空白符才会形成一个空格,文本元素(除空白符)也是属于内联元素。常用解决方法,给<div>设置font-size: 0;,在<span>上把font-size设置回去
三.常用的内联块状元素有:
<img>、<input>
inline-block 元素特点:
1.和其他元素都在一行上;
2.元素的高度、宽度、行高以及顶和底边距都可设置。
3.它也会有元素间出现空白区域的问题
四、参考的文章:
https://www.jianshu.com/p/1cf...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。