負の余白のレイアウトでの使用

負の余白であるmargin属性の値を負に設定すると、CSSレイアウトで役立つテクニックです.正の値を持つシーンはよく見られますが、よく知られています

margin-top、margin-leftが負の値である場合、要素は上に移動、左に移動するとともに、ドキュメントストリーム中の位置も相応に変化する.これはposition:relativeの要素がtop、leftを設定した後の要素が元の位置と異なる

を占めている.

margin-bottom、margin-rightが負の値に設定場合、要素自体に位置変化はなく、後の要素は下に移動、右に移動する

.
いくつかの適用シーンを見る
絶対位置要素
要素が絶対位置決めに設定されている場合、そのtop、right、bottom、left値は最も近い非static要素からの距離を指し、古典的な垂直中心の1つの方法は、絶対位置決め要素の負のエッジ距離を利用して実現される.

<style>
.wrap4{
	position:relative;
	margin:10px;
	width:200px;
	height:200px;
	border:dashed 1px orange;
}

.wrap4 .content{
	position:absolute;
	width:100px;
	height:100px;
	top:50%;
	left:50%;
	margin-top:-50px;
	margin-left:-50px;
	background:orange;
}
</style>

<div class="wrap4">
	<div class="content"></div>
</div>

要素を絶対位置に設定し、topとleftを50%に設定すると、要素の上、左が親要素の50%になり、要素自体の高さ、長さの一般的な負の余白を設定し、要素の中心を親要素の中心に移動させ、中央揃えを実現します.
.wrap4{
position:relative;
margin:10px;
width:200px;
height:200px;
border:dashed 1px orange;
}
.wrap4 .content{
position:absolute;
width:100px;
height:100px;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
background:orange;
}
float元素
負のエッジがfloat元素に及ぼす影響も前述したように,その特殊性があり,例を見れば明らかである.
浮動要素の負の余白

<style>
.float{
	overflow:hidden;
	width:280px;
	border:dashed 1px orange;
}

.float .item{
	width:100px;
	height:100px;
	float:left;
}

.float .item:nth-child(1){
	background:red;
}
.float .item:nth-child(2){
	background:grey;
}
.float .item:nth-child(3){
	background:blue;
}
</style>

<div class="float">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>

幅280pxのdivの右3つのfloat:leftのサブエレメントで、幅は100pxで、排出が下がらないため、最後のサブエレメントは次の行に移動した.
.float{
overflow:hidden;
width:280px;
border:dashed 1px orange;
}
.float .item{
width:100px;
height:100px;
float:left;
}
.float .item:nth-child(1){
background:red;
}
.float .item:nth-child(2){
background:grey;
}
.float .item:nth-child(3){
background:blue;
}
コードを少し変更します

<style>
.float{
	overflow:hidden;
	width:280px;
	border:dashed 1px orange;
}

.float .item{
	width:100px;
	height:100px;
	float:left;
}

.float .item:nth-child(1){
	background:red;
}
.float .item:nth-child(2){
	background:grey;
}
.float .item:nth-child(3){
	background:blue;
	margin-left:-20px;
}
</style>

<div class="float">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>

3番目の要素は、-20pxの負の余白を追加します.
.float .n{
margin-left:-20px;
}
このとき,3番目の要素が移動し,2番目の要素20pxを覆っていることが分かった.古典的な多列レイアウトはこの原理を利用している.
複数列レイアウト

<style>
.body{
	width:500px;
	margin:10px;
	border:dashed 1px orange;
	overflow:hidden;
}

.wrap3{
	float:left;
	width:100%;
}

.wrap3 .content{
	height:200px;
	margin-right:100px;
	background:rgba(255,0,0,0.5);
}

.body .right{
	width:100px;
	height:200px;
	float:left;
	margin-left:-100px;
	background:rgba(0,255,0,0.5)
}
</style>

<div class="body">
	<div class="wrap3">
		<div class="content">
			Content Content Content Content Content Content Content 
			Content Content Content Content Content Content Content Content
		</div>
	</div>
	<div class="right">Right</div>
</div>

コードは簡単です

content要素に親要素を追加し、左フローティングを設定し、幅100%

