从零开始学习前端开发 — 5、元素类型

原文链接: https://www.mk2048.com/blog/blog.php?id=h020i1ackb2j&title=%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B%E5%AD%A6%E4%B9%A0%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91+%E2%80%94+5%E3%80%81%E5%85%83%E7%B4%A0%E7%B1%BB%E5%9E%8B

一、元素类型分类

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的大多数元素是不可替换的非置换元素,即其内容直接表现在浏览器


更多专业前端知识,请上 【猿2048】www.mk2048.com

猜你喜欢

转载自blog.csdn.net/mabeizui9231/article/details/102755959