웹 페이지를 제작할때 대부분의 메뉴나 검색창 등등 박스형태로 되어있다. 예를 들어 네이버의 검색창의 모서리가 둥근데 그거 또한 border스타일에서 border-radius를 입혀 둥글게 만든다.
padding과 margin은 비슷하면서 다른 부분들이 있는데 margin은 바깥쪽의 여백을 두는 것이고 padding은 박스 안쪽에 여백을 두는 것이다.
박스1은 마진을 준 상태이고 박스2는 패딩을 준 상태이다
큰 상자 안에 박스1에 여백이 있는 부분이 마진이고
큰 상자 안에 박스2에 바깥쪽에 여백을 주는게 패딩이다
display 특징들 중에 비슷하지만 각각 다른 세가지가 있다.
display: none 과 visibility 그리고 opacity가 있는데
display: none 과 visibility 둘의 공통점은 진짜 박스가 사라지는것이 공통점이지만
 |  |
|---|
display:none은 원래 있던 박스의 위치가 사라지는 반면
 |  |
|---|
visibility:hidden은 원래 있던 박스 위치에 공백이 생기며 다른 박스들의 위치가 그대로 위치해있다.
opacity는 애초에 투명도를 조절하는 기능인데 0이 아에 안보이고 1이 기본 투명도이다.
 |  |
|---|
사진상에는 visibility:hidden과 다를 것 없어 보이지만 마우스에 원래 위치에 있던 2번 박스에 갖다 대었을 때 마우스의 모양이 바뀌는 것을 알 수 있다.
다음은 오버플로우 예제인데 큰 박스 안에 여러개의 박스를 집어넣을때 그 여러개의 박스의 높이가
큰박스보다 큰 경우 바깥으로 넘어가게 된다.
이것을 내부 안쪽으로 넘어가지 않게 하는 것이 overflow 속성이다.
overflow: scroll은 말 그대로 박스 옆에 스크롤 표시가 나타난다 하지만 이 같은 경우는
박스의 크기가 큰 박스보다 작은 경우에도 나타난다
이 같은 경우에는 overflow: auto속성을 사용하면 작은 경우에는 스크롤이 나타나지 않고
큰 경우에만 스크롤이 나타나는 것을 볼 수 있다.
