// ==============================================================
// 박스모델
// ==============================================================
------------------------ Margin
________________________ Border
------------------------ Padding
Content
margin, padding 표기법
- margin:10px - 상하좌우의 margin값이 10px
- margin:10px 20px - 상하 10px, 좌우 20px,
- margin:10px 20px 30px - 상 10px, 좌우 20px, 하 30px
- margin:10px 20px 30px 40px - 상좌하우의 순으로 값이 지정됨
마진겹침
- 형제레벨
- 마진겹침규칙
- 블럭레벨(수직) ex) <p>
- 큰쪽을 기준으로 겹쳐짐
- 부모자식
- 겹침이 일어나려면 부모 element는
padding 값이 없어서 하고, border값이 없어야 하고, 그(부모) element text 값이 없어야 한다
- 자기 자신과 겹침
ex)
<html>
<body style="border:1px solid blue">
<div style="margin-top:20px;margin-bottom:20px;"></div>
<div style="margin-top:20px">마진겹침</div>
</body>
</html>
* 종류
- 블록 레벨 엘리먼트
- 한줄에 하나씩 표시
- DIV, H1-H6, P, FORM, UL, LI, ADDRESS ,FIELDSET, TABLE, HR 등
- 인라인 엘리먼트
- 한줄에 여러개의 엘리먼트 표시
- 인라인 엘리먼트만 포함 할 수 있고, 블럭레벨 엘리먼트의 자식이어야 한다.
- a, img, em, strong 등
- display : block, inline, none
- 포지션(position)
- relative 상대위치
- 원래위치를 기준으로 offset 이동
- 부모의 크기에는 영향을 줌, 위치에는 영향을 주지 않음
- absolute
- 부모 element 와 관계가 없다. 자식 element 상호 관계를 미치지 않음
서로에 영향을 주지 않음
- 위치이동은 html 을 기준으로 이동
- fixed
- absolut와 동일, 차이:스크롤의 영향을 받지 않는다.
* float
clear:left, right, both
both : 둘중 긴것의 마지막부터