일반적인 프런트엔드 CSS 인터뷰 질문

전염병 상황이 계속 개선되면서 여러 곳에서 점차 업무를 재개하기 시작했습니다. 물론 우리에게는 소위 금, 삼, 은, 사계절이 곧 시작됩니다. 이곳에서는 과거를 되돌아보고 새로운 것을 배울 수 있도록 프론트엔드 분야에서 축적된 경험 중 일부를 공유하고 싶습니다.

프론트엔드의 경우 광범위한 지식과 콘텐츠가 포함되지만 주로 html(5), css(less, scss, sass, styus, css3), js(es5)를 중심으로 동일합니다. es6) 및 vue, React 등과 같은 몇 가지 일반적으로 널리 사용되는 프레임워크가 있습니다. 더 이상 고민하지 않고 바로 주제로 넘어가겠습니다.

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

1 html5의 몇 가지 새로운 기능을 말해 보세요.

답변: html5에 추가된 새로운 기능은 구체적으로 다음과 같습니다.

1. 바닥글, 기사, 기본, 탐색 등의 새로운 의미/구조적 태그
2. 이메일, 전화번호 등의 새로운 입력 유형 및 속성
3. 특정 API 위치정보 로컬 저장 캐시 등
4. 새로운 그래픽 태그 svg canvas와 두 가지의 차이점
5. 새로운 멀티미디어 태그 비디오 오디오 소스
6. 일부 버려진 요소 태그: 글꼴
7. 사용자 정의 요소 태그
8. DOCTYPE 및 문자 인코딩 문자 집합 선언

2. z-index 사용

답변: z-index는 레이블의 계층 관계를 설정하는 데 사용됩니다. 라벨의 위치를 ​​동시에 설정하려면 속성(예: 상대, 절대 또는 고정)에서 라벨의 기본 Z-색인은 0이며 음수를 설정할 수 있으며 값이 클수록 높아집니다.

3. 위치 속성 및 사용 방법

답변: 위치는 주로 다음과 같은 다양한 속성 값을 포함하는 CSS의 위치 지정 속성입니다.

absolute

절대 위치를 생성합니다. 정적 위치 지정이 아닌 첫 번째 상위 요소를 기준으로 위치가 지정되는 요소입니다.

요소의 위치는 "왼쪽", "위쪽", "오른쪽" 및 "아래쪽" 속성을 통해 지정됩니다.

fixed

브라우저 창을 기준으로 절대 위치에 있는 요소를 생성합니다.

요소의 위치는 "왼쪽", "위쪽", "오른쪽" 및 "아래쪽" 속성을 통해 지정됩니다.

relative

일반 위치를 기준으로 상대적으로 배치된 요소를 생성합니다.

따라서 "left:20"은 요소의 왼쪽 위치에 20픽셀을 추가합니다.

static

기본값. 위치 지정이 없으면 요소는 일반 흐름(상단, 하단, 왼쪽, 오른쪽 또는 Z-색인 선언 무시)으로 나타납니다.

inherit

은 위치 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.

4.Float 사용

답변: 속성은 요소가 부동하는 방향을 정의합니다. 역사적으로 이 속성은 항상 이미지에 적용되어 텍스트가 이미지 주위를 둘러싸도록 했지만 CSS에서는 모든 요소가 부동될 수 있습니다. 부동 요소는 요소 유형에 관계없이 블록 수준 상자를 만듭니다. 자세한 내용은 다음과 같습니다.

float에 의한 효과로 인해 요소 자체가 inline-block과 유사한 요소가 되므로 이를 래핑하는 요소는 높이를 무시합니다. 즉, 상위 요소에는 높이가 없습니다. 높이: 하위 요소 상자의 경우 100px, 이때 상위 요소의 높이도 100px입니다. float float의 효과로 인해 요소는 외부 가장자리가 포함 상자나 다른 부동 테두리에 닿을 때까지 지정된 방향으로 문서 흐름 밖으로 이동합니다. 플로팅은 그 뒤에 있는 요소에만 영향을 미칩니다. 위 요소가 플로팅되지 않으면 상위 요소가 너무 좁아 모든 플로팅 요소를 수용할 수 없는 경우 수용할 수 없는 플로팅 요소가 새 줄에 표시됩니다. . 줄 바꿈 요소를 기준으로 줄 바꿈 요소보다 높이가 큰 플로팅 요소가 있는 경우 줄 바꿈 요소가 끊어지면 더 큰 요소에 "붙어" 있습니다. 5. 지우는 방법. 부동의 영향

답변: 부동은 문서 흐름을 파괴합니다. 따라서 부동의 영향을 제거해야 하는 경우 일반적으로 몇 가지 해결 방법이 있습니다.

