inline-block兄弟元素影响

最新推荐文章于 2020-04-18 17:33:31 发布
最新推荐文章于 2020-04-18 17:33:31 发布
阅读量285 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 场景实操
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42149698/article/details/82734925
本文介绍了使用CSS的display:inline-block属性布局时遇到的元素挤压现象，并提供了解决方案：通过给受影响的元素添加vertical-align:top属性来调整垂直对齐方式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

做项目时 float可能会不想用 因为会有个兼容问题 从而选择了display:inline-block这个属性 

当给元素加后发现后面的元素会挤前面的元素

带有 1 的 div会挤到前边的黑色div

这时候只需要给黑色div设置   vertical-align: top; 这个属性就可以解决了

（这是css的垂直方式的属性详情看http://www.w3school.com.cn/cssref/pr_pos_vertical-align.asp）

前端面经-CSS篇(五）---布局（1）正常布局（Normal Flow）、display属性、flex布局
qq_44643806的博客
04-07 1111
正常布局流（normal flow）是指在不对页面进行任何布局控制时，浏览器默认的 HTML 布局方式。HTML 元素完全按照源码中出现的先后次序显示出现在另一个元素下面的元素被描述为元素，出现在另一个元素旁边被描述为二、display属性display决定了元素在布局流中的，比如它是像段落、块级容器那样独占一行，还是像文字一样内联排布，或者干脆不显示。：一个块级元素会在其前后自动生成换行（与其兄弟块分行），默认情况下它不会与其他元素并排；：能够设置widthheightmarginpadding。
flex 影响兄弟元素宽度问题
wangongchao的博客
01-29 967
因为设置了display: flex; 导致block布局变成了flex布局， 所以在子元素宽度没有被撑破的情况下，子元素宽度是有效的，但是当子元素内容过多，此时宽度会比实际宽度小，所以如果想要在已经设置了flex布局的基础上，再进行子元素宽度的设置，可以应用下面的样式：（在该子元素上设置） width: 180px; flex-shrink: 0; ...
并列 inline-block 元素互相影响问题
weixin_30821731的博客
12-08 326
今天在做页面时发现一个很奇怪的问题：当两个设置了display: inline-block; 属性的元素并列排放时，它们的位置能够互相影响。 我们先来看看元素结构： <div class="container"> <div class="container-demo1"> <span>1</span> ...
div兄弟节点中后面div给margin-top会被上一个兄弟节点遮挡住的原因以及解决方案
qq_40128591的博客
04-18 2443
如图： 按照正常思路我们我们是想让兄弟节点二显示在兄弟节点一上面。但是现在我们看到的效果是我们的兄弟节点被兄弟节点一给盖住了。而且一般来说我们的后面节点z-index:;值都会比前面的高，但是却会造成这种效果。 造成原因：可能是你的节点一设置了position：relative;属性，但是你的第二个节点没有设置所以才会这样。 解决方法：给第二个也加一个position:relativ...
行内元素设置宽高
吴渣渣的博客
08-05 4781
对行内元素如span设置宽高，可以通过css设置display：block或者设置为浮动float 块元素。　特性：有物理属性，width,height写值起作用，而且要占据一行。 内联元素。 特性：没有物理属性。但是margin，padding值有用。不占据一行，后边可以有兄弟元素。 即是块又是内联，根据兄弟兄弟元素决定。 为什么是float之后才会有物理属性，这就是块与内联元素相互转化的问题。
关于的display:inline-block之后同一行的元素错位问题
l362929113的博客
09-05 2263
&amp;lt;ul&amp;gt; &amp;lt;li v-for=&quot;item in li&quot;&amp;gt; &amp;lt;img src=&quot;http://img1.qunarzz.com/sight/p0/1806/97/97f0cf5b6a44557ca3.water.jpg_200x200_003494e1.jpg&quot; /&amp;gt;
如何去除使用inline-block之后的间距（一）？
bwf_erg的博客
04-16 1287
从页面的发展历程俩看我们是经过了 表格布局->表格+css->div+css的浮动布局->div+css的内联块布局  inline-block布局：一种更优的布局技术  inline-block布局：一种全新的web页面布局解决方案，其既可以充分发挥div+css浮动布局的优点，又可克服浮动盒子所带来的缺点。 1. 盒子跟外界（其兄弟元素）表现为内联（inline）模式，即可以跟其兄弟元素
display: inline-block垂直居中
03-22
通过设置元素的 `display: inline-block` 和配合伪元素可以实现水平和垂直方向上的精确居中效果。以下是具体实现方式： #### HTML 结构 HTML 需要定义一个外部容器 `.container` 和内部需要居中的内容块 `.center`...
【单选题 】（10分）下面那个属性可以设置盒子的内边距 A. white-space B. margin C. width D. padding 2.【单选题 】（10分）请说出外边距定义规则的含义 margin : 5px 6px 10px; A. 定义的是上、左右、下边距的值 B. 定义的是上下、左、右边距的值 C. 定义的是上、右、下边距的值 D. 定义的是上、下、左右边距的值 3.【单选题 】（10分）下面哪个属性用来设置flex布局容器内容在交叉轴上的对齐方式： A. align-content B. flex-direction C. justify-content D. align-items 4.【单选题 】（10分）关于css的ID规则和class样式规则的命名，下面说法错误的是 A. 在给选择器命名时不能使用- B. 不建议使用字母序列abc，姓名拼音，或文字拼音缩写这样的命名方式; C. 在保证区块位置的情况下，可以使用结构化命名方式; D. 建议使用语义化的命名方式; 5.【单选题 】（10分）在使用flex布局时，如果需要项目换行，需要设置哪个属性： A. flex-wrap B. flex-flow C. flex-direction D. display 6.【多选题 】 （10分）下面哪些技巧可以优化css的定义和使用 A. 使用继承。 B. 使用外部样式表文件; C. 使用分组选择器; D. 使用简化属性; 7.【多选题 】 （10分）下面哪些是组合器选择器？ A. a#menu:visited B. li#first + li C. div#header > a.style:hover D. div#top li 8.【多选题 】 （10分）<ul id="menu"> <li><a href="#">首页</a></li> <li><a href="#">要闻</a></li> <li><a href="#">一点号</a></li> </ul> 下面哪个样式定义方案可以把上面的无序列表变成横向导航： A. ul#menu li{float: left;};ul#menu a{display: inline-block;} B. ul#menu{position: relative;};ul#menu li{position: absolute;};ul#menu a{display: inline-block;} C. ul#menu li,ul#menu a{display: inline-block;} D. ul#menu{display:flex;};ul#menu a{display: inline-block;} 9.【多选题 】 （10分）关于使用ID选择器和Class选择器,下面说法正确的是 A. Class选择器适用于跨功能区域、跨标签或没有特定规律的多次调用的样式定义。 B. 在定义时，ID选择器使用#作为样式开始，而Class选择器以.作为样式开始; C. ID选择器用于页面中特定功能区域的id命名，但必须是唯一的 D. 一个ID选择器在一个页面中可以多次调用，但是一个Class选择器在一个页面中只能使用一次 10.【多选题 】 （10分）下面哪些是默认的块元素： A. div B. span C. a D. ul
03-14
相邻两个兄弟元素之间的垂直方向上只会保留较大的那个外边距值，这种现象称为“外边距折叠”。 - **题目**: 当两个垂直排列的块级元素上下相邻时，它们之间会发生什么情况？ - A. 它们的顶部和底部外边距会相加 -...
css 定位偏移兄弟元素的宽度
最新发布
06-19
然而，有一个纯CSS技巧：利用inline-block和兄弟元素的宽度来推动后面的元素。但这通常用于相对定位，而不是绝对定位。根据用户需求，他们可能需要绝对定位。因此，我们给出一个使用CSS变量和绝对定位的示例，但注意...
清除浮动元素影响的两种方法
liubangbo的专栏
02-01 856
在前一篇文章(https://blog.youkuaiyun.com/liubangbo/article/details/104129203)中，我们分析了由于父元素没有设置高度，子元素进行了浮动，所以实现了文字环绕效果(父元素高度塌陷)。这篇文章我们分析一下怎么清除浮动产生的影响(父元素高度塌陷)。 方法1：在子元素后边添加一个空div元素，并设置clear属性 <html> <...
设置两个DIV为display:inline-block出现上下错位问题
weixin_30767835的博客
10-24 392
今天在布局时，发现AB两个div设置display：inline-block，出现上下错位问题，当AB里面内容为空时，错位问题消失 看了网上资料以及通过实践分析，总结如下 1.同一行的行内元素对齐方式默认是底部对齐，即vertical-align：baseline 2.对于内容为空的inline-block元素而言，该元素的基线就是它的margin底边缘，否则就是元素的内部最后一行内联元素的...
关于inline-block元素所产生的三两影响及问题
FuChenRenShen的博客
09-02 634
设置inline-block属性既可以省略掉float所带来的影响，又能同时展示在一行，且能设置高度，效果是挺好的。 但是在研究中，也发现了一些问题，而这些问题也让我绞尽脑汁的思考，但最后仍然不得甚解。 首先，inline-block父元素的包裹性: 众所周知，父元素设置inline-block是可以清除掉子浮动元素所带来的影响的，在这儿我所碰到的问题就是当父元素宽度缩小到小于2个元素的...
display:inline-block属性的标签出现的问题及解决方法
奋斗小强的博客
07-24 1万+
1，首先说明display:inline-block可以让块级元素并排显示，但是需要注意一些问题，如下； 1、有些标签是默认的inline-block属性，例如img 和input，这些标签称为行内块标签 1.对于img标签会出现白边问题，如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta ch...
git拉代码总显示没有权限问题
热门推荐
D丶bird
01-04 2万+
在项目中我们会遇到团队协作 这时候就应该用到git 这会让团队制作变得方便快捷  有时候会遇到这种问题 就是项目给你加了权限 你这边代码库也能登的上去 然后你本地拉代码的时候小黑窗总提示没有权限 这个时候要看一下（我这边是win10系统） 控制面板里的 用户账户 左边栏的 管理你的凭据   然后点windows凭据 下边你就会看到你项目的地址或端口号 然后旁边的小箭头点开看一下你当前...
ios实现video自动播放
D丶bird
07-26 1万+
做一个视频的微信链接 需求是打开连接在屏幕中间的视频自动播放 问了下度娘是怎么回事  最后的得出安卓不支持 ios支持自动播放 安卓原因是怕影响用户流量的不必要浪费，代码无法解决，得需手动设置浏览器； 好现在说一下ios的解决办法 一共有三个问题 1. video标签部分ios打开后视频无法点击 没有能点的那个播放按钮 直接是一个静态的视频框。 2. 视频点击后全屏播放。要在标签行播...
安装node 报错2503 2502
D丶bird
06-17 988
要做项目安装node的时候 进度条到最后突然报了一个安装错误（程序员不愿意看到的事情），然后问了问度娘，找到了解决办法（安装权限的原因）；在这里用win10电脑来做例子（本人电脑系统是win十），不过我感觉这种办法 适用于大部分机器 ，因为是权限不够所以然你安装； 1.首先打开你的 小黑窗cmd（win+x）  然后会看到屏幕左边出现菜单  里面的选项有一个 命令提示符 和 命令提示符（管理员）2...
ruby安装404报错 及sass安装
D丶bird
10-14 363
安装ruby后更国内源的时候出现了报错 查了下结果是淘宝那边域名备案问题和之前的源地址不再维护所以更换了 所以我们得更换下新的链接并改一下执行命令 gem sources --add https://gems.ruby-china.com 更换完成后打印下 gem sources -l 英文一定要打对 解决更换问题 然后安装sass 和 compass 执行以下命令 gem ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

D丶bird

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值