行内元素,块级元素和行内块元素
学习 CSS 的时候发现,发现有些标签会独占一行,典型的例如 <div> 标签。而某些不会独占一行,典型如 <span> 标签。其实这是因为 CSS 的标签是有区分元素类型的,这些元素类型分为行内元素,块级元素和行内块元素。
一.行内元素
又称为内联元素,行内元素的大小是靠本身内容的大小,宽高都设置无效。
span{width: 300px;height: 300px;background: lightgreen;}
常见特点如下:
常见的行内元素:
<a>,<strong>,<b>,<em>,<del>,<span>
二.块级属性
每个块级元素通常都会独占一行或者是多行,可以对其单独设置高度,宽度以及对齐等属性。
div{width: 300px;height: 300px;background: lightblue;} <div>我是div</div> <div>我是div</div>
常见的特点如下:
常见的块级属性:
<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>
三.行内块属性
在行内元素中有几个特殊的标签,<img/>,<input/>,<td/>,可以设置它们的宽高度以及对齐属性
常见的特点如下:
四.另外注意的是:块级元素和行内元素的转化
通过 display 属性转换,其中 display 有三个值:
1.块转行内:display:inline;
2.行内转块:display:block;
3.块,行内元素转换为行内块:display:inline-block