HTML+CSS インライン要素を簡単に始める

HTML では、<span>、<a>、<label>、<strong>、<em> が代表的なインライン要素です。もちろん、ブロック要素はコードを通じてインライン要素として設定することもできます

display: inline

インライン要素の特徴: すべての要素は他の要素と同じ行にあります

2。 . 要素高さ、幅、上下の余白は設定できません

3. 要素の幅は、それに含まれるテキストまたは画像の幅であり、変更できません。

以下のコードを書いてみましょう。インライン要素は幅と高さを設定できません。上のコードを見てください。事実上、ブロック要素に変換すると明らかな効果が得られます

ブロック要素をインライン要素に変換する例を以下に書いてみましょう

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
	a{
		width:100px;
		height:50px;
		background-color:green;  /*设置背景色*/
		color:#fff;  /*设置字体颜色*/
	}
</style>
</head>
<body>
   <a href="#">PHP中文网</a>
</body>
</html>

上記のコードでは、インライン要素に変換した後にブロック要素を設定することはできません。幅も高くて

学び続ける

新しいファイル

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ display:inline; /*转换成内联元素*/ /*转换成内联元素之后，我们设置宽高，背景色，文字颜色*/ width:300px; height:200px; background-color:green; color:red; } </style> </head> <body> <div>欢迎大家来到php中文网</div> </body> </html>

提出するリセットコード

自動運転