分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

详解CSS中的margin负值

发布时间:2023-09-06 01:21责任编辑:沈小雨关键词:CSS

前言: 

 margin作为一个在平常工作中高频出现的属性,其合并规则和负值的使用却总是让人头大,本文就margin的负值和重叠进行梳理,如有错误,欢迎指正(反正我是菜鸡,手动滑稽)

1.display对margin的影响

  当元素的display属性不同时,margin在元素上的表现形式也不同

  【1】display:block   四个方向的margin均有效

  【2】display:inline  上下方向的margin无效

  【3】display:inline-block

    由于vertical-align属性的默认值为baseline(该元素相对于所在行的基线垂直对齐),因此在视觉上display:inline-block无效,设置vertical-align为其他值时,会有效果。

2.重叠

  margin负值的重叠也和display属性有关

  【1】两个block元素重叠时,后面的元素可以覆盖前面元素的背景,但是无法覆盖其内容

  【2】当两个元素都是inline或inline-block的元素时,后面的元素会覆盖前面元素的背景和内容

  【3】当inline(inline-block)元素与block元素重叠时,inline(inline-block)元素的背景会覆盖block的背景,但是元素内容会以后面的元素为准。

3.浮动

  【1】当block元素与浮动元素重叠时,其边框和背景在浮动元素下显示,内容在浮动元素之上显示

  【2】当inline或inline-block元素和浮动元素重叠时,其边框、背景和内容都在浮动元素之上显示

4.定位

  【1】定位元素(position不为默认值)会覆盖其他元素的背景和内容

  【2】将relative应用于inline元素上时,由于无法改变其行内元素本质,上下margin仍存在问题

  

详解CSS中的margin负值

原文地址:http://www.cnblogs.com/controlms/p/7760906.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved