html元素按显示样式分类
html元素根据显示样式可以分为三类：1、块级元素（block-level）；2、行内元素/内联元素（inline-level）；3、行内块级元素（inline-block）；
1、块级样式（block-level）
特性：每个快元素通常都会独自占据一整行或者多行，可以对其设置宽高、 对齐等属性，常用于网页布局和网页结构的搭建。
常见的块元素有：<h1>~<h6>、<p>、<div>、<ol>、<li>等，其中<div>标签是最典型的块元素（div+css布局最常见）。
特点总结：
①总是从新行开始；
②宽高、行高、外边距以及内边距都可以控制；
③宽度默认是容器的100%如果没设置宽度的话；
④可以容纳内敛元素和其他块元素（例外：文字类块级标签（p标签、h1~h6标签、dt标签）不能放其他块级元素）。
2、行内元素/内联元素（inline-level）
特性：行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可设置宽高、对齐等属性，常用于控制页面中文本的样式。
常见的行内元素有：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素。
特点总结：
①和相邻行内元素在一行上；
②宽高设置无效，但水平方向的padding和margin可以设置，垂直方向的无效；
③默认宽度就是它本身内容的宽度；
④行内元素只能容纳文本或者其他行内元素（例外：a链接标签能容纳其他块元素）。
3、行内块元素（inline-block）
特性：在行内元素中有几个特殊标签（既有行内元素特性又有块级元素特性）---<img />、<input />、<td />，可以对它们设置宽高和对齐属性，有些资料可能称它们为行内块元素。
行内块元素有：<img />、<input />、<td />。
特点总结：
①和相邻行内元素（行内块）在一行上，但是之间会有空白缝隙；
②默认宽度就是它本身内容的宽度；
③可以设置宽高、行高、外边距和内边距。
相互转换：
元素显示模式（或者叫显示样式）可以根据需要通过display进行转换。
块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块：display:inline-block;
网友评论