블록 수준 요소에는 CSS 표시 가 있습니다. 속성이 'block', 'list-item' 또는 'table'로 설정되고 이러한 요소는 위아래로 줄 바꿈을 강제합니다. 블록 수준 상자는 위치 지정 체계의 일부이자 자식 상자를 포함하는 각 블록 수준 요소에 의해 생성됩니다.
블록 컨테이너 상자는 블록 수준 상자를 포함하고 블록 서식 컨텍스트를 따르거나 인라인 수준 상자를 포함하고 인라인 서식 컨텍스트를 따릅니다. 블록 상자는 블록 수준 상자도 블록 컨테이너인 경우에 사용되는 용어입니다.
익명 블록 상자는 개발자가 제어할 수 없는 상자입니다. 인라인 상자에 블록 상자가 포함되어 있고 블록 상자 주변의 인라인 내용이 익명의 블록 상자로 묶인 경우
예시
블록 수준 요소 및 블록 상자에 대한 예를 살펴보겠습니다. −
<!DOCTYPE html>
<html>
<head>
<title>CSS Block-level Elements and Block Boxes</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
box-sizing: border-box;
/*margin:5px;*/
}
input[type="button"] {
border-radius: 10px;
}
.child{
height: 40px;
width: 100%;
color: white;
border: 4px solid black;
}
.child:nth-of-type(1){
background-color: #FF8A00;
}
.child:nth-of-type(2){
background-color: #F44336;
}
.child:nth-of-type(3){
background-color: #C303C3;
}
.child:nth-of-type(4){
background-color: #4CAF50;
}
.child:nth-of-type(5){
background-color: #03A9F4;
}
.child:nth-of-type(6){
background-color: #FEDC11;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Block-level Elements and Block Boxes</legend>
<div id="container">Color Orange
<div class="child"></div>Color Red
<div class="child"></div>Color Violet
<div class="child"></div>
</div><br>
</body>
</html> 출력
이것은 다음과 같은 출력을 생성합니다 -
