CSS——行盒模型（拓展行块盒）

最新推荐文章于 2024-11-06 09:40:17 发布
原创 最新推荐文章于 2024-11-06 09:40:17 发布 · 493 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #css3

本文深入探讨了行盒模型，包括常见的行盒元素及其特性，如a、span、img等，以及如何通过字体大小、行高等间接调整其大小。同时，介绍了行块盒的概念，display:inline-block的应用，以及可替换元素的盒模型特性。文章还讲解了空白折叠现象，以及如何使用object-fit属性控制图片显示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

行盒的盒模型

常见的行盒：包含具体内容的元素

a、span、strong、em、i、img、video、audio

显著特点

  1. 盒子沿着内容延伸
  2. 行盒不能设置宽高（设置和无效）

调整行盒的宽高，应使用字体大小、行高、字体类型，间接调整

  1. 内边距（填充区）padding

水平方向有效，会占据空间，垂直方向只会影响背景，不占据空间

  1. 边框border

水平方向有效，会占据空间，垂直方向只会影响背景，不占据空间

  1. 外边距margin

水平方向有效，会占据空间，垂直方向只会影响背景，不占据空间

行块盒

display:inline-block

  1. 不独占一行

  2. 盒模型中所有尺寸都有效

空白折叠

空白折叠发生在行盒（行块盒）内部或行盒（行块盒）之间

行盒和行块盒之间的空白处会出现一个间隔。

可替换元素和非可替换元素

大部分元素，页面显示的结果，取决于元素的内容，成为非可替换元素

少部分元素，页面上显示的结果，取决于元素属性，称为可替换元素

可替换元素如：img、video、audio

绝大部分可替换元素均为行盒

可替换元素类似于行块盒，盒模型中所有尺寸都有效

