CSS--カセット位置決め、フローティングと中心
各要素のHTMLは、ボックスのある
箱の属性に応じてそれらを配置し、HTML文書を解析するブラウザ。標準の文書フローの位置に各要素のデフォルト値
標準的な文書の流れは：ブラウザがHTMLコンテンツを読み込みした後、標準的な方法で配置された要素を指します。ブラウザのHTML要素は、左から右、上から下へと配置で、読み出しタグ配列に従って配置されています。インライン要素は、右、下配向ブロックレベル要素の最上部に左から配置されています。
なお、表示属性を表示するブロックレベルによってエレメント列であってもよいし、幅と高さを設定することができます。また、ブロックレベル要素の行が表示されてもよいです。
表示引数ことができます：ブロック、インライン、インラインブロックとなし。
给元素加上 display:none; 属性，元素不但会隐藏还会隐藏它的物理空间。
给行内元素加上 display:block; 属性，行内元素就会具有块级元素的属性。
给块级元素加上 display:inline; 属性，行内元素就会具有行内元素的属性。
给行内元素加上 display:inline-block; 属性，仍为行内元素，但是可以设置width及height属性称为行内块元素。CSSのポジショニング
一般的な「標的」とは、特定の位置に配置された要素を意味し、位置決めはHTML属性位置によって達成されます。
値は、次の4つのカテゴリに分類された位置に配置：
position:static; 静态定位（默认定位）
position:relative; 相对定位
position:absolute; 绝对定位
position:fixed; 固定定位1、静的位置決め
場合の値の位置静的、つまり、静的な位置決め。
デフォルト値は、組織の標準文書フローに合わせてページ上に配置されるラベルの静的な位置を使用して、位置です。一般的な位置決め要素は、すべての静的配置されています。
2、の相対位置
位置プロパティ場合相対時間、すなわち、相対的な位置（要素自体の基準位置）。
ページ配置は、右、上部と下部の特性をオフセット、標準文書ストリームのルールに従って、相対位置決め要素が残されている提供することができる要素の相対的な位置決めのために設けられています。
フロー要素の元の位置からのオフセット参照標準文書は、オフセットときのみ表示座標の変化の後に表示されるが、そのまま文書の標準的なフロー内の位置、すなわち標準的なドキュメントフローから逸脱しません。
<head>
<style type="text/css">
#box1,#box2,#box3{
width: 150px;
height: 150px;
float: left;
background-color:yellow;
}
#box2{
background-color:red;
position:relative; /*相对定位（参照元素本身的位置）*/
left:50px;
top:50px;
}
</style>
</head>
<body>
<!-- 相对定位 -->
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>デモンストレーション効果図：
図3に示すように、絶対位置
値の位置に設定すると、絶対時間、つまり、絶対位置は、絶対位置決め要素があろう標準文書フローのうち、無制限の標準文書フロー。
要素は左、右、上、下のページ属性によって提供することができ、文書標準の流れの中でスペースを取らない、絶対位置決め要素を参照してオフセットされ、標準は、ドキュメント要素の流れに影響を与えません。
左と上の設定時に1、BOX2は、絶対位置であり、デフォルトは参照としてbodyタグの左上隅です。（ほとんどしないでください！）
コンテナ層[父親要素（ボックスとしてID]）を標的とする場合、図2に示すように、第2層[子生成要素（BOX2のクラスは、）]上部及び左側[親要素（IDであろう相対に設定されていますボックスへ）]、すなわち、基準ボックスIDボックス左上隅）に、ブロックを含む基準層と呼ばれる（参照層を移動させます。（共通の開発従います！:)
<head>
<style type="text/css">
#box{
position: relative; /* 相对定位 */
}
.box1,.box2,.box3{
width: 150px;
height: 150px;
float: left;
}
.box1{
background-color: yellow;
}
.box2{
background-color:red;
position:absolute; /* 绝对定位（参照父辈元素左上角的位置）*/
left:50px;
top:50px;
}
.box3{
background-color: blue;
}
</style>
</head>
<body>
<!-- 绝对定位 -->
<div id="box"> <!-- 父辈元素 -->
<div class="box1"></div>
<div class="box2"></div> <!-- 子辈元素 -->
<div class="box3"></div>
</div>
</body>デモンストレーション効果図：
図4に示すように、固定された位置
場合の位置値を固定時間、すなわち固定位置、同様の固定位置と絶対位置は、意志標準ドキュメントフローのうち。
ユーザはブラウザウィンドウのスクロールバーをドラッグするように、異なる絶対位置を参照して、固定された位置決めのWindowsブラウザまたは他の表示装置を参照して、保持要素は、固定ブラウザウィンドウの同じ位置に対して位置決めされます。
<head>
<meta charset="UTF-8">
<style type="text/css">
#box1{
position: fixed; /*固定定位*/
width: 150px;
height: 150px;
border: 2px solid red;
background-color: yellow;
margin-top: 10%;
margin-left: 10%;
}
</style>
</head>
<body>
<!-- 固定定位 -->
<div id="box1">固定定位</div>
<div id="box2">
li{测试元素 $}*50
</div>
</body>デモンストレーション効果図：
浮動ボックス
在HTML中，可以通过float属性将块级元素向左或向右浮动，直至其外边缘碰到包含它的元素或另一个浮动元素的边框为止。
多个浮动的元素可以显示在同一行内，浮动元素会脱离标准文档流，不占标准文档流中的位置。
盒子的浮动实际是通过设置元素的float属性来完成的，其属性主要取值有none、left和right。
当float为none时，不浮动，此时元素会按照默认的标准文档流的方式来处理。
当float为left时，向左浮动，此时元素会脱离标准文档流，不占文档流中的位置空间。
当float为right时，向右浮动，此时元素也会脱离标准文档流。
浮动塌陷:
如果父元素只包含浮动元素，且父元素未设置高度和宽度的时候。那么它的高度就会塌缩为零。
处理浮动塌陷:
1、给父级元素设置高度
2、设置空div，利用clear属性:both，left，right不占文档流中的位置空间。
3、使用overflow:hidden;属性
3.1、清除浮动
3.2、将超出父级盒子多余的部分给隐藏掉
4、使用伪元素
<head>
<style>
.content {
height: 200px;
background-color: pink;
}
.box {
padding:10px 50px;
background-color: yellow;
/*设置浮动*/
float: left;
}
/*清除浮动
伪元素：
::after <!--在元素之后添加内容-->
::before <!--在元素之前添加内容-->
::first-line <!--向文本的首行添加特殊样式-->
::first-letter <!--向文本的第一个字母添加特殊样式-->
*/
.clearfix::after {
content: "."; /*在伪元素中content属性必不可缺，建议向清除浮动的伪元素内容内添加“.”*/
/*清除浮动（both:清除左右浮动）*/
clear: both;
/*把行内元素转化为块级元素*/
display: block;
/*优化操作*/
line-height: 0;
font-size: 0;
opacity: 0;
height: 0;
}
</style>
</head>
<body>
<div class="nav clearfix">
<div class="box">1</div>
<div class="box" style="background-color:red;">2</div>
<div class="box">3</div>
<!-- 此处【伪元素】清除浮动 -->
</div>
<div class="content">
<!-- 内容区 -->
</div>
</body>演示效果图：
盒子居中
元素上下居中：
margin:0 auto; /* 元素上下居中 */要件が約達成マージンを有する自動車の特性：
1、サブブロックレベルのボックス要素を中心とする必要があります。
図2に示すように、サブボックスは、コンテンツ領域の中心幅を設定する必要があります。
図3に示すように、サブボックス文書の流れの中心から分離する必要はありません。
中央の上下要素：
<head>
<style>
.parent {
width: 200px;
height: 200px;
background-color: teal;
position: relative;
}
.child {
width: 100px;
height: 100px;
background-color: pink;
/*第一步：让子盒子的左上角为父盒子的中心点*/
position: absolute; /* 绝对定位*/
top: 50%; /*往下移动父盒子高度的一半*/
left: 50%; /*往右移动父盒子宽度的一半*/
/*第二步：让子盒子的中心点处于父盒子的中心点*/
margin-top: -50px; /*子盒子向上移动子盒子高度的一半*/
margin-left: -50px; /*子盒子向左移动子盒子宽度的一半*/
}
/* 圣杯布局和双飞燕布局 */
</style>
</head>
<body>
<div class="parent">
我是父盒子
<div class="child">我是子盒子</div>
</div>
</body>デモンストレーション効果図：