하위 요소의 경우 부동 하위 요소 뒤에 요소를 추가합니다. 정상적으로 표시하려면 일반 요소와 일반 요소를 모두 추가해야 합니다. 단점은 빈 요소가 임의로 추가된다는 것입니다. 이는 코드 사양을 따르지 않습니다. 상위 요소의 경우 상위 요소 뒤에 인접한 빈 요소를 추가하고 설정합니다. Clear 속성은 다음 요소만 정상적으로 표시되도록 허용하고 상위 요소를 확장하지 않습니다. 높이는 상위 요소에 대한 것입니다. 상위 요소의 높이를 설정하면 정상적으로 표시될 수 있지만 확장성은 그렇지 않습니다. 좋습니다. 높이는 일반적으로 내부 콘텐츠에서 지원되기 때문입니다. 상위 요소의 경우: 상위 요소에 대해 display: inline-block을 설정하면 정상적으로 표시될 수 있지만 상위 요소의 margin: auto는 유효하지 않습니다. 상위 요소의 경우: 오버플로: 상위 요소에 숨겨지며 정상적으로 표시될 수 있지만 너비가 일치해야 합니다. 그렇지 않으면 채워집니다. 기본적으로 행. 6.css 애니메이션 속성(예: 회전하는 삼각형을 제동하기 위해 CSS를 사용)

답변: 삼각형을 만들려면 테두리 속성을 직접 사용할 수 있습니다. 특히 상자의 높이와 너비를 0px로 설정한 다음 너비에 해당하는 다양한 테두리의 색상 속성을 설정할 수 있습니다. 삼각형은 특정 삼각형 색상으로 설정되어 있으며 해당 색상을 설정하지 않거나 너비를 0으로 설정하지 마십시오. 다른 두 개의 빗변을 투명하게 설정하세요

회전 애니메이션에는 다음과 같은 CSS의 두 가지 속성이 포함됩니다.

1) 전환 : 애니메이션 속성, 해당 애니메이션에 대해 4가지 값을 쓸 수 있습니다. 속성 이름 또는 모두 직접 설정, 애니메이션 완료 시간(단위는 s 또는 ms), 애니메이션 변경 곡선, 애니메이션 시작 시간

2) 변환: 회전 속성 주로 회전(급진 회전에는rotate3d,rotateX,rotateY,rotateZ도 포함), 이동(같은 방식으로 4개가 있음), 크기 조정(같은 방식으로 4개가 있음)

7. model

답변: 상자 모델은 주로 라벨의 너비를 계산합니다. 또는 높이가 일관되지 않습니다. 표준 상자 모델에는 여백, 테두리, 패딩 및 콘텐츠 너비, 즉 상자의 실제 너비가 포함됩니다. = 콘텐츠의 왼쪽 및 오른쪽 여백 + 왼쪽 및 오른쪽 테두리 + 왼쪽 및 오른쪽 패딩 + 콘텐츠의 실제 너비 및 상자 크기 조정은 CSS3에서 도입되었습니다. 속성은 특히 표준 상자 모델의 계산 방법을 변경할 수 있습니다. : box-sizing: border-box 설정 시 상자의 실제 너비 = 콘텐츠의 왼쪽 및 오른쪽 여백 + 콘텐츠의 실제 너비 물론 box-sizing: content-box 일반을 직접 설정할 수도 있습니다. 표준 상자 모델은

8. flex elastic 레이아웃

답변: 1. 상자의 표시 속성을 각각 6개의 CSS 속성에 해당하는 flex 또는 line-flex로 설정합니다. For:

1) flex-direction : 하위 요소의 배열 설정(row, Column, row-reverse, Column-reverse)

2) flex-warp : 하위 요소의 랩핑 여부 설정(nowarp, warp, warp-) reverse)

3) flex-flow: flex-direction과 flex-warp의 약어, 기본값은 row nowarp

4) justify-content: 하위 요소의 가로 배열 설정(flex-start, flex-end, center, 범위 주변, 범위 사이)

5) align-items: 하위 요소의 수직 모드 설정(flex-start, flex-end, center, Stretch, 기준선)

6) align-content: 수직 방향 설정 여러 축 배열(flex-start, flex-end, center,spand-around,spand-between,stretch)

2 해당 하위 요소 항목에는 다음과 같은 6가지 CSS 속성도 있습니다.

1) order: 요소의 배열 가중치를 설정합니다.

2) flex-grow: 요소의 확대 비율을 설정합니다.

3) flex-shrink: 요소의 축소 비율을 설정합니다.

4) flex-basis: 초과 공간 항목의 주축을 설정합니다. 비례 공간

5) flex: flex-grow, flex-shrink 및 flex-basis의 약어는 기본적으로 0 1 auto

