HTML+CSS에 쉽게 진입할 수 있는 블록 수준 요소

블록 수준 요소란 무엇인가요?

HTML에서는 <div>, <p>, <h1>, <form>, <ul> 및 <li>

display:block을 설정하는 것은 요소를 블록 수준 요소로 표시하는 것입니다. 다음 코드는 인라인 요소 a를 블록 요소로 변환하여 a 요소가 블록 요소의 특성을 갖도록 합니다.

a{display:block;}

블록 수준 요소 기능:

1 . 각 블록 수준 요소는 새 줄에서 시작되고 그 이후의 요소도 새 줄에서 시작됩니다. (정말 횡포합니다. 블록 수준 요소가 한 줄을 차지합니다.)

2. 요소의 높이, 너비, 줄 높이, 위쪽 및 아래쪽 여백을 설정할 수 있습니다.

3. 요소의 너비가 설정되지 않은 경우 너비가 설정되지 않은 한 요소의 너비는 상위 컨테이너의 100%입니다(상위 요소의 너비와 동일).

a 태그를 블록 요소로 설정하는 코드를 살펴보겠습니다.

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

지속적인 학습

새로운 파일

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

제출하다 코드 재설정

자동운전