行盒,块盒,行内盒的特征

最新推荐文章于 2021-11-16 23:57:30 发布
最新推荐文章于 2021-11-16 23:57:30 发布
阅读量461 收藏 1
点赞数 3
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54096012/article/details/115448068
版权

行盒的特征(定义：display属性为inline的元素)
1.不会独占一行,内容决定大小
2.同一个包含块中，连续的多个行盒水平依次排列
3.设置宽高无效
4.padding / border / margin : 水平方向设置有效，垂直方向设置无效(不会实际占据空间)。

块级元素的特征(定义:display属性为block的元素)
1.会独占一行
2.设置宽高有效

行块盒模型(定义：元素的display属性为inline-block的盒子)
1.不会独占一行
2.同一个包含块中，连续的多个行盒水平依次排列
3.设置宽高有效

lao-qian
关注
前端CSS基础——行盒模型与行块盒模型
木的又
04-08 1533
文章目录行盒模型行盒模型的盒子属性行块盒什么是行块盒行块盒的简单应用实现网页的分页 行盒模型 行盒模型是display属性为inline的元素，常见的行盒元素有a、span、strong、em、video、audio、img等。 行盒模型与块盒模型的不同特点有： 行盒模型不独占一行，块盒模型独占一行。 块盒模型可对上下左右方向进行填充，行盒模型只能对水平方向进行填充。 行盒模型无法设置宽高，只能...
CSS布局模式、盒模型、块与行、inline-block
最新发布
m0_55498382的博客
10-13 400
基于盒子与其兄弟和祖辈盒子的交互方式来确定盒子的位置和大小的算法。
行盒与行块盒
weixin_34279579的博客
06-09 599
一.行盒 什么是行盒：display属性为inline的元素。 常见行盒：文字元素：span、abbr、em、i、strong、b 图片和多媒体：img、video、audio含义：页面具体内容（文字、图片、多媒体）都会生成行盒，（注意：文字：必须放置到行盒内，否则会生成匿名行盒；图片和多媒体：默认会生成行盒，通常不要对它们的盒子类型进行改动） 行盒显著特征： 1.行盒可被折断，因为...
CSS-9块盒，行盒，行块盒
duzishivip的博客
11-20 332
<!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 块盒模型的类型，组成部分、行盒模型特点，行块盒
leadingme的博客
03-24 1133
1.块盒模型 定义:display属性为block的元素 1.盒子类型对比 (1)行盒在页面中不换行，块盒独占一行 (2) 默认浏览器样式表设置的块盒：容器元素，h1-h6,p 默认浏览器样式表设置的行盒：span,a,img,video,audio 2.块盒的组成部分 内容 content 定义：内容部分通常叫做整个盒子的内容盒 content.box...
行盒的特征、尺寸和定位
weixin_45980901的博客
12-22 260
行盒概述 display属性为inline（默认值）的元素 1.文字元素：span、em、abbr、strong、i、b， 2.图片和多媒体：img、video、audio， 3.页面的具体内容（文字、图片、多媒体）都会生成行盒，页面区域中包含内容，所以块盒包含行盒块盒内放置行盒，行盒内不要放置块盒。 特征 1.行盒可被折断，因为内容可被折断换行， 2.同一个包含块中，连续的多个行盒水平依次排列，...
css盒模型和块级、行内元素深入理解
12-13
块级元素，如`div`和`p`，它们独占一行，可以设置宽度和高度，并能容纳其他块级和行内元素。行内元素，如`a`、`em`和`strong`，它们不会占据整行，其宽度由内容决定，高度通常基于字体大小，不能直接设置宽高。然而...
工程师必知必会盒模型与块状行内元素.docx
10-23
**控制块级元素与行内元素的方法**： - 通过改变`display`属性来转换元素类型。例如，可以将一个行内元素转换为块级元素，或者反之亦然。 - 使用`float`属性可以让块级元素像行内元素那样显示在同一行，而使用`clear...
行内元素和块级元素盒子模型的特点
lck898989的博客
01-13 481
行内元素在盒子模型的时候要注意：padding-bottom和padding-top是不起作用的，padding-left和padding-right起作用 块级元素在盒子模型中padding四个值都会起作用 例如下面的例子： Page Title *{ margin: 0px;
关于行盒和块盒的小总结
m0_55577194的博客
11-16 553
1.行盒子不换行，但是用行盒子就是盒子排列是不合适的，比如代码 <div> <span>Lorem.</span> <span>Maiores!</span> <span>Doloremque!</span> <span>Placeat?</span> <span>Saepe!</span&g
CSS笔记——行盒及行块盒
weixin_43888905的博客
03-29 541
页面重构师：将设计师给的设计稿实现为静态页面。 行盒 盒子内容多若需要换行显示，padding、border等也换行显示。而不是像块盒一样只换行显示内容而padding、border等作为块整体的边距显示在页面上。下图上下两部分分别为块盒和行盒。 行盒不能设置宽高。若要设置，使用字体大小、行高、字体类型来间接设置显示的行间距。 padding水平方向上有效，垂直方向上只影响背景，内容不动。 border、margin同上。 行块盒 display: inline-block; 不独占一行，上.
行盒、块盒和行块盒的区别
qq_42931285的博客
08-31 790
行盒 行盒不能设置宽高 行盒由内容绝大小 内边距（padding） 水平方向有效，垂直方向不会实际占据空间。 边框(border) 水平方向有效，垂直方向不会实际占据空间。 外边距（margin） 水平方向有效，垂直方向不会实际占据空间。 行块盒 不独占一行 盒模型中所有尺寸都有效 块盒 独占一行 盒模型中所有尺寸都有效 ...
CSS：行盒的盒模型
雷爷的博客
09-02 820
行盒的盒模型 常见的行盒：包含具体内容的元素 span、strong、em、i、img、video、audio 显著特点 盒子沿着内容沿伸 行盒不能设置宽高 调整行盒的宽高，应该使用字体大小、行高、字体类型，间接调整。 内边距（填充区） 水平方向有效，垂直方向不会实际占据空间。 边框 水平方向有效，垂直方向不会实际占据空间。 外边距 水平方向有效，垂直方向不会实际占据空间。 行块盒...
CSS学习笔记——盒模型，块级元素和行内元素的区别和区别
老贝V5
01-08 828
今天本来打算根据自己的计划进行前端自动化的学习的，无奈早上接到一个任务需求需要新增一个页面。自从因为工作需要转前端之后，自己的主要注意力几乎都放在JavaScript上面了，对CSS和HTML这方面其实基础真的很差，今天在写页面的时候就被浮动啊、内外边距啊这些耽误了不少时间。 反思一下，自己确实在这些基础方面的不足很多，所以今后的学习笔记主要是我在工作中遇到的一些问题和他们的解决方法。其中可能中
css区别行盒（行内元素），块盒（块级元素），行块盒
weixin_45773503的博客
02-15 1508
常见块级元素有： html、body、div、header、footer、nav、section、aside、article、p、hr、 h1~h6、ul、ol、dl、form、table、tbody、thead、tfoot、tr等； 常见行内元素有： span、a、img、textarea、button、input、br、label、select、canvas、progress、cit...
css居中总结（行盒(行块盒)水平居中、常规流块盒水平居中、浮动块盒水平居中、绝对定位元素的水平居中....）
leadingme的博客
03-25 1371
定义：居中是指盒子的其包含块中居中 行盒（行块盒）水平居中 直接设置行盒(行块盒)父元素 text-align:center; 常规流块盒水平居中 定宽, 设置左右margin为auto; 浮动块盒水平居中 一般会通过设置magin手动居中 绝对定位元素的水平居中 定宽，设置左右的坐标为0 (left:0,right:0),将左右的margin设置为auto , (因为不是常规流，所...
盒模型的分类
qq_45762293的博客
10-26 256
行盒、块盒、行块盒 行盒（inline） 指可以一起在一行内显示的标签 常见的行盒标签： span、strong、em、i、img、video、audio 行盒特点： 盒子沿着内容沿伸 在不设置宽度情况下，content区域的长度随内容长度变化 行盒不能设置宽高 调整行盒的高，应该使用字体大小、行高、字体类型，间接调整，不能直接设置hight值。 内边距（填充区） 可以设置侧面的pad...
块级盒模型 行内盒模型
msjlktc的博客
05-17 482
行内盒模型 1.行内盒模型 不支持宽高（width，height） 块级盒模型是支持。 2.行内盒模型不支持 margin-top 块级盒模型是支持的 3.行内盒模型和块级盒模型都支持左右。 4.行内盒模型的上下padding不会对其他元素产生物理影响（推开其他块或改变自身位置）但会产生显示上的影响。 5.行内盒模型的padding-left，margin-left可以使用，可以把自己推开。 6....
CSS盒模型详解：布局与视觉格式化的核心要素
包含块（Containing Block）的概念在此模型中至关重要，它是元素定位的参照框架，决定了元素的定位、尺寸和对其父元素的影响程度。 总而言之，要精通CSS布局，必须熟练掌握盒模型的细节和视觉格式化模型的原理，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值