一、盒子模型塌陷

盒子模型塌陷：子元素设置外间距margin-top，导致父元素连带向下，如下图

代码如下：

 * {margin: 0;padding: 0;}.box1 {width: 300px;height: 300px;background-color: #0077aa;/*border-top: 1px solid blue;*//*padding: 1px;*//*overflow: hidden;*/}.box2 {width: 150px;height: 150px;background-color: yellowgreen;margin-top: 20px;}<div class="box1"><div class="box2"></div></div>

解决方法

 1.给父元素设置border（border-top）2.给父元素设置padding(padding-top)3.给父元素设置overflow:hidden

二、浮动导致的父元素高度塌陷

父元素高度塌陷：当父元素未设置高度时，其高度为子元素高度，当子元素浮动时，父元素高度变为0，此时父元素下面的元素就会往上移，导致页面布局混乱，如下图：

代码如下：

.box {border: 1px solid red;/*height: 200px;*//*overflow: hidden;*/}
.content {width: 200px;height: 200px;background-color: aqua;border: 1px solid blue;float: left;box-sizing: border-box;}/*.clear {clear: both;}*/<div class="box"><div class="content"></div><!--<div class="clear"></div>-->
</div>

解决方法：

1.给父元素设置高度
2.给父元素设置overflow: hidden;
3.添加一个空标签清除浮动

三、使用display:inline-block

原本是块元素的元素在使用display:inline-block后会排成一行，此时元素与元素间会留下大约5px的距离，如果不处理，会导致一行排不下，影响页面布局，如下图：

代码如下：

 * {margin: 0;padding: 0;}/*ul {font-size: 0;}*/li {list-style: none;display: inline-block;/*font-size: 16px;*/}<ul><li>手机</li><li>运营商</li><li>数码</li>
</ul>

解决方法：

1.方法一：给父元素设置font-size: 0; 然后给子元素设置font-size。

2.方法二：将子元素之间的空格和回车键全部删去

导致页面布局混乱的几个元凶相关推荐

mysql去除全角空格_PHP输出全角空格，导致页面布局混乱
不知道大家有没有发现,php会输出多余的空格比如:echo"helloword";可以看到网页代码显示的是这样的"helloword".主要是IE浏览器,IE6 ...
vue进入页面执行的钩子函数_解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题...
项目需求:图片加载时,当鼠标滚动至当前图片进行加载并加上上滑特效,实现这个效果需要对文档文档滚动位置和图片的当前位置进行比较.但是mounted 钩子函数执行时img图片并未加载出来也就是占位为空,导 ...
element-UI栅格系统缩放，导致页面布局效果bug? 叠加？错位？
这里以此代码片段为例说明一则bug,请bug对号入座.(bug截图省略) 页面的栅格缩放,导致页面布局发生叠加错位? 一.坑1 · 引言: (先来一则bug代码) <el-card v-for= ...
在做vue h5 时因改变手机字体导致页面布局错乱比如在微信公众号中放入h5 客户把手机字体或者微信字体调大导致页面错乱
认定了就要好好的珍惜对待,人生不容辜负,你必须要更加努力 .加油骚年 ** 正文: ** 在做vue h5 时因改变手机字体导致页面布局错乱比如在微信公众号中放入h5 客户把手机字体或者微信字 ...
字体Helvetica Arial，导致页面中使用中文时页面布局混乱
当使用这样的字体时的页面布局,页面空出来一块: font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC ...
移动端rem布局，用户调整手机字体大小或浏览器字体大小后导致页面布局出错问题
一.用户修改手机字体设置大小,影响App里打开的web页面. 手机字体设置大小,影响App的页面. Android的可以通过webview配置webview.getSettings().setText ...
win10缩放导致html布局混乱,技术编辑为你解说win10系统chrome在dpi缩放下导致界面放大怎么处理...
现在电脑已成为我们工作生活的一部分,相信大家在操作电脑时一定会遇到这样那样的问题,win10系统chrome在dpi缩放下导致界面放大怎么处理这个问题就是我们经常会遇到的,这样的问题win10系统ch ...
用户设置了系统字体，导致页面布局错乱，微信公众号
兼容android代码 /* 禁止用户自定义设置字体大小 */(function () {if (typeof WeixinJSBridge == "object" &&a ...
android界面布局错位,IOS 浏览器页面布局错位（如：点不到）的分析与解决
IOS 浏览器页面布局错位(如:点不到)的分析与解决 IOS 浏览器软键盘的拉起与收缩.微信 IOS 浏览器底部导航条的显示与隐藏,很容易导致页面布局错位(相对窗体的绝对定位元素): 明明按钮在这里, ...
移动端登录页样式错乱_Web前端导致页面css样式混乱的原因问题，我和小伙伴们惊呆了...
## **css常用技巧** 本文都时再工作中用得比较多的Css,还有遇到的一些不长记性的问题,一起来看看这些技巧吧. 1. **实现组件的自动换行排布:** flex-wrap: wrap; 使列表 ...

导致页面布局混乱的几个元凶

一、盒子模型塌陷

二、浮动导致的父元素高度塌陷

三、使用display:inline-block

导致页面布局混乱的几个元凶相关推荐

最新文章

热门文章