웹 프런트 엔드가 웹 페이지 레이아웃을 안정적으로 만드는 방법

웹 페이지 레이아웃의 안정성과 규범성을 실현하기 위해 우리는 다음과 같은 방면에서 노력할 수 있다.

아이다호 (아이다호 약어)

문서 앞에 있으며 현재 문서에 HTML 또는 XHTML 표준 사양이 사용되고 있는지 브라우저에 설명하는 데 사용됩니다. 우리는 반드시 사용해야 한다.

& lt! DOCTYPE & gt 탭은 브라우저 호환성과 관련이 있습니다. 제거하십시오

둘째, 올바른 곳에 올바른 라벨을 사용한다

물건을 최대한 활용하다. 적당한 곳에서 합리적인 라벨을 사용하면 웹 페이지의 레이아웃과 최적화에 많은 이점이 있다. 예를 들면 로고와 같이 우리는 보통 H/logo-0/라벨로 수록된다. 인라인 요소와 블록 레벨 요소의 차이점을 이해합니다.

한 페이지에만 div 를 사용하지 마십시오. 너무 많으면 너무 많습니다. Table 은 거의 사용하지 않지만 일부 데이터 처리를 할 때는 비교적 유용하다.

셋째, 표준 흐름의 관점에서 padding, maring, width 등의 속성의 안정성을 볼 수 있습니다.

페이지 레이아웃을 알면 상자 자체의 크기, 채우기 및 여백과 같은 상자의 위치와 거리를 제어해야 합니다.

그래서 여기서 우리는 안정성에 따라 이 세 가지의 순서를 볼 것이다.

안정성이 가장 좋은 것은 상자 자체의 높이와 폭이다. 우리는 이것을 우선적으로 고려한다. 따라서 채우기 및 여백 대신 높이 잔차 및 폭 잔차 방법을 사용하는 경우가 많습니다.

이 주석과 아래 텍스트 상자 사이에는 약간의 거리가 있습니다. 이때 우리는 이 논평에 H2 라벨을 붙일 것이다. 라벨의 높이는 바로 댓글 위에서 텍스트 필드의 높이이다.

H2 의 텍스트 내용은 기본적으로 왼쪽 위에 정렬되고 높이는 사용할 수 없으므로 왼쪽입니다. 이것이 바로 고도의 잔여법이다.

둘째, 채우기는 특수한 상자 높이와 너비로 볼 수 있기 때문에 채우기만 고려합니다. 마지막으로 여백으로 하겠습니다. 보증금은 보증금 합병 문제가 있기 때문이다.

넷째, 표준 흐름, 부동 흐름 및 위치 안정성

표준 흐름 내에서 가장 안정적입니다. 즉, 블록 레벨 요소가 위아래로 표시되고, 한 줄이 표시되며, 가장 안정적입니다.

부동과 위치 지정 "비표준", 안정성도 그렇게 안정적이지 않다. 따라서 다음과 같은 원칙을 따라야 합니다.

페이지 레이아웃은 표준 프로세스로 할 수 있으며 부동할 필요가 없습니다. 부동으로 하려면 위치 지정으로 할 필요가 없습니다.

다섯째, 지기가 서로를 안다.

항상 ie6 과 같은 전용 브라우저가 있습니다. 이 기발한 브라우저들은 항상 자신만의 독특한 점이 있는데, 그러면 우리는 어떻게 해야 합니까? 병법이 말했듯이, 지기는 서로를 알고, 백전은 위태롭지 않다. 따라서 이러한 브라우저의 독창성을 자세히 이해하거나 ie6 에서 자주 발생하는 버그와 CSS 에 대한 이해를 파악해야만 다양한 분석에 따라 합리적인 레이아웃을 작성할 수 있습니다.

여섯째, 명확한 내부 및 외부 가장자리가 연루되지 않도록 하십시오.

Html, body, ul, Li, ol, dl, DD, dt, p, h 1, H2, H3, H4, H5, h6, ff 채우기: 0; }

이 문장은 잘 알려져 있으며 브라우저 스타일을 명확히했습니다. 하지만 추가하지 않으면 브라우저마다 다르게 보일 것이다. 그래서 CSS 의 첫 번째 문장은 바로 그것입니다. 또한 불필요한 번거로움을 초래하지 않고 브라우징이 지원하는 대부분의 CSS 속성을 사용해야 합니다.