HTML과 CSS의 핵심적이고 어려운 문제

이 글은 주로 HTML과 CSS의 핵심적이고 어려운 문제를 여러분과 공유하며, 여러분에게 도움이 되기를 바랍니다.

1. 가변 너비와 높이를 사용하여 수직 및 수평으로 중앙에 배치하는 방법은 무엇입니까?

Flex를 사용하여

상위 상자에 설정하면 됩니다: display: justify-content: center; ;
CSS3 변환 사용

상위 상자 설정: 디스플레이:상대
p 설정: 변환: 변환(-50%,-50%); 위치: 절대; 상단: 50%; 왼쪽: 50%; - 셀 방법

상위 상자 설정: display:table-cell; text-align:center;vertical-align:middle;

p 설정: display:inline-block;vertical-align:middle;

위치의 네 가지 공통 속성 값: 상대, 절대, 고정, 정적. 일반적으로 "왼쪽", "위쪽", "오른쪽" 및 "아래쪽" 속성과 함께 사용됩니다.

정적:기본 위치.

일반적인 상황에서는 구체적으로 선언할 필요가 없지만 때로는 상속이 발생할 때 요소가 상속한 속성이 자체적으로 영향을 미치는 것을 보고 싶지 않으므로 Position:static을 사용하여 상속을 취소할 수 있습니다. 즉, 요소 ​​위치를 기본값으로 복원합니다. static으로 설정된 요소는 항상 페이지 흐름에 의해 지정된 위치에 있습니다(정적 요소는 위쪽, 아래쪽, 왼쪽 또는 오른쪽 선언을 무시합니다). 일반적으로 일반적으로 사용되지 않습니다.

relative: 상대 위치 지정. 상대 위치 지정은 요소의 기본 위치를 기준으로 합니다. 오프셋 상단, 오른쪽, 하단 및 왼쪽 값은 다른 요소에 어떤 일이 발생하는지에 관계없이 모두 원래 위치를 기준으로 오프셋됩니다. 상대적으로 이동된 요소는 여전히 원래 위치에서 공간을 차지합니다.
절대: 절대 위치 지정. 절대로 설정된 요소의 상위 컨테이너에 위치 속성이 설정되어 있고 위치 속성 값이 절대 또는 상대인 경우 상위 컨테이너에 따라 오프셋됩니다. 상위 컨테이너가 위치 속성을 설정하지 않은 경우 오프셋은 본문을 기반으로 합니다. 절대 속성이 설정된 요소는 표준 흐름에서 위치를 차지하지 않습니다.
fixed: 위치가 고정되었습니다. 위치가 고정으로 설정된 요소는 브라우저 창을 기준으로 지정된 좌표에 배치될 수 있습니다. 요소는 창이 스크롤되는지 여부에 관계없이 해당 위치에 유지됩니다. 항상 신체를 기반으로합니다. 고정 속성이 설정된 요소는 표준 흐름에서 위치를 차지하지 않습니다.
3. 부동 및 부동 부동 지우기
3.1 부동 관련 지식

float 속성 값:

left: 요소가 왼쪽으로 부동합니다.

right: 요소가 오른쪽에 떠 있습니다.

없음: 기본값입니다. 요소는 부동되지 않으며 텍스트에 나타나는 위치에 나타납니다.

플로팅의 특징:

플로팅 요소는 일반 문서 흐름과 분리되지만 플로팅 요소는 자신에게 영향을 미칠 뿐만 아니라 주변 요소의 정렬 및 주변 요소에도 영향을 미칩니다.
요소가 인라인 요소이든 블록 수준 요소이든 상관없이 부동 요소로 설정되면 부동 요소는 블록 수준 상자를 생성하고 너비와 높이를 설정할 수 있으므로 부동 요소가 자주 사용됩니다. 가로로 배열된 메뉴를 만들 수 있으며, 크기를 설정하여 가로로 배열할 수 있습니다.

플로팅 요소의 표시는 상황에 따라 다른 규칙을 갖습니다.

플로팅 요소가 플로팅할 때 해당 여백은 포함 블록의 패딩을 초과하지 않습니다. 추신: 요소를 초과하려면 여백 속성을 설정할 수 있습니다.
두 요소가 왼쪽으로 부동하고 하나가 오른쪽으로 부동하는 경우 왼쪽 부동 요소의 marginRight는 오른쪽 부동 요소의 marginLeft에 인접하지 않습니다.

플로팅 요소가 여러 개인 경우 플로팅 요소가 겹치지 않고 순서대로 배열됩니다.

