CSS学习【margin为负值】

2024-08-25 00:12

本文主要是介绍CSS学习【margin为负值】,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

margin塌陷时合并规则

margin重叠概念

可能会发生的情况

外边距重叠计算规则

兄弟元素之间合并,都为负值

当“.box1”和“.box2”都未设置外间距时:

给“.box1”和“.box2”设置外间距后:

兄弟元素间合并,一正一负

当.box2中未设置margin属性

.box2 margin-top:-30px时

.box2 margin-top:-80px时

父子元素之间合并,都为负值

box与box1都未设置margin时

box的margin-top:-50px和box2的magin-top:-100px时

box的margin-top:-50px和box1的margin-top:-40px

父子元素之间合并,一正一负

box和box1都未设置margin时

box的margin-top:-50px与box1的margin-top:20px

box的margin-top:-50px和box1的margin-top:80px

margin负值的实践场景

1.等高布局

2.一行多列网格布局

3.头像叠加效果

4.元素水平垂直居中

5.双飞翼布局

6.圣杯布局

margin塌陷时合并规则

margin重叠概念

  • margin重叠也叫:外间距重叠、或外边距合并、或外边距穿透、或外边距塌陷
  • margin重叠只针对垂直方向,不针对水平方向

可能会发生的情况

  1. 兄弟元素之间-上下边距合并(重叠)
  2. 父子元素之间-上外边距合并(穿透)(父元素没有设置内边距和边框时才会发生合并)

外边距重叠计算规则

  1. 全部为正值,取最大值
  2. 不全是正值,则两者相加,得到的结果为最终移动距离
  3. 都为负值,则取绝对值最大的那个

兄弟元素之间合并,都为负值

margin-bottom与margin-top都为负值时,都取绝对值最大的那个

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><style>.container {width: 100px;height: 200px;border: 2px solid red;margin: 150px auto;}.box {width: 100px;height: 100px;}.box1 {background-color: pink;/* 下面元素向上移动 50px*/margin-bottom: -50px;}.box2 {background-color: rgb(131, 202, 229, 0.5);/* 元素自身向上移动80px */margin-top: -80px;}</style><body><div class="container"><div class="box box1"></div><div class="box box2"></div></div></body>
</html>

当“.box1”和“.box2”都未设置外间距时:

给“.box1”和“.box2”设置外间距后:

margin上外边距与下外边距都是负值,取两者中绝对值最大的哪一个,最终以margin-top:-80px为主,.box2蓝色盒子向上移动80px

兄弟元素间合并,一正一负

margin-top与margin-bottom之间有一个负值时,两者相加,得到的结果,为最终移动距离

<style>.container {width: 100px;height: 200px;border: 2px solid red;margin: 150px auto;}.box {width: 100px;height: 100px;}.box1 {background-color: pink;/* 下面元素向下移动50px */margin-bottom: 50px;}.box2 {background-color: rgb(131, 202, 229, 0.5);/* 元素自身向上移动 30px */margin-top: -30px;/* 元素自身向上移动 80px */margin-top: -80px;}
</style>
<body><div class="container"><div class="box box1"></div><div class="box box2"></div></div>
</body>

.box2中未设置margin属性

只给.box1加了一个margin-bottom:50px,故两个盒子间隔50px

.box2 margin-top:-30px时

因为box1中margin-bottom:50px是个正值,一正一负,两者相加,故两个盒子间隔为(50px - 30px = 20px)

 

.box2 margin-top:-80px时

因为box1中margin-bottom:50px是个正值,一正一负,两者相加,故两个盒子间隔为(50px - 80px = -30px),故下面元素向上移动30px

父子元素之间合并,都为负值

<style>.container {width: 200px;height: 200px;margin: 150px auto;border: 2px solid red;}.box {/* 背景颜色为黄色 */background-color: khaki;height: 130px;/* 元素自身向上移动50px */margin-top: -50px;}.box1 {width: 100px;height: 100px;background-color: rgb(252, 191, 201, 0.7);/* 元素自身向上移动40px */margin-top: -40px;/* 元素自身向上移动100px */margin-top: -100px;}
</style>
<body><div class="container"><div class="box"><div class="box1"></div></div></div>
</body>

box与box1都未设置margin时

