블록 수준 요소란 무엇인가요?
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>
다음 섹션