HTML块级元素和行内元素

块级元素(block-level)

每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。

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

块级元素的特点:

(1)总是从新行开始

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

(3)宽度默认是容器的100%

(4)可以容纳内联元素和其他块元素。

行内元素(inline-level)

行内元素(内联元素)不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置宽度、高度、对齐等属性,常用于控制页面中文本的样式。

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

行内元素的特点:

(1)和相邻行内元素在一行上。

(2)高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效。

(3)默认宽度就是它本身内容的宽度。

(4)行内元素只能容纳文本或则其他行内元素。(a特殊 a里面可以放块级元素 )

注意:

  1. 只有文字才能组成段落,因此p里面不能放块级元素,同理还有这些标签h1,h2,h3,h4,h5,h6,dt,他们都是文字类块级标签,里面不能放其他块级元素。
  2. 链接里面不能再放链接。
  3. a里面可以放块级元素

块级元素和行内元素区别

块级元素的特点: (1)总是从新行开始 (2)高度,行高、外边距以及内边距都可以控制。 (3)宽度默认是容器的100% (4)可以容纳内联元素和其他块元素。

行内元素的特点: (1)和相邻行内元素在一行上。 (2)高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效。 (3)默认宽度就是它本身内容的宽度。 (4)行内元素只能容纳文本或则其他行内元素。

行内块元素(inline-block)

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

行内块元素的特点:
(1)和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。
(2)默认宽度就是它本身内容的宽度。
(3)高度,行高、外边距以及内边距都可以控制。

标签显示模式转换 display

块转行内:display:inline;

行内转块:display:block;

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

此阶段,我们只需关心这三个,其他的是我们后面的工作。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏十月梦想

html元素居中情况分类

内联元素,也叫行内元素(inline):(,a,input,span,b,i,u....)默认不会进行换行,不能设置宽度和高度.

25230
来自专栏程序员互动联盟

【专业技术】CSS知识点总结

1、CSS指层叠样式表(Cascading Style Sheets) 2、使用CSS样式常见的三种方式: 1)<link href=".............

367100
来自专栏十月梦想

CSS基础总结

                background:url() no-repeat position

8210
来自专栏电光石火

CSS几个竖直与水平居中盒子模型

1、利用绝对定位,一个居中的模型 #login { /* 定义一个ID选择器 */ width:300px;...

21680
来自专栏电光石火

CSS几个竖直与水平居中盒子模型

水平居中:text-align: center; 竖直居中:line-height: 30px(30为层高)

24080
来自专栏菜鸟计划

CSS布局(六) 对齐方式

一、水平居中: (1). 行内元素的水平居中? 如果被设置元素为文本、图片等行内元素时,在父元素中设置text-align:center实现行内元素水平居中,将...

38550
来自专栏yang0range

CSS的盒子模型

一个盒子中主要的属性就5个:width、height、padding、border、margin。 width是“宽度”的意思,CSS中width指的是内容的...

22530
来自专栏十月梦想

框模型

     元素框的实际宽度:width+左右外边距+左右border边框+左右内边距

14630
来自专栏小工匠技术圈

[Java小工匠]CSS盒子模型-概述

  在HTML文档中任何元素,都可以看作是一个盒子,因此理解盒子模型非常重要。一个盒子包含 盒子的内容、盒子内边距、盒子的边框、盒子的外边距。

14810
来自专栏前端萌媛的成长之路

元素垂直居中和水平居中的方法

18620

扫码关注云+社区

领取腾讯云代金券