アウトライン_html/css_WEB-ITnoseの詳細説明-htmlチュートリアル-php.cn

アウトライン属性は普段あまり使われませんが、最近この属性の役割について勉強するように言われました。

CSS2で追加されたアウトライン属性は、中国語に翻訳すると外側のアウトラインになります。

馬は輪郭ですか？

輪郭とは、オブジェクトの周囲または図形の外枠を指します。

この場合、外側の輪郭が外側の境界線になります。

正式な定義を見てください: アウトライン (アウトライン) は、要素の周囲に描かれた線であり、境界線の端の外側に位置し、要素を強調表示できます。アウトライン属性は、要素の周囲にアウトラインを設定します。

より実践的なエクスペリエンスを見てみましょう: ブラウザで、マウスをクリックするか Tab キーを使用してリンクまたはラジオにフォーカスを置くと、要素はアウトラインの点線のボックスで囲まれます。この輪郭の点線のボックスが輪郭です。

一般的な理解を終えたので、以下の分析を続けましょう。

CSS2 のアウトラインは次のように設定されています:

p{  outline-style:dotted;}

ログイン後にコピー

見た目は境界線と変わりません。

サポートを見てみましょう

状況は良さそうですが、旧式のIE6～7には互換性がないようですので、枠線ではなくアウトラインを使いたいお子様はがっかりするかもしれません。おそらくこの理由で、私は普段あまり使用しません。

アウトラインには、あまり一般的ではない、outline-offset という属性もあります。これは、外側のアウトラインの相対オフセットを設定します。ここでの相対は、W3C の上 (境界線内) の標準ボックスモデルとして理解できます。たとえば、次のように設定します。その後の効果は次のようになります

黄色の部分が輪郭であり、outline-offsetを設定すると、外側に10pxオフセットされ、その後ろのボディの背景色が赤で表示されます。青いのが境界線です。

アウトラインと背景の関係

div {        height: 100px;        width: 100px;        margin: 50px auto;        outline: 10px solid rgba(255,255,0,9);        background: black;        outline-offset: 10px;        border:5px solid blue;    }

ログイン後にコピー

結果はこんな感じで、ボディにクラスの背景色を赤、ボディ内のdivにアウトラインの色を黄色に設定し、輪郭の色は背景の上にあります。

ブロックレベル要素とインライン要素の輪郭

枠線と同じように、インライン要素またはブロックレベル要素の輪郭と枠線を同時に設定できます

 1 <!DOCTYPE html> 2 <html> 3  4 <head> 5     <meta charset="utf-8"> 6     <title>Examples</title> 7     <style type="text/css"> 8     div { 9         height: 100px;10         width: 100px;11         margin: 50px auto;12         outline: 10px solid yellow;13         background: gray;14     }15     16     body {17         background: red;18     }19     </style>20 </head>21 22 <body>23     <div>24         啦啦啦啦啦啦25     </div>26 </body>27 28 </html>

ログイン後にコピー

ではありませんが見た目は良いですが、それでも十分です。

実際には、インライン要素のアウトラインとブロックレベル要素のアウトラインのレベルは異なります。

 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Examples</title> 6 <style type="text/css"> 7     span{ 8         outline:1px solid red; 9         border:1px solid blue;10     }11     p{12         outline:1px solid yellow;13         border:1px solid gray;14     }15 </style>16 </head>17 <body>18     <p>刘延东与国家<span>体育总局局长刘鹏、北京市市长王安顺等12人将向国际奥委会进行陈述，向全世界展示北京举办2022年冬奥会的实力和信心。全会开幕 不记名投票选出冬奥举办地国际奥委会第128次全会昨晚在吉隆坡会展中心隆重开幕。国际奥委会委员、2022年冬奥会申办</span>城市代表等出席开幕式。国际奥委会委员、马来西亚奥委会主席伊姆兰，国际奥委会主席巴赫和马来西亚总理纳吉布先后致辞。19         　　国际奥委会第128次全会的一项<span>重要议程</span>是以不记名投票方式选出2020年冬青奥会和2022年冬奥会的举办城市。 20 　　本次全会将持续到8月3日。在为期四天的会议中，国际奥委会委员们还将围绕《奥林匹克2020议程》进行讨论，并听取里约奥运会、平昌冬奥会、东京奥运会以及未来两届青奥<span>会筹备工作进展的报告。此外，全会还将选举一名国际奥委会执委和若干名委员。 21     　　国际奥委会全会是国际奥委会一年一度的内部会议</span>。参加会议的人员为国际奥委会委员，相关国际单项体育联合会、国家（地区）奥委会代表等。 据新华社电 22 </p>23 </body>24 </html>

ログイン後にコピー

結果はこうなりました、わかりますか？マオには関係があるので、ゆっくりしてください。

まず、4 つの div で 4 つの画像をラップします。画像については説明しません。 divに黄色の少し透明な輪郭を追加し、画像に赤い輪郭を追加します。

次にピンチすると、黄色の輪郭が下の写真を覆うことができ、2 つの赤い輪郭が上の写真を覆うことができますが、下の輪郭を覆うことができないことに気づきます。

これは、インライン要素とブロックレベル要素のアウトラインカバレッジの違いです。