box的margin-top:-50px和box2的magin-top:-100px时

因为父元素box没有设置内边距和边框,故box1与父元素box外边距发生合并,又因为两者的外边距都为负值,取绝对值中最大值,则为-100px

 

box的margin-top:-50px和box1的margin-top:-40px

子元素外边距穿透父元素与父元素的外边距合并,两都为负值,取绝对值中的最大值,则为-50px

父子元素之间合并,一正一负

<style>.container {width: 200px;height: 200px;margin: 150px auto;border: 2px solid red;}.box {/* 背景颜色为黄色 */background-color: khaki;height: 130px;/* 元素自身向上移动50px */margin-top: -50px;}.box1 {width: 100px;height: 100px;/* 背景颜色为粉色 */background-color: rgb(252, 191, 201, 0.7);/* 元素与父元素有20px间距 */margin-top: 20px;/* margin-top:80px; */}
</style>
<body><div class="container"><div class="box"><div class="box1"></div></div></div>
</body>

box和box1都未设置margin时

box的margin-top:-50px与box1的margin-top:20px

子元素外边距穿透父元素外边距合并,两者当中有一个值是负数,相加后的结果为最终外边距,即(-50 + 20 = -30px)

box的margin-top:-50px和box1的margin-top:80px

一正一负,最终外边距为两者相加,即(-50 + 80 = 30px)

 

margin负值的实践场景

1.等高布局

不管左边蓝色盒子中内容多少,其高度都会随着右边的粉色盒子变高的效果

        <style>.box {width: 520px;border: 2px solid red;overflow: hidden;}/* 清除浮动 */.clearfix::after {display: block;content: "";clear: both;}.left {width: 200px;float: left;background-color: skyblue;/* 内边距2000px使盒子高度变高 */padding-bottom: 2000px;/* 底外边距-2000px,抵消内边距2000px产生的占位 */margin-bottom: -2000px;}.right {width: 300px;background-color: pink;float: right;}</style><body><div class="box clearfix"><!-- 左边 --><div class="left">12345678978989</div><!-- 右边 --><div class="right"><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>10</p></div></div></body>

效果图:

2.一行多列网格布局

        <style>body,ul {margin: 0;}ul {list-style: none;padding: 0;/* 多余留1px,用来给第一个li的左边框  *//* ul是li的父元素,li的margin-left=-1px 两者发生外边距合并 *//* 一正一负时 外间距为两者相加 故第一个li不需要移动*/margin-left: 1px;}.box {/* 四个li+五个边框的总宽度 */width: 801px;height: 200px;margin: 50px auto;}ul li {/* 四个li的高度为796加上五个竖直边框各1px共801px */width: 199px;/* 高度加两个上下边框的高度 共198 + 2 = 200px */height: 198px;border: 1px solid red;/* 使用浮动顺序排列 */float: left;/* 使元素自身向左移动1px,用来覆盖掉前面元素的右边框线 */margin-left: -1px;}</style><body><div class="box"><ul><li></li><li></li><li></li><li></li></ul></div></body>

效果图:

