Qu'est-ce que la marge négative CSS ? Le rôle des marges négatives CSS (explication détaillée)

Ce chapitre vous apporte Qu'est-ce que la marge négative CSS ? Le rôle des marges négatives CSS (explication détaillée), vous montrera le rôle des marges négatives CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Introduction aux marges négatives

L'utilisation des marges négatives est la suivante :

#content {margin-left:-100px;}

Les marges négatives sont généralement utilisé dans une petite plage d’utilisation. Mais comme vous le verrez ensuite, cela peut faire beaucoup. Voici quelques choses que vous devez savoir sur les marges négatives :

Elles sont des CSS parfaitement valides
Je ne plaisante pas. Le W3C dit même que l’utilisation de marges négatives dans les frontières extérieures est autorisée.

Les marges négatives ne sont pas un hack
C'est particulièrement vrai. C’est précisément une mauvaise compréhension des marges négatives qui conduit à toutes sortes de problèmes étranges. Un hack uniquement s'il est utilisé pour résoudre un bug ailleurs

Il est conforme au flux normal des documents
Lorsqu'il est utilisé avec des marges négatives Il ne perturbe pas le flux de documents normal lorsqu'il est utilisé sur des éléments non flottants. Ainsi, si vous utilisez des marges négatives pour pousser un élément vers le haut, tous les éléments suivants seront également poussés vers le haut.

C'est tout à fait compatible
Les marges négatives sont essentiellement prises en charge par tous les navigateurs modernes (comme IE6 dans la plupart des cas)

Lors de l'utilisation de float, il y a les performances seront différentes
La marge négative n'est pas un attribut que vous utilisez habituellement, alors soyez très prudent lorsque vous l'utilisez.

Dreamweaver ne le comprend pas
Les marges négatives n'auront aucun effet dans la fenêtre de conception de DW. Alors pourquoi utilisez-vous toujours la fenêtre de conception de DW pour visualiser l’effet ? Et si on travaillait avec lui ?

Les marges négatives sont très puissantes si elles sont utilisées correctement. Il existe deux scénarios dans lesquels les marges négatives sont importantes.

Utiliser des marges négatives dans les éléments statiques :

Un élément statique est un élément qui n'a pas utilisé float. L'image ci-dessus montre un élément statique utilisant des marges négatives.

Lorsqu'un élément statique utilise des marges négatives en haut/à gauche, il tire l'élément dans cette direction spécifique, comme

/* Moves the element 10px upwards */
#mydiv1 {margin-top:-10px;}

Mais lorsque vous définissez la marge négative sur relative en bas/ right est utilisé, il ne tirera pas l'élément vers le bas ou vers la droite. Au contraire, il tirera les éléments suivants vers l'intérieur, se recouvrant ainsi.

/*
所有在#mydiv1后面的元素都会向上
移动10px，而#mydiv1一点都不会移动
*/#mydiv1{margin-bottom:-10px;}

Si la largeur n'est pas définie, les marges négatives gauche et droite tireront l'élément dans les deux sens pour augmenter la largeur. Le rôle de la marge ici est équivalent à padding
Utiliser des marges négatives dans les flottants

Ajoutez ce qui suit à notre code html :

<div id="mydiv1">First</div>
<div id="mydiv2">Second</div>

Si vous utilisez des marges négatives pour une distance d'élément flottant , cela crée un espace blanc que d’autres éléments peuvent couvrir. Cette technique fonctionne très bien pour les mises en page fluides. Par exemple, une colonne a une largeur de 100 % et une autre colonne a une largeur fixe, disons 100 px.

#mydiv1 {float:left; margin-right:-100px;}

Si les deux éléments utilisent left float et définissez margin-right:-20px. #mydiv2 considérera #mydiv1 comme étant réduit en largeur de 20px (il en couvrira donc une partie), mais ce qui est intéressant est que #mydiv1 ne changera en aucune façon, mais conservera toujours la largeur d'origine.
Si la marge négative est aussi grande que la largeur, elle sera entièrement recouverte. Parce que les marges, le remplissage, les bordures et le contenu s'ajoutent à la largeur de l'élément. Si la marge négative est égale à la largeur de l'élément, alors la largeur de l'élément deviendra 0px.
Apprenez ce que vous apprenez