여러 개의 부동 요소가 있는 경우 다음 요소의 높이는 이전 요소를 초과하지 않으며 포함 블록을 초과하지 않습니다.
비부동 요소와 부동 요소가 동시에 있고 비부동 요소가 앞에 있는 경우 부동 요소는 비부동 요소보다 높지 않습니다.
부동 요소는 위쪽에 정렬됩니다. 왼쪽 또는 오른쪽으로 최대한
겹치는 문제

인라인 요소가 플로팅 요소와 겹치면 테두리, 배경 및 내용이 플로팅 요소 위에 표시됩니다.
블록 수준 요소가 플로팅 요소와 겹치면 테두리와 배경이 는 플로팅 요소 아래에 표시되고 내용은 플로팅 요소 위에 표시됩니다.

clear 속성

clear 속성 위: 현재 요소의 왼쪽과 오른쪽에 플로팅 요소가 없는지 확인하세요. Clear는 요소 자체의 레이아웃에만 영향을 미칩니다.
값: 왼쪽, 오른쪽, 둘 다

3.2 상위 요소 높이 축소 문제

왜 부동 소수점 및 상위 요소 높이 축소를 지워야 합니까?

상위 요소 높이 축소 문제를 해결하십시오. 블록 수준 요소가 그렇지 않은 경우 높이를 설정하면 높이는 자식 요소 Spread open에 의해 결정됩니다. 하위 요소에 float를 사용한 후 하위 요소는 표준 문서 흐름에서 벗어나게 됩니다. 즉, 상위 요소에 높이를 확장할 콘텐츠가 없으므로 상위 요소의 높이가 무시됩니다. 이른바 높이 붕괴다.

3.3 부동 소수점 지우기 방법

방법 1: 부모 p의 높이 정의

원리: 부모 p의 고정 높이(높이)를 정의하면 부모 p가 높이를 얻을 수 없는 문제를 해결할 수 있습니다.

장점: 코드가 간결하다.

단점: 높이가 고정되어 있어 내용이 고정된 모듈에 적합하다. (권장하지 않음)

방법 2:

(.clear{clear:both})과 같은 빈 요소를 사용합니다.
원리: 한 쌍의 빈 p 태그를 추가하고 CSS의 clear:both 속성을 사용하여 부동 소수점을 지웁니다. 부모 p는 그것을 높게 얻을 수 있습니다.
장점: 좋은 브라우저 지원
단점: 빈 p 태그가 많습니다. 페이지에 떠 있는 모듈이 많으면 빈 p 태그가 많아 그다지 만족스럽지 않습니다. (권장하지 않음)

방법 3: 부모 p도 부동하게 합니다.
이렇게 하면 초기에 현재 부동 문제를 해결할 수 있습니다. 하지만 이는 또한 부모를 부동 상태로 만들어 새로운 부동 문제를 야기합니다.

방법 4: 디스플레이:테이블을 사용하여 상위 p 정의
원리: p 속성을 테이블에 강제 적용
장점: 수수께끼
단점: 알려지지 않은 새로운 문제가 발생합니다. (권장하지 않음)

방법 5: 상위 요소 설정 오버플로: hide, auto
원리: 이 방법의 핵심은 BFC를 트리거하는 것입니다. IE6에서는 hasLayout(zoom: 1)도 트리거되어야 합니다.
장점: 코드 소개, 구조적 및 의미론적 문제 없음
단점: 오버플로가 필요한 요소를 표시할 수 없습니다(권장하지 않음)

방법 6: 상위 p 정의 의사 클래스 : 이후 및 확대/축소

.clearfix:after{
내용:'.'; 디스플레이:블록; 높이:0; 지우기:둘 다
visible: Hidden;
}
.clearfix {zoom:1;}
원리: IE8 이상 및 IE가 아닌 브라우저는 다음만 지원합니다. 원칙은 방법 2와 다소 유사합니다. 줌(IE 전송에는 속성이 있음)이 문제를 해결할 수 있습니다. ie6과 ie7의 부동 문제 질문
장점: 구조와 의미가 완전히 정확하고 코드의 양이 적당하며 재사용이 가능합니다(공용 클래스를 정의하는 것이 좋습니다)
단점: 코드가 그다지 간결하지 않습니다(매우 추천)

글쓰기의 우수성을 위해 노력합니다

.clearfix: after {

내용:”200B”

디스플레이:블록; 높이:0; 지우기:둘 다

}
.clearfix { *zoom:1 } IE6을 조심하세요. IE7은 괜찮을 것입니다
플로팅에 대한 자세한 내용은 다음 기사를 참조하세요.
http://luopq.com/2015/11/08/C…


