分享一篇关于margin的相关技巧

废话不多说,直接进入主题,margin相关技巧。

1、设置元素水平居中:margin:x auto;

2、margin负值让元素位移及边框合并。

外边距合并

  指当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

解决外边距合并的方法:

  a、使用这种特性。

  b、设置一边的外边距,一般设置margin-top

  c、将元素浮动或者定位(元素浮动或定位时,不会出现margin合并)

margin-top塌陷

  在两个盒子嵌套时候,内部的盒子设置的margin-top会加到外边的盒子上,导致内部的盒子margin-top设置失败,解决方法如下:

  a、外部盒子设置一个边框

  b、外部盒子设置overflow:hidden

  c、使用伪元素类:

  .clearfix:before{

    content:”;

    dispaly:table;

  }

分享一篇关于margin的相关技巧分享一篇关于margin的相关技巧

以上就是分享一篇关于margin的相关技巧的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3196192.html

(0)
上一篇 2025年4月1日 02:52:05
下一篇 2025年3月13日 03:46:07

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 移动端基础知识的相关总结

    一.单位(px,em,rem)   1.px:屏幕设备物理上能显示出的最小的一个点,不同设备上点的长宽,比例不一定相同;   2.em/rem:相同点:都是一个相对大小的值;不同点:em是相对父级元素,rem是相对html(默认值视浏览器而…

    2025年4月1日 编程技术
    100
  • 有关margin负值浅析

    我们在css中都会使用margin,但将margin设置成负数,那可能就不大好处理了,margin负值并非hack,margin负值遵循文档流;假如使用margin负值促使一个元素向上位移,那么相关元素也会随之发生位移;margin负值能良…

    2025年4月1日
    100
  • HTML里怎么使用margin 0 auto

    margin是一个很重要的属性,那么在html里怎么使用margin 0 auto呢?我们今天就好好介绍一下margin:0 auto,下面给大家举一个小列子 margin设置对象外边距,如果我们给DIV设置一条边框线(border)样式后…

    编程技术 2025年4月1日
    100
  • css的开发小技巧

    关于css技巧类的在网站里已经发了很多了,那么我今天在总结归纳一下平时在工作中可以遇到问题,并且说一下用css的解决方案,什么是多列等高布局? 点击增加一侧文字,另一侧背景也增加。 html代码:     haorooms多列等高布局左  …

    编程技术 2025年4月1日
    100
  • 最实用的制作网页小技巧总结

    在我们程序员制作网页时,我们当然希望能制作一个非常美观的网页,那么本文我们就教大家几种非常有用的制作网页时的小技巧。 一、box-sizing:允许以特定的方式去定义匹配某个区域的特定元素。 content-box:在规定一个框的宽高之外给…

    2025年4月1日
    100
  • Dreamweaver裁剪图片技巧详解

    dreamweaver中插入的图片太大了,想要裁剪图片,dreamweaver怎么裁剪图片?,并设置图片的属性,该怎么设置呢?下面我们就来看看dw编辑图片的技巧,需要的朋友可以参考下,希望能帮助到大家。 1、选中图片,直接在图片的属性中使用…

    2025年4月1日 编程技术
    100
  • 浅谈使用HTML空链接的技巧

    这次给大家带来浅谈使用html空链接的技巧,使用html空链接的注意事项有哪些,下面就是实战案例,一起来看一下。 空链接: 就是没有目标端点的链接。 格式注意事项 空连接的作用 立即学习“前端免费学习笔记(深入)”; 1.设为首页 注意事项…

    编程技术 2025年4月1日
    100
  • ES6使用注意事项有哪些

    这次给大家带来ES6使用注意事项有哪些,下面就是实战案例,一起来看一下。 ES6出来已经有好几年了,同时很多新特性可以被巧妙地运用在项目中。我想要列下其中一些,希望它们对你有用。 如果你还知道其他一些小技巧,欢迎留言。我很高兴把它们补充进来…

    编程技术 2025年3月31日
    100
  • 有关ES6的7个实用技巧有哪些?

    本文给大家分享了es6的7个实用技巧,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧 Hack #1 交换元素 利用 数组解构来实现值的互换 let a = ‘world’, b = ‘hello'[a, b] = [b, a]cons…

    编程技术 2025年3月31日
    100
  • Red Hat Linux相关产品iso镜像下载

    Linux系统各发行版镜像下载(持续更新) 以上就是Red Hat Linux相关产品iso镜像下载的详细内容,更多请关注【创想鸟】其它相关文章!

    编程技术 2025年3月31日
    100

发表回复

登录后才能评论