[CSS] Box Type
Box
display: box type을 결정짓는 css속성
① display: block;
- 쉽게 생각하면 다른 요소들을 옆에 못오도록 막는다고(영역) 생각!
<div class="content_parent">
<div class="content1">
content1
</div>
<div class="content2">
content2
</div>
</div>
* {
box-sizing: border-box;
margin: 0;
}
.content_parent {
background-color:bisque;
}
.content1, .content2 {
height: 50px;
line-height: 50px;
color: #fff;
text-indent: 20px;
}
.content1 {
width: 500px;
background-color: blue;
}
.content2 {
width: 100px;
background-color: red;
}
- 따로 width의 값을 선언하지 않은 경우, width는 부모의content-box의 100% 값이 된다.
- 따로 width의 값을 선언한 경우, 남은 공간은 margin으로 자동으로 채워진다.
- 따로 부모의 height를 선언하지 않을 경우,
자식 요소의 height의 합 = 부모의 height
👩💻 참고) margin: 0 auto; : block일 경우 가운데정렬을 할 때 사용
② display: inline;
- 쉽게 생각하면 옆에 요소들이 계속 오는 흐름(선) 이라고 생각!
- width, height, padding-top, padding-bottom, border-top, border-bottom, margin-top, margin-bottom이 ❌사용불가❌
- 대표적인 inline요소로는 <span>이 있다.
③ display: inline-block;
- 쉽게 생각하면 block + inline
- 하지만 inline에서 쓰지못했던 width, height, margin, padding속성의 상하 간격 지정이 가능해진다.
- 대표적인 inline-block요소로는 <button>, <input>, <select>태그 등이 있다.
④ display: flex;
Author And Source
이 문제에 관하여([CSS] Box Type), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hyesom/CSS-Box-Type저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)