html, css 특이사항 정리

1. 블록-인라인

  - 인라인은 블록을 포함할 수 없다.

  - p 는 블록이지만 인라인만 포함가능

 

2.박스 모델 (margin 과 padding) 특이사항

  - margin이 겹칠경우 더 큰 것에 적용된다.

  - widht와 height는 padding과 border를 제외한 길이이다.

 

3. 부모 요소의 상속을 받는 스타일은 초기화 항목에 넣지 마라

  - ex) font-size : 12px

 

4. IE 크로스 브라우징

  - 주석

<!--[if IE 7]>
<link href="ie7.css" type="text/css" rel="stylesheet"/>
<![endif]-->

  - IE핵

    ex) div{ *color : blue}

 

5. 선택자

  - 기본 선택자(관계)

  - 가상 클래스 선택자(상태)

    · 가상 선택자 선언 순서

      :link -> :visited -> :hover -> :active

  - 선택자 우선순위

    · !important -> em style -> #(id) -> .(class) -> :(상태)

 6. 요소 속성

  1) float

    - 요소가 띄워지게(floating) 만드는 속성이다.

    - 블록 요소는 오로지 float 되지 않은 요소들만 인식하여 포함한다.

      --> 부모가 자식을 인식못할 수 있다.

    - 인라인 요소, 텍스트, float된 요소만 float요소를 인식 가능하다. 

    - clear:both로 float:left, float:right를 초기화 할 수 있다.

  1-1) 문제 해결 방법

    - 부모요소에 overflow : hidden을 추가한다.

    - 부모요소에 zoom:1을 넣어준다.

    - 빈 div를 넣어준다.

  2) overflow : hidden

    - visible때는 인식하지 못했던, float처리된 요소와 자식요소의 margin값을 인식할 수 있다.