브라우저 기본 스타일의 소개 및 최상의 처리 방법

최근에 웹 페이지 형식을 조정하여 웹 페이지 하단에 항상 약 10 픽셀의 공간이 있음을 알았습니다.

마진-보트 턴이있는 것으로 밝혀졌다 : 1em;

이 사용자 에이전트 스타일 시트가 길을 잃은 기본 스타일 중 일부라는 것을 알았습니다. 이 기본 스타일에 불만족하는 가장 쉬운 솔루션은 사용자 에이전트 스타일 시트 우선 순위가 매우 낮으며 여기에서 우리의 스타일에 영향을 미치지 않기 때문입니다. 마진 바닥은 0px로 설정됩니다.

다른 브라우저는 동일한 요소의 기본 스타일과 일치하지 않으므로 CSS의 시작 부분에서 작성해야합니다* {패딩 : 0};

그러나 지금은 이것들만이 아닙니다. 기본적으로 크기, 글꼴 선택 및 계약의 문자 스타일과 같은 특정 요소에서 서로 다른 커널의 두 브라우저의 성능에 차이가 있습니다. CSS 버그가 없더라도 매우 아름다운 CSS 스타일 테이블은 하나의 브라우저에서 잘 수행됩니다.

따라서 CSS 스타일 규칙을 생성하면 브라우저의 기본 스타일, 즉 브라우저의 기본 스타일을 다시 디자인해야합니다. * {padding : 0} 사용과 다릅니다.

예를 들어 다음 단락 :

인터넷 익스플로러 에서이 코드에 사용 된 글꼴은 Times New Roman이며 시스템 기본 글꼴은 Firefox 및 Opera에서 사용됩니다. 따라서 CSS에서 <H1>에 대한 통일 스타일을 설정해야합니다.

그러나, 우리가 -베스트 스타일을 사용하면* {padding : 0}* 단순히 글로벌 스타일을 설정하면 양식 요소, 입력 요소, Textarea와 같은 매우 명백한 문제가 나타납니다. 등. 따라서 우리는 단순히 사용*을 포기해야하지만 Body, Div, DL, DT, DD, ul, Li, H2, H3, H4, H5, H5, H5, H6와 같이 존재하는 첫 번째 요소를 재생해야합니다. , 사전 등

동시에 요소의 기본 스타일은 페이지의 모양을 파괴 할 수 있습니다. 예를 들어, <b> 요소는 텍스트를 두껍게합니다. <blockquote>는 큰 섹션에서 들여 쓰기, <em> 텍스트 등을 기울입니다. 동시에, 때때로, 우리는 이러한 요소의 모양이 부모 요소로서 필요하며, 상속을 직접 사용하여 상속 요소에서 상속 할 수 있습니다.

어떤 요소가 다시 설정되어야합니까? 야후! Yahoo의 제안에 따르면이 규칙을 Reset.css라는 파일에 넣어야합니다 (이 방법을 권장).

 html {컬러 : #000; #fff;} body, div, dl, dd, dd, ul, h2, h3, h5, h6, premet, fieldset, 입력, textarea, p, blockquote, th , td {마진 : 0; 패딩 : 0;} 테이블 {border-color : 컬러 스페이스 : 0;} 주소, 캡션, 캡션 인용, 코드, EM, TH , var {font-style : font-weight;} ol, ul {list 스타일 : none;} 캡션, {text-alft : 왼쪽;} h1, h1, h2, h4, h5, h6 { 글꼴 크기 : 100%; FONT-WEIGHT : NORMAL;} Q : Q : {content : '';} ABBR, ACRONMM {BORDUCE : 0;}

당신이해야 할 일은이 규칙을 재설정에 저장하고 페이지에 사용하는 것입니다. 이 요소에 새로운 스타일을 추가 해야하는 경우 다른 요소의 설정과 다르지 않습니다.

위의 내용은이 기사의 내용이 모든 사람의 학습이나 작업에 도움이되기를 바랍니다.