行盒子的盒模型

最新推荐文章于 2026-06-16 18:02:25 发布
原创 最新推荐文章于 2026-06-16 18:02:25 发布 · 278 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#css
本文深入探讨了行盒模型的特点，包括span、strong等常见元素，以及它们的宽高、内边距、边框和外边距特性。同时，解析了行块盒的概念，如display:inline-block的应用，以及在网页布局中的优势。文章还提到了可替换与非可替换元素的区别，以及在实际开发中的应用。

行盒的盒模型

常见的行盒: 包含具体内容的元素
span,strong,em ,i,img,video,audio

显著特点

  1. 盒子沿着内容衍生

  2. 行盒不能设置宽高，行盒的宽高是根据内容的大小和多少决定的。调整行盒的大小应该使用字体的大小，行高，字体类型，间接调整。

  3. 内边距（填充区）
    水平方向有效，垂直方向只影响背景，不会占据具体空间

  4. 边框
    水平方向有效，垂直方向只影响背景，不会占据具体空间

  5. 外边距

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

行块盒

disply : inling-block 的盒子

  1. 不独占一行
  2. 盒模型中的所有尺寸都有效

在开发中经常用于分页

空白折叠经常发生在行盒内部或行盒之间

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

大部分元素，页面上显示的内容取决于元素的内容，此元素叫非可替换元素
少部分元素，在页面上显示的内容取决于元素的属性，此元素叫可替换元素
可替换元素有 : img,video,audio
绝大部分的可替换元素都为行盒。可替换元素类似于行块盒，所有的尺寸都有效

