inline, block, inline-block区别

原创 已于 2022-10-16 10:18:05 修改 · 350 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端 #html

于 2022-01-09 22:47:52 首次发布
本文详细解释了网页布局中三种基本的元素显示模式：inline（内联）、block（块级）及 inline-block（内联块级）。这三种模式决定了元素在页面上的布局行为，包括高度、宽度、内外边距等特性。

inline, block, inline-block区别

  • inline
    • Not height and width;
    • Not margin-top & margin-bottom;
    • Always occupy area only necessary.(Actually, the margin-right hold the rest space from element’s right edge to line right edge.实际上是margin-right填充了该行剩余的宽度)
  • block
    • Having everything to Box Model;
    • Full a line.
  • inline-block
    • Have everything to Box Model;
    • Occupy area only necessary. (margin-left will not hold the rest space of line).

All in all, inline/block/inline-block rule the box model behavior to element:

  • inline: didn’t height/width and margin-top/margin-bottom
  • block: have everything and marign-right hold rest space to the line.
  • inline-block: normal act.
inline-block和block的区别
gao_zhennan的博客
02-24 6130
一、块级元素和内联（行内）元素的特点 块级元素 1. 独占一行 2. 可以设置属性：width、height、margin-top和margin-bottom 内联元素 1. 多个元素在一行显示
inline-block什么意思中文_block，inline和inline-block概念和区别
weixin_42632156的博客
01-14 1101
总体概念block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。大体来说HTML元素各有其自身的布局级别(block元素还是inline元素)...
浅谈css布局block，inline，flex，inline-block，inline-flex区别
qq_43682422的博客
07-18 3431
flex，inline-flex
block，flex，inline-flex，inline-block区别
Baymax
08-06 8538
block和flex： 每一块都是占一整行，元素会换行 block是所有元素都占一行，flex是包裹在一起的元素占一行。 inline-block和inline-flex： 总共占一行， inline-block是各个元素占一小行的，inline-flex是包裹在一起的元素为一小行。 可以设置每个块块宽度 ...
inline-block与line-height问题
qq_52822043的博客
09-14 630
inline-block与line-height问题、inline-height与height
display的block、inline和inline-block的区别
xiaoxin_040112的博客
08-29 1641
本文详细解析了CSS中display属性的三种常见值：block、inline和inline-block的区别。block元素独占一行，可设置宽高和所有边距；inline元素同行显示，不能设置宽高，垂直边距无效；inline-block兼具两者特点，可同行显示且能设置宽高和完整边距。文章通过具体示例展示了三者的实际表现，并提供了常见使用场景指导，帮助开发者根据布局需求选择合适的display属性值。
inline-block什么意思中文_css中inline-block是什么？inline-block布局的使用
weixin_35674742的博客
01-14 6497
css中inline-block是什么？本篇文章就给大家介绍在css中inline-block是什么意思，让大家了解在css布局中使用inline-block的好处。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。首先我们来了解一下inline-block是什么？inline-block表示的是行内块状元素，比如：img、input在默认情况下即为行内块状元素，即：默认情况下，di...
CSS的inline、block与inline-block
Liuqz2009的专栏
01-10 1152
基本知识点 行内元素一般是内容的容器，而块级元素一般是其他容器的容器，行内元素适合显示具体内容，而块级元素适合做布局。 块级元素(block)：独占一行，对宽高的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽。 行内元素(inline)：可以多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高。 行内块元素(inline-block)：结合的行内和块级的优点，...
CSS display属性详解：inline、block与inline-block对比
weixin_35982453的博客
09-07 1300
inline适合用于文本或行内内容的样式控制。block是构建网页结构的主力，适合用于容器、标题、段落等大块元素。则是两者之间的桥梁，既能横向排列，又能控制尺寸，适合用于按钮组、导航栏、图标等需要灵活控制的布局场景。通过掌握这三种 display 类型的行为差异与适用场景，开发者可以更高效地进行网页布局设计，为后续更高级的布局技巧（如 flex、grid）打下坚实基础。显示类型典型用途是否可设置宽高是否独占一行排列方式inline文本样式、链接、图标。
display:block和inline-block、inline-block区别
Evan's Blog ٩(๑❛ᴗ❛๑)۶
12-16 3891
一个后端，在前端的道路上从零踩坑总是很困难的，要做混合开发，不得不学呀 TnT。简单总结下常见的块级元素和行内元素，顺便说明下区别。 一、常见的块级元素 块级元素：块级大多为结构性标记 <address>...</adderss> <center>...</center> 地址文字 <h1>...&l...
Firefox Bug: inline/inline-block的间隙采用代码缩进可解决
09-25
在网页布局中，`inline-block` 是一种常用的CSS布局方式，它允许元素保持内联特性的同时，具有块级元素的宽度和高度可调整性。然而，`inline-block` 在不同浏览器间存在兼容性问题，特别是在Firefox中有一个知名的...
关于css display: inline block inline-block的区别分析
01-21
display:inline-block 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。 但对于这个属性不是所有浏览器都识别。 支持的浏览器有：Opera、Safari。 但很遗憾，最...
display:inline、block、inline-block的区别（转的）
08-07
本篇文章将深入探讨`display:inline`、`display:block`以及`display:inline-block`这三种主要的显示模式之间的区别，帮助你更好地理解它们在实际开发中的应用。 首先，我们来看`display:inline`。这种模式使得元素...
CSS 网页布局：技术基础与实践技巧
最新发布
csbysj2020的博客
12-02 477
CSS网页布局是前端开发中的核心技术之一，掌握CSS布局的基础知识和实践技巧对于成为一名优秀的前端开发者至关重要。本文介绍了CSS布局的基础知识、布局模型、实践技巧以及响应式布局，希望对读者有所帮助。
主题切换（1）：css变量的使用（:root）
Z_Wonderful的博客
12-01 405
:root 是一个伪类选择器，它匹配文档的根元素（即 <html> 元素）。使用 :root 定义 CSS 变量（自定义属性）可以让变量具有全局作用域，方便在整个项目中统一管理和动态调整样式
03.CSS嵌套 (Nesting)
粉丝们务必加入微信粉丝群
11-29 192
CSS嵌套是现代CSS中的一个革命性特性，它让开发者能够以更直观、更有组织的方式编写样式代码。通过嵌套，你可以创建反映HTML结构的CSS代码，提高代码的可读性和可维护性。CSS嵌套允许你通过将选择器嵌套在一起来编写更易维护和逻辑清晰的样式规则，类似于Sass等预处理器，但这是CSS的原生功能。理解CSS嵌套的基本概念和语法。了解嵌套的最佳实践和注意事项。掌握嵌套与媒体查询的结合使用。学会使用父选择器引用(&)掌握嵌套选择器的使用方法。父选择器引用 (&)
HTML/CSS 核心考点详解（字节跳动 ToB 中台场景）
2402_87628679的博客
12-01 833
语义化 HTML 就是用有明确含义的标签（如<header><nav><main>）替代无意义的通用标签<div>，让 HTML 结构 “自解释”—— 不用看 CSS/JS，就能看懂页面各部分的功能。块级格式化上下文，是一个 “独立的渲染区域”，区域内的元素布局不受外部影响，同时也不会影响外部元素。可以理解为：BFC 是一个 “隔离的盒子”，盒子里的元素怎么布局，都和盒子外的元素没关系。知识点核心考点实战场景语义化 HTML常用语义标签、结构合理性系统页面布局、模块划分Flex 布局。
CSS content-visibility
随笔
11-29 303
是一个强大的性能优化工具，特别适合内容丰富的长页面。通过智能地跳过不可见内容的渲染，可以显著提升页面加载速度和交互体验。但在使用时需要注意浏览器兼容性和潜在的可访问性问题，合理搭配来避免布局抖动。
DOM 节点
csbysj2020的博客
11-29 432
DOM节点是构成HTML文档的基本单元，包括元素节点、文本节点、属性节点等。每个节点都代表文档中的一个特定部分，如标题、段落、链接等。通过操作DOM节点，开发者可以动态地修改网页内容、样式和行为。DOM节点是Web开发中不可或缺的概念，掌握DOM节点操作方法对于开发高性能、可维护的网页至关重要。本文介绍了DOM节点的概念、类型、属性以及操作方法，希望对您有所帮助。在实际开发过程中，不断积累和总结，您将更加熟练地运用DOM节点。
深入解析display:inline、block与inline-block的区别
其中最常见的三种取值为：`inline`、`block` 和 `inline-block`。这三种显示类型决定了 HTML 元素在页面中的排列方式、尺寸行为以及与其他元素的交互关系。理解它们之间的区别对于实现精确的网页布局至关重要。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值