content要素右側の距離を設定し、rightの幅

に等しい値を設定します.

right左フローティング、そしてその幅の負の余白

を設定する.
本来rightは2行目に表示されているはずですが、その幅の左フローティングで1行目の右端になり、wrapの一部をカバーしていますが、contentはright幅の右端距離があり、カバー領域には内容がなく、2列のレイアウトを実現しました
.body{
width:500px;
margin:10px;
border:dashed 1px orange;
overflow:hidden;
}
.wrap3{
float:left;
width:100%;
}
.wrap3 .content{
height:200px;
margin-right:100px;
background:rgba(255,0,0,0.5);
}
.body .right{
width:100px;
height:200px;
float:left;
margin-left:-100px;
background:rgba(0,255,0,0.5)
}
Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
Right
PS.他のこのようなより複雑なレイアウトの原理は似ていて、興味のある学生はここを見て40種類を学ぶことができます.の
一般要素
負のエッジが異なるブロック要素に与える影響は興味深いので,いくつかの例を見てみよう.
複数列リスト

<style>
li{
	line-height:2em;
}

.col2{
	margin-left:150px;
}

.col3{
	margin-left:300px;
}

li.top{
	margin-top:-9em;
}
</style>

<ul>
	<li class="col1">aaa</li>
	<li class="col1">bbb</li>
	<li class="col1">ccc</li>
	<li class="col2 top">ddd</li>
	<li class="col2">eee</li>
	<li class="col2">fff</li>
	<li class="col3 top">ggg</li>
	<li class="col3">hhh</li>
	<li class="col3">iii</li>
</ul>

リストを定義し、3列表示
li{
line-height:2em;
}
.col2{
margin-left:150px;
}
.col3{
margin-left:300px;
}
li.top{
margin-top:-9em;
}
aaa
bbb
ccc
ddd
eee
fff
ggg
hhh
iii
普通のやり方は浮動によって実現されるに違いないが、さっき紹介した知識ではなぜか理解しにくいはずだ.普通の要素では珍しくないように見えます
要素を拡大
何?負の余白は要素を拡大することもできます!!!

<style>
.wrap{
	width:300px;
	border:dashed 5px orange;
}

.wrap .inner{
	height:50px;
	margin:0 -50px;
	background:blue;
	opacity:0.5;
}
</style>

<div class="wrap0">
  <div class="inner0">
  	inner inner inner inner inner inner inner inner inner inner inner inner 
  </div>
</div>

この例は平凡に見えるが、効果は驚くべきもので、内層のdivは水平の負のエッジを設定して大きくなった.
.wrap0{
width:300px;
margin:50px;
border:dashed 5px orange;
}
.wrap0 .inner0{
height:50px;
margin:0 -50px;
background:rgba(0,0,255,0.5);
}
inner inner inner inner inner inner inner inner inner inner inner inner inner
PS.効果が実現できるのは、要素の幅がauto以外の値に設定できないことを前提としている
右余白付きフロートサブエレメントのリスト
.wrap2{
width:320px;
border:dashed 1px orange;
}
.wrap2 .inner2{
overflow:hidden;
margin-right:-10px;
}
.wrap2 .item{
float:left;
width:100px;
height:100px;
margin:10px 10px 10px 0;
background:blue;
}
この効果を見て、あなたの最初の考えは何ですか?サブエレメント設定margin-rightではないか、遍歴時にnth-child(3 n)を0に設定し、上記の知識を利用してどのように処理できるかを見てみましょう.

<style>
.wrap2{
	width:320px;
	border:dashed 1px orange;
}

.wrap2 .inner{
  overflow:hidden;
  margin-right:-10px;
}

.wrap2 .item{
	float:left;
	width:100px;
	height:100px;
	margin:10px 10px 10px 0;
	background:blue;
}
</style>

<div class="wrap2">
	<div class="inner">
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
  </div>
</div>

nth-child(3 n)の余白を0に設定するのではなく、負の余白で親要素を「大きくする」ように設定します.
負の余白が面白いのか、よく知らない少年たちが学びましょう.
リファレンス
CSSレイアウト奇淫巧計の-強力な負のエッジ