Maintenant que nous savons que l'utilisation de marges négatives fonctionne en CSS2, son utilisation peut nous donner des astuces CSS très intéressantes.

Transformez une seule liste en trois colonnes

Si vous avez une liste trop longue verticalement, pourquoi ne pas la diviser en colonnes ? Les marges négatives vous permettent de le faire sans ajouter de flottants ou d'étiquettes. Vous verrez comme il est facile de mettre en œuvre cela avec des marges négatives, comme ceci :

HTML:

<ul>
<li class="col1">Eggs</li>
<li class="col1">Ham<li>
<li class="col2 top">Bread<li>
<li class="col2">Butter<li>
<li class="col3 top">Flour<li>
<li class="col3">Cream</li>
</ul>

CSS

ul {list-style:none;}
li {line-height:1.3em;}
.col2 {margin-left:100px;}
.col3 {margin-left:200px;}
.top {margin-top:-2.6em;} /* the clincher */

en ajoutant .top Ajouter marge supérieure : -2,6em. Tous les éléments s’aligneront parfaitement. Il est bien préférable d’utiliser des marges négatives plutôt que d’utiliser le positionnement relatif, car il vous suffit d’ajouter des marges négatives au premier élément de la nouvelle colonne.

Chevauchement pour mettre l'accent

Le chevauchement intentionnel d'éléments est également une bonne métaphore de conception. L’effet de superposition peut renforcer la sensation de profondeur et faire ressortir certains éléments. Un bon exemple est l’image ci-dessus, qui utilise le chevauchement pour attirer l’attention. Utilisez simplement la propriété z-index et un peu de créativité et vous pouvez le faire.

Effets de texte 3D étonnants

这是一个精致的技巧。通过使用两个视图的两种颜色创建safari一样有点倾斜的效果。然后通过负边距来把其中一个叠加到另一个上面，保持1到2像素的偏移。这样你就可以二道可选的，机器友好的倾斜字体。就不需要浪费很多贷款来加载大的图片来实现这个效果啦

简单的两列布局

负边距也是在流式布局中创建简单一列宽度固定，一列内容为宽度的100%的两列布局的好方法。

HTML

<div id="content"> <p>Main content in here</p> </div>
<div id="sidebar"> <p>I’m the Sidebar! </p> </div>

CSS

#content {width:100%; float:left; margin-right:-200px;}
#sidebar {width:200px; float:left;}

哈哈，这样你就得到了一个简单的两列布局。它也能在IE6完美的渲染出来。现在为了让#sidebar不要被#content给掩盖，只要简单的加上：

/* Prevent text from being overlapped */
#content p {margin-right:210px;}
/* It’s 200px + 10px, the 10px being an additional margin.*/

当适当的使用的时候，负外边距能够提供一个灵活的文档结构，完爆table的布局。灵活的文档布局是一种可访问性和SEO的技巧，通过它能够让你根据你的关注点以任意顺序组织你的html代码。这里有一个文章讨论了负边距在多列布局中的应用。

微调元素

这是负外边距最常也是最简单的使用方式。假如你把第十个div插入到9个其他的div中，不知道什么原因没有正确的排列，使用负边距来调整这个div就不需要改变其他9个div了，很方便。

解决bug

文本和链接问题

在float中使用负边距可能会在旧的浏览器造成一些问题，比如下面的这些：

让链接不可点击
文本变得很难选择
失去焦点的时候按tab键失效

解决方法：只要添加position:relative，就可以啦。

图片被剪切啦

如果你运气不好刚好在办公室使用IE6，当遇到覆盖和浮动的时候内容有些时候回突然被剪切掉。

解决方法：同样的只要给浮动元素加上position:relative，所有的问题就解决啦。

结论

负外边距能够在不使用任何额外标签的情况下定位元素让它在现在网页设计中占有一席之地。随着更多的用户使用更新的浏览器（包括IE8)，未来使用这些技巧的网站会变得更加有前景。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!