AI智能
改变未来

关于CSS属性margin设置负值的作用


关于margin设置负值的作用

在进行类似商城网站的布局时,经常会出现需要布局多个小模块且每个小模块都要有边框border的情况。这时在使用浮动float进行布局时可能会出现父元素宽度不够和小模块高度不对齐的问题。

解决方法

  • 找到具体的小模块元素,添加类来修改宽高和去除多余的margin。(复杂)
  • 通过伪类选择器定位到具体小模块元素统一进行修改。(受浏览器兼容的影响)
  • 通过设置margin负值解决。(合适)

具体问题

在进行考拉海购的这类布局时:

  • 父元素宽度设置为1100px,每个小模块的宽度设置为219px。加上每个小模块的边框最终宽度之和超出父元素的1100px,无法达到布局效((219+2)*5>1100)。
  • 父元素的高度设置为355px,最左边小模块的高度为353px,其余小模块的高度均为176px。其余小模块的高度加上边框后无法与最左边小模块高度对齐,无法达到布局效果((176+2)*2>353+2)。

具体实现

不设置margin负值时代码:

未设置margin负值时界面(未实现需要的布局效果):
通过设置margin负值解决布局问题代码:

设置margin负值时界面(实现需要的布局效果):

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » 关于CSS属性margin设置负值的作用