3.头像叠加效果

        <style>.head {height: 100px;/* 去掉行内块元素间默认的空白间隙 */font-size: 0;/* 内容水平居中显示 */text-align: center;line-height: 100px;background-color: aquamarine;}.head > span {display: inline-block;border: 4px solid #fff;width: 50px;height: 50px;/* background-color: skyblue; *//* 弧度比img大2px 用来显示头像的外边框 */border-radius: 52px;/* 垂直居中对齐 配合父元的line-height:50px */vertical-align: middle;/* 元素向左移动20px */margin-left: -20px;}.head > span > img {width: 100%;height: 100%;border-radius: 50%;}</style><body><div class="head"><span><img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.PobTVuzuQy7tAZtvVEc3VQAAAA?rs=1&pid=ImgDetMain" alt="" /></span><span><img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.TIElyUlFJsyKMKJXgSlixAAAAA?rs=1&pid=ImgDetMain" alt="" /></span><span><img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.HVdWPbF8w9RDzR_VFdskegAAAA?rs=1&pid=ImgDetMain" alt="" /></span><span><img src="https://ts1.cn.mm.bing.net/th/id/R-C.3c5f60c6c0ecdf2830c6512752e8846e?rik=9Ndhdvf8by89og&riu=http%3a%2f%2fimg.keaiming.com%2fuploads%2fallimg%2f2020081714%2fpp2ql1hdf0y.jpg&ehk=VkqIRMgwnATNbM0hzt%2bzsoGVL%2f17ZnbmRhylWl3r5z4%3d&risl=&pid=ImgRaw&r=0" alt="" /></span></div></body>

效果图:

4.元素水平垂直居中

方法很简单,先利用绝对定位让元素的左侧和顶部分别与父元素垂直和水平中间对齐,然后再利用margin负值,让元素向上和向左各移动自身宽度/高度的一半

 

        <style>.father {position: relative;width: 300px;height: 300px;background-color: aqua;}.son {position: absolute;left: 50%;top: 50%;width: 100px;height: 100px;background-color: blueviolet;margin-left: -50px;margin-top: -50px;}</style><body><div class="father"><div class="son"></div></div></body>
</html>

效果图:

5.双飞翼布局

两边内容固定,中间内容自适应

<style>body {margin: 0;}.fl {float: left;}.main {background-color: #ddd;width: 100%;}.main .main-content {background-color: skyblue;height: 300px;/*核心代码*/margin: 0 200px 0 200px;}.left {width: 200px;height: 300px;background-color: coral;/*核心代码*/margin-left: -100%;}.right {width: 200px;height: 300px;background-color: tomato;/*核心代码*/margin-left: -200px;}
</style>
<body><div class="main fl"><div class="main-content">中间</div></div><div class="left fl">左边</div><div class="right fl">右边</div>
</body>

效果图:

给左边的div一个“margin-left:-100%”,使其移动的距离等于中间div的宽度,因此左div被拉到中间div的左侧,再给右边的div一个“margin-right:-200px”,使其移动的距离等于自身的宽度,因此右div也被拉到第一行

6.圣杯布局

相较于双飞翼布局,添加了顶部导航栏和页脚

<style>body {margin: 0;/*核心代码*/min-width: 650px;}/* 清除浮动 */.clearfix::after {display: block;content: "";clear: both;}.fl {float: left;}.header {height: 100px;background-color: tomato;}.container {padding-left: 200px;padding-right: 250px;}.container .center {width: 100%;height: 300px;background-color: skyblue;}.container .left {width: 200px;height: 300px;background-color: cadetblue;/*核心代码*/margin-left: -100%;position: relative;left: -200px;}.container .right {width: 250px;height: 300px;background-color: aquamarine;/*核心代码*/margin-right: -250px;}.footer {height: 100px;background-color: #000;}
</style>
<body><div class="header">头部</div><div class="container clearfix"><div class="center fl">中间</div><div class="left fl">左边</div><div class="right fl">右边</div></div><div class="footer">底部</div>
</body>

效果图:

body中的min-width计算如下:

(left和right的自身宽度 + left的额外偏移距离即200px)

这篇关于CSS学习【margin为负值】的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1104005

相关文章

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构:try: with sync_playwright(

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤:代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js

CSS @media print 使用详解

《CSS@mediaprint使用详解》:本文主要介绍了CSS中的打印媒体查询@mediaprint包括基本语法、常见使用场景和代码示例,如隐藏非必要元素、调整字体和颜色、处理链接的URL显示、分页控制、调整边距和背景等,还提供了测试方法和关键注意事项,并分享了进阶技巧,详细内容请阅读本文,希望能对你有所帮助...

Java进阶学习之如何开启远程调式

《Java进阶学习之如何开启远程调式》Java开发中的远程调试是一项至关重要的技能,特别是在处理生产环境的问题或者协作开发时,:本文主要介绍Java进阶学习之如何开启远程调式的相关资料,需要的朋友... 目录概述Java远程调试的开启与底层原理开启Java远程调试底层原理JVM参数总结&nbsMbKKXJx

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》:本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示,通过Canvas的API,可以绘制出6个不同城市的时钟,并且这些时钟可以动态转动,每个时钟上都会标注出对应的24小时制时间,详细内容请阅读本文,希望能对你有所帮助...

HTML5 data-*自定义数据属性的示例代码

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性(data-*)提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用... 目录引言基本概念使用自定义数据属性1. 在 html 中定义2. 通过 JavaScript 访问3.