CSS使用display:incline与float:left的区别：脱离文档流 参差不齐

最新推荐文章于 2022-03-21 08:21:51 发布
最新推荐文章于 2022-03-21 08:21:51 发布
阅读量196 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fujian9544/article/details/108776299
版权

 脱离文档流

对元素设置display：inline-block ，元素不会脱离文本流，
而float就会使得元素脱离文本流，且还有父元素高度坍塌的效果

参差不齐：display的空隙可以使用font-size为0px进行去除

https://www.cnblogs.com/Ry-yuan/p/6848197.html

思维小刀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[css] display为inline-block会默认扩展为父元素的高度吗
weixin_36210698的博客
05-07 1856
display为inline-block会默认扩展为父元素的高度吗 答案为不会，看下面的代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w...
Thymeleaf中使用th:inline内联在JS代码中获取Model值不会更新的问题
Scluis的博客
05-14 497
前言 最近在用Thymeleaf，发现在Js取出Model中的值后，如果Model中的值刷新了，Html页面中Model的值会刷新，但是JS中的值不会刷新，记录一下具体问题和解决方法。 问题及解决 先放一下之前有问题的代码： Html: <a th:text="${currentTypeNum<totalTypeNum}?'...':'收起'" class="ui large basic label m-margin-tb-tiny m-black" id="showOrHideType" t
CSS使用display:incline：元素放置在一行之内
思维小刀
04-15 607
https://www.cnblogs.com/Ry-yuan/p/6848197.html
display:inline、block、inline-block的区别
hi_dzj的专栏
07-05 757
display:block就是将元素显示为块级元素. 　　block元素的特点是： 　　总是在新行上开始； 　　高度，行高以及顶和底边距都可控制； 　　宽度缺省是它的容器的100%，除非设定一个宽度 　　, , , , 和 是块元素的例子。 　　display:inline就是将元素显示为行内元素. 　　inline元素的特点是：  　　和其他元素都在一行上； 　　
html标签属性
pinganaaa的博客
08-19 462
html标签属性 二级标题是标签，三级标题是该标签内能够配置的属性 ，四级标题是属性值 1. !DOCTYPE html DTD：文件类型声明 放在html文件的第一行 2.html html:html文件对，里边通常包含head和body两部分 2.1lang lang：html中设置的属性，属性值定义该html文件的语言，en是英文，ch是中文 3.head head：这里的head不是网页头部的意思，而是网页配置信息存放的位置。 head内没有属性可以设置，所以下边的三级标题都是body中可以设置的标
浅谈display：inline-block
热门推荐
bigboom_的博客
04-23 2万+
css之display:inline-block布局 先写几个常用的display布局方法 1.display：none 用来在不删除元素的情况下隐藏或显示元素。 它和 visibility 属性不一样。把 display 设置成 none 元素不会占据它本来应该显示的空间，但是设置成 visibility: hidden; 还会占据空间。 2.display：block 块级元素 通常可以用来搭配display：none来实现元素的显示或隐藏，也可以作为块级元素来使用，使元素独占一行 3.displ
Android-InclineMeasure:一个安卓应用程序，可让您使用智能手机传感器测量手机的倾斜角度
07-14
3. **数据处理与滤波**：陀螺仪数据可能会受到噪声和漂移的影响，因此通常需要对原始数据进行平滑处理，如使用低通滤波器或卡尔曼滤波器，以提高测量精度。 4. **UI更新**：在Android中，通常使用Handler或者...
INCLINE
10-24
"INCLINE"是一个与字体相关的主题，这通常指的是倾斜或斜体的字体样式。在计算机和设计领域，字体是文字的视觉表现形式，而倾斜的字体（也称为斜体或INCLINE）则用于强调或者提供一种不同的视觉效果。在排版中，斜体...
Neonnaut.github.io:许多标记语言的行间光泽生成器。 混杂
07-24
有关设置行间光泽度的信息，请参阅以下文档： 采用 确保在输入中至少提供三行，在倒数第二行加上你的注解，在最后一行加上你的翻译。 （ZBB 可以使用两个）。 在这种情况下，您的输入将如下所示： Astra ...
float与定位脱离文档流布局规则
weixin_50736511的博客
03-21 1133
脱离文档流的css 1.float:left; 2.position: absolute; 3.position:fixed 一、float 使用float可以脱离文档流。 使用float脱离文档流时，其他盒子会无视这个元素，该元素会浮动于其他文档流之上。 注意！！！：其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。 二、position: absolute; 若只指定 position: absolute; （1）相对于前面的元素则会以正常的文档流方式排练在前面的元素后面 ​ (2) 相对
css向左浮动错乱,CSS - 浮动：左对齐问题
weixin_39795268的博客
08-04 1243
我建立了一个论坛使用的DIV这里列出的是我有CSS - 浮动：左对齐问题/* forum like build */.myForum{float: left;width: 620px;margin-top: 10px;border: 2px solid #0F5C8E;padding: 1px;overflow: hidden;display: block;}.myForum > .head...
[前端設計] 设置float:left后居然没有正确对齐？
weixin_30686845的博客
11-26 932
select { float:left; } 设置后并没有左对齐！？ 换一种思路解决了问题（但是为什么float:left有问题还不清楚） select { display:inline-block; } 转载于:https://www.cnblogs.com/jacky-dotnet/p/4122646.html...
HTML常用标签含义及对应中英文
大叔很坑的博客
12-23 7696
标签标签含义英文英文含义备注h标题headline标题 p段落paragraph段落 hr水平分割线horizontal rules水平分割线 b加粗bold加粗/粗体 strong加粗(强调语
HTML中是否脱离文档流
qq_27381193的博客
12-03 2081
我们在显示隐藏元素的时候经常会用到把display设置为none，设置为none效果很明显，就是让元素脱离文档流，不显示，不占文档空间。 定位： inhert:规定从父元素继承position属性的值。 static：默认值，没有定位，元素出现在正常的流中。 relative:无论元素是否移动，元素在文档流中占据原来空间，只是表现会改变。 absolute:绝对定位使元素的位
display:inline-block; 到底是什么
猫叔的php之路
11-19 1万+
display:inline; 内联元素，简单来说就是在同一行显示。 display:block; 块级元素，简单来说就是就是有换行，会换到第二行。 display:inline-block; 就是在同一行内的块级元素。 说概念太模糊，来个真实案例吧。 链接一</a>链接一</a> A默认就是一行，所以inline用在这里是废的。宽高度设置也是费的。 链接一
脱离文档流的疑难混淆点儿 display:inline-block能脱离文档流吗
binlety
08-05 1724
　　CSS中脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。 　　需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。 　　而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。 脱离文档流只是对html文档的一种...
关于display的属性：block和inline-block以及inline的区别
sinat_31311369的博客
09-03 1万+
介绍一些简单的布局，block，inline-block，inline的简单区别，处女作哈哈
CSS之使用display:inline-block来布局
极客神殿
09-03 204
1.解释一下display的几个常用的属性值，inline ， block， inline-block inline（行内元素）: 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 不能更改元素的height，width的值，大小由内容撑开. 可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行...
健身术语大全：中英文对照与训练动作解析
"健身会所标准用语中英文文档包含了各种健身训练动作的术语，包括胸部、肩部、肱二头肌、肱三头肌、背部、腿部以及腹部的训练，同时还提到了健身中常用的英语词汇，如雄性激素及其副作用。" 在健身领域，这些训练...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值