4 BFC 관련 지식

정의: BFC(블록 서식 컨텍스트)는 말 그대로 "블록 수준 서식 컨텍스트"로 번역됩니다. 블록 수준 상자만 참여하는 독립적인 렌더링 영역입니다. 내부 블록 수준 상자가 배치되는 방식을 지정하며 이 영역 외부와는 아무 관련이 없습니다.

BFC 레이아웃 규칙 BFC는 페이지에서 격리된 독립 컨테이너입니다. 컨테이너의 하위 요소는 외부 요소에 영향을 주지 않습니다. 그리고 그 반대도 마찬가지입니다.

BFC 요소의 수직 거리는 마진에 의해 결정됩니다. 최대값을 취하면

BFC의 영역은 플로팅 상자와 겹치지 않습니다(플로팅 원칙 지우기).

BFC의 높이를 계산할 때 플로팅 요소도 계산에 참여합니다.
BFC를 생성하는 요소

루트 요소
float 속성이 없음이 아닙니다.
위치가 절대 또는 고정입니다.
디스플레이가 inline-block, table-cell, table-caption, flex, inline-flex

오버플로가 표시되지 않습니다.

5 .box-sizing


CSS 상자 모델을 표준 모델 또는 IE 모델로 설정합니다. 표준 모델의 너비에는 콘텐츠만 포함되고 두 번째 IE 모델에는 테두리와 패딩이 포함됩니다.
content-box 기본값은 콘텐츠의 너비만 계산합니다. padding-box 내에서는 padding이 너비

border-box로 계산되고, 테두리와 패딩은 너비

6으로 계산됩니다. px, em, rem

px의 차이입니다. 픽셀(픽셀). 절대 단위. 픽셀 px는 모니터 화면 해상도에 상대적입니다. 이는 가상 길이 단위이며, px를 물리적 길이로 변환하려면 정밀 DPI를 지정해야 합니다.
em은 현재 개체 내 텍스트의 글꼴 크기를 기준으로 한 상대적 길이 단위입니다. 인라인 텍스트의 현재 글꼴 크기가 수동으로 설정되지 않은 경우 브라우저의 기본 글꼴 크기를 기준으로 합니다. 상위 요소의 글꼴 크기를 상속하므로 고정된 값이 아닙니다.
rem은 CSS3의 새로운 상대 단위(루트 em)입니다. rem을 사용하여 요소의 글꼴 크기를 설정할 때 여전히 상대 크기이지만 HTML 루트 요소에만 상대적입니다.

7. CSS를 도입하는 방법은 무엇인가요? link와 @import의 차이점은 무엇인가요?

inline(요소의 스타일 속성), 외부 링크(링크)의 네 가지 유형이 있습니다. ), Import(@import)

link와 @import의 차이점:

link는 CSS를 로드하는 것 외에도 RSS 카테고리에 속하며 다른 트랜잭션도 정의할 수 있습니다. CSS를 로드합니다. link가 CSS를 참조하는 경우 페이지가 로드될 때 동시에 로드됩니다. @import에서는 페이지가 완전히 로드된 후 로드되어야 합니다.

link는 XHTML 태그이며 호환성 문제가 없습니다. @import는 CSS2.1에서 제안되었으며 하위 버전 브라우저에서는 지원되지 않습니다.

link는 Javascript를 사용하여 DOM을 제어하여 스타일을 변경하도록 지원합니다. @import는 지원하지 않습니다.

8. 유동 레이아웃과 반응형 레이아웃의 차이점

흐름 레이아웃
고정되지 않은 픽셀을 사용하여 웹 콘텐츠, 즉 백분율 레이아웃을 정의합니다. 상자의 너비는 화면 너비에 따라
스케일로 설정되며 고정 픽셀에 의해 제한되지 않습니다. 내용이 양쪽에 채워져 있습니다.

반응형 개발
CSS3의 미디어 쿼리를 사용하면 화면 너비를 쿼리하여 특정 너비 범위의 웹 페이지 레이아웃을 지정할 수 있습니다.

초소형 화면(모바일 장치) 768px 이하
소형 화면 장치 768px-992px
중형 화면 992px-1200px
와이드 화면 장치 1200px 이상
반응형 개발이 더 번거롭기 때문에 타사 반응형 프레임워크는 일반적으로 부트스트랩과 같이 완료하는 데 사용됩니다. 작업의 일부를 완료하려면 물론 자신만의 반응형 스타일을 작성할 수도 있습니다.