object-fit:cotain(不打破图片原有比例，保证图片不溢出)、fill(默认值，填充满区域)、cover(既要填充满又要保有原有比例，可能会牺牲一部分图片内容)
Gradio全解1（上）——Gradio简介：大模型WebUI框架
shao918516的博客
06-28 3万+
本章第一节做了Gradio简介，包括Gradio是什么、历史、特性及用途；第二节讲述了Gradio与NiceGui、StreamLit、Dash及PyWebIO的比较，并给出了选择建议；第三节对新版Gradio5的特性作了详解。
HTML+CSS实践项目一——摄影网站案例总结分享
qq_55002082的博客
08-01 1463
HTML+CSS实践项目一——摄影网站案例总结分享
CSS：行盒的盒模型
雷爷的博客
09-02 868
行盒的盒模型 常见的行盒：包含具体内容的元素 span、strong、em、i、img、video、audio 显著特点 盒子沿着内容沿伸 行盒不能设置宽高 调整行盒的宽高，应该使用字体大小、行高、字体类型，间接调整。 内边距（填充区） 水平方向有效，垂直方向不会实际占据空间。 边框 水平方向有效，垂直方向不会实际占据空间。 外边距 水平方向有效，垂直方向不会实际占据空间。 行块盒...
CSS基础之行盒的盒模型
yihen0214的博客
08-29 166
行盒的盒模型 display:inline 常见的行盒: 包含具体内容的元素 span , strong, em , i , img, video, audio 文章目录行盒的盒模型显著特点行块盒空白折叠可替换元素 和 非可替换元素 显著特点 盒子的大小沿着内容延申 行盒不能设置宽高, 行盒的宽高取决于内容的多少, 字体的大小, 行高. 所以调整行盒的宽高, 应该使用字体的大小, 行高, 字体类型, 间接调整 内边距（填充区） 水平方向有效，垂直方向仅会影响背景，不会实际占据空间 边框 水平
CSS样式：行内元素 盒子模型
那人独钓寒江雪
06-30 319
CSS样式：行内元素以及盒子模型
CSS-9块盒，行盒，行块盒
duzishivip的博客
11-20 379
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
CSS中的行盒（line-boxes）和行内盒子（line-box）
星环
09-03 4606
CSS中的行盒（line-boxes）和行内盒子（line-box）以及盒模型的关系。
CSS——选择器、PxCook软件、盒子模型
阳光开朗大男孩 =￣ω￣=的博客
11-05 884
博客内容如下： 选择器包括结构伪类和伪元素选择器。 PxCook 有开发和设计面板。 盒子模型由内容、内边距、边框、外边距组成，可设置边框样式、内边距多值、尺寸计算方式、处理外边距合并和塌陷问题、设置元素溢出效果、圆角和阴影。 有抖音直播和新闻两个综合案例，展示盒子模型的应用。
CSS——复习强化、标准流、浮动、Flex 布局
最新发布
阳光开朗大男孩 =￣ω￣=的博客
11-06 827
博客内容如下： 复习强化包含小米登录和爱宠知识两个练习页面的 CSS 样式设置。 介绍了标准流与浮动，包括浮动的特点及清除浮动的方法。 Flex 布局包括认识、组成和多种属性，如创建容器、主轴对齐、侧轴对齐、换行等。 有新鲜好物案例，运用 Flex 布局设置页面样式。
actual combat 36 —— css样式练习
HSH541的博客
07-30 294
弹性盒子布局 display: flex; flex-grow: 1：在CSS Flexbox布局中用于指定flex项目的放大比例。当flex容器的空间大于其flex项目所需的总空间时，flex-grow属性允许flex项目根据它们的flex-grow值来分配额外的空间。如果所有flex项目的flex-grow值都相同（比如都是1），那么它们将等比例地增长以填充容器的剩余空间。（简单来说：就是剩余空间的分配比例，默认是0，越大分配的越多）
21、CSS基础——行盒盒模型
lvh98的博客
10-14 548
行盒盒模型 常见的行盒：包含具体内容的元素 span、strong、em、i、img、video、audio 下面来比较一下块盒和行盒的显示区别 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
CSS之行内元素的盒模型
m0_51474171的博客
09-21 152
行内元素不支持设置宽度和高度，但如果必须为行内元素设置宽度和高度，可以通过display来设置元素的显示类型 visibility来设置元素的显示状态 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view
CSS学习（10）行盒盒模型
b4834988的博客
09-22 194
常见的行盒：包含具体内容的元素 span、strong、em、i、img、video、audio 显著特点： 1.盒子沿着内容延伸 2.行盒不能设置宽高，调整行盒的宽高，应使用字体大小、行高、字体类型，间接调整 3.内边距（填充区）、边框、外边距 水平方向有效，垂直方向仅会影响背景，不会实际占据空间 行块盒 display：inline-block 不会换...
CSS——盒模型
SXYlyf的博客
03-17 100
盒模型 box：盒子，每个元素在页面中都会生成一个矩形区域 盒子类型： 行盒：display属性等于inline的元素 块盒：display属性等于block的元素 行盒在页面中不换行，块盒独占一行 display默认值为inline 浏览器默认样式表设置的块盒：容器元素、h1~h6、p 常见的行盒：span、a、img、video、audio 盒子的组成部分 无论是行盒还是块盒，都有下面几个部分组成，从内到外分别是： 内容 content width、height，设置的是盒子内容的宽高 内容部分
整理css基础篇----盒模型（类型+组成+应用+行盒盒模型）
qq_42453562的博客
02-19 236
box：盒子，每个元素在页面生成一个矩形区域。 一：盒子类型： 1：行盒： （1）display：inline的元素。 （2）页面中不换行。 （3）常见行盒：span、a、img、video、audio 2：块盒： （1）display：block的元素。 （2）页面中独占一行。 （3）浏览器默认样式表设置的块盒：容器元素，h1~h6、P 二：盒子组成部分： 1：内容：content （1）wid...
浅谈css（块级元素、行级元素、盒子模型）
weixin_30565327的博客
09-23 127
一、块级元素的特点 1、默认显示在父标签的左上角 2、默认占满一行（占满整个文档流） 文档流是将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。 二、行内元素（内联元素）的特点 1、大小受到文字区域的影响，不受到width、height影响。 2、行内元素不会独自占满一行。 例： 1 <div id="d1"> 2 这是块级元素 3 &l...
行内元素盒块状元素的转换
dede3535的专栏
07-18 105
div与span对文字的控制，div可设置宽高，而span不可以，文字多大就多大； div转换为span：display：inline；去掉设置的宽高，因为没有用； span转换为div：display：block；设置宽高 <style>div{ background:red; height:200px; width:200px; display:inline...
CSS布局模式、盒模型、块与行、inline-block
m0_55498382的博客
10-13 487
基于盒子与其兄弟和祖辈盒子的交互方式来确定盒子的位置和大小的算法。
CSS笔记——行盒及行块盒
weixin_43888905的博客
03-29 635
页面重构师：将设计师给的设计稿实现为静态页面。 行盒 盒子内容多若需要换行显示，padding、border等也换行显示。而不是像块盒一样只换行显示内容而padding、border等作为块整体的边距显示在页面上。下图上下两部分分别为块盒和行盒。 行盒不能设置宽高。若要设置，使用字体大小、行高、字体类型来间接设置显示的行间距。 padding水平方向上有效，垂直方向上只影响背景，内容不动。 border、margin同上。 行块盒 display: inline-block; 不独占一行，上.
利用H5罗盘API实现多屏互动：3D盒模型
当手机移动或旋转时，这些数据可以转化为CSS3的`rotate3d`函数所需的参数，进而更新PC浏览器中3D模型的旋转角度，实现两屏间的同步互动。 本地测试步骤如下： 1. 在PC上运行`node index.js`启动项目，浏览器会自动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

无所畏惧的man

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值