CSS の表示属性: block、inline、inline-block_html/css_WEB-ITnose の違い-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS の表示属性: block、inline、inline-block_html/css_WEB-ITnose の違い

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:48 AM

最近、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>

ログイン後にコピー

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。