<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
background-color: tomato;
border: 10px dotted red;
width: 500px;
height: 300px;
}
.child {
background-color: powderblue;
width: auto;
height: auto;
padding: 10px 20px;
border: 5px solid blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">HTML & CSS</div>
</div>
</body>
</html>
- child는 parent의 내용이므로 child의 border와 padding을 합한 몯느 크기 요소의 합이 parent의 width나 height를 넘을 수 없음
- 만약 child의 전체 크기가 parent의 width나 height의 값보다 커진다면 child는 parent를 벗어나게 됨
- width와 height 값은 부여되면 고정 사이즈를 갖는 특성이 있으며, 내용이 많아질 경우 자동으로 확장되지 않음
1. 벡분율로 사이즈를 지정허는 경우
- 박스에 대한 width나 height 속성을 백분율로 지정할 경우에도, 비율에 대한 기준이 되는 것은 부모 요소에 대한 width나 height 값임
2. auto 값
- width, height, margin-left, margin-heigh에 대하여 적용할 수 있는 특수한 값으로, 어떤 속성에 적용되느냐에 따라 동작하는 원리가 달라짐
- width : auto; -> 부모 요소의 width 값으로부터 padding 과 border의 크기를 뺀 나머지 값을 자동으로 계산하여 width에 적용
- height : auto; -> 자신이 포함하고 있는 내용 영역에 대한 높이 만큼만 height를 설정
3. 화면을 가득 채우는 박스 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
background-color: orange;
width: 100%;
height: 100%;
}
body {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div>박스</div>
</body>
</html>