차이

• 흐름 레이아웃 반응형 개발
  개발 방법 모바일 웹 개발 + PC 개발 반응형 개발
  응용 시나리오 일반적으로 PC 웹사이트가 이미 있는 경우, 모바일 버전을 개발할 때는 모바일 버전만 별도로 개발하면 됩니다. . 일부 새로운 프로젝트의 경우 이제 웹 사이트가 모바일 터미널에 적응해야 하므로 페이지 집합이 다양한 터미널과 호환됩니다.
  개발은 다양한 터미널과 호환되고 개발 효율성이 낮습니다. 모바일 장치에 적응하고 패드에서의 경험은 상대적으로 열악합니다. 다양한 터미널에 적응할 수 있습니다
  효율성 코드가 간단하고 로드가 빠릅니다. 코드가 상대적으로 복잡하고 로드가 느립니다
  
  9.

주요 차이점은 초점을 맞춘 콘텐츠와 이러한 차이의 결과입니다. 작업 흐름의 차이

우아한 저하 관점은 웹사이트가 가장 발전되고 완전한 브라우저에 맞게 설계되어야 한다고 믿습니다.

점진적 향상 관점에서는 낮은 버전에 우선순위를 두고 콘텐츠 자체에 집중해야 한다고 믿습니다.
10. CSS 숨겨진 요소의 여러 가지 방법과 차이점

display:none

요소가 페이지에서 완전히 사라지고 원래 요소가 차지했던 공간이 다른 요소로 채워지게 됩니다. 재배치하고 다시 칠하십시오.

클릭 이벤트는 실행되지 않습니다.
visibility:hidden

display:none의 차이점은 요소가 페이지에서 사라진 후에도 해당 요소가 차지하는 공간은 그대로 유지되므로 브라우저가 다시 그려지기만 하고 다시 그려지지는 않는다는 것입니다. 리플로우.

클릭 이벤트가 실행될 수 없습니다
요소가 숨겨진 후 페이지 레이아웃이 변경되지 않을 것으로 예상되는 시나리오에 적합합니다.
opacity:0

요소의 투명도를 0으로 설정한 후 사용자의 눈에 , 요소도 숨겨집니다. 이는 요소를 숨기는 방법으로 간주됩니다.

와 visible:hidden의 공통점 중 하나는 요소가 숨겨진 후에도 여전히 공간을 차지한다는 것입니다. 하지만 투명도를 0으로 설정한 후에도 요소는 보이지 않고 페이지에 여전히 존재한다는 것을 우리 모두 알고 있습니다.
클릭 이벤트 발생 가능
높이, 너비 등의 상자 모델 속성을 0으로 설정

간단히 말하면 요소의 여백, 테두리, 패딩, 높이 및 너비와 요소 상자 모델에 영향을 미치는 기타 속성을 설정하는 것을 의미합니다. 0으로. 요소 또는 콘텐츠에 하위 요소가 있는 경우 해당 하위 요소를 숨기려면 Overflow:hidden도 설정해야 합니다. 이는 일종의 트릭입니다.

요소의 테두리, 패딩 및 기타 속성이 0이 아닌 값으로 설정되어 있으면 당연히 페이지에서 해당 요소를 계속 볼 수 있으며 요소의 클릭 이벤트를 트리거하는 데 문제가 없습니다. 모든 속성이 0으로 설정되면 이 요소가 사라지는 것이 분명합니다. 즉, 클릭 이벤트가 트리거될 수 없습니다.
이 방법은 실용적이지 않으며 몇 가지 문제가 있을 수 있습니다. 그러나 우리가 일반적으로 사용하는 일부 페이지 효과는 요소의 Overflow:hidden을 설정한 다음 타이머, margin-top을 통해 요소의 높이와 여백 상단을 지속적으로 설정하는 jquery의 SlideUp 애니메이션과 같이 이러한 방식으로 완료될 수 있습니다. Bottom, border-top, border-bottom, padding-top, padding-bottom이 0이므로 슬라이드업 효과를 얻습니다.
다른 창의적인 방법

요소의 위치와 왼쪽, 위쪽, 아래쪽, 오른쪽 등을 설정하고 요소를 화면 밖으로 이동합니다.

요소의 위치와 Z-인덱스를 설정하고 Z-인덱스를 작게 설정합니다. 가능한 한 음수.

위 내용은 HTML과 CSS의 핵심적이고 어려운 문제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!