网页元素(网页元素包括哪些)

网页元素(网页元素包括哪些)

在HTML中,存在这许许多多的元素(同:”HTML标签”),这些元素最终可分为三类,分别是块级元素,内联元素(同:”行内元素”),块级内联元素(同:”行内块元素”)。

网页元素(网页元素包括哪些)

你对这些元素是否真的了解呢?

我们来看看这三类元素的特点:

块级元素

一.特点

1.每个块级元素都从新的一行开始显示(块级元素独占一行)

2.元素的宽度,高度,内边距(padding),边框(border),外边框(margin)都能随意设置

3.块级元素在网页中所占面积=内容区(content)+内边距(padding)+边框(border)+外边距(margin)

4.块级元素本身未设置宽度的情况下,宽度=父元素宽度-该元素的左右外边距-该元素的左右边框-该元素的左右内边距

5.块级元素未设置padding和border的情况下,padding和border的数值为0

6.块级元素未设置宽度和外边距的情况下,margin的值为0,宽度为100%(即与父元素宽度一致)

7.块级元素设置宽度但未设置外边距的情况下,左外边距的值为0

8.块级元素设置宽度,未设置padding和border,同时设置margin: 0 auto的情况下,左右外边距平分 父元素宽度-该元素宽度所剩余的空间

9.块级内联元素不受父元素的line-height以及自身的vertical-align影响

二.将非块级元素转换成块级元素的方法

1.display:block

2.float:left或right

3.position:absolute或fixed

4.父元素使用display:flex,子元素会变为块级元素

三.常见块级元素

<div>,<p>,<h1>...<h6>,<ol>,<ul>,<dl>,<address>,<blockquote> ,<form>

内联元素

一.特点

1.当父元素宽度足以放下多个内联元素时,一行内可以显示多个内联元素,否则放不下的内联元素将另起一行(一行存放多个内联元素)

2.内联元素的宽度,高度由该元素的内容撑开

3.内联元素的宽度/高度

/padding-top/border-top/margin-top/margin-bottom设置无效

4.如果padding/border/margin未设置的情况下,全部为0

5.内联元素受父元素的line-height以及自身的vertical-align影响

二.将非内联元素转换成内联元素的方法

使用display:inline

三.常见内联元素

<a>,<span>,<i>,<br>,<strong>,<em>

块级内联元素

一.特点

1.当父元素宽度足以放下多个块级内联元素时,一行内可以显示多个块级内联元素,否则放不下的块级内联元素将另起一行(一行存放多个块级内联元素)

2.块级内联元素的宽度,高度,内边距(padding),边框(border),外边框(margin)都能随意设置

3. 块级内联元素的宽度,高度未设置的情况下,由该元素的内容撑开

4.块级内联元素受父元素的line-height以及自身的vertical-align影响

二.将非内联元素转换成内联元素的方法

使用display:inline-block

分享到 :
相关推荐

机房和机柜是什么关系(机房和机柜是什么关系啊)

机房和机柜是什么关系?租用托管时主要看机房还是机柜?现如今完善的网络服务器销售市场。...

国内云服务器厂商排名(ucloud云服务器官网)

1、国内云服务器厂商排名目前,国内云服务器市场竞争异常激烈,云服务器厂商种类众多。[...

外贸建站怎么选择法国服务器(外贸建站怎么选择法国服务器的)

外贸建站选择法国服务器的方法:1。考虑网站的访客群体主要是在哪里。然后选择合适的法国...

xyz域名网站怎么打开(域名是xyz是什么)

大家好,今天来介绍xyz域名网站怎么打开的问题,以下是渲大师小编对此问题的归纳和整理...

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注