6) align- self: 하위 요소의 수직 배열을 설정합니다. 기본값은 상자 정렬입니다. -items 값

: 경고:: Flex 레이아웃을 설정한 후 하위 요소의 부동, 지우기 및 수직 정렬이 유효하지 않습니다

9.grid 그리드 레이아웃

답변: 1. 상자의 그리드 설정 레이아웃은 다음 속성에 해당하는 그리드 또는 라인 그리드로 표시를 설정해야 합니다.

1) 그리드 템플릿 -columns: 각 열의 너비 정의

2) Grid-template-rows: 각 행의 높이 정의

3 ) Grid-row-gap: 행 사이의 간격 정의

4) Grid-column-gap: 열 사이의 간격 정의

5)grid-gap: 행과 열 사이의 간격 정의 약어

6)grid-teamplate-areas: 여러 셀로 구성된 영역 정의

7)grid-auto-flow: 컨테이너 배열 순서

8) justify-items: 하위 요소 콘텐츠의 가로 배열 순서 정의

9) align -items: 하위 요소 콘텐츠의 세로 순서 정의

10) place-items: 정의 자식 요소 내용의 가로, 세로 순서의 약어

11) justify-content: 컨테이너의 가로 순서 정의(그리드)

12) align-content: 컨테이너의 세로 배열 순서 정의(그리드) )

13) place-content: 컨테이너의 가로 및 세로 배열 순서에 대한 약어를 정의합니다.

2 하위 요소의 속성은 다음과 같습니다.

1) Grid-column-start: 열이 시작되는 위치

2)grid-column-end:열이 끝나는 위치

3)grid-row-start:행이 시작되는 위치

4)grid-row-end:행의 끝 위치

5 )grid-column: 열 시작 및 끝 위치

6)grid-row: 행 시작 및 끝 위치

7)grid-area: 요소가 배치되는 영역 정의

8) justify-self: 요소의 위치 정의 자체 수평 배열

9) align-self: 요소 자체의 수직 배열 정의

10) place-self: 요소 자체의 수평 및 수직 배열 정의

:warning:: net으로 설정된 경우 그리드 레이아웃 후 float, 하위 요소의 inline-block, table-cell 및 column-* 속성은 모두 유효하지 않습니다

10. 일반적인 센터링 솔루션

답변:

1. 텍스트를 직접 사용하세요. center

2. 인라인 요소는 수직으로 중앙에 배치됩니다: 수직 정렬: 중간 상위 요소의 행 높이를 상위 요소의 높이로 설정합니다

3. 고정 너비 요소는 magin: 0 auto

를 사용하여 수평으로 중앙에 배치됩니다.

4. Flex Elastic 레이아웃: justify-content를 가로로 가운데로 설정, align-items: 세로로 가운데 맞춤

5. 패딩 속성을 통해 세로 가운데 맞춤 수행

6. 상위 요소를 다음으로 설정합니다. - align: middle

7 의사 요소를 통한 수직 센터링 설정: 상위 요소에 의사 요소를 설정하고 인라인 블록으로 설정하고, 수직 정렬: middle

8을 설정합니다. + 여백 수직 센터링

9. 높이가 불확실한 경우: 절대 위치 지정 + 변환, 구체적으로: 수직으로 센터링되어야 하는 요소를 다음과 같이 설정합니다: 위치: 절대, 상단: 50%, 변환: 이동Y(-50%)

10. flex-duration: 열을 수직으로 center: display: flex, flex-duration: 컬럼, justify-content: center

수평 및 수직 센터링 방법:

1. 알려져 있으며, 하위 요소의 높이와 너비가 알려져 있습니다. 고정(높이는 고정되지 않을 수 있음): text-align: center, line-height: 상위 높이

2. 수직 및 수평 중심을 달성하기 위한 절대 위치 지정 + 여백, 하위 요소의 높이와 너비를 알아야 합니다

3. 수직 및 수평 중심을 달성하기 위한 절대 위치 지정 + 변환, 하위 요소의 높이와 너비를 알 필요가 없습니다: 위치: 절대: 50; %; 왼쪽: 50%; 변환: 변환(-50%, -50%)

4. 디스플레이를 테이블로 사용하고 하위 요소를 디스플레이로 사용: table-cell;vertical-align:center;text-align:center sub- 요소는 수직 정렬:center

5로 설정됩니다. 수직 센터링을 위해 상위 요소의 의사 요소를 사용하고(상위 요소는 높이를 알아야 함) 의사 요소의 높이는 100%로 설정하고 세로로 설정합니다. -align: middle, display: inline-block; 하위 요소는 수직 정렬: 센터; 디스플레이: 인라인 블록(하위 요소는 text-align: center 또는 margin: 0 auto를 사용하여 수평으로 가운데 정렬될 수 있음)

