TIL|CSS Layout征服display!

5488 ワード
TIL テキストリンク

display

displayプロパティを使用してhtml要素のタイプを設定できます.
htmlのラベルには様々なタイプがあります.

block, inline


例えばpラベルとspanラベルです.
<body>
    <p>안녕하세요 p태그입니다.</p>
    <span>안녕하세요 span태그입니다.</span>
</body>
pタグとspanタグを使用して、それぞれテキストを作成します.
cssは私にbackground-color:red;をくれました.
結果は.

このように出てきたのです
pタグの幅は、cssにwidthの値がない限り、現在のWebブラウザのサイズと自動的に一致します.
これに対してspanラベルはwidthの値を与えていませんが、テキストの長さは自動的に広くなります!
これらのタグには、各プロパティがあります.
例えば、pタグはdisplay:block;属性を有し、spanタグはdefault値としてdisplay:inline属性を有する.
htmlでできるだけ多くの設計要素を考慮する必要がある場合は、inlineとblock値を考慮します.
htmlは情報を正確に伝えるのに最適です.
だからhtmlの中で意味tagの可用性を考慮して、cssの中で設計の方面を考慮します!
cssではinlineとblockがそれぞれデフォルト値であり、それらの属性を変更するための属性はdisplayである.
displayを使用してpとspanのプロパティを反転しましょう.
p, span{
    background-color:red;
}/* 기존 p와 span에 배경색 추가 */

p{
    display:inline;
} /* p태그를 inline으로 변경 */

span{
    display:block;
} /* span태그를 block으로 변경 */
このように、displayの属性はblockからinlineに変更され、inlineに変更されます.

変更するように、spanにはblockプロパティ、pにはinlineプロパティがあります.
ジルコニア
インライン属性を持つ要素は水平と垂直の幅を指定できません!
横幅と縦幅を指定する必要がある場合はblockに変更できます!

inline-block


inline-block要素は
Inlineのフローティング幅+blockの幅を調整できます
私はあなたがそれをこのような特性を持っていると思ってほしい.
代表的なマークはinputです.

none


仕事に必要でない要素や見たくない要素がある場合は、noneを使用できます.noneには要素のボックスタイプがないため、タグは存在する可能性がありますが、要素は消えません.display:none;を使用してpラベルを非表示にすると、どのような変化が起こるかを見てみましょう.
<body>
    <p>나는 p태그 내가 한번 사라져볼께!</p>
    <span>뿅!</span> 
   
</body>
まずpとspan要素を作成した.background-colorが簡単に追加されました.

display:none;あげないので、消えたいpが見えてきました.
私はcssでpが消えるのを助けます.
p{
    display:none;
}

pが消えた.テキストが消えただけでなく、背景も残さずに消えた.
それと同時に、元のpタグが占めていた空間は消えてしまった.
spanラベルは最初の行に取って代わりました.
このように、display:none;はテキストが消えるだけではありません.
元の作成されていないタグのように、スペース自体が消えます!
htmlには存在しますが、ブラウザでは存在を特定できません.
このようにdisplay:block;cssを作成するときに、まだ作成されていないが長すぎて他の要素を特定しにくい場合は、これらの要素を含める必要があります.
これらのコンテンツを表示したくない場合は、これらの注意事項を認識して使用します.これらのコンテンツを再表示する必要がある場合は、display:none;を削除します.diplay:block;display:inline;などに変更できます.
2つの数を加算
libprotobuf ERROR google/protobuf/text_format.cc:245