일반적인 CSS 인터뷰 질문 정리

박스 모델

• 표준 박스 모델: 내용물

• 이상한 박스 모델: 테두리+내용

특별 추천: 2 CSS 인터뷰 질문 요약 2020 (최신)

인라인 요소

• Features
  • 너비와 높이 설정이 잘못되었습니다
  • 여백 설정은 왼쪽과 오른쪽에만 유효하고 위쪽과 아래쪽은 유효하지 않습니다.
  • 패딩 설정은 위쪽, 아래쪽 모두에 유효합니다. , 왼쪽 및 오른쪽, 공간을 차지합니다
  • 자동으로 줄바꿈되지 않습니다
• 공통 인라인 요소
  • a 스팬 b i 강함

인라인 블록 요소

• 특징
  • 너비를 설정할 수 있습니다. 및 높이
  • 모든 인라인 요소와 같은 줄에 표시
• 공통 인라인 블록 요소
  • img 입력 버튼 선택

블록 수준 요소

• 특징
  • 너비와 높이를 설정할 수 있습니다
  • 모든 블록 수준 요소는 한 줄을 차지합니다.
  • 너비와 높이가 설정되지 않은 경우 기본적으로 상위 너비와 높이를 상속합니다.
• 공통 블록 수준 요소
  • p p ul li h1-h6

css를 사용하여 중앙 정렬

• margin: 0 auto;
• translate:translate
• flex 레이아웃을 사용한 위치 위치 지정
• text-align with line-height, 상위 요소 영역
• 세로 내에서 글꼴을 중앙에 배치하는 데 사용됨 -align: 중간; 인라인 요소의 중심 정렬을 설정하는 데 사용됨

css hack

• 설명:
  • condition hack

  <!--[if IE]>
  <style>
    p {
        color: red;
    }</style>
  <![endif]-->

  로그인 후 복사

  로그인 후 복사
  • attribute hack

  .p {
      color: red; /*IE 8+*/
      *color: green; /*IE 7*/
      _color: yellow; /*IE 6*/}

  로그인 후 복사

  로그인 후 복사
  • 과 호환 가능으로 사용됨 selector hack

  /*IE 6*/* html .p {
      color: red;}/*IE 7*/* + html .p {
      color: green;}

  로그인 후 복사

  로그인 후 복사

px 및 em

• px은 절대 단위이며 값은 고정되어 있습니다.
• em은 상위 요소에서 상속된 글꼴입니다. -size 크기 단위

support

@support는 감지하는 데 사용됩니다. 브라우저가 특정 CSS 속성을 지원하는지 여부는 조건부 판단으로 이해될 수 있으며 일반적으로 호환성 처리에 사용됩니다.

media

미디어 쿼리는 뷰포트 케이스에 해당하는 CSS 스타일을 기반으로 하며 일반적으로 모바일 호환성을 위해 rem과 함께 작동합니다.

calc

css 계산 속성은 길이 값을 동적으로 계산하는 데 사용되며 수학 연산을 지원합니다.

Clear float

• Pseudo 요소 Clear float
  • 원리: 높이 붕괴 문제를 해결하려면 상위 요소의 의사 요소에clear:both를 설정하세요.

  ::after {
    content: "";
    clear: both;
    overflow: hidden;
    height: 0;}

  로그인 후 복사

  로그인 후 복사

BFC: 독립적인 레이아웃 환경

• formatting context입니다. 내부 요소와 외부 요소의 위치가 서로 영향을 미치지 않도록 BFC 내부 요소를 외부 요소와 격리하는 독립적인 렌더링 영역입니다.
• 규칙
  • 동일한 BFC에서는 인접한 두 상자가 기본적으로 수직으로 배열됩니다.
  • 동일 BFC에서 위와 아래의 인접한 두 상자의 여백은 겹치게 됩니다.
  • BFC는 플로트 영역과 겹치지 않습니다
  • 계산 시 BFC 높이가 사용되면 부동 하위 요소도 계산에 참여하므로 BFC 높이가 설정되지 않은 경우 부동 하위 요소도 늘어납니다.
  • 텍스트 레이어는 플로팅 레이어로 덮이지 않고 둘러싸입니다

상위 및 하위 가장자리가 겹칠 때 문제를 해결하려면 하위 요소 여백이 상위 요소와 함께 이동합니다

+원리: 사용 높이 0 테이블을 추가하는 의사 요소

• a 스팬 b i 강함

인라인 블록 요소

• features
  • 너비와 높이를 설정
  • 하여 모든 인라인 요소와 같은 줄에 표시할 수 있음
  • 공통 인라인 블록 요소
  img 입력 버튼 선택
• 블록 수준 요소

• 수준 요소는 한 줄만 차지합니다.
  • 너비와 높이가 설정되지 않으면 부모 블록의 너비와 높이를 상속받습니다. 기본적으로
  공통 블록 수준 요소
• p p ul li h1-h6
css로 센터링

• 위치 위치 지정 및 변환:번역
  • flex 레이아웃
  • text-align 및 line-height는 상위 요소 영역 내에서 글꼴을 중앙에 배치하는 데 사용됩니다.
  • vertical-align: middle; 인라인 요소의 중앙 정렬을 설정하는 데 사용됩니다
css hack
• • 설명: 브라우저마다 다른 CSS를 작성합니다. 호환 가능한
  조건부 hack

<!--[if IE]>
<style>
  p {
      color: red;
  }</style>
<![endif]-->

• .p {
      color: red; /*IE 8+*/
      *color: green; /*IE 7*/
      _color: yellow; /*IE 6*/}

  로그인 후 복사

  로그인 후 복사
• selector hack

• /*IE 6*/* html .p {
      color: red;}/*IE 7*/* + html .p {
      color: green;}

  로그인 후 복사

  로그인 후 복사
px과 em

• support
  @support에서 상속된 크기 단위는 브라우저가 특정 CSS 속성을 지원하는지 여부를 감지하는 데 사용되며, 이는 일반적으로 호환성 처리를 위해 조건부 판단이 사용되는 것으로 이해할 수 있습니다.
  media
  미디어 쿼리는 뷰포트 케이스에 해당하는 CSS 스타일을 기반으로 하며 일반적으로 모바일 호환성을 위해 rem과 함께 작동합니다.
  calc
  css 계산 속성은 길이 값을 동적으로 계산하는 데 사용되며 수학 연산을 지원합니다.
Clear float

• 원리: 높이 붕괴 문제를 해결하려면 상위 요소의 의사 요소에clear:both를 설정하세요.

• ::after {
    content: "";
    clear: both;
    overflow: hidden;
    height: 0;}

  로그인 후 복사

  로그인 후 복사

BFC: 독립적인 레이아웃 환경

• 텍스트 레이어는 플로팅 레이어로 덮이지 않고 둘러싸입니다
상위 및 하위 가장자리가 겹칠 때 문제를 해결하려면 하위 요소 여백이 상위 요소와 함께 이동합니다

+원리: 사용 높이 0 테이블을 추가하는 의사 요소

• 관련 튜토리얼 권장 사항:
CSS 비디오 튜토리얼

위 내용은 일반적인 CSS 인터뷰 질문 정리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!