css 박스 모델

*블록: 한 줄 차지하는 요소

*인라인: 줄을 차지 하지 않는 요소, 콘텐츠만큼만 영역 차지, 여러개 인라인이 한줄에 표시됨

 

*block 태그

<p> ,<h1><h6>, <ul>, <ol>, <div>, <blockquote>, <form>, <hr>, <table>, <fieldset>, <address>

 

*inline 태그

 <img>, <object>, <br>, <sub>, <sup>, <span>, <input>, <textarea>, <label>, <button>, <a> 

 

*실제 콘텐츠 영역, 패딩padding, 박스의 테두리border, 여러 박스 모델 사이의 여백인 마진margin 등의 요소로 구성

 

*padding: 여백, 선의 안

 

*margin: 여백, 선의 밖

-margin:auto →마진을 좌, 우 똑같이 줌(여백있을시 적용), 상하는 적용x(body 높이가 디바이스 보이는 만큼 정해진게 아니고 콘텐츠 높이만큼에 따라 달라지기 때문에 안 정해졌음)

 

*display: 화면 배치 방법 정하기

-none, contents, block, inline, inline-block(내용은 블록이면서 한줄로 배치할때), inherit(상위요소 속성 상속받기), table(블록레벨의 표), table-cell(표에서 하나의 셀로 만들기) 등

 

*width: 넓이

-width가 없는 상태:auto
-100%하고 auto는 다름
-100%: 전체넓이 100%+여백=밀릴수있음.
-auto는 여백을 뺀 나머지로 가득차게함

 

*height: 높이