6. 하위 요소는 여백: 자동, 위치: 0, 오른쪽: 0,

답변: 일반적인 의사 클래스 - :hover, :link, :active, :target, :not(), :focus. 일반적인 의사 요소 - ::first-letter, ::first-line, ::before, ::after, ::selection

::before 및 ::after 고유 콘텐츠는 CSS 렌더링에 요소를 추가하는 데 사용됩니다. 논리적 헤드 또는 테일.

이러한 추가 사항은 DOM에 표시되지 않으며 문서 내용을 변경하지 않으며 복사할 수 없습니다. CSS 렌더링 레이어에만 추가됩니다.

그러므로 의미 있는 콘텐츠를 표시하려면 :before 또는 :after를 사용하지 마세요. 아이콘과 같은 장식적인 콘텐츠를 표시하는 데 사용해보세요

12.css 선택기

답변: 와일드카드 선택기, 태그 선택기, 클래스 선택기, ID 선택기, 속성 선택기, 공백 선택기가 선택기 더하기 기호 선택기보다 큽니다

13.p 패딩을 100% 표현으로 설정하세요

답변: 표준 모드인지 상자인지 여부 - 크기 조정 모드에서는 패딩 는 요소 전체 너비의 일부이므로 이때 p는 p

14에 해당하는 색상으로 동작합니다. em, rem, px

답변: em은 상대적인 길이 단위입니다. . 현재 개체 내의 텍스트를 기준으로 한 글꼴 크기입니다. 인라인 텍스트의 현재 글꼴 크기가 수동으로 설정되지 않은 경우 브라우저의 기본 글꼴 크기를 기준으로 합니다. Rem은 px 픽셀(Pixel)을 계산하기 위해 HTML 루트 요소의 글꼴 크기에만 상대적입니다. 상대 길이 단위. 픽셀 px는 모니터 화면 해상도를 기준으로 합니다. 15. 여백의 사용법 및 주의사항

답변: 여백을 사용하면 인접한 두 레이블 사이의 여백이 병합된 것처럼 나타납니다. 즉, 위쪽 및 아래쪽 레이블의 margin-top 및 margin-bottom을 설정하면 자동 병합을 수행하고 가장 큰 속성 값을 둘 사이의 실제 간격으로 사용합니다

16. 몇 가지 일반적인 CSS3 속성 및 용도를 나열하세요

답변: 일반적인 속성은 다음과 같습니다: border-radius: 둥근 모서리 설정 of the label; box-shadow: 그림자 설정, box-sizing: 상자 모델 변경 등

17 less와 sass 사용 비교

답변: 차이는 Less 환경은 Sass보다 간단합니다

Sass를 설치하려면 Ruby 환경을 설치해야 합니다. Less는 Javascript를 기반으로 하며, 코드를 처리하고 CSS를 브라우저에 출력하려면 Less.js를 도입해야 합니다. 개발 프로세스를 작성한 다음 CSS 파일로 컴파일하고 프로젝트에 직접 배치합니다.

Less는 Sass보다 사용하기 쉽습니다

Less는 CSS의 원래 기능을 맞춤화하지 않고 기존 CSS 구문을 기반으로 CSS에 절차적 언어 기능을 추가합니다.

Sass에는 Less

1보다 더 강력한 기능이 있습니다. Sass에는 변수와 범위가 있습니다

2. Sass에는 함수

3라는 개념이 있습니다. 조건, 루프 탐색, 참조

4. array, map

Less와 Sass의 처리 메커니즘은 다릅니다

전자는 클라이언트를 통해 처리되고, 후자는 서버를 통해 처리됩니다. 이에 비해 전자는 후자보다 조금 느리게 구문 분석됩니다.

Less와 Sass의 변수 간의 유일한 차이점은 Less는 @를 사용하고 Sass는 $를 사용한다는 것입니다. 유사점은

Less와 Sass는 다음과 같은 몇 가지 공통 구문을 가지고 있습니다.

1.

2. 매개변수 혼합 - 함수와 마찬가지로 매개변수를 전달할 수 있습니다.

3. 클래스 내에 클래스를 중첩하여 중복 코드를 줄입니다.

5. - 색상을 편집할 수 있습니다.

6. 네임스페이스 - 스타일을 호출할 수 있습니다.

7. 범위 - 로컬에서 스타일을 수정합니다.

8. CSS에서 JavaScript 표현식을 사용하여 할당합니다.

물론 CSS에 관해서라면 less, scss 등 CSS 전처리 언어에 대해서도 물어보시게 되실 겁니다. 해당 정보는 직접 확인하셔도 되고 여기서는 길게 설명하지 않겠습니다

추천 관련 튜토리얼:

CSS 비디오 튜토리얼

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