CSS

컨테이닝 블록

dogdogdodo 2022. 3. 22. 21:57
반응형

컨테이닝 블록의 모든 것

컨테이닝 블록: 감싸고 있는 태그를 찾는 것.

 

모든 태그들은 static포지션을 사용한다.

정적인 포지션, 위에서 아래로 왼쪽에서 오른쪽인 구조.

Relative: 상대적인 (현재 내 위치에서 이동)

Absolute : 절대적인(컨테이닝 블록은 포지션 속성값이 static이 아니고 

Fixed,Absolute,relative이어야 된다. )

 

fixed포지션인 경우 컨테이닝 블록은 뷰포트나 (화면), 페이지 영역이다.

 

 CSS 우선순위

 

  • 기본적으로 뒤에 나오는 css가 우선순위가 높습니다. 
  • !important > inline style attribute > id > class, 다른 attribute, 수도클래스(:first-child같은 것) > tag element, 수도엘레먼트(::before같은 것) 순으로 우선순위가 높습니다.
  • 우선순위가 같다면 개수가 많은 css가 우선순위가 높습니다.

 

블록 서식 맥락 (block format context)

 

  • 문서의 루트 요소(<html>).
  • 플로팅 요소(float이 none이 아님).
  • 절대 위치를 지정한 요소(position이 absolute 또는 fixed).
  • 인라인 블록(display가 inline-block).
  • overflow가 visible이 아닌 블록 요소.

 

Letter-spacing: 자간 (글자간의 간격)

 

마진상쇄(collapsing)

=>상하 마진만 겹친다.

 

  • 인접 형제요소(마진이 상하로 겹치면 , 사이즈가 큰 아이만 남고 사이즈가 작으면 사라짐)
  • 부모 - 맏이/막내요소(첫번째 자식이자 마지막 자식이기도 하면)
  • 빈 블록

 

해결방법은 

블록포맷콘텍스트로 만들기 or 플로트 사용하기! Or 포지션 엡솔루트 or

Witdth 100%

 

Display: inline-block; width:100%; =>마진 상쇄 해결 할 수 있는 가장 쉬운 방법

728x90
반응형