CSS中的inline和inline-block

最新推荐文章于 2024-07-27 17:24:14 发布
最新推荐文章于 2024-07-27 17:24:14 发布
阅读量422 收藏
点赞数 1
分类专栏： 原创 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DDD_QQQ/article/details/102688825
版权

inline只是让当前的元素变成行内元素，但是对元素中包含的的块级元素无效，元素包含中的块级元素还是另起一行显示的。元素外的行内元素无法和元素内的块级元素在一行中显示。

inline-block让当前元素，包含元素中的块级元素，一起成为了行内元素。即便元素包含中的块级元素在这个行内元素中的显示还是另起一行的，但是对于元素外的行内元素来说可以在一行显示了，不过对齐的是元素内的最后一行，像图片在文字中显示一样。想要与首行对齐可以将首行以外的元素的position设置成absolute，这样首行以外的元素就脱离文档流了，元素外的行内元素就可以和首行对齐了

BetaCat1
关注
专栏目录
【html】常见的行标签（inline）、块标签（block）和行块标签（inline-block）特点及相互转换
m0_50947589的博客
04-13 1万+
行标签（inline）、块标签（block）和行块标签（inline-block）的特点及相互转换
CSS的inline、inline-block
找到Web
08-15 395
CSS inline、inline-block 本文将介绍内联布局中，内容的布局方式及相关原理。 inline box 与 line box 对于行框、内联框，标准文档中有个很经典的图。 附上自己的一段代码，方便理解。 <div style="width: 200px; margin: auto;"> 这是一段代码，又长又好看的代码。 <span style="color: red">这是inline box</span> 这又是一段代码，又长又好看的代码。 &l
CSS的inline、block与inline-block
weixin_34191845的博客
06-06 236
基本知识点 行内元素一般是内容的容器，而块级元素一般是其他容器的容器，行内元素适合显示具体内容，而块级元素适合做布局。 块级元素(block)：独占一行，对宽高的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽。 行内元素(inline)：可以多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高。 行内块元素(...
CSS布局常用属性介绍
最新发布
m0_75116965的博客
07-27 1251
本文介绍了一些常用的css属性
CSS之inline和inline-block
weixin_30902251的博客
09-28 203
inline-block 控制台-代码： PS：inline-block是让元素以内联形式存在，也就是不是块级，但是表现起来(又具有块级元素的高度)--也就是可以调高度(margin或者padding,height) 二· 如果是inline的话，也就是内联，inline是只有水平的宽度可以调的，没有高度，任何的属性调高度都无效 三。如果不用上述两个的话,d...
block、inline和inline-block
热门推荐
每个人为不同的理由带着面具说谎，动机也只有一种名字那 叫做欲望
01-07 1万+
block、inline、inline-block行内元素和块级元素blockinlineinline-block行内元素和块级元素的区别常见用法 行内元素：又叫内联元素， 块级元素：是一个元素，占用了全部宽度，在前后都是换行符
css inline元素与inline-block,block元素
allenmu1982的博客
06-20 151
工作原因很少写CSS,结果总结过好多次的东西，用起来的时候我还是忘了，现在打算由有道云笔记彻底转战博客园，貌似跟方便些，有道云记录了那么多笔记，我却很少翻阅..... 一，inline元素 1,内联元素不能包含块元素，它只能包含其他的内联元素 块级元素是不能放在<p>里面的 所谓的不可自由嵌套的元素就是里面只能放内联元素的，它们包括有：标题标记的<h1>、...
关于css display: inline block inline-block的区别分析
01-21
display:inline-block 将...不过 Firefox 下却有私有属性 -moz-inline-box 和inline-block 形似，为什么是“形似”而不是“神似”呢？这是因为使用 -moz-inline-box 会带来很多意想不到的后遗症，比如使用这一属性后，
css之display属性之inline-block布局实现详解
11-21
需要注意的是，`display: inline-block`在Internet Explorer 6和7中不被支持，需要使用特定的技巧来处理，例如使用`*zoom: 1;`和`display: inline;`的组合，或者利用`inline-table`等其他方法来模拟`inline-block`的...
CSS中使用inline-block来进行居中的示例
01-19
基本方法是使用 display: inline-block, vertical-align: middle样式和伪元素让内容块在容器中居中。我的实现用到了几个在其他地方见不到的新技巧解决了一些问题。 　内容区声明的宽度不能大于容器的100% 减去0.25em...
CSS属性display:inline-block用法深入理解
12-13
在CSS布局中，`display:inline-block`是一个非常重要的属性，它结合了`block`和`inline`两种显示方式的优点，使得元素既能保持内联元素的特性（如同行排列，允许空格），又能拥有块级元素的特性（如设置宽高，垂直居...
block，inline和inline-block概念和区别
lihei12345的专栏
07-13 1412
[转]  总体概念 block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。大体来说HTML元素各有其自身的布局级别（
inline和inline-block区别
qq_44823936的博客
08-26 247
最近在写页面的时候一直纠结这俩属性有什么区别，最后还特意查了下，一样可以在同行显示，但inline-block可以调节高度、宽度。 原文：https://zhidao.baidu.com/question/527108547.html
CSS中inline-block和inline的区别
syl2850246的博客
09-01 971
行内块元素表现其实和行内元素一样，只是其可以设置width和height属性。
inline和inline-block的区别
qq_41240287的博客
05-06 325
https://blog.csdn.net/kalama/article/details/79057686
inline和inline-block有什么区别？
alive_new的博客
03-21 599
inline 元素是内联元素，水平排列，不会独占一行，不可以设置宽度和高度。inline-block 元素是内联块级元素，水平排列，可以设置宽度和高度，可以在一行中排列，也可以在多行中换行。使用 inline 适合不需要设置宽度和高度，只需水平排列的元素。使用 inline-block 适合需要控制宽度和高度，同时水平排列的元素，以及在一行中排列多个元素或需要换行的场景。
inline 与inline-block到底有什么区别
qill_qill的博客
06-04 619
之前对inline与inline-block一直感觉比较容易混淆他们之间的特性，特别是在看到这个图的时候，这是对“box2”设置为{display:inline-block;} 那么什么是inline呢，根据字面意思，它是在一条线上的，那么内联就是这些元素是排成一条线的； 那inline-block又是什么呢，在W3SCHOOL里面解释它就是排成线，但表现得像块一样，不过感觉还是很模糊；
CSS中display:inline 和 inline-block的区别
jiaohuizhuang6019的博客
09-13 1032
是两种 CSS 属性值，它们都用于控制元素在水平方向上排列，并与文本流中的其他元素一起显示。它们之间的主要区别在于如何处理元素的宽度和高度以及如何与其他元素排列。更适合需要元素在一行内显示，但又希望具有更精确控制宽度、高度以及上下间距的情况。根据具体的布局需求和设计目标，可以选择使用其中之一。适用于需要元素在一行内显示，并且宽度和高度由内容决定的情况，而。
css中inline-block
05-04
inline-block 是 CSS 中常用的一个 display 属性值，它可以让元素既具有 inline 元素的特性，又具有 block 元素的特性。 具体来说，使用 inline-block 可以让元素： 1. 能够在一行内显示，不会像 block 元素一样...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值