【Web 前端】元素分类>>

来源：互联网发布：json数据解析步骤编辑：程序博客网时间：2024/06/05 11:00

元素分类

块状元素

内联元素

内联块状元素

详解：

>>块级元素

设置display:block将元素显示为块级元素

举个例子 a{display:block;} 将行内元素a转换为块级元素，使a元素有块级元素的特点

>>>特点：每个块级元素都从新的一行开始，其后元素另起一行；

元素宽度、高度、行宽、底和顶边距都可以设置、

元素宽度在不设置的情况下，是它本身父容器的100%；

例子

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>内联块状元素</title><style type="text/css">div,p,h1{background:pink;}</style></head><body><h1>hahahha</h1><div>div1</div><div>div2</div><p>段落1段落1段落1段落1段落1</p></body></html>

显示：

hahahha

div1

div2

段落1段落1段落1段落1段落1

>>行内元素

块状元素可以由代码display:inline设置为行内元素

>>>特点:

1、和其他元素在一行上

2、高度、宽度、行高、顶部底部边距不可以设置

3、元素宽度是它包含的文字和图片的宽度，不可以改变

行内元素之间会产生间隙bug问题的场景：

1、当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。

如下代码：

<div>   <a>1</a>   <a>2</a>   <span>33333</span>   <span>44444</span>   <em>555555</em></div>

解决方法：

1、写在一行，之间不要有空格之类的符号。

<div><a>1</a><a>2</a><span>33333</span><span>44444</span><em>555555</em></div>

2、使用font-size:0

div{font-size:0;}a,span,em{font-size:16px;}

内联块状元素

display :inline:block;

>>特点：

1、和其他元素在同一行上

2、元素高度、宽度、行高、顶底间距可以设置

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>内联块状元素</title><style type="text/css">a{    display：inline-block；width:20px;/*在默认情况下宽度不起作用*/height:20px;/*在默认情况下高度不起作用*/background:pink;/*设置背景颜色为粉色*/text-align:center; /*设置文本居中显示*/}</style></head><body><a>1</a><a>2</a><a>3</a><a>4</a></body></html>

0 0