59859cc威尼斯官网-威尼斯欢乐娱人成app

教育行业A股IPO第一股(股票代码 003032)

全国咨询/投诉热线:400-618-4000

传智教育|传智播客

一样的教育,不一样的品质

全国校区

 

  • JavaEE
  • HTML&JS+前端
  • Python+大数据开发
  • 人工智能开发
  • UI/UE设计
  • App测试
  • 新媒体+短视频
    直播运营
  • 59859cc威尼斯官网-威尼斯欢乐娱人成app

块级元素、行内元素和行内块元素各自特点和区别

更新时间:2021年08月02日15时28分 来源:传智教育 浏览次数:

好口碑IT培训

下面大家先容一下块级元素、行内元素和行内块元素的特点和转换方法。

1.块级元素(block-level)

(1)常见的块元素有哪些?

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>标签是最典型的块元素。

(2)块级元素有什么特点?

·自己独占一行

·高度,宽度、外边距以及内边距都可以控制。

·宽度默认是容器(父级宽度)的100%

·是一个容器及盒子,里面可以放行内或者块级元素。

(3)注意问题:

  只有文字才能组成段落,因此p标签里面不能放块级元素,特别是p标签不能放div。同理还有这些标签h1,h2,h3,h4,h5,h6,dt,他们都是文字类块级标签,里面不能放其他块级元素。

2.行内元素(inline-level)

(1)常见行内元素有哪些?

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,其中<span>标签最典型的“行内元素”,也称“内联元素”。

(2)行内元素有哪些特点?

·相邻行内元素在一行上,一行可以显示多个。

·高、宽直接设置是无效的。

·默认宽度就是它本身内容的宽度。

·行内元素只能容纳文本或则其他行内元素。

(3)注意问题:

·链接里面不能再放链接。

·特殊情况a里面可以放块级元素,但是给a转换一下块级模式最安全。

3.行内块元素(inline-block)

(1)常见行内块儿元素有哪些?

在行内元素中有几个特殊的标签——<img />、<input />、<td>,可以对它们设置宽高和对齐属性,有些资料可能会称它们为行内块元素。

(2)行内块元素有什么特点?

·和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。一行可以显示多个

·默认宽度就是它本身内容的宽度。

·高度,行高、外边距以及内边距都可以控制。

4. 块级元素、行内元素和行内块元素的区别

元素模式 元素排列 设置样式 默认宽度 包含
块级元素 一行只能放一个块级元素 可以设置宽度高度 容器的100% 容器级可以包含任何标签
行内元素 一行可以放多个行内元素 不可以直接设置宽度高度 它本身内容的宽度 容纳文本或则其他行内元素
行内块元素 一行放多个行内块元素 可以设置宽度和高度 它本身内容的宽度

5. 块级元素、行内元素和行内块元素互转

块转行内:display:inline;

行内转块:display:block;

块、行内元素转换为行内块:display: inline-block;



猜你喜欢:

CSS选择器用法大全

HTML元素类型:块元素和行内元素

CSS是什么意思?史上最详细先容

CSS3相比CSS有哪些优势?

什么是HTML,什么是H5?

传智教育web前端开发培训课程

0 分享到:

59859cc威尼斯官网|威尼斯欢乐娱人成app

XML 地图 | Sitemap 地图