html学习笔记（html元素按显示样式分类摘自传智播客视频学习笔记）

html元素按显示样式分类

        html元素根据显示样式可以分为三类：1、块级元素（block-level）；2、行内元素/内联元素（inline-level）；3、行内块级元素（inline-block）；

1、块级样式（block-level）

        特性：每个快元素通常都会独自占据一整行或者多行，可以对其设置宽高、 对齐等属性，常用于网页布局和网页结构的搭建。

        常见的块元素有：

~

、

、

、

、
1. 等，其中
   标签是最典型的块元素（div+css布局最常见）。

           特点总结：

           ①总是从新行开始；

           ②宽高、行高、外边距以及内边距都可以控制；

           ③宽度默认是容器的100%如果没设置宽度的话；

           ④可以容纳内敛元素和其他块元素（例外：文字类块级标签（p标签、h1~h6标签、dt标签）不能放其他块级元素）。

   2、行内元素/内联元素（inline-level）

           特性：行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可设置宽高、对齐等属性，常用于控制页面中文本的样式。

           常见的行内元素有：、、、、、、、、、等，其中标签是最典型的行内元素。

           特点总结：

           ①和相邻行内元素在一行上；

           ②宽高设置无效，但水平方向的padding和margin可以设置，垂直方向的无效；

           ③默认宽度就是它本身内容的宽度；

           ④行内元素只能容纳文本或者其他行内元素（例外：a链接标签能容纳其他块元素）。

   3、行内块元素（inline-block）

           特性：在行内元素中有几个特殊标签（既有行内元素特性又有块级元素特性）---、、，可以对它们设置宽高和对齐属性，有些资料可能称它们为行内块元素。

           行内块元素有：、、。

           特点总结：

           ①和相邻行内元素（行内块）在一行上，但是之间会有空白缝隙；

           ②默认宽度就是它本身内容的宽度；

           ③可以设置宽高、行高、外边距和内边距。

   相互转换：

           元素显示模式（或者叫显示样式）可以根据需要通过display进行转换。
   

           块转行内：display:inline;

           行内转块：display:block;

           块、行内元素转换为行内块：display:inline-block;