デフォルトの高さ
かかわらず、ブロック要素やインライン要素ですが、デフォルトの高さは、独自のコンテンツを開いて支えました。
オーバーフロー
- 名前が示唆するように、サブエレメントのサイズは、オーバーフローと呼ばれる、親要素を超え
- ハンドルオーバーフローにoverflowプロパティを使用する方法
| 任意の値のオーバーフロー |
|---|
| 目に見えます |
| 隠されました |
| スクロール |
| オート |
<head>
<style>
div{
overflow:/*可选值*/
}
</style>
</head>
<body>
<div>一段很长的文字</div>
</body>
- デフォルト値に見える、子要素オーバーフローコンテンツは、親要素の外側に表示されます
- 隠されたオーバーフロー部分は表示されません、カットします
- スクロールは水平および垂直スクロールバーを生成し、
- スクロールバーは、実際の状況AUTO、必要性が唯一の垂直スクロールバーを生成し、生成します
しかし、また、オーバーフロー-Xを介して、オーバーフロー-Y処置単独で、水平、垂直オーバーフロー
垂直オーバーラップマージン（倍）
- これは、隣接する垂直マージンを指す要素の上下例えばマージン上部マージン底要素
<head>
<style>
.first{
width:100px;
height:100px;
background-color:skyblue;
margin-bottom:100px;
}
.second{
width:100px;
height:100px;
background-color:skyblue;
margin-top:100px;
}
</style>
</head>
<body>
<div class="first">我是第一个元素</div>
<div class="second">我是第二个元素</div>
</body>
兄弟のために
| 二つのマージン値 | スペーシング要素 |
|---|---|
| 私たちはポジティブであります | どちら最大 |
| 正負 | どちらと |
| 彼らは否定されています | 絶対値の最大値 |
<head>
<style>
.first{
width:100px;
height:100px;
background-color:skyblue;
margin-bottom:100px;
}
.second{
width:100px;
height:100px;
background-color:skyblue;
margin-top:200px;
}
</style>
</head>
<body>
<div class="first"></div>
<div class="second"></div>
</body>
ディスプレイ
- 二つは、一般的に、特別な事情の存在のために、正、負の開発に直面しています
- 最適化の外側の重複部分、未処理の兄弟要素
父と息子の要素について
- 外部から隣接するサブエレメントは、上記マージン、例えば、親要素に渡されます
<!--希望把子元素往下移100px，父元素不动-->
<head>
<style>
.first{
width:200px;
height:200px;
background-color:skyblue;
}
.second{
width:100px;
height:100px;
background-color:red;
margin-top:200px;
}
</style>
</head>
<body>
<div class="first">
<div class="second"></div>
</div>
</body>
親要素のマージントップサブ要素が影響する設定を表示し、
- ページレイアウトに影響を与えるだろう、治療しなければなりません