ブロックレベル要素のアウトラインは上と下の要素のコンテンツをカバーできますが、インライン要素のコンテンツは上の要素のみをカバーできます。

これを見て疲れたら、コーヒーを淹れて休憩してください。以下が重要なポイントです。

アウトラインのレベルの問題 (またはカスケードの問題) について議論しましょう

コードは次のとおりです:

 1 <!DOCTYPE html> 2 <html> 3     <head> 4         <meta charset="utf-8" /> 5         <title>块级元素与内联元素outline作用的不同</title> 6         <style> 7             img{ 8                 width: 100px; 9                 height: 100px;10             }11             div.pic1{12                 outline: 60px solid rgba(255,255,0,0.5);13             }14             img#picture3{15                 outline: 55px solid red;16             }17             18         </style>19     </head>20     <body>21         <div class="pic1">22             <img id="picture1"  src="zhege4(1).jpg" alt="picture" />23         </div>24         <div>25             <img id="picture2"  src="zhege8(1).jpg" alt="picture" />26         </div>27         <div class="pic3">28             <img id="picture3"  src="zhege4(1).jpg" alt="picture" />29         </div>30         <div>31             <img id="picture4"  src="zhege8(1).jpg" alt="picture" />32         </div>33     </body>34 </html>

ログイン後にコピー

その結果、中央のアウトラインが上下のコンテンツ、背景、境界線の部分をカバーします。アウトラインに a を指定すると、その値が十分に大きい場合は、それ自体を除く画面全体を覆うことができます。写真のように、緑が伸び続けると画面を覆ってしまうことがあります。

でも、上下のdivにアウトラインを追加すると

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Examples</title><style type="text/css">    div{        height:100px;        padding:10px;        margin:20px;        border:10px solid #ff00ff;    }    div:nth-child(1){        background:yellow;    }    div:nth-child(2){        background:gray;        outline:100px solid rgba(0,255,0,1);    }    div:nth-child(3){        background:green;    }</style></head><body>    <div></div>    <div></div>    <div></div></body></html>

ログイン後にコピー

結果はこうなります

後者のdivのアウトラインが前のdivのアウトラインを覆います

こちらですアウトラインがどのようなものかを考えるのは難しくありません。アウトラインは、コンテンツ (写真) の上にあるフォトフレームのようなものです。ページの後半にある要素のアウトラインは、前の要素のアウトラインをカバーします。

または、次のように理解することもできます。実際、他のスタイルが同じ特異性を持っている場合、ページは Render Tree (レンダリングツリー、またはプレゼンテーションツリー) を描画し、アウトライン (アウトライン) を描画の順序で描画します。、後のものは前のものを上書きします、同じことです。

浮いていたらどうする？

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Examples</title><style type="text/css">    div{        height:100px;        padding:10px;        margin:20px;        border:10px solid #ff00ff;    }    div:nth-child(1){        background:yellow;        outline:10px solid rgba(255,0,0,1);    }    div:nth-child(2){        background:gray;        outline:100px solid rgba(0,255,0,1);    }    div:nth-child(3){        background:green;        outline:10px solid rgba(255,0,0,1);    }</style></head><body>    <div></div>    <div></div>    <div></div></body></html>

ログイン後にコピー

上の写真の 2 番目の div が浮いているのですが、驚くべきことに、最初の div の輪郭が実際に出ています。最後のディビジョンと同じ状況です。ここでテキストを追加しようとしましたが、その結果、テキストがアウトラインの上に表示されてしまいます。

つまり、アウトラインは通常の背景と境界線の上にあり、通常のアウトラインとコンテンツの下にあります。

配置されている場合はどうなりますか?

りー

相対位置決めは相対位置決めの後に出てきますが、絶対位置決めも固定位置決めも同じです。ここでは z-index が設定されていない場合を示します。z-index を設定すると、div の重なり順を変更できます。これには、outline の重なり順も含まれます。

概要: アウトラインの階層順序は次のとおりです

アウトラインは、異なる書式設定コンテキストで異なる方法で表示されます。ブロックレベルの要素では、両側のコンテンツをカバーできます。インライン要素は上記のコンテンツを上書きできます。
通常、アウトラインは前を覆う後ろの順序で正常に表示されます（同じ状況では、ドキュメントフローにフロートが存在しないか、すべてフローティングになっているようなもので、z-indexの位置が異なります）はカウントされません)
ページにフローティング要素がある場合、最初にフローティング要素のアウトラインが表示され、次に通常のドキュメントフローのアウトラインが表示されます (フローティング要素のアウトラインはフローティング要素のアウトラインによって上書きされます)要素)
ページに位置決め要素 (相対、絶対、静的を除く固定) がある場合、その要素が表示されます。フローティング要素の後に、通常のドキュメントフローが表示され、その後、位置決め要素が表示されます (z-index が設定されていない場合)もちろん、配置された要素は z-index 属性を使用して要素を前後に移動できますが、ここではデフォルトのブラウザでアウトラインがどのように表示されるかを説明します。 z-index が設定されていない場合。
実際、ほとんどのアウトラインは境界線のようには使用されません。アウトラインの機能は、ブラウザーではデフォルトで単なる小さな点線であり、通常は削除する必要があります。たとえば、outline:none;

これですべてです。