关于inline-block和float的对比

Paul_King 发布于2019-08-30 15:53 / 2106人阅读

摘要：关于当把元素的属性设置为时可以是元素变成行级元素前后不换行但是还可以设置一些块级元素的属性，从而实现元素的并列。

关于inline-block

当把元素的display属性设置为inline-block时可以是元素变成行级元素（前后不换行）但是还可以设置一些块级元素的属性，从而实现元素的并列。
当然将元素设为浮动也可以实现元素的并列

inline-block和float的比较

文档流：inline-block不会脱离文档流，仍然在文档里占据正常的位置，但是float的元素会脱离文档流
水平位置:不能设置父元素的text-align是浮动元素居中，事实上，在在父元素上设置此类效果在浮动元素上均无效（脱离文档流），但是inline-block的元素可以被设置为水平居中
垂直对齐:inline元素沿着基线对齐，可以通过vertical属性设置基线，浮动元素眼顶部对齐，注意：当inline元素内部有元素时，其基线会发生变化，对齐会错乱，依然可以通过设置vertical属性恢复
空白:内联元素会将换行看成是空白节点，因此元素之间会出现间隔解决方式
对其他元素的影响:inline-block对其他元素基本无特殊影响，float元素会出现环绕（float元素虽然脱离了文档流，但是会占据父元素和相邻元素的内容空间）

服务器托管私有云 float和position 私有云部署和本地部署的对比虚拟空间和云vps的对比虚拟空间和云主机的对比

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116534.html

深入清除浮动原理

摘要：如下图所示可以看到父元素的高度为为了解决这种状况就要清除浮动了。下面详细看一下这两大类清除浮动的方式及原理。所以，避免穿透啊，清除浮动什么的也好理解了。关于浮动设置为浮动的元素会脱离当前文档流，向左或向右移动直到边缘遇到另一个浮动元素或者到达边界。普通元素不会对齐造成影响。浮动是把双刃剑，在给我们的布局带来便利的同时有一些缺点需要我们去解决。例如最常见的父元素塌陷。如下图所示：...

freewolf 2019-08-29 15:25 评论0 收藏0
重拾css(10)——display

摘要：浏览器默认样式中规定了元素哪些属于块剩下的就是流。上图可知，针对的标签，你设置宽度和高度是无效的，通过监控可以知道，该元素实际的宽度和高度都是，并不是我们设定的值。因此，的特点可以总结为外部看来是流，但是自身却是一个块。 1.引言 html元素，除了块就是流（即平时常说的块级元素和行内元素），而且流都包含在块中，例如body就是一个块，而a就是一个流。浏览器默认样式中规定了html元素...

dendoink 2019-08-29 12:44 评论0 收藏0
CSS魔法堂："那不是bug，是你不懂我!" by inline-block

摘要：那不是，是我不懂而已。的用途之一西文是以空格来分隔单词的，而汉字间则无需空格分隔，但为了统一西文东亚和的排版，于是抽象出一个名为的概念用于分隔词义单元，则作为的值域，而定义域就是语言信息。前言每当来个需要既要水平排版又要设置固定高宽时，我就会想起display:inline-block，还有为了支持IE5.5/6/7的hack*display:inline;*zoom:1;。然后发...

cucumber 2019-08-30 12:56 评论0 收藏0
CSS篇之水平导航

摘要：关于水平导航已然是老生常谈之问题，看了网上诸多方法，今天小小的总结对比了一下现有方法的优缺点。问题一个最简单的结构如下，请实现水平导航。缺点，和方法一样，会出现空白间隙，解决方案如上，因为是行内元素，所以不能设置宽高，比较局限。关于水平导航已然是老生常谈之问题，看了网上诸多方法，今天小小的总结对比了一下现有方法的优缺点。问题：一个最简单的html结构如下，请实现水平导航。 ...

李义 2019-08-29 11:19 评论0 收藏0