今日の目標は：
・メカニズムを配置する要素の3種類を伝えることができます
・メソッドの位置を標的とする4種類の意味を伝えることができます
・絶対と相対的な位置の違いを理解することができます
・（広告）固定位置の使用シナリオを言うことができます
・名前四辺を用いるオフセット特性を配置することができます
・親要素のセットの相対的な位置を把握することができ、意味の絶対位置の子要素を設定
・CSS3のSaveモード属性を理解し、使用することができ
・新しいCSS3の属性セレクタを理解することができます
・新しいCSS3の擬似クラスセレクタを理解することができます
・新しいCSS3擬似要素セレクタを理解することができます
位置（フォーカス）
使用の位置：
標的の1.4種類：静的、相対的、絶対的、固定
2.4エッジオフセット性の種類：左、右、上、下
注：オフセット値の正確な理解である「どの位置からどのように多くのピクセル。」トップ：100pxに、上から100個のピクセル（下がります）
1.静的なポジショニング
すべての標準ストリームは、静的なポジショニングです
構文：position:static
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width:100px;
height:100px;
border:1px solid #000;
position:static;/* 设置静态定位 */
top:20px;/* 设置边偏移 */
}
.box1{
width:200px;
height:200px;
background:#f00;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
| レンダリング |
|---|
 |
要約：
少ない作業1.、静的位置決めを加えるため、標準的なフロー要素であります
2.オフセット値が無効静的なポジショニングであります
使用する：一般的にすでに設定要素を配置標準ストリームに低減され
私たちは、後にポジショニングが静的な位置決めが含まれていないと述べました
2.相対的な位置決め
標準の移動流の位置に自分自身を位置に関して
構文：position：relative
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width:100px;
height:100px;
border:1px solid #000;
position:relative;/* 设置相对定位 */
top:20px;/* 设置边偏移 */
left:30px;
}
.box1{
width:200px;
height:200px;
background:#f00;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
| レンダリング |
|---|
 |
要約：
1.オフセット自己位置フローの参照標準の相対的な位置決めは、出発点は、自分のモバイル標準ストリームの位置であります
2.標準の要素の流れには影響しません、文書の流れから逸脱することなく、移動した後、標準ストリーム自体も（永遠にない肉の魂で）実際または標準流れ位置の位置を占め、空間を占有します
3.標準ストリームを覆い隠すことができます
使用シナリオ：絶対位置での微調整要素と結果を達成するために
3.絶対位置
親要素からのオフセット参照として自分自身を配置する直接の親要素を見つけるために設定されている、ストップHTMLまで、見上げ続けるために見つけることができません
構文：position:absolute
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width:100px;
height:100px;
border:1px solid #000;
position:absolute;/* 设置绝对定位 */
top:20px;/* 设置边偏移 */
left:30px;
}
.box1{
width:200px;
height:200px;
background:#f00;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
| レンダリング |
|---|
 |
要約：
1.リファレンス位置決めオフセット位置（相対的/絶対/固定）を介して配置された直接の親要素または即時の祖先要素、HTMLまで見ていないより高いことが見出されています
2.フローが標準からなり、もはや継承親の幅は、幅と高さを定義することができる（コンテンツボックスのサイズに依存するブロックまたはエレメント列要素かどうか）、標準は、空間ストリームを占有しません
3.margin：絶対配置要素のためにオフに設定し、自動で作業をしないでください
4.セット時間は、水平または垂直の設定ができるだけで、無意味複数の方向オフセット
使用シナリオ：を用いて、相対位置（通常は相対的な位置が、絶対的ではないと、相対位置です）
子供ジェダイと父
ケース：
ボックスは、垂直水平中心う1.（水平中心、また、垂直中心）
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width:100px;
height:100px;
border:1px solid #000;
position:absolute;/* 设置绝对定位 */
top:50%;/* 设置上边偏移 */
margin-left:-50px;/* 往左边移动自身宽度的一般 */
left:50%;/* 设置做边偏移 */
margin-top:-50px;/* 往上面移动自身高度的一半 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
| レンダリング |
|---|
 |
2. [追加]ロゴ画像
| エフェクトアイコン |
|---|
 |
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width:290px;
height:163px;
position:relative;/* 父元素设置相对定位 */
}
.logo{
width:52px;
height:36px;
background:url(2.png);
position:absolute;/* 设置logo为绝对定位，父元素为相对定位，偏移位置相对父元素 */
right:0;/* 最右边 */
top:0;/* 最上面 */
}
</style>
</head>
<body>
<div class="box">
<img src="1.gif" />
<span class="logo"></span>
</div>
<div class="box">
<img src="1.gif" />
<span class="logo"></span>
</div>
</body>
要約：相対的な位置決めを使用して、親要素（標準的なフローから逸脱することなく、書き込みの複数をカバーしていない）（親ボックスの位置に対する）、サブ要素絶対位置親子必須と---
図3のレイアウトの回転（Jingdongの例）
| エフェクトアイコン |
|---|
 |
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{
width:590px;
height:470px;
margin:0 auto;
border:1px solid #000;
position:relative;/* 设置相对定位，因为左右按钮和下面的小圆点都需要在当前元素上面 */
}
ul,ol{
list-style:none;
padding:0;
margin:0;
}
ul li{
display:none;
}
ul li.on{
display:block;
}
ol{
width:152px;
height:18px;
position:absolute;/* 设置绝对定位，相对于父元素进行偏移 */
left:46px;/* 左边偏移 */
bottom:20px;/* 下面偏移 */
}
ol li{
float:left;
width:10px;
height:10px;
border-radius:50%;
border:1px solid #fff;
margin:4px;
}
ol li.on{
width:4px;
height:4px;
border:4px #999 solid;
background:#fff;
}
.box>a{
text-decoration:none;
color:#fff;
background:#666;
width:24px;
height:40px;
display:block;
text-align:center;
line-height:40px;
position:absolute;/* 设置绝对定位，相对父元素进行偏移 */
top:50%;/* 上边偏移 */
margin-top:-20px;/* 向上移动自身高度的一半，已达到居中的效果 */
}
.box>a.left{
left:0; /* 左按钮左边偏移为0，在最左边 */
}
.box>a.right{
right:0; /* 右按钮右边偏移为0，在最右边 */
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="on"><a href="###"><img src="img/banner1.jpg" /></a></li>
<li><a href="###"><img src="img/banner2.jpg" /></a></li>
<li><a href="###"><img src="img/banner3.jpg" /></a></li>
</ul>
<ol>
<li class="on"></li>
<li></li>
<li></li>
</ol>
<a class="left" href="###"><</a>
<a class="right" href="###">></a>
</div>
</body>
4.固定された場所
オフセット参照としてブラウザ、固定スクロール位置決め無効に
構文：position:fixed
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box{
width:300px;
height:200px;
background:#abcdef;
position:fixed;/* 设置固定定位，相对于浏览器窗口 */
left:50%;
top:50%;
margin-left:-150px;
margin-top:-100px;
}
.text{
width:20px;
}
</style>
</head>
<body>
<div class="text">
日照香炉生紫烟，遥看瀑布挂前川。
飞流直下三千尺，疑是银河落九天。
</div>
<div class="box"></div>
</body>
| レンダリング |
|---|
 |
要約：
1.文書の流出する、スペース標準ストリームを占有しません。
2.自分自身を定義するために、親要素の幅と高さ、幅と高さの必要性を継承しません。
3.margin：固定効果がない上に位置し、オート・エレメント
（：無効な要素の固定位置を設定するためのブラウザウィンドウ、スクロールバーの移動の始点）スクロールするスクロールバー付き4.永久ブラウザウィンドウ内の位置を固定されないであろう
使用シナリオ：一般的にページの右下隅に使用される広告「トップに戻る」、またはサイトの左側と右側
ケース：
Jingdongは右端の小さなリスト
| ケースレンダリング |
|---|
 |
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{padding:0;margin:0;}
.container{
height:2000px;
border-right:5px #7A6E6E solid;
}
ul{
list-style:none;
padding:0;
margin:0;
position:fixed;
right:5px;
top:50%;
margin-top:-95px;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li><a href="#"><img src="img/1.jpg" /></a></li>
<li><a href="#"><img src="img/2.jpg" /></a></li>
<li><a href="#"><img src="img/3.jpg" /></a></li>
<li><a href="#"><img src="img/4.jpg" /></a></li>
<li><a href="#"><img src="img/5.jpg" /></a></li>
</ul>
</div>
</body>
位置決め要約4種類の
| 位置決めモード | マーク位置オフ所持しています | あなたはオフセットエッジを使用することができます | 基準位置を移動します |
|---|---|---|---|
| 静的静的 | 、ノーマルモードをオフにマークされていません | できません | ノーマルモード |
| 相対位置決め相対 | ない的外れ、位置を占めています | 缶 | 自身への相対的な位置 |
| 絶対位置、絶対 | 完全に的外れ、位置を占めていません | 缶 | 親モバイル位置特定に対して |
| 固定された固定位置 | 完全に的外れ、位置を占めていません | 缶 | 携帯電話のブラウザからの相対位置 |
位置決め要素のカスケード効果
スタックレベルコントロール「ポジショニング」の要素
構文：z-index:值
値：
1.デジタル：
正の数、より多く、より高いレベル、より近いユーザ
負の数、遠く離れたユーザーから、レベルを下げます
同じ2.auto :(デフォルト値）と親要素のレベル
ビッグオートより3. Aの正の数、負のより少ない自動車
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/* 两个盒子都设置相对定位并偏移，中间有重叠的部分，默认后设置的会覆盖先设置的 */
.box{
width:100px;
height:100px;
background:#f00;
position:relative;
top:50px;
z-index:2;/* 设置层叠高一点，会覆盖后设置的 */
}
.box1{
width:200px;
height:200px;
background:#0f0;
position:relative;
left:50px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
| レンダリング |
|---|
 |
要約：
（静的位置決めを含むがない）要素を位置決めするための唯一の有効な1.zインデックス
2.z指数値が大きいほど、より高いレベル
親要素（親要素が時間のz屈折率「を有する」、および値が自動ではない）のレベルを比較した場合3.に、次いでサブ要素およびサブ要素との間の比較に行きません
トピック：子要素の内側に大きな箱、大きな箱を抑制するための大きな箱は、箱の上に押され
二つと区別、CSS3およびCSS2
元に基づくCSS3は、CSS属性セレクタ、擬似クラスセレクタ、セレクタと疑似オブジェクトのアニメーションの多くを追加しました
H5 = HTML5 + CSS3 + JS
大型のフロントエンド：JS
1.セーブモード内
それは取り除か増加ボックスのパディングパディングとボーダー影響をもたらすことができます
構文：box-sizing:border-box;
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{
width:200px;
height:200px;
background:#099;
border:20px solid #333;
padding:50px;
box-sizing:border-box;/* 设置内减模式 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
| レンダリング |
|---|
 |
概要：マージンボックスの大きさに影響を及ぼしません
2. [追加属性セレクタ
a）の構文：元素[属性^=值]
文字要素の先頭の値を指定するプロパティを選択
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
[name^='user']{
color:red;
}
</style>
</head>
<body>
<div name="username">这是盒子1</div>
<div name="user-name">这是盒子2</div>
<div name="name user">这是盒子3</div>
<div name="user_name">这是盒子4</div>
<div name="user">这是盒子5</div>
</body>
| レンダリング |
|---|
 |
b）の構文：元素[属性$=值]
文字要素の最後の値を指定するプロパティを選択
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
/* 属性值以指定字符结尾的元素 */
[name$="e"]{
color:red;
}
</style>
</head>
<body>
<div name="username">这是盒子1</div>
<div name="user-name">这是盒子2</div>
<div name="name user">这是盒子3</div>
<div name="user_name">这是盒子4</div>
<div name="user">这是盒子5</div>
</body>
| レンダリング |
|---|
 |
3. [追加疑似クラスセレクタ
| 疑似クラスセレクタ | 効果 |
|---|---|
| ：ルート | これは、ルートとして理解することができます |
| 李：最初の子 | 代表は最初のli子要素に親要素を識別します |
| 李：最後に、子 | 李代表は親要素の最後の子要素を見つけます |
| 李：n番目の子（N） | 親要素のn番目のli子要素を見つけます |
| 李：n番目の子（さえ） | 代表は親要素奇数のliの子供たちを識別します |
| 李：n番目の子（奇数） | 代表は李の子供のも、親要素を識別します |
| 李：空 | 親要素のコンテンツの空のラベルのli子要素を見つけるための代表 |
| リチウム：n番目の型（N） | 最初のいくつかのliタグの検索 |
| 李：第一の型 | 最初のliタグの検索 |
| 李：最後の型 | 最後のタグ李を検索するには |
| 李：のみ、子 | 唯一子元素 |
要約：キー：リチウム：第一子のLi：最後の子のLi：n番目の子（N）のLi：n番目の子（2N + 1）の奇数要素
4. 2D変換効果
あなたは、移動、回転、サイズを提供することができます
構文：transform:值
A）モバイル
構文：transform:translate(值1,值2);
値：ピクセルの横方向の動きの最初の値を表す、第2の画素値の長手方向の移動を表します
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{
width:200px;
height:200px;
background:#f00;
}
.box:hover{
transform:translate(50px,20px); /* 横线移动和纵向移动 */
/*transform:translateY(50px);*/
}
</style>
</head>
<body>
<div class="box"></div>
</body>
| レンダリング |
|---|
 |
トリックを学ぶ：x軸のみ移動またはY軸のみ値を設定することができる移動X移動Yを、使用することができる提供されます
B）回転
構文：transform:rotate(角度);transform-origin:横向坐标 纵向坐标;
値：
1.筆記角度：デジタル度。
2.座標の回転の中心の縦方向と横方向の座標が決定され、ピクセル、またはキーワード（左、右、上、下、センター）であってもよいが設定されていない場合、デフォルトは、回転の中心の中心点であります
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{
width:200px;
height:200px;
background:#f00;
margin:200px;
border-left:10px solid #0f0;
border-bottom:10px solid #00f;
}
.box:hover{
transform:rotate(45deg);/* 设置旋转和角度 */
transform-origin:left top;/* 设置旋转的圆心 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
| レンダリング |
|---|
 |
C）ズーム
構文：transform:scale(值)
値：複数のは、整数であることができ、それは小数することができ
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{
width:200px;
height:200px;
background:#f00;
}
.box:hover{
transform:scale(2);
}
</style>
</head>
<body>
<div class="box">
</div>
<p>asdf</p>
</body>
| レンダリング |
|---|
 |
これを学ぶ：二つの値、幅の比の第1の代表、高さおよび第2の比率を表すがある場合
5.过渡效果
是一个动画的效果
语法：transition:动画css属性 过渡时间秒数 速度类型 延迟的秒数
取值：第一个值，写css属性名称，就是要发生改变的css属性，第二个值是时间单位s秒，第三个值是发生改变的曲线linear匀速，ease先慢后快再慢，第四个值可以定义动画在几秒后开始
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
img{
display:block;
margin:50px auto;
border:1px solid #000;
/* 加过渡效果，必须是在元素原本的样式上面加，不在伪类上加 */
transition:transform 2s linear;
}
img:hover{
transform:scale(1.5);
}
</style>
</head>
<body>
<img src="img/meinv.jpg" />
</body>
| 效果图 |
|---|
 |