• 欢迎访问老K博客,关注网络营销技术,分享网络营销精神!欢迎加入我们
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏老K博客吧

标签显示模式(display)

前端学习 老K 6个月前 (06-04) 787次浏览 已收录 0个评论

是为了更好的适应环境而完成的自然选择。

同理,我们网页的标签非常多,再不同地方会用到不同类型的标签,以便更好的完成我们的网页。

标签的类型(显示模式)

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特殊)

注意:

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

  2. 链接里面不能再放链接。

块级元素和行内元素区别

块级元素的特点:

(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;

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

 


老K博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:标签显示模式(display)
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址