码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-01-02 23:22:54      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:自己的   img   textarea   src   行内元素   strong   效果   没有   padding   

一、元素类型分类

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

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

标签:自己的   img   textarea   src   行内元素   strong   效果   没有   padding   

原文地址:https://www.cnblogs.com/witkeydu/p/8179132.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!