从零开始学习前端开发 — 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的大多数元素是不可替换的非置换元素，即其内容直接表现在浏览器

转载于:https://www.cnblogs.com/witkeydu/p/8179132.html