并列 inline-block 元素互相影响问题
今天在做页面时发现一个很奇怪的问题:当两个设置了display: inline-block; 属性的元素并列排放时,它们的位置能够互相影响。
我们先来看看元素结构:
<div class="container">
<div class="container-demo1">
<span>1</span>
</div>
<div class="container-demo2">
<!-- <span>2</span> -->
</div>
<div class="container-demo3">
<span>3</span>
</div>
</div>
我们使三个div都设置为 inline-block,设置宽度使其居于一行内。如果再把 container-demo2 中的内容注释掉,我们可以看到一种十分诡异的情况,如图。
可以发现本该位于父容器顶端的demo1和demo3居然沉了下去,而没有内容的demo2还在正常位置上。这时候就会想:肯定是元素的内容造成了这种结果。那么我们现在给demo2加上内容看看效果:
可以看到三个元素都回到了我们想让它呈现的位置。那为什么inline-block元素的位置会受到其内容的影响呢?我们可以查到这样一句话:inline-block元素可以将对象呈递为内联对象,但是对象的内容作为块对象呈递。
有了这样的属性,我们就可以在表现上将对象用作内敛元素但又可以对它进行宽高设置。但有一点需要注意的是对象仍然呈递为内联元素,而同一行内的内联元素默认是基于 baseline 对齐的,我们可以在1图中标记出来:
即图中的蓝色线条,具体的我们可以去查看W3C的 vertical-align 属性。好的,基于基线对齐的模式我们有了理解,但还有一个问题:为什么3个元素的方向不是相同的呢?为什么有内容的元素向下,而无内容的元素会向上呢?就此我们需要了解CSS渲染机制:对于一个inline-block元素,如果内部没有inline内联元素,或者overflow不是visible,则该元素的基线就是它margin的底边缘,否则就是元素内部最后一行内联元素的基线。
简单地就以上这种情况来说,没有内容的demo2会基于它的margin底边缘也就是它的下边缘对齐,而包含内容的demo1和demo3会基于其内部内联元素的基线对齐,所以会造成这种一上一下的情况。
对此我们有多种解决办法:
1、暴力float,当然这是备选方案,毕竟脱离文档流后页面元素会不好控制
2、简单粗暴地给所有元素都加上内容,例如空格符
3、设置所有内联元素 vertical-align: top/middle/bottom; 属性,改变默认设置
并列 inline-block 元素互相影响问题的更多相关文章
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- 多个inline元素、block元素、inline-block元素在父容器中的换行情况
1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px s ...
- 当inline元素包裹block元素时会发生什么
经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a&g ...
- inline元素、block元素、inline-block元素
inline 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行,直到该行排满. block 块级元素:是可以控制宽和高.margin等,并且会换行.块级对象元素会单独占一行显示, ...
- block元素和inline元素的特点
一.block元素的特点 1.处于常规流中时,如果width没有设置,会自动填充满父容器 2.可以设置height/width及margin/padding 3.处于常规流中时,布局在前后元素位置之间 ...
- 关于block元素和inline元素
呃...这个会不会太基础了.最近在复习,所以基础知识也不能够忽略. 根据HTML 4.01 规范,其描述如下(http://www.w3.org/TR/html401/struct/global.ht ...
- inline元素、block元素
inline元素 不会独占一行,相邻的行内元素会排列在同一行内,直到一行排不下才会换行 高.行高.以及外边距和内边距不可改变 宽度就是它的文字或图片的宽度,不可改变,随元素内容变化而变化 内联元素只能 ...
- 关于margin、padding 对内联元素的影响
内联元素和块级元素的区别是新手必须要掌握的知识点.大家可能平时注意块级元素比较多.所以这里重点让我们来讲讲常见的width height margin padding 对inline元素的影响. 测 ...
- inline,block,inline-block的区别
display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...
- margin和padding对行内元素的影响
这个是在面试的时候,面试官问我的一个小问题 自己没有考虑过inline元素设置margin和padding的问题 学习的过程记录下来 1)inline元素的高度是由元素的内容决定的(字体的大小和行高) ...
随机推荐
- JS 换行写法
var populatePullUpHtml = function (id) { var html = '<div id="' + id + '" class="' ...
- Ubuntu设置root账户密码
创建Ubuntu后是没有root账户的,执行 sudo passwd root 然后系统会提示你输入普通用户的密码.输入后,按回车,然后重复输入两次新的root密码即可激活root用户.
- select2的搜索框不能输入搜索内容
按照select2官网配置完后,搜索框弹出后无法输入内容,究竟怎么回事,于是在其他页面尝试了select2,发现可以啊,为什么在这个地方不可以,终于找到了造成这个问题的不同之处:select2在模态对 ...
- 从头开始学eShopOnContainers——开发环境要求
一.简介 eShopOnContainers是一个简化版的基于.NET Core和Docker等技术开发的面向微服务架构的参考应用,是一个简化版的在线商城/电子商务应用,其包含基于浏览器的Web应用. ...
- Oracle大字段(clob)模糊查询优化方法
对于内容很多的时候clob打字段模糊查询很慢,整理一个小方法: 1,在查询的列上建索引 2,对于要查询的clob字段使用一下语句创建索引 CREATE INDEX idx_zs_info_note ...
- 初学python - 零碎的知识点
* 标识符命名规则 数字,字母,下划线组成,数字不能开头区分大小写 * 注释 单行:#:多行:‘ ‘ ‘ ,“”“: * 进制标识 b:二进制 o:八进制 d:十进制x:十六进制 转换:format( ...
- Codeforces Round #545 (Div. 2)C(离散化,思维,PAIR排序)
#include<bits/stdc++.h>using namespace std;int a[1007][1007];pair<int,int>p1[1007],p2[10 ...
- Python爬虫从入门到放弃 之 Scrapy框架中Download Middleware用法
这篇文章中写了常用的下载中间件的用法和例子.Downloader Middleware处理的过程主要在调度器发送requests请求的时候以及网页将response结果返回给spiders的时候,所以 ...
- luogu5212/bzoj2555 substring(后缀自动机+动态树)
对字符串构建一个后缀自动机. 每次查询的就是在转移边上得到节点的parent树中后缀节点数量. 由于强制在线,可以用动态树维护后缀自动机parent树的子树和. 注意一个玄学的优化:每次在执行连边操作 ...
- 通用动态树(Link-Cut Tree)模板
一个没有维护任何东西的动态树模板 忘了怎么写可以直接来粘 int ch[300010][2], fa[300010], st[300010]; bool lazy[300010]; bool nroo ...