CSS 웹 페이지 레이아웃에 대한 기본 지식(요약)

이 장에서는 CSS 웹 페이지 레이아웃에 대한 기본 지식(요약)을 제공하므로 CSS 웹 페이지 레이아웃에 대한 몇 가지 지식 포인트를 이해할 수 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1 상자 모델의 첫 번째~다섯 번째 레이어:

border, padding+content, background-image, background-color, margin

#🎜 🎜 #2. 플로트를 지웁니다. 부동의 영향을 받은 레이블에 대해 다음 작업을 수행합니다.

1. 지우기: 모두;

2. 지우기: 오른쪽; 지우기: 왼쪽;

3. 너비 설정: 100%(또는 고정 너비) + 오버플로: 숨김

3. 두 가지 클리어 플로팅 메서드의 사용 시나리오:

1. 하위 요소 float를 설정하고 상위 요소를 float로 설정하지 않은 경우, 상위 요소의 높이가 자동으로 확장되지 않고, 상위 요소에서 하위 요소가 넘칠 경우 width: 100%( 또는 고정 너비 값) + 동시에 오버플로: 부동 소수점을 지우는 숨겨진 방법 이 방법은 영향을 받는 인접 블록 수준 요소에 대한 부동 효과 제거를 설정할 필요 없이 인접 블록 수준의 부동 효과를 동시에 제거할 수 있습니다. 떠 있는.​

2. 인접한 블록 수준 요소가 플로팅의 영향을 받는 경우 영향을 받는 블록 수준에 대해 Clear:both 또는clear:left,clear:right를 설정하는 것이 더 적절합니다.

참고: 너비를 100%로 설정하면 상위 컨테이너의 너비가 상속됩니다. 용기 전체를 ​​좌우로 채워 부유물을 스스로 비울 수 있는 조건을 만들어보세요. 오버플로 숨기기를 추가하면 패키지의 부동 부분을 제거할 수 있습니다.

4. 절대 위치 지정 기능:

1) 블록 비트 기반을 포함하는 확립된 위치 지정

2) 표준 문서 흐름과 완전히 분리됩니다.

3) 그러면 오프셋 속성과 Z-색인 속성이 있습니다:

오프셋이 설정되지 않은 경우(왼쪽, 위쪽):

배치된 조상 요소 여부에 관계없이 요소의 초기 위치부터 표준 문서 흐름에서 벗어나도록 합니다#🎜🎜 ## 🎜🎜#오프셋 설정 시: 오프셋 참조에 대한 벤치마크:
위치가 지정된 상위 요소가 없습니다. 을 오프셋 참조로 사용하세요. 위치가 지정된 조상 요소가 있습니다. 위치가 가장 가까운 조상 요소가 오프셋 참조로 사용됩니다.

참고: 요소가 절대 위치 지정으로 설정되고 너비가 설정되지 않은 경우 요소의 너비는 내용에 따라 조정됩니다.

연습 질문: 절대 위치 지정이 있는 요소 b가 상위 요소 a에 위치하는 것으로 알려져 있습니다. a 요소가 정적 요소인 경우 b 요소는 (html)을 기준으로 오프셋됩니다.

답변: a는 정적 위치이므로 html 요소인 루트 요소를 기준으로 오프셋을 적용해야 합니다(정적 위치 지정은 해당 요소의 기본 위치 지정 속성인 position:static입니다. 절대, 상대만 가능). , 또는 고정이 설정됩니다.

5. 버튼 텍스트 숨기기에 대한 팁:

텍스트 들여쓰기 설정: -999px; #🎜🎜 #

원칙: 먼저 text-indent:-999px; 문을 사용하여 설정된 요소를 "압착"한 다음 넘쳐나는 요소를 숨깁니다. 즉, 압착된 요소를 숨깁니다. #🎜 🎜## 🎜🎜#6. 미디어 쿼리:

은 CSS의 @media 및 @import 규칙에 사용할 수 있으며, HTML 및 XML에서도 사용할 수 있습니다. 🎜# 1) @ 미디어 화면 및 (너비: 800px){...}

2) @import url(example.css) 화면 및 (너비: 800px);

#🎜 🎜# 3)< ;link media="화면 및 (너비: 800px)" rel="stylesheet" href="example.css"/>0

위 내용은 CSS 웹 페이지 레이아웃에 대한 기본 지식(요약)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!