CSS笔记：9.行盒的盒模型
luoyao_的博客
03-09 203
CSS学习笔记：行盒的盒模型
CSS中的行盒（line-boxes）和行内盒子（line-box）
星环
09-03 5012
CSS中的行盒（line-boxes）和行内盒子（line-box）以及盒模型的关系。
行盒的特征、尺寸和定位
weixin_45980901的博客
12-22 338
行盒概述 display属性为inline（默认值）的元素 1.文字元素：span、em、abbr、strong、i、b， 2.图片和多媒体：img、video、audio， 3.页面的具体内容（文字、图片、多媒体）都会生成行盒，页面区域中包含内容，所以块盒包含行盒块盒内放置行盒，行盒内不要放置块盒。 特征 1.行盒可被折断，因为内容可被折断换行， 2.同一个包含块中，连续的多个行盒水平依次排列，...
行盒与行块盒
weixin_34279579的博客
06-09 732
一.行盒 什么是行盒：display属性为inline的元素。 常见行盒：文字元素：span、abbr、em、i、strong、b 图片和多媒体：img、video、audio含义：页面具体内容（文字、图片、多媒体）都会生成行盒，（注意：文字：必须放置到行盒内，否则会生成匿名行盒；图片和多媒体：默认会生成行盒，通常不要对它们的盒子类型进行改动） 行盒显著特征： 1.行盒可被折断，因为...
行内元素如何设置宽高
厚积薄发
09-10 5925
参考 HTML 行内元素 与块级元素 说说行内元素与块级元素以及之间的转换？ 说说行内元素与块级元素以及之间的转换？ 1.常用的行内元素<a> 标签可定义锚 <abbr> 表示一个缩写形式 <acronym>定义只取首字母缩写 <b> 字体加粗 <bdo> 可覆盖默认的文本方向 <big> 大号字体加粗 <br> 换行 <cite> 引用进行定义 <code> 定义计算机代码文本
带你初步了解盒子模型
F_eve的博客
11-15 586
首先弄清楚什么是盒子模型？ 很多初学者认为盒子模型就是div，span，其实这种说法是不完全正确的。实际上任何元素在页面上都会形成一个矩形区域，这也就是我们所说的盒子模型。只不过我们接触和使用最多的模型是div和span。其它如h1，p，a标签实际上都是盒子模型。 虽然都是盒子模型，但是也存在一些差别。 我们通常将盒子模型分3种: 1:行盒 行盒的特征是display元素的属性值为inline，在页面中显示的时候是不独立成行的。我们常用的span，a ，img等都是行盒。 2:块盒 块盒的特征是displa
CSS 盒模型详和盒子的浮动与定位和行级，快级元素
qq_40135955的博客
04-09 320
第一节：盒模型基本概念 盒模型： 相框边框 - > border 画和相框边框的距离 -> padding 相框之间的距离 -> marg border-width 边框宽度(粗细) border-color 边框颜色 border-style 边框样式 用 padding 设置内边距 用 margin 设置外边距 第二节：...
CSS盒模型篇
weixin_44908855的博客
06-21 492
1. 盒模型概述 box:盒子，每个元素在页面中都会生成一个矩形区域（盒子） 盒子类型：块盒、行盒、行块盒 2. 块盒（块级元素） 块盒：display：bolck 每个块元素通常都会独自占据一整行或多整行 可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建 总是从新行开始 高度，行高、外边距以及内边距都可以控制。 宽度默认是容器的100% 可以容纳内联元素和其他块元素。 序号
盒子模型的基础了解和运用（1）
qq_44197526的博客
11-09 542
盒子模型什么是盒子模型盒子模型的组成部分盒子的类型行盒特征行内元素与块级元素对比小结 什么是盒子模型 当你的浏览器展现一个元素时，这个元素会占据一定的空间。这个空间由四部分组成。 中间是元素呈现内容的区域。这个区域的外面是内边距。再外面是边框。最外面的是外边距，外边距将该元素与其它元素分开。 内边距，边框和外边距在元素的上、右、下、左都可以有不同的大小。所有这些大小值都可以为0。 盒子模型的组成部分 一个盒子模型的组成由四部分组成： 内容盒（content box） 对于整个页面来说内容盒的内容可以说是元
行内宽高设置无效的解决
dbrp26282的博客
09-24 1423
先理解什么是块状元素和行内元素 。 块状元素不允许同一行内有其它元素出现,所以你用两个p标签的话,p是从上到下依次排列的. 块状元素是可以设置任意的高宽,margin,padding等属性的, 块元素(block element)　　◎ address - 地址◎ blockquote - 块引用◎ center - 举中对齐块◎ dir - 目录列表◎ div - 常用块级...
CSS基础之行盒的盒模型
yihen0214的博客
08-29 218
行盒的盒模型 display:inline 常见的行盒: 包含具体内容的元素 span , strong, em , i , img, video, audio 文章目录行盒的盒模型显著特点行块盒空白折叠可替换元素 和 非可替换元素 显著特点 盒子的大小沿着内容延申 行盒不能设置宽高, 行盒的宽高取决于内容的多少, 字体的大小, 行高. 所以调整行盒的宽高, 应该使用字体的大小, 行高, 字体类型, 间接调整 内边距（填充区） 水平方向有效，垂直方向仅会影响背景，不会实际占据空间 边框 水平
HTML盒子尺寸的计算
weixin_34080951的博客
07-13 1190
参考链接http://edu.51cto.com/lesson/id-54739.html 转载于:https://www.cnblogs.com/owasp/p/5665436.html
css让两个不同高度的盒子，顶部对齐
macangyewangs的博客
08-31 6275
定义和用法 vertical-align 属性设置元素的垂直对齐方式。 baseline 默认。元素放置在父元素的基线上。 sub 垂直对齐文本的下标。 super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶端与父元素字体的顶端对齐 middle 把此元素放置在父元素的中部。 bottom 把元素的顶端与行中最低的元素的顶端对齐。 text-bottom 把元素的底端与父元素字体的底端对齐。 length % 使用 "line-height" 属性的百
CSS：行盒的盒模型
雷爷的博客
09-02 917
行盒的盒模型 常见的行盒：包含具体内容的元素 span、strong、em、i、img、video、audio 显著特点 盒子沿着内容沿伸 行盒不能设置宽高 调整行盒的宽高，应该使用字体大小、行高、字体类型，间接调整。 内边距（填充区） 水平方向有效，垂直方向不会实际占据空间。 边框 水平方向有效，垂直方向不会实际占据空间。 外边距 水平方向有效，垂直方向不会实际占据空间。 行块盒...
行盒的盒模型
Mr_Envelope的博客
10-19 246
行盒的盒模型 常见的行盒：包含具体内容的元素 a、span、strong、em、i、img、video、audio… 显著特点 盒子沿着内容延伸。 行盒不能设置宽高。 调整行盒的宽高，应该使用字体大小，行高，字体类型，间接调整。 内边距（填充区） 水平方向有效，垂直方向仅会影响背景，不会实际占据空间。 边框 水平方向有效，垂直方向仅会影响背景，不会实际占据空间。 外边距 水平方向有...
行盒子
weixin_43252366的博客
12-05 137
每行文本都会生成一个行盒子，行盒子还可以进一步生拆解成行内元素的行内盒子，或者链接两个行内元素的匿名行内盒子。 行高指的是行盒子的总高度。也叫行间距。
21、盒子大小
MoonNight608的博客
06-23 357
文章目录介绍盒子大小 介绍 本文是在学习CSS时做的学习笔记，所有笔记内容为 CSS学习笔记 盒子大小 <html lang="en"> <head> <meta charset="UTF-8"> <title>meta</title> </head> <style> .box1{ width:100px; height:100px; background-color:#bfs
css行盒的盒模型
qq_41938120的博客
03-12 164
常见的行盒 包含具体内容的元素 span、strong、em、i… 特点 1.盒子沿着内容延伸 2.行盒不能设置宽高 调整行盒的宽高，应该使用字体大小、行高、字体类型等等间接调整。 3.内边距（填充区） 水平方向有效，垂直方向不会实际占据空间 4.边框 水平方向有效，垂直方向不会实际占据空间 5.外边距 水平方向有效，垂直方向不会实际占据空间。 行块盒 1.不独占一行 2.盒模型中所有尺寸都有效 ...
CSS 悬挂空白与选区溢出
最新发布
luemeon的博客
06-16 434
在（或pre-line）模式下，浏览器被要求既要保留空格，又要自动换行。原则 A：空格必须保留（因为是pre-wrap原则 B：空格后面没有宽度了，必须换行。如果把这些行尾空格硬塞在当前行，气泡盒子就会被撑大；如果把它们带到下一行开头，下一行的文本又会无故缩进（这通常不是用户想要的）。这些行尾的空白字符不消失，而是“悬挂”在行末的边界之外。它们存在于这一行，但被当作“零零兵”，不占用整行盒子的实际布局宽度（Advance Width）。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值