css的负margin外边距功能简单介绍_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

css的负margin外边距功能简单介绍_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:26 AM

css的负margin外边距功能简单介绍:
关于margin外边距可能绝对多数朋友都不陌生，它的功能就是设置元素的外边距。
代码如下:

div{  width:100px;  height:100px;  margin:10px 5px 15px 20px;}

登入後複製

更多基础应用可以参阅CSS的margin属性一章节。
但是与负外边距的很多功能许多人并不是太了解，下面就通过代码实例做一下简单介绍。
一.对于普通文档流的影响:
关于文档流的基本概念可以参阅什么是文档流一章节。
也就是说处于文档流的元素位置跟随文档流的变化而变化，先看一个简单的代码实例:

<!DOCTYPE html><html><head><meta charset=" utf-8"><title>无标题文档</title><style type="text/css">#antzone{  width:200px;  height:100px;  background:#ccc;}</style></head><body><div id="antzone"></div>蚂蚁部落欢迎您</body></html>

登入後複製

对于上面代码的表现，应该没有什么异议。下面就应用负外边距，代码实例如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><title>无标题文档</title><style type="text/css">#antzone{  width:200px;  height:100px;  background:#ccc;  margin-bottom:-20px;}</style></head><body><div id="antzone"></div>蚂蚁部落欢迎您</body></html>

登入後複製

大家看到上面的效果了，div元素的尺寸没有发生变化，但是文字却跑到div元素上面去了。
负外边距对于处于文档流的元素的影响是这样的，会使元素在文档流中占据的空间发生偏移，后面文档流的内容会填补发生偏移的空间，这一点和相对定位是不同的，相对定位即便是发生了偏移，但是原来的空间还是保留，所以后面的元素不会填补。上面的代码margin-bottom:-20px可以是div元素的文档流回退20px，所以文本就会填补这个回退的空间。
总结如下:在文档流中，元素的最终边界是由margin决定的，margin为负的时候就相当于元素的回退，文档流只认边界，不会管它的实际尺寸是多少。
代码实例如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><title>无标题文档</title><style type="text/css">#box{  width:200px;  background:#ccc;  overflow:hidden;}#inner{  width:80px;  height:100px;  background:red;}</style><script>window.onload=function(){  var obt=document.getElementById("bt");  var odiv=document.getElementById("inner");  obt.onclick=function(){    odiv.style.marginBottom="-20px";  }}</script></head><body><div id="box">  <div id="inner"></div></div><input type="button" id="bt" value="查看效果"/></body></html>

登入後複製

上面的代码中，点击按钮可以设置内部div的margin-bottom值为-20px，那么它在文档流中就回退20px，那么外层div元素高度也会减少20px。但是需要注意的是，父元素必须要有overflow:hidden，否则虽然文档流回退，父元素的高度也减小了，但是没有效果。
二.负外边距对宽度的影响:
这里就不多介绍了，具体可以参阅负外边距margin对宽度的影响一章节。
三.负外边距对浮动元素的影响:
这里就不多介绍了，具体可以参阅负外边距margin对浮动元素的影响一章节。
四.负外边距对定位元素的影响:
这里就不多介绍了，具体可以参阅负外边距margin对于定位元素的影响一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=18295

更多内容可以参阅:http://www.softwhy.com/divcss/

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7907

Java教學

1652

CakePHP 教程

1411

Laravel 教程

1303

PHP教程

1248

Related knowledge

HTML容易為初學者學習嗎？ Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

Gitee Pages靜態網站部署失敗：單個文件404錯誤如何排查和解決？ Apr 04, 2025 pm 11:54 PM

GiteePages靜態網站部署失敗：404錯誤排查與解決在使用Gitee...

HTML中起始標籤的示例是什麼？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。