时间:2021-05-08
margin 的不正交
margin实用时会产生合并的现象
以下属性会阻断 margin 合并
border
display: table
display: flex
以上内容为结果 详解在下方
阻断合并【详解】
.box{ border:1px solid red; height: 100px; margin: 10px; }<!-- 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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
受2020年的疫情以及其他地域因素的影响,跨境电商行业面临着不小的冲击。一方面大量企业遇到订单下降、物流通道不畅、资金紧张、供应链阻断等困境。另一方面,在疫情期
浅谈鼠标参数对操作的影响(图3)DPI已经大大地落伍。为什么还有少数职业选手继续运用? 浅谈鼠标参数对操作的影响(图4) 浅谈鼠标参数对操作的影响(图5
GoogleHTML/CSS规范本文介绍了Google推荐的HTML和CSS编写格式规范,以建立良好的个人编码习惯。通用样式规范省略图片、样式、脚本以及其他媒体
一、什么是雪碧图?CSS雪碧即CSSSprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背
到这里合并的主要元素就填写完毕了,很多同学要问,其他的内容不用填写吗?是的,在合并这件事情上,其他因素填与不填是不会有任何影响的。填写完毕后,就在后台的上传表格