ホームページ > 記事 > ウェブフロントエンド > CSS の表示属性: block、inline、inline-block_html/css_WEB-ITnose の違い
CSS の表示属性: block、inline、inline-block_html/css_WEB-ITnose の違い
- WBOYオリジナル
- 2016-06-24 11:48:581134ブラウズ
最近、HTML を書いているときに問題が発生しました。スパンの幅と高さを設定したいのですが、IE9 と Chrome では常に機能しません。コードとレンダリングは次のとおりです。
rrree
css で設定した幅と高さは影響せず、span の実際の表示幅と高さはその内容によって決定されることがわかります。なぜそうなるのでしょうか?これには、HTML のブロック レベル要素 (ブロック) と行レベル要素 (インライン) の違いが関係します。たとえば、div は一般的なブロック レベル要素であり、span は一般的な行レベル要素です。 CSS の表示属性を使用して、要素がブロック レベル要素であるか行レベル要素であるかを設定できます。 display:block は要素をブロック レベルに設定し、display:inline は要素を行レベルに設定します。
display:block の機能:
1. ブロック要素は独自の行を占有し、複数のブロック要素はそれぞれ新しい行を持ちます。デフォルトでは、ブロック要素の幅がその親要素の幅に自動的に収まります。
2. block要素は幅と高さの属性を設定できます。ブロックレベル要素の幅が設定されている場合でも、依然として排他的な行を占有します。
3. block要素はmarginとpadding属性を設定できます。
display:inline の機能:
1. 複数の隣接するインライン要素が同じ行に配置され、1 つの行が配置できなくなるまで、新しい行が変更されます。幅は要素の内容によって異なります。
2. インライン要素に設定された幅と高さの属性は無効です。
3. インライン要素の margin および padding 属性、水平方向の padding-left、padding-right、margin-left、および margin-right はすべてマージン効果を生成しますが、垂直方向の padding-top、padding-bottom、margin-top、 margin-bottom はマージン効果を生成しません。
span は行レベルの要素であるため、span が block に設定されている場合、その幅と高さを設定することはできません。同じ行に複数のスパンを固定幅で表示するにはどうすればよいですか?これには、display:inline-block の使用が必要です。コードとレンダリングは次のとおりです。
<head> <style> span{ background-color:#43be60; width:100px; height:50px; margin-top:20px; margin-left:20px; } </style></head><body> <div style="background-color:#ededed;width:400px;height:400px;"> <span>1</span> <span>10</span> <span>100</span> <span>1000</span> </div></body>