从零开始学习前端开发 — 5、元素类型
一、元素类型分类
html元素可分为三大类：块元素，内联元素，可变元素
1.块元素
常见块元素：div,p,ul,ol,li,dl,dt,dd,form,hr,table,tr,td,fieldset,h1,h2,h3,h4,h5,h6
- 块状元素特点：
a）块状元素会以块的形式显示为一个矩形区域
b）块状元素默认独占一行，自上而下排列
c）块状元素可以定义自己的宽度和高度，以及盒模型中的任意padding,margin,border值
d) 块状元素可以作为一个容器来包含其他的块状元素和内联元素
注：默认有margin，padding的块状元素
body,h1,h2,h3,h4,h5,h6,p,ul,dl,dd,td,fieldset
2.内联元素(行内元素)
常见内联元素：a,span,i,em,strong,b,label,img,input
- 内联元素特点：
a) 内联元素默认在一行逐个进行显示
b）内联元素不能定义宽度和高度，它的宽高由内容决定，也以一个矩形区域显示
c) 内联元素设置与高度相关的值没有效果或显示不准确（如margin-top,margin-bottom,padding-top,padding-bottom,border,line-height等）
d) 内联元素可以设置与宽度相关的属性（margin-left,margin-right,padding-left,padding-right）
内联块状元素：
内敛块状元素：img,input,select,textarea
- 内联块状元素特点：
a)即具有内联元素特点在一行显示，又具有块状元素特点，可以定义宽和高
b)可以给内联块状设置任何margin，padding,border
3.可变元素
根据上下文关系决定元素类型（可变的范围是块元素和内联元素）
二、元素类型转换
语法： display:block | inline | inline-block | list-item|none;
1.block：将元素类型转换为块状元素，是大部分块状元素的默认display属性值
2.inline：将元素类型转换为内联元素，是内联元素的默认display属性值
3.inline-block:将元素类型转换为内联块状元素，是内联块状元素的默认display属性值(如img，input)
注: 当元素设置了inline-block后，换行符，空格都会占据一定的空间(宽度)
只有inline-block类型的元素支持vertical-align属性
4.none:将元素隐藏不显示
注：如果想让元素再次显示，设置元素的默认display属性值即可
5.list-item:将元素类型转换为列表，是li的默认display属性值
注：当给元素设置了float属性后，就相当于元素设置了display:block;
三、置换元素和非置换元素
1.置换元素
浏览器根据元素的标签和属性，来决定元素的具体显示内容。
如：img的src属性决定了图片在网页中的显示效果
input的type属性决定了在浏览器中呈现一个什么样类型的input控件
2.非置换元素
html的大多数元素是不可替换的非置换元素，即其内容直接表现在浏览器
