HTMLにおける表示属性の属性値とは何ですか?どのような意味です？また、HTML の表示属性はどのようにして水平方向と垂直方向の中央揃えを実現するのでしょうか?今日の記事では、HTML の表示属性の値と、HTML の表示属性の値の水平方向と垂直方向の中央揃えを実現する方法を紹介します。2 つの方法を紹介します。
display ここでは、最も一般的に使用される 4 つの属性値、inline、block、inlin-block、none について説明します。
まず、inline (n inline 要素) について説明します。
この属性値はデフォルト値です。この要素は、要素の前後に改行のないインライン要素として表示されます。通常、この属性値は設定されません。私の個人的な理解では、通常の inline 要素と何ら変わりはなく、より一般的に使用されるのは inline-block です。
次に、block (ブロックレベル要素) の属性値があります。
この属性値は、改行の観点から、ブロックレベル要素が排他的な行を占めるように設定されています。 p タグと同じ効果がありますが、この属性値は設定されます。最後に、ブロックレベル要素として、幅、高さ、他のブロックレベル要素との間の距離のマージンプロパティ設定、およびスペースのパディング設定があります。 , ただし、行の高さを設定することはできません。
inline-block (インライン ブロック) の属性値もあります。
この属性値は比較的強力です。私が最初に学習を始めたとき、基本的にこの属性を長く設定する必要があるとわかったときに設定しました。改行ではないのでブロックレベルの要素として使える一方で、初心者なので設定するのが面倒です。したがって、この属性値を使用して行の高さを設定すると、テキストを中央に揃えることができ、便利で使いやすくなります。
これらの属性は、block と inline-block の 2 つの属性値が主に同じ行内の複数の要素の実装として使用されます。 block は要素間の改行として使用されます。誰でも試してみることができます。
最後の属性値 none の場合:
個人的には、マウスがフローティングしているときに要素を非表示にする方が便利だと思います。要素の表示と非表示の効果を実現するには、display 属性値を変更します。
HTML で一般的に使用される表示の値は何ですか?
通常のプロジェクト開発で使いやすい HTML での表示の値は主に次のとおりです。
| や | と同様に、表のセルとして表示されます)。 要素を水平方向と垂直方向に中央揃えにするには、display:table-cell を使用する 2 つの方法があります: <div class="wrap"> <div class="box"> <div class="con">梦幻雪冰</div> </div> </div> ログイン後にコピー スタイル: .wrap {
/*让元素以表格形式渲染*/
display: table;
height: 400px;
width: 400px;
background: #fcf;
}
.box {
/*让元素以表格的单元素格形式渲染*/
display: table-cell;
/*使用元素的垂直对齐*/
vertical-align: middle;
}
.con {
width: 200px;
height: 200px;
margin: 0 auto;
background: #999;
}ログイン後にコピー 利点: このメソッドには、前の 2 つのメソッドのような高さの制限がないため、要素の内容に応じて高さを動的に変更できるため、スペースの制限がなく、要素の内容は変化しません。十分なスペースがないため、スクロールバーが途切れたり、醜くなったりします。 短所: 欠点は何ですか?この方法は最新のブラウザにのみ適しており、IE6 ～ 7 では正しく動作しません。 2. 要素を水平方向と垂直方向に中央に配置するには、display: table-cell を使用します構造: <div class="wrap"> <div class="box"> 梦幻雪冰 </div> </div> ログイン後にコピー スタイル: .wrap {
display: table-cell;
width: 400px;
height: 400px;
background: #fcf;
vertical-align: middle;
}
.box {
width: 200px;
height: 200px;
margin: 0 auto;
background: #999;
}ログイン後にコピー 利点: この方法の利点は 3 番目の方法と同じです。身長差制限はありません。 欠点: IE6 と IE7 はサポートされていません [関連推奨事項] HTML5 の Web とは何ですか? Webストレージの要素は何ですか?HTML IMG タグの属性は何ですか? IMGタグの使い方を学びましょう 以上がHTMLにおける表示属性の属性値とは何ですか？表示属性はどのようにして水平方向と垂直方向の中央揃えを実現しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。 ソース：php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
VSCode id 属性をカスタマイズするにはどうすればよいですか?
最近 Atom から VSCode に移行しました。エディタの大部分を自分の好みに合わせてカスタマイズすることができましたが、気に入っている Atom の機能がまだ欠けています。そ...
から 2024-03-31 14:13:45
0
1
373
関連トピック
詳細>
|
|---|
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
