静态补充CSS类型转换

块级元素

常用的块级block标签：

<hn>...</hn>  标题标签
<hr> 水平分割线
<p>...</p>  段落
<ul>...</ul>  无序列表
<ol>...</ol>  有序列表
<dl>...</dl>  定义列表
<table>...</table>  表格
<form>...</form>  表单
<div>...</div>布局标签

行内元素特性

块级元素特性
1.总是从新的一行开始
2.高度、宽度都是可控的
3.宽度没有设置时，默认为100%
4.块级元素可以包含块级元素和行内元素
特殊：文字类的块级元素不能放块元素，例如:

<p>/<h1>~<h6>/<dt>

常用的内联/行内inline标签：

<span>...</span>
<a>...</a>  链接
<br>  换行（空标签，不深究）
<b>...</b>  加粗、倾斜、下划线、删除线等文本装饰标签
<select>...</select>  下拉列表

行内元素特性

1. 和其他元素都在一行
2. 高度、宽度以及内边距都是不可控的
3. 高度就是内容的高度，不可以改变
4. 行内元素只能行内元素，也可以包含块级元素，但不推荐使用，尽量少用

特殊：a标签比较特殊，可以放块级元素，但链接里面不能再放链接。

行内块级元素

常用的行内块级inline-block标签：

<img />图片标签
<input>输入框
<textarea>文本域/多行输入框
<td>单元格
<select>下拉框
<button>按钮

行内元素特性
1.既有行内元素的特性（不换行），又有块级元素的特性（可以直接设置高）
2.宽度、高度、行高、外边距以及内边距都可以手动设置。
注意：和相邻行内元素再同一行，但是之间会有空白间隙

元素模式转换

• display属性用于元素转换
• 通过以上发现->内联元素无法直接设置宽高、对块级元素设置宽高才可以奏效。
• 如果想使元素类型/模式转换，则可以使用display进行转换。
  

元素特性

常用元素特性

• （1）block块级元素
  • 块级元素特性：自动换行，可以直接设置宽高
• （2）inline内联/行内元素
  • 不换行，无法设置宽高
• （3）inline-block 行内块级元素
  • 既拥有行内元素特性，又有块级元素特性。不换行且可以直接设置宽高。
• （4）none隐藏元素
  • 设置为none后则会隐藏元素，在页面彻底蒸发

以上就是小编对CSS类型转换的见解，如有疑问，请随时联系小编！