1.交換用の要素とは何ですか
置換要素 - コンテンツを理解することで、我々は、CSSでの共通の要素を持っている必要があります。要素を交換するように「入力」、「IMG」、「IFRAME」、「ビデオ」とを有するように共通要素「コンテンツ（コンテンツ）を置き換えることができる」です。例えば絵「のimg srcは=」1.png「/」で我々は画像のみのSRCを交換する必要があり、コンテンツ要素が変更されますので、代替コンテンツは、交換要素の基本的な特徴の一つです。あるいはコンテンツに加えて、同様に別の素子特性。
（1）基本的なスタイルの変更が動かない、「CSSのないページの内容に影響の出現」の本来の記述は、個人的に何かが間違っていると感じています。どのような基本的なスタイルは、静止画は、例えば、あなたがsrcで画像を置き換えることができますするためには、ですが、CSSを渡すことはできませんになる絵の「男」と「女。」時には、これは最も基本的な要素の置き換えとして、私たちのために便利です：「入力タイプ=」テキスト「/」あなたはCSSを経由して、彼の境界線、フォントおよびその他の属性を変更することができますが、そのようなカーソルプロンプトとしての彼の基本的なスタイル、あなたは、エリアに入ることができるというように、これはあなたのスタイルが変更された場合、ユーザーはどこ入力するにはわからないので、それは、あなたが移動を変更しないことです。もちろん、いくつかのケースでは、この「基本的なスタイルは、」そのような「チェックボックス」の基本的なスタイルとして、私たちに大きな不便をもたらした、醜いボックスは、あなたがCSSを変更することはできませんで、いくつかの特別な方法を経ることが必要です。」 「彼のオリジナルのスタイルをカバーしています。ここで展開するために、よりを行うことではありません。
基本的な寸法は、テキスト記述は、「独自のサイズを持っている」、元の文は、「入力」ラベルとして、間違っていない（2）、入力ボックスのデフォルトの長さと幅はデフォルトであり、「ビデオ」、「IFRAME」 「キャンバス」や他のラベルのデフォルトのサイズはデフォルトのサイズが0である「IMG」、* 150 300です。
（3）ルールの独自のセットの性能に多くのCSS特性があり、ここでの唯一の著者は垂直整列性を示し、要素および非置換の要素を置換するために、ベースライン非置換要素は、小さなエッジ小文字Xが、置換します要素は、交換エレメントの下縁として定義されます。（この問題は、両方の要素に異なる動作をどの属性、以下のメッセージを見ることができる小さなパートナーの明記関心を拡大するために行うことができます）
2.あるいは寸法ルール要素
CSS>プライベートプロパティ]> [固有のサイズ（注：ここで著者は、サイズCSSのサイズ、HTMLのサイズ、本来の寸法に分割されます）私は個人的には三つのカテゴリーに下降重量の大きさの要素を置き換えます。今、私は幅と高さの3次元に説明する一例としての要素を置き換える影響を与えます。
（1）固有のサイズは、元のコンテンツ要素の置換を指すは、元のコンテンツが原因の基本的な画像サイズに、「IMGのSRC =」画像リンク「/」は、例えば、写真で、非常に興味深いものである（Googleの）0画像自体も、その幅と高さを含むが、200のような風景のマップ100は、他のスタイルの非存在下でIMGタグは彼の最終的な「固有サイズ」の状況を説明200 100、代わりに0、ここで元のコンテンツを指し絵自体は、幅と高さです。帯域幅は、「入力タイプ=」テキスト「/するため、高されるコンテンツを必要としないいくつかの要素があります 」 たとえば、あなただけのhtmlタグを追加する必要があるが、彼が入力されたテキストボックスを表示し、これは彼の本来のサイズ。
（2）プライベート属性を交換する特性を保有する要素を指し、一般に、「IMG幅=」200「高さとしてHTMLタグに明らか =」100「SRC =」400 の幅と高さから、画像「/」の300プライベート性の役割は、画像は、最終的に幅として現れるであろう、すなわち、高さの寸法画像の固有の特性は、400カバー300を この場合にも隠された固有の特性、そして、画像のアスペクト比、があり、画像のアスペクト比は4：3、あなたは「IMG widht =」200「SRC設定した場合 =」400枚の画像を300 「/」のみに設定幅は、高さが設定されていない、幅により、最終的な画像の高さ*アスペクト比= 150。この隠された割合も、CSSの適用範囲内に有効になります。
、多くの場合、例えば、維持するために、コードを困難にし、（3）CSSプロパティは特に指定はないだろう、とによるCSSの重い私有財産よりも高くなるまで、CSSプロパティのセットを指し、あなたは、コードのこの部分を維持することができます
<img src="1.png" width="200" height="200" />
<style>
img{
width:200px;
height:200px;
}
</style>
問題は、IMGのCSSプロパティ200pxの何を見ていない私有財産幅200pxのカバーを式のと同じ形式である高さ、絵のためにこの時間、サイズは200になり100、および私有財産の高さについては変更後の保守要員を逃げる、および変更が動かないことが判明し、再び200に変更するように変更する 200 そのため、CSSでスタイルの個人的な勧告はすべてのプロパティの保守交換要素が不要な手間が削減されます。
3.要素およびコンテンツプロパティとの間の関係を交換
ここでは、CSSの世界での関係の交換要素とコンテンツ属性を研究するために、直接交換要素との関係srcをスキップし、私たちは「匿名の要素を交換する」というコンテンツ生成されたオブジェクトの属性なので、コンテンツは、コンテンツの属性を生成していますのみで登場した後、:: /要素、一般的には最も一般的なコンテンツ置換性::前を交換しますが、Chromeブラウザでは、すべてのコンテンツ要素は、他のブラウザでは、（DIVを含む）属性をサポート::前/ ::しかサポートしていました。したがって、我々はほぼ同じで、次の2つのコードの部分を考慮することができます。
<!-- 请在Chrome浏览器中尝试 -->
<img style="content: url('../1.png')" />
<img src="../1.png" />
交換用の要素自体が特性を（テキストは、できない興味を持っている実験を所有することができます）を選択することはできませんので、要素、生成された画像の交換は正確には、右に保存することができないので、彼らは同じ結果を示すが、いくつかの違いが残っています、画像を選択することはできません。だから、使用中またはこれらの細部に注意を払うとき。
前記補助情報の使用は、コンテンツを生成し
コンテンツ属性は唯一のChromeブラウザのすべての要素によって支持されているので、私たちはただ国民の支持を探るた:: /後::何が2擬似要素の内容の前に補助的な役割。実際に、私たちはしばしば擬似クラスのフローティング技術後に透明を使用し、そうすることの利点は、むしろ冗長DOM構造を追加するよりも、アクセシビリティとスタイルを組み合わせることです。ここでは簡単なコードです。
<-- after伪类清浮动 -->
<style>
.clearfix::after{
content:'';
display:block;
clear:both;
}
</style>
擬似クラスの後に透明フロートを使用することに加えて、いくつかの便利な機能があります。著者は、彼らが今後のいくつかが含まれていてもよいので、ここで説明のみからのリンクとアドレスを提供するために、興味を持っているとして、いくつかの例を与えた自分自身を見つけることができます。
- そして、補助垂直中心正当化はあります
- フォントのアイコンを達成するためにする@ font-face規則を持ちます
- 行を挿入することによって達成Unicodeは「動的ロード中...」テキストアニメーション壊す
これらの上記に加えての、2をより面白く、アクセシビリティは、後に詳細に発売されることに個人的に考えてありますが、コンテンツの内容attrの属性値を使用して生成され、コンテンツのディレクトリ構造を使用した簡単なカウンター。
4.content ATTRの属性値生成されたコンテンツ
この機能は、一般的に比較的使いやすい、使用、したがって、単一の、多くのコンテンツとして実行されているので、カスタム属性は、情報内容の一部を生成するために使用されるDOM構造を得ることです。補助要素を使用して、次のような効果を達成する方法を見てみましょう。
コードは次のよう：
<div class="list">
<div class="li" self="音乐">aaa.mp3</div>
<div class="li" self="电影">bbb.mp4</div>
<div class="li" self="书籍">《ccc》</div>
</div>
<style>
.li{
display: block;
line-height: 40px;
width: 200px;
padding-top: 40px;
position: relative;
background: yellowgreen;
overflow: hidden;
margin:10px 0;
}
.li::after{
content: attr(self);
position: absolute;
top: 0;
right: 0;
text-align: center;
width: 80px;
background: yellow;
transform: translate(20px) rotate(45deg);
}
</style>
コンテンツの6対深い理解
コンテンツカウンタは、非常に使いやすく、強力な機能であるいくつかのケースでは、彼はマニュアルカウントよりも便利になり、同じ機能を数えるのコンテンツ完了の使用、注意を必要とする多くの分野があります。CSSカウンタの理解する前に、我々は彼の性質（反リセットおよびカウンタインクリメント）と2つのメソッド（カウンター（）とカウンタ（））のうちの2つを知っている必要があります。以下は、順番にこれらのプロパティとメソッドを説明します。
名前が示すように、第1のカウンタリセットは、カウンタリセットは、通常、カウンター親コンテナをリセットするために使用するカウンタをリセットするために使用されます。はい、だけでなく、このプロパティはまた、名前の関数でカウンターカウンターなので、記録ので。デフォルトでは、カウンタはゼロからカウントを開始するようにリセットされ、もちろん、あなたが手動で設定することができるので、2カウンタリセットカウンタの名前です属性値、およびいくつかの最初からリセット値があります。
カウンターリセット：こんにちは1;カウンタの名前が（ノートは引用符が必要です）ハローで表し、カウンタがカウントを開始し、当然のことながら、このプロパティを書き込むことはできません、デフォルトは0です。あなたはまた、同時に複数のカウンタに命名することができ、個人は行わないとのソフトは何も感じません。カウンタを設定した後、あなたはカウントプロパティとカウンター（）メソッドでコンテンツを置き換えることができます。コードは以下の通りであります：
<div class="ctn">
<div class="chid">计数</div>
<div class="chid">计数</div>
<div class="chid">计数</div>
</div>
<style type="text/css">
.ctn{
font-size: 20px;
color: green;
background: yellow;
counter-reset: hello 1;
}
.chid::after{
content: counter(hello);
}
</style>
以下に示すように最終結果：
それが有効に機能を数える見ることができます。もちろん、私たちが必要とする結果ではなく、常に1よりも、自分自身を蓄積することができるカウンタで、2番目のプロパティを使用する必要があり、この時、カウンタインクリメントカウンタは、定義により、用ループと少し似て、カウンタのプロパティが使用されているインクリメントI ++、このプロパティは2つの値をインクリメントするカウンタの名前の最初の値の代表であり、それぞれの値をインクリメントする第二の数、デフォルト値は1だけインクリメントされていることを示します。
コンテンツインクリメント：ハロー2、ハロー2のカウンタを表します。私達はちょうどこのプロパティを追加することの効果を見て例を挙げました。
<div class="ctn">
<div class="chid">计数</div>
<div class="chid">计数</div>
<div class="chid">计数</div>
</div>
<style type="text/css">
.ctn{
font-size: 20px;
color: green;
background: yellow;
counter-reset: hello 1;
}
.chid::after{
content: counter(hello);
counter-increment: hello 2;
}
</style>
図に示すように、最終的な結果。
興味深いことに、結果は3,5,7というよりも1,3,5です。したがって、値がリセットされると結論付けることができる遭遇するたびに増分直接添加結果を返します。あなたがいたずらしているのであれば、その親要素にもカウンターインクリメントし、同等の値リセット= +増分をリセットを書きました。
7.カウンタ（）実装され、ネストされたディレクトリ構造をカウント
さ我々はカウント機能を達成するためにカウンタ（）メソッドを使用する前に、前の説明を続けると、私たちは通常は1番、2、...例えば1.2、および1.3のような数及び他のサブ前者が存在することになることはできませんカウンタは（））（カウンターにある達成することができる、することができません。
カウンター（）と基本的な使用カウンタ（）同様に、ここではサイドノート、名前がカウンタの名前ですべてのカウンタ（名前、タイプ）は、その後、何がそれを行うための第二引数のですか？あなたは、リストスタイルのプロパティを知っていれば、元に使用される文字列、個人的には適切ではないと思うが、実際には、あなたが知っていること等アラビア数字1234と同様に、ローマ数字、に加えて、すべてのlist-styleプロパティをサポートしている種類をカウントするために使用することができます。（カウンターでディレクトリ構造にそれを実装する方法を見て多くのゴシップ）。
<!-- 探究循环计数器 -->
<div class="father">
<div class="children">
children
<div class="father">
<div class="children">children
<div class="father">
<div class="children">children</div>
<div class="children">children</div>
</div>
</div>
<div class="children">children</div>
</div>
</div>
<div class="children">
children
</div>
<div class="children">
children
</div>
</div>
<style type="text/css">
.father{
counter-reset: hello;
padding-left: 10px;
}
.children::before{
content: counters(hello,'-') '. ';
counter-increment: hello;
}
</style>
以下に示すように最終結果：
ビューの珍しいポイントでレッツディレクトリ構造は、〜2の間に彼らの経験の違いは、あなただけはハハ、ここに書くことはできませんします
<!-- 探究异常计数器 -->
<div class="father">
<div class="children">children</div>
<div class="father">
<div class="children">children</div>
<div class="children">children</div>
</div>
<div class="children">children</div>
<div class="father"></div>
<div class="children">children</div>
</div>
図に示すように、最終的な結果。
コンテンツ部分、これまでに、以下のパディング、ボーダーとマージンを探求していきます。