浅谈css阻断合并及其他影响
发布时间：2019-04-16 15:15:08 作者：Tong_sunshine 
我要评论
我要评论这篇文章主要介绍了浅谈css阻断合并及其他影响的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
margin 的不正交
margin实用时会产生合并的现象
以下属性会阻断 margin 合并
border
display: table
display: flex
以上内容为结果 详解在下方
阻断合并【详解】
/* CSS */
.box{
border:1px solid red;
height: 100px;
margin: 10px; /* 注意：这里是10像素哦！ */
}
<!-- HTML --> <div class="box"></div> <div class="box"></div> <div class="box"></div>
浏览器中是这个样的：
按理数 margin 应该是 div 上下之间的间距应该为 20px
解决办法 1、
<!-- HTML --> <!-- css不变 --> <div class="box"></div> <div style="border: 1px solid blue"></div> <!-- 新加 --> <div class="box"></div> <div style="border: 0.1px solid blue"></div> <!-- 新加 --> <div class="box"></div> <div class="box"></div>
浏览器中是这个样的：
<!-- HTML --> <!-- css不变 --> <!-- HTML --> <div class="box"></div> <div style="display: table"></div> <div class="box"></div> <div style="display: flex"></div> <div class="box"></div> <div class="box"></div> <!-- display:block / inline 不会阻断合并 只有table flex 可以 -->
浏览器中是这个样的：
其他影响
display 会影响 ul li 的小圆点
position：absolute 会影响 display：inline
position：fixed 会影响 transform
float 会影响 inline
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
- 这篇文章主要介绍了正确理解CSS中的margin合并的用法的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-13
- css背景图优化合并包括图片本身的优化，使用多张图片的合并：CSS Sprites技术或者是分类合并等等，都可以，下面一一为大家介绍下2014-09-06
- 背景图优化合并包括图片本身的优化、多张图片的合并即CSS Sprites技术、分类合并等等，下面为大家详细介绍下，感兴趣的朋友不要错过2014-04-02
- 通过交流发现师弟们对外边距合并不是很理解，如果想要深入了解margin这个神奇的属性，那可得费一番功夫了，下面与大家分享下我对外边距合并的理解2013-09-27
- 本文的核心观点为CSS的合并与模块化，似乎与前一篇文章“CSS样式的再分离”有矛盾，其实不然，分离可以精简CSS代码，合并也可以精简CSS代码，一切都是权衡,本文的“合并”2013-01-11
- 今天就先说说CSS的外边距吧。 围绕在元素边框的空白区域是外边距。这是W3CSchool给我们的解释。这句话看起来很模糊，说的不是那么明确2012-05-27
- 众所周知，减少网站加载时间的最有效的方式之一就是减少网站的HTTP请求数。实现这一目标的一个有效的方法就是通过CSS Sprites——将多个图片整合到一个图片中，然后再用CSS2011-06-21
- CSS Sprites的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度2011-05-11
- 自动实现多个css、javascript合并、压缩.2010-01-21
- 刚刚看了css教程觉得很形象就贴出来了。想学习的朋友可以参考下。2009-10-15
最新评论