前端成长之路:CSS元素显示模式

元素显示模式

网页中的标签非常的多,在不同的地方会使用到不同类型的标签,了解这些标签的特点可以更好的布局我们的网页。 元素显示模式就是元素(标签)按照什么方式进行显示 ,比如:div标签会自己独占一行;但是一行又可以有多个span,这就是每个元素特有的显示模式。HTML元素一般分为块元素行内元素两种类型。

块元素

在HTML中常见的块元素有:<h1>-<h6>的标题元素<p>段落元素<div>元素<ul>、<ol>、<li>列表元素 等,其中div是最典型的块元素。 块元素们共同的特点是:

1. 块元素们会自己独占一行。

2. 块元素的高度、宽度、内外边距都是可以控制的。

3. 块元素的默认宽度是容器(父级元素)的100%。

4. 块元素就像一个容器(或者盒子),里面可以放行内元素或者其他的块元素

特别注意:文字类的元素内不能再使用块元素了! p标签就是一个文字类的元素,所以说p标签内就不能放块元素了(特别是div);h1-h6的标题元素也属于文字类的元素,所以说也不能放其他块元素。

行内元素

在HTML中常见的行内元素有:<a>超链接元素<strong>这一类的元素<span>元素 等,其中span是最典型的行内元素 。行内元素们共同的特点是:

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

2. 直接设置行内元素的宽高是无效的。

3. 行内元素的默认宽度是其本身内容的宽度。

4. 行内元素只能容纳文本或者其他行内元素。

特别注意:链接中不可以放链接:

这样写是错误的,虽然还是会跳转到href中指定的url,但这是极其不规范的! 并且,<a>标签中可以放块级元素(这是一种十分特殊的情况),但是建议给a进行块级模式转换,保证安全。

行内块元素

在行内元素中有几个特殊的元素:<img/>、<input/>、<td>,它们同时具备块元素和行内元素的特点,所以说有些资料将它们称为行内块元素。 行内块元素的特点是:

  1. 和行内元素一样,相邻的行内块元素在同一行上,一行可以显示多个。(这是行内元素的特点)
  2. 行内块元素的默认宽度是其本身内容的宽度。(这也是行内元素的特点)
  3. 行内块元素的宽高、内外边距都是可以直接控制的。(这是块元素的特点)

可以看见,可以通过CSS直接控制img标签的宽高(这是块元素的特点),并且相邻的img标签是在一行显示多个的(这是行内元素的特点)。

学习元素的显示模式的主要目的是分清这些不同元素各自的特点,在合适的地方使用合适的标签,使用合适的CSS属性进行布局。

元素显示模式转换

在特殊情况下,在布局时需要元素模式的转换,简单理解为:一个模式的元素需要另外一个模式元素的部分特性,比如想要增加链接<a>的触发范围等。可以在CSS中通过display属性进行转换:display:block是将当前元素转换为块元素;diplay:inline是将当前元素转换为行内元素;display:inline-block是将当前元素转换为行内块元素。

将<a>转换为块元素,然后设置其宽高:

这说明了是可以将行内元素a设置转换为块元素,转换后的元素的确具有块元素的特性。

相关推荐
Sammyyyyy13 分钟前
月之暗面 Kimi Code 0.4.0 发布,终端 AI 编码助手全面采用 TypeScript,实现毫秒级启动
前端·javascript·人工智能·ai·typescript·servbay
范什么特西16 分钟前
配置文件xml和properties
xml·前端
jnene28 分钟前
html 时间、价格筛选样式处理
前端·css·html
slongzhang_1 小时前
jquery 修复怪异模式html未声明“<!DOCTYPE html>”
前端·html·jquery
云水一下2 小时前
Vue.js从零到精通系列(三):组件化基础——Props、Emits、插槽与生命周期
前端·javascript·vue.js
SEO_juper2 小时前
新独立站冷启动收录全攻略:配置、推送、抓取配额优化完整手册
前端·谷歌·seo·跨境电商·外贸·geo·独立站
TinssonTai2 小时前
这个 VS Code 插件让我的 AI Coding 又快又稳 - 旧瓶装新酒
前端·人工智能·程序员
体验家2 小时前
体验家 XMPlus 网页端问卷 SDK 技术解析:用几行 JavaScript 实现精准场景触发与防打扰机制
开发语言·前端·javascript
Maimai108083 小时前
Web3 前端交易系统如何落地:从下单 UI 到 Operation 编码、签名与实时状态更新
前端·react.js·ui·架构·前端框架·web3
kidding7233 小时前
高效备忘清单工具类小程序
前端·计算机网络·微信小程序·小程序