자세한 프런트엔드 인터뷰 질문 CSS 기사 - 지속적인 업데이트

HTML
JS 기사
타입스크립트
Vue편
반응하다
프런트엔드 인터뷰 질문 요약(매우 상세한 답변, HTML, JS, CSS 요약 포함) -- 지속적인 업데이트
프런트엔드 인터뷰 질문 요약 II(상세한 답변, Vue, TypeScript, React, Webpack 요약 포함) -- 지속적인 업데이트
CSS 인터뷰 질문

1. CSS의 박스 모델을 소개합니다.

여백(외부 여백) - 테두리 외부 영역을 지우면 여백이 투명해집니다.
border - 패딩 주변과 콘텐츠 외부의 테두리입니다.
패딩 - 콘텐츠 주변 영역을 지우고 패딩은 투명합니다.
내용 (내용) - 상자의 내용, 표시 텍스트 및 이미지.

W3C의 표준 박스 모델: 표준 박스 모델에서 너비는 콘텐츠 부분의 너비를 의미합니다.

IE의 박스 모델: IE 박스 모델에서 width는 content+padding+border의 세 부분의 너비를 나타냅니다.

다양한 박스 모델을 활성화하는 방법

상자 크기 조정:콘텐츠 상자; 표준 상자 모델

box-sizing: 테두리 상자, IE 상자 모델

2. CSS 선택기?

id 선택기(#box), id가 box인 요소를 선택합니다.

클래스 선택기(.one), 클래스 이름이 one인 모든 요소를 선택합니다.

레이블 선택기(div), 레이블 div가 있는 모든 요소 선택

하위 선택기(#box div), box 요소 내부에 id가 있는 모든 div 요소를 선택합니다.

하위 선택기(.one>one_1), 상위 요소가 .one인 .one_1의 모든 요소를 선택합니다.

인접한 형제 선택기(.one+.two), .one 바로 뒤에 있는 모든 .two 요소를 선택합니다.

그룹 선택기(div, p), div, p의 모든 요소 선택

의사 클래스 선택자

속성 선택자

3. CSS 선택기 우선순위?

!important > 인라인 스타일(가중치 1000) > ID 선택기(가중치 100) > 클래스 선택기(가중치 10) > 레이블(가중치 1) > 와일드카드 > 상속 > 브라우저 기본 속성

4. CSS에서 상속 가능한 속성?

글꼴 패밀리 속성

font-family: 글꼴 패밀리

font-weight: 글꼴 두께

글꼴 크기: 글꼴 크기

글꼴 스타일: 글꼴 스타일

텍스트 시리즈 속성

text-indent: 텍스트 들여쓰기

text-align: 텍스트의 가로 정렬

line-height: 행 높이

색상: 텍스트 색상

요소 가시성: 가시성

목록 레이아웃 속성: list-style

커서 속성: 커서

5. 수직으로 중앙에 배치하는 방법은 몇 가지입니까?

디스플레이 모드를 테이블로 설정 display:table-cell하고vertial-align：middle

레이아웃을 사용하여 flex다음으로 설정align-item：center

절대위치로 설정 bottom:0,top:0하고 설정margin:auto

절대 위치 결정에서 높이가 고정된 경우 설정 top:50%，margin-top값은 높이의 절반의 음수 값입니다.

값 line-height으로 설정된 텍스트 세로 중심height

6. CSS 링크와 @import의 차이점과 사용법에 대해 간략히 설명해주세요.

link는 XHTML 태그이며 CSS를 로드하는 것 외에도 RSS를 정의하고 관련 연결 속성을 정의하는 데 사용할 수 있으며 @import는 CSS에서 제공하며 CSS를 로드하는 데만 사용할 수 있습니다.

페이지가 로드될 때 링크가 동시에 로드되고 @import에서 참조하는 CSS는 로드하기 전에 페이지가 로드될 때까지 대기합니다.

import는 CSS2.1에서 제안하고 IE5 이상에서만 인식 가능하며 링크는 XHTML 태그이므로 호환성 문제는 없습니다.

7. rgba의 투명 효과와 불투명도의 차이점은 무엇입니까?

Rgba는 요소 색상과 투명도를 모두 지정할 수 있으며 불투명도는 요소의 투명도만 제어할 수 있으며 색상을 설정할 수 없습니다.

Rgba 투명도는 실제 색상을 기준으로 하며 opacity는 요소 자체의 투명도에 대해 설정됩니다.rgba를 사용하면 요소의 다른 부분에서 다른 투명도를 얻을 수 있으며 opacity는 요소의 투명도를 일관되게 만듭니다.

rgba를 지원하는 브라우저는 opacity를 지원하는 브라우저보다 더 일반적이지만 하위 버전에서는 rgba가 지원되지 않고 opacity가 지원됩니다.

8. 속성 값 및 표시 기능

$[외부 링크 사진 전송 실패, 소스 사이트에 도난 방지 링크 메커니즘이 있을 수 있으므로 사진을 저장하고 직접 업로드하는 것이 좋습니다. (img-YE6ys7gx-1683862598768) \typora-user-images\ 1683804216661.png)]$

9. 디스플레이 블록, 인라인 및 인라인 블록의 차이점은 무엇입니까?

block: 한 줄을 차지하고 여러 요소가 새 줄을 시작하며 너비, 높이, 여백 및 패딩 속성을 설정할 수 있습니다.

inline: 요소가 한 줄을 차지하지 않으며 너비 및 높이 속성 설정이 유효하지 않습니다. 그러나 여백 및 안쪽 여백 속성은 가로 방향으로 설정할 수 있지만 세로 방향으로는 안쪽 여백 및 여백을 설정할 수 없습니다.

inline-block: 개체를 인라인 개체로 설정하지만 개체의 내용은 블록 개체로 렌더링되며 이후의 인라인 개체는 같은 줄에 정렬됩니다.

10. display:none과 visibility:hidden의 차이점은 무엇입니까?

display:none은 해당 요소를 숨기고, 문서 레이아웃에서 공간이 할당되지 않으며, 각 측면의 요소는 마치 존재하지 않은 것처럼 닫힙니다.
Visibility:hidden은 해당 요소를 숨기지만 문서 레이아웃의 원래 공간은 유지합니다.

11. 위치, 상대, 절대의 가치는 누구에게 위치하느냐에 따라 상대적인가?

상대적: 일반 문서 흐름에서 자신의 위치에 상대적인 상대적 위치입니다.
절대: 위치 지정이 가장 가까운 수준에서 정적이지 않은 부모 요소를 기준으로 절대 위치 지정을 생성합니다. 마지막으로 고정된 본문 발견
: (이전 버전의 IE는 지원하지 않음) 위치 지정을 위한 브라우저 창 또는 프레임에 상대적인 절대 위치 지정을 생성합니다.
정적: 기본값, 위치 지정 없음, 요소가 일반 문서 흐름에 나타납니다.
sticky: 고정 배치 요소를 생성하고 컨테이너의 위치는 일반 문서 흐름에 따라 계산됩니다.

12. 요소를 숨기는 방법은 무엇입니까?

display: none: 렌더링 트리는 염료 개체를 포함하지 않으므로 요소는 페이지에서 위치를 차지하지 않으며 바인딩된 리스너 이벤트에 응답하지 않습니다.

가시성: 숨김: 요소가 여전히 페이지의 공간을 차지하지만 바인딩된 리스너 이벤트에 응답하지 않습니다.

opacity: 0: 요소의 투명도를 0으로 설정하여 요소를 숨깁니다. 요소는 여전히 페이지의 공간을 차지하며 요소에 바인딩된 수신 이벤트에 응답할 수 있습니다.

position: absolute: 절대 위치 지정을 사용하여 볼 수 있는 영역에서 요소를 제거하여 숨깁니다.

z-index: 음수 값: 다른 요소가 요소를 가리도록 하여 숨김

transform: scale(0,0): 요소를 숨기려면 요소를 0으로 조정합니다.

13. 전환과 애니메이션의 차이점은 무엇입니까?

트리거링 방법이 다릅니다. transition애니메이션 효과는 CSS 속성 값의 변경으로 트리거 animation되지만 애니메이션 시퀀스는 키프레임(keyframes)을 설정하여 지정해야 합니다.

제어 방법은 다릅니다. transition시작 및 종료 상태 사이의 전환 애니메이션만 제어할 수 있지만 애니메이션의 시작, 중간 및 종료 순간, 전환 상태를 포함하여 요소 애니메이션의 각 단계를 제어하기 위해 여러 키프레임을 지정할 animation수 있습니다. 및 기간 등

리소스 소비는 다릅니다. 상대적으로 말하면 animation브라우저는 여러 키 프레임 사이의 애니메이션 효과를 계산해야 하고 두 상태 사이에서 간단한 계산 transition만 .

다른 호환성: 상대적transition 으로 다른 브라우저와 더 호환되지만 일부 오래된 브라우저에서는 제대로 작동하지 않을 수 있습니다.animation

14. 의사 요소와 의사 클래스의 차이점은 무엇입니까?

의사 요소: 문서 트리 외부에서 생성된 개체입니다. 예를 들어 문서는 요소 콘텐츠의 첫 번째 단어나 줄에 액세스하기 위한 메커니즘을 제공할 수 없습니다. 의사 요소는 또한 생성된 콘텐츠에 액세스할 수 있는 :before 및 :after와 같이 소스 문서에 존재하지 않는 일부 콘텐츠 배포 스타일을 제공합니다. pseudo-element의 내용은 사실 일반 DOM element와 같지만 element 기반의 추상화일 뿐 문서에는 존재하지 않으므로 pseudo-element라고 합니다.

$[외부 링크 사진 전송 실패, 소스 사이트에 도난 방지 링크 메커니즘이 있을 수 있으므로 사진을 저장하고 직접 업로드하는 것이 좋습니다(img-gsYGywX7-1683862598769) (C:\Users\lenovo\AppData\Roaming\Typora \typora-user-images\ 1683805298891.png)]$

의사 클래스: 요소의 ID, 클래스, 특성 또는 콘텐츠가 아닌 요소의 특성을 기반으로 합니다. 일반적으로 요소의 특성은 DOM 트리에서 유추할 수 없으며 동적이므로 사용자가 DOM과 상호 작용할 때 요소는 의사 클래스를 얻거나 잃을 수 있습니다. (여기서 한 가지 예외는 :first-child 및 :lang이 DOM 트리에서 유추될 수 있다는 것입니다.)

$[외부 링크 사진 전송 실패, 소스 사이트에 거머리 방지 메커니즘이 있을 수 있으므로 사진을 저장하고 직접 업로드하는 것이 좋습니다. (img-f7vKfsmg-1683862598769) typora-user-images\ 1683805345353.png)]$

유사점과 차이점

같은:

의사 클래스나 의사 요소는 소스 파일이나 문서 트리에 나타나지 않습니다. 즉, 의사 클래스와 의사 요소는 html 소스 파일에서 볼 수 없습니다.

차이점:

의사 클래스는 실제로 DOM 요소의 특정 기능인 일반 DOM 요소를 기반으로 하는 다른 상태입니다. 의사 요소는 DOM 트리에 존재하지 않는 추상 객체를 생성할 수 있으며 이러한 추상 객체에 액세스할 수 있습니다.

15. requestAnimationframe의 이해

HTML5는 애니메이션 요청 전용 API를 제공합니다.

문법:

그 중 callback은 다음 다시 그리기 전에 애니메이션 프레임을 업데이트하기 위해 호출되는 함수(즉, 위에서 언급한 콜백 함수)입니다. 콜백 함수는 requestAnimationFrame()이 콜백 함수 실행을 시작하는 순간을 나타내는 DOMHighResTimeStamp 매개 변수를 전달합니다. 이 메서드는 매크로 태스크이므로 마이크로 태스크가 실행된 후에 실행됩니다.

애니메이션 취소:

애니메이션 실행을 취소하려면 cancelAnimationFrame()을 사용하세요. 이 메서드는 기본적으로 requestAnimationFrame에서 반환하는 id인 매개변수를 받습니다. 애니메이션을 취소하려면 이 id만 전달하면 됩니다.

이점:

CPU 에너지 절약

기능 제한

DOM 조작 감소

16. 리와 리 사이에 공백이 보이지 않는 이유는 무엇이며 해결 방법은 무엇입니까?

브라우저는 인라인 요소 사이의 공백 문자(공백, 개행, 탭 등)를 공백으로 채색합니다. 미학의 경우 일반적으로

한 줄에 입력하면 결과가

줄 바꿈 문자는 줄 바꿈 뒤에 생성되며 공백이 되고 한 문자의 너비를 차지합니다.

해결하다:

~을 위한

부동 설정: 왼쪽. 불충분: 왼쪽 및 오른쪽 전환을 위한 포커스 맵과 같은 일부 컨테이너는 플로팅으로 설정할 수 없습니다.

모두

같은 줄에 작성되었습니다. 불충분: 코드가 아름답지 않습니다.

내부의 문자 크기를 직접 0, 즉 font-size:0으로 설정합니다. 불충분:

의 다른 문자 크기도 0으로 설정되며 다른 문자 크기는 재설정해야 하며 Safari 브라우저에는 여전히 공백이 있습니다.

제거하다

문자 간격 letter-spacing:-8px, 불충분: 이것은 또한

안에 문자 공간이 있으므로

내부의 문자 간격은 기본 letter-spacing:normal로 설정됩니다.

17. CSS3의 새로운 기능

다양한 css 선택자 추가(:not(.input): 클래스가 'input'이 아닌 모든 노드): 속성 선택자, 의사 클래스 선택자, 의사 요소 선택자, 기본 선택자

세 가지 테두리 속성

border-radius: 둥근 테두리 만들기

border-shadow: 요소에 그림자 추가

border-image: 이미지를 사용하여 테두리를 그립니다.

배경

background-clip: 배경 그리기 영역 결정

background-origin: border-box, padding-box, content-box 왼쪽 상단부터 설정 시작

background-size: 배경 이미지의 크기를 조정합니다.

background-break: 요소를 여러 개의 독립된 상자로 나눌 수 있습니다.

문자

word-wrap: normal|break-word 브라우저의 기본 줄 바꿈을 사용합니다.

text-overflow: 현재 줄이 표시할 지정된 컨테이너의 경계를 초과하는 방법을 설정하거나 검색합니다. 이 속성은 두 개의 값으로 구성됩니다.

클립: 텍스트 자르기

줄임표: 잘린 텍스트를 나타내는 줄임표 표시

text-shadow: 텍스트에 그림자를 적용할 수 있습니다. 수평 그림자, 수직 그림자, 흐림 거리 및 그림자 색상을 지정하는 기능

text-decoration: CSS3는 텍스트의 더 깊은 렌더링을 지원하기 시작했으며 제공할 수 있는 세 가지 특정 속성이 있습니다.

text-fill-color: 텍스트 내부의 채우기 색상을 설정합니다.

text-stroke-color: 텍스트 경계 채우기 색상 설정

text-stroke-width: 텍스트 테두리 너비 설정

색상(새 색상 표현 rgba 및 hsla)

rgba는 두 부분으로 나뉩니다. rgb는 색상 값, a는 투명도입니다.

hsla는 네 부분으로 나뉩니다. h는 색조, s는 채도, l은 밝기, a는 투명도입니다.

전환 전환, 변형 변환, 애니메이션 애니메이션

플렉스 탄성 레이아웃, 그리드 그리드 레이아웃

미디어 쿼리

18. 이미지 형식 만들기(간단한 설명)

BMP: 무손실 비트맵이며 인덱스 및 직접 색상을 모두 지원합니다.

GIF: 무손실 인덱스 색상 비트맵입니다. LZW 압축 알고리즘으로 인코딩

JPEG: 다이렉트 컬러의 손실 비트맵입니다. JPEG 사진의 장점은 직접 색상을 사용하므로 더 풍부한 색상을 얻을 수 있다는 것입니다.

PNG-8: 인덱스 색상을 사용하는 무손실 비트맵입니다.

PNG-24: 직접 색상을 사용하는 무손실 비트맵입니다.

SVG: 무손실 벡터 그래픽입니다. SVG는 SVG 그림이 선과 곡선 및 이를 그리는 수단으로 구성되어 있음을 의미하는 벡터 다이어그램입니다.

WebP: Google에서 개발한 새로운 이미지 형식으로 WebP는 손실 압축과 무손실 압축을 모두 지원하고 직접 색상을 사용하는 비트맵입니다.

19. 0.5px로 직선을 그리면?

테스트는 css3의 변환입니다.

height: 1px;
transform: scale(0.5);

20. 계산, 지원 및 미디어의 의미와 용도는 무엇입니까?

@support는 주로 브라우저가 CSS의 특정 속성을 지원하는지 여부를 감지하는 데 사용됩니다. 다른 스타일 세트를 제공할 수도 있습니다.

calc() 함수는 길이 값을 동적으로 계산하는 데 사용됩니다. calc() 함수는 "+", "-", "*", "/" 연산을 지원합니다.

@media 쿼리를 사용하면 다양한 미디어 유형에 대해 다양한 스타일을 정의할 수 있습니다.

21. px와 em, rem의 차이점은 무엇입니까?

px: 절대 길이 단위, 픽셀 px는 디스플레이의 화면 해상도에 상대적임
em: 상대 길이 단위, 현재 개체의 텍스트 글꼴 크기에 상대적임, em의 값은 고정되지 않으며 em은 부모 요소의 값 font-size(참조는 부모 요소의 글꼴 크기)
rem: html 루트 요소의 글꼴 크기에 상대적

22. 1rem, 1em, 1vh, 1px, vmin 및 vmax는 무엇을 나타냅니까?

rem
rem은 루트 요소 요소에 상대적인 모든 길이입니다. 일반적인 방법은 html 요소의 글꼴 크기를 설정한 다음 다른 요소의 길이 단위를 rem으로 설정하는 것입니다.

em
하위 요소의 글꼴 크기의 em은 상위 요소의 글꼴 크기를 기준으로 하며,
요소의 너비/높이/여백/여백은 em을 사용하는 경우 요소의 글꼴 크기를 기준으로 합니다.

vw/vh
의 풀네임은 Viewport Width, Viewport Height로 창의 폭과 높이는 화면의 폭과 높이의 1%에 해당하지만 폭을 다룰 때는 % 단위가 더 적절하고, vh 단위는 높이를 다룰 때 더 좋습니다.

px
px 픽셀(픽셀). 상대 길이 단위. Pixel px는 모니터의 화면 해상도에 상대적입니다.
일반 컴퓨터의 해상도는 {1920 1024}이고 다른 해상도는
1920 1024입니다. 전자는 전체 화면 너비가 1920픽셀이고 후자는 높이가 1024픽셀입니다.

vmin/vmax: 창의 높이와 너비의 최소값을 기준으로/창의 높이와 너비의 최대값을 기준으로 합니다.

창 높이가 1080이고 너비가 1920이면. 1vmin=1080px/100=10.8px 1vmax=1920px/100=19.2px.

23. CSS가 삼각형을 그린다?

이것은 간단한 css 테스트입니다.컴포넌트 라이브러리를 사용하는 동안 기본 css를 잊지 마십시오.

.a {
    width: 0;
    height: 0;
    border-width: 100px;
    border-style: solid;
    border-color: transparent #0099CC transparent transparent;
    transform: rotate(90deg); /*顺时针旋转90°*/
}
<div class="a"></div>

24. 요소는 수평 및 수직 중앙에 배치됩니다.

위치 지정 사용 +margin:auto

포지셔닝 + 여백 사용: 음수 값

포지셔닝 + 변환 사용

테이블 레이아웃

플렉스 레이아웃

그리드 레이아웃

25. 반응형 레이아웃의 원칙

What is Responsive: 웹 페이지 디자인 레이아웃, 페이지의 디자인 및 개발은 사용자 행동 및 장치 환경(시스템 플랫폼, 화면 크기, 화면 방향 등)에 따라 그에 따라 반응하고 조정되어야 합니다.

기본 원칙: 처리를 위해 미디어 쿼리를 통해 다양한 장치 화면 크기 감지 모바일 단말기를 처리하려면 페이지 헤드에 메타 선언 뷰포트가 있어야 합니다.

실현 방법

미디어 쿼리

백분율 레이아웃

vw/vh

렘

26. CSS 포지셔닝 방법은?

static: 요소 상자가 정상적으로 생성됩니다. 블록 수준 요소는 문서 흐름의 일부로 직사각형 상자를 생성하는 반면 인라인 요소는 상위 요소 내에 배치할 하나 이상의 라인 상자를 만듭니다.

상대적: 요소 상자가 특정 거리만큼 오프셋됩니다. 요소는 위치 지정되지 않은 모양을 유지하고 원래 차지했던 공간도 유지됩니다.

절대: 요소 상자가 문서 흐름에서 완전히 제거되고 포함 블록을 기준으로 배치됩니다. 컨테이닝 블록은 문서의 다른 요소이거나 초기 컨테이닝 블록일 수 있습니다. 일반적인 문서 흐름에서 이전에 요소가 차지했던 공간은 요소가 존재하지 않는 것처럼 닫힙니다. 요소는 원래 일반 흐름에서 생성한 상자 유형에 관계없이 블록 수준 상자를 생성하도록 배치됩니다.

고정: 요소 상자는 위치를 절대값으로 설정하는 것처럼 동작하지만 포함하는 블록은 뷰포트 자체입니다.

27. css sprite(스프라이트 이미지, 스프라이트 이미지)란 무엇이며 장단점은 무엇입니까?

CSSSprites(스프라이트 이미지)는 페이지에 포함된 모든 이미지를 큰 이미지로 포함하고 배경 위치 지정을 위해 CSS background-image, background-repeat 및 background-position 속성의 조합을 사용합니다.

이점:

HTTP 요청을 줄이고 페이지 로딩 속도를 크게 향상

이미지 정보 반복 증가, 압축률 증가, 이미지 사이즈 축소

스타일을 변경하는 것은 쉽습니다. 하나 또는 여러 장의 사진에서 색상이나 스타일을 수정하기만 하면 됩니다.

결점:

그림 병합 문제

번거로운 유지 보수

28. 장치 픽셀, css 픽셀, 장치 독립적 픽셀, dpr 및 ppi의 차이점은 무엇입니까?

设备像素: 물리적 픽셀이라고도 하며, 기기가 디스플레이를 제어할 수 있는 가장 작은 물리적 단위를 의미합니다. 풍부한 색상.

css像素: CSS에서 길이 단위인 px를 접미사로 사용하여 웹 프로그래밍에 적합합니다. CSS의 길이는 절대 단위와 상대 단위의 두 가지 범주로 나뉘며 px는 상대 단위에 속합니다.

设备独立像素: 장치 독립적인 논리 픽셀은 프로그램에 의해 제어될 수 있는 가상의 픽셀을 나타내는 일반적인 개념입니다. 우리가 자주 이야기하는 해상도는 장치의 독립적인 픽셀을 엄격히 지칭하지 않습니다. javascript에서는 window.screen.width/ window.screen.height를 통해 볼 수 있습니다.

dpr: 장치 독립 픽셀에서 장치 픽셀로의 변환 관계를 나타내는 장치 픽셀 비율

ppi: 인치당 픽셀 수를 나타내는 픽셀 밀도

29. 여백 및 패딩 사용 시나리오

테두리 밖에 여백을 추가해야 하고 여백에 배경(색상)이 필요하지 않은 경우 여백을 사용합니다.

여백은 테두리에 공백을 추가해야 하고 공백에 배경(색상)이 필요할 때 사용합니다.

30. line-height, 할당방법의 이해

개념:

line-height 속성은 줄 사이의 거리(line height)를 설정하는데, 직설적으로 말하면 텍스트의 두 단락 사이의 거리를 설정하는 것입니다. 컨테이너에서 텍스트를 수직으로 가운데에 배치할 수 있습니다.

원칙:

div가 위쪽 여백, 콘텐츠 및 아래쪽 여백의 세 부분으로 나뉜다는 것을 이해할 수 있습니다. 예: div 높이가 100px이고 글꼴이 16px인 경우 위쪽 및 아래쪽 여백은 (100px-16px)/2로 계산됩니다.

할당 방법:

단위 포함: px고정 값 em이며 font-size자체 라인 높이를 계산하기 위해 상위 요소의 값을 참조합니다.

순수한 숫자: 미래 세대에 비율을 전달할 것입니다. 예를 들어 부모 요소의 줄 높이가 이고 1.5자식 요소의 글꼴이 이면 18px자식 요소의 줄 높이는 입니다.1.5 * 18 = 27px

백분율: 계산된 값을 자손에게 전달

31. BFC에 대한 당신의 이해에 대해 말해주세요. 발동 조건? 애플리케이션 시나리오?

개념: BFC는 페이지의 렌더링 영역이며 고유한 렌더링 규칙 집합이 있는 블록 수준 서식 컨텍스트입니다. BFC의 목적은 외부 세계와 완전히 독립된 공간을 형성하는 것입니다.让内部的子元素不会影响到外部的元素

트리거링 조건:

루트 요소, HTML 요소

플로팅 요소: 플로트 값은 왼쪽, 오른쪽

오버플로 값은 보이지 않고 자동, 스크롤, 숨김

inline-block, inltable-cell, table-caption, table, inline-table, flex, inline-flex, grid, inline-grid 디스플레이

위치 값은 절대값 또는 고정값입니다.

애플리케이션 시나리오:

겹치는 여백 방지

명확한 내부 플로트

적응형 다중 열 레이아웃

32. 오른쪽에 적응형 2열 레이아웃을 구현하는 방법은 무엇입니까? 3열 레이아웃 중간에 적응?

两栏布局：

float를 사용하여 왼쪽 열을 왼쪽에 띄우고 오른쪽 margin-left를 사용하여 왼쪽 열의 너비를 확장합니다.BFC를 상위 요소에 추가하고 overflow: hidden으로 활성화합니다.

플렉스 레이아웃

三栏布局：

다음 3가지 방식의 원리는 2열 레이아웃의 첫 번째 방식과 동일하다.

양쪽에 플로트를 사용하고 중간에 여백을 사용하십시오.

양쪽에 절대값을 사용하고 중간에 여백을 사용하십시오.

양쪽에 부동 및 음수 마진 사용

플렉스 레이아웃

디스플레이: 테이블 구현

display: table을 테이블로 설정하고 table-layout: fixed`를 설정하여 열 너비가 자동으로 계산되지 않고 자체적으로 결정됨을 나타냅니다.

내부 레이어의 왼쪽, 중간 및 오른쪽은 display: table-cell에 의해 테이블 셀로 설정됩니다.

좌우 고정 폭 설정, 중간 폭 설정 : 100%로 나머지 폭 채우기

그리드 그리드 레이아웃

33. flexbox(탄력적인 상자 레이아웃 모델)와 적용 가능한 시나리오에 대해 이야기해 주세요.

이해: 플렉스 레이아웃은 "탄력적인 레이아웃"을 의미하며 간단하고 완전하며 반응이 빠른 방식으로 다양한 페이지 레이아웃을 실현할 수 있습니다. 기본적으로 컨테이너에는 90도 관계에 있는 주축과 교차축의 두 축이 있습니다. 항목은 기본적으로 주축을 따라 배열되며, flex-direction주축의 방향은 에 의해 결정됩니다.

속성:

flex-direction은 기본 축의 방향을 결정합니다.

flex-wrap은 컨테이너의 항목을 래핑할 수 있는지 여부를 결정합니다.

감싸다, 감싸다

주 축에서 justify-content 항목 정렬

flex-start(기본값): 왼쪽 정렬

flex-end: 오른쪽 정렬

중심: 중심

space-between: 양쪽 끝이 정렬되고 항목 사이의 간격이 동일합니다.

space-around: 두 항목이 양쪽에 동일한 간격으로 배치됩니다.

align-items 항목이 교차 축에 정렬되는 방식

flex-start: 교차 축의 시작점을 정렬합니다.

flex-end: 교차축의 끝을 맞춥니다.

center : 교차축의 중간점 정렬 垂直居中

기준선: 항목에 있는 첫 번째 텍스트 줄의 기준선 정렬

늘이기(기본값): 항목에 높이가 설정되어 있지 않거나 자동으로 설정된 경우 전체 컨테이너의 높이를 차지합니다.

정렬 내용

34. 그리드 그리드 레이아웃 소개

이해: Grid레이아웃은 그리드 레이아웃으로 2차원 레이아웃 방식으로 수직과 수평으로 교차하는 두 세트의 그리드 라인으로 구성된 프레임워크 레이아웃 구조로 행과 열을 동시에 처리할 수 있습니다.

컨테이너 속성:

디스플레이: grid 컨테이너는 블록 수준 요소/inline-grid 컨테이너는 인라인 요소입니다.

grid-template-columns 속성, grid-template-rows 속성:

열 너비와 행 높이를 여러 행과 열로 설정합니다. 너비와 높이가 반복되는 경우 repeat(3,200px)를 사용하여 3개의 행과 열, 200px의 너비와 높이를 나타낼 수 있습니다.

그리드-행-갭 속성, 그리드-열-갭 속성, 그리드-갭 속성

행과 열 사이의 간격을 설정합니다. grid-gap은 둘 다의 줄임말입니다.

grid-template-areas 속성: 영역을 정의하는 데 사용됩니다.

grid-auto-flow 속성: 그리드를 나눈 후 컨테이너의 하위 요소가 순서대로 정렬되며 순서는 grid-auto-flow에 의해 결정됩니다.

프로젝트 속성:

grid-column-start 속성, grid-column-end 속성, grid-row-start 속성 및 grid-row-end 속성: 그리드 항목이 있는 4개의 테두리와 어느 그리드 선이 있는지를 각각 지정합니다. 항목의 위치 지정

grid-area 속성: 이 속성은 항목이 배치되는 영역을 지정합니다. 영역은 grid-template-areas 속성으로 나뉩니다.

justify-self 속성, align-self 속성 및 place-self 속성

35. CSS3 애니메이션이란 무엇입니까?

전환은 그라디언트 애니메이션 전환 애니메이션을 구현합니다. 자세한 설명

변형 변형 애니메이션 변형 속성 상세 설명

animation 사용자 지정 애니메이션 애니메이션에 대한 자세한 설명

36. 리플로우와 다시 그리기를 이해하는 방법은 무엇입니까? 어떤 상황에서 발동되나요?

리플로우: 레이아웃 엔진은 다양한 스타일을 기반으로 페이지에서 각 상자의 크기와 위치를 계산합니다.

다시 그리기: 상자 모델의 위치, 크기 및 기타 속성을 계산한 후 브라우저는 각 상자의 특성에 따라 그립니다.

트리거링 조건:

썰물:

보이는 DOM 요소 추가 또는 제거

요소의 위치가 변경됩니다.

요소의 크기 변경(여백, 내부 테두리, 테두리 크기, 높이 및 너비 등 포함)

텍스트 변경 또는 이미지와 같은 콘텐츠 변경이 다른 크기의 다른 이미지로 대체됨

페이지가 렌더링되기 시작할 때(피할 수 없음)

브라우저의 창 크기가 변경됩니다(리플로우는 뷰포트의 크기를 기반으로 요소의 위치와 크기를 계산하기 때문입니다).

다시 그리기 ------触发回流一定会触发重绘

색상 수정

텍스트 방향 수정

그림자 수정

37. 최적화를 해야 한다면 성능을 향상시키기 위한 CSS의 방법은 무엇입니까?

폴드 크리티컬 CSS 위의 인라인

CSS 표현 피하기

CSS를 비동기식으로 로드

리소스 압축

선택자를 현명하게 사용

box-shadow/// 투명도/ 등과 같은 값비싼 속성 border-radius의 사용 감소filter:nth-child

@import를 사용하지 마십시오

38. 한 줄/여러 줄 텍스트 오버플로의 줄임표 스타일을 구현하는 방법은 무엇입니까?

한 줄 텍스트 오버플로

white-space: 한 줄에 표시할 텍스트를 설정하고 래핑할 수 없습니다.

overflow: 텍스트 길이가 제한된 너비를 초과하면 초과 내용이 숨겨집니다.

text-overflow: 텍스트가 오버플로될 때 트리밍된 텍스트를 나타내기 위해 줄임표가 표시되도록 지정합니다.

클립: 개체 내 텍스트의 오버플로 부분이 잘린 경우

줄임표: 개체 내부의 텍스트가 넘칠 때 줄임표 표시(…)를 표시합니다.

text-overflowoverflow:hidden및 인 경우 white-space:nowrap에만 적용됩니다.

여러 줄 텍스트 오버플로 생략

높이 기반 자르기 – 의사 요소 + 위치 지정

position: relative: 의사 요소의 절대 위치 지정

overflow: hidden: 텍스트가 제한된 너비를 초과하여 콘텐츠를 숨김)

line-height: 20px: 요소의 높이와 결합하여 높이가 고정되었을 때 줄 높이를 설정하고 표시되는 줄 수를 제어합니다.

height: 40px: 현재 요소의 높이 설정

::after {} : 스타일 줄임표 – 의사 요소 설정

position: absolute: 줄임표의 절대 위치 지정

콘텐츠:"…"

줄 수를 기준으로 자르기 - 순수 CSS

-webkit-line-clamp: 2: 블록 요소에 표시되는 텍스트 줄 수를 제한하는 데 사용됩니다. 이 효과를 얻으려면 다른 WebKit 속성과 결합해야 합니다.)

디스플레이: -webkit-box: -webkit-line-clamp와 결합하여 객체가 유연한 상자 모델로 표시됩니다.

-webkit-box-orient: vertical: -webkit-line-clamp와 함께 사용하여 플렉스 박스 객체의 하위 요소 배열을 설정하거나 검색합니다.

overflow: hidden: 텍스트가 제한된 너비를 초과하여 콘텐츠를 숨깁니다.

text-overflow: 줄임표: 여러 줄 텍스트의 경우 줄임표 "..."를 사용하여 넘치는 텍스트를 숨깁니다.

39. Chrome 지원 텍스트를 12px보다 작게 만드는 방법은 무엇입니까? 차이점?

크롬 중국어 버전은 기본적으로 페이지의 최소 글꼴 크기를 12픽셀로 설정하며 영어 버전에는 제한이 없습니다.

해결책:

줌 : 실제 크기에 속하는 페이지의 요소 크기를 변경할 수 있는 "줌"

-webkit-transform:scale(): 브라우저의 경우 접두사를 chrome추가 하고 이 속성을 사용하여 확장webkittransform:scale()

-webkit-text-size-adjust:none: 이 속성은 장치(브라우저)에 따라 텍스트 크기를 자동으로 조정할지 여부를 설정하는 데 사용됩니다.

차이점:

Zoom비표준 속성, 호환성 문제가 있음, 확대/축소는 요소가 차지하는 공간의 크기를 변경하여 재배열을 트리거함

-webkit-transform:scale()대부분의 최신 브라우저에서 지원하며, 영어, 숫자, 중국어에도 유효합니다 확대/축소는 요소가 차지하는 공간을 변경하지 않으며 페이지 레이아웃은 변경되지 않습니다

-webkit-text-size-adjust구글 크롬은 버전 요구 사항이 있으며 27 이후에는 이 속성에 대한 지원이 취소되며 영어와 숫자에만 적용됩니다.

40. Css 사전 프로그래밍 언어에 대한 이해도를 알려주십시오. 차이점은 무엇입니까?

이해: Css언어가 변수, 믹스인, 함수 등의 기능이 추가되어 Css유지 관리 및 용이성이 향상되었습니다. 기본적으로 전처리는 Css. 맞춤 문법 세트와 파서를 포함합니다. 이러한 문법에 따라 자신만의 스타일 규칙을 정의할 수 있습니다. 이러한 규칙은 결국 파서를 통해 해당 Css파일을

다음은: sass, less,stylus

less와 sass 비교:

같은 점:

우선 sass와 less는 모두 css 사전 컴파일된 처리 언어입니다.믹스인, 매개 변수, 중첩 규칙, 작업, 색상, 네임스페이스, 범위, JavaScript 할당 등을 도입하여 css 개발 효율성을 가속화합니다.물론 둘 다 할 수 있습니다. gulp, grunt 등의 프론트엔드 빌드 도구 사용

차이점:

Less는 JavaScript를 기반으로 하며 클라이언트 측에서 처리되므로 설치 시 npm을 사용하십시오.

Sass는 Ruby 기반이므로 서버에서 처리

덜의 장점과 단점

장점: less는 간단하고 사용하기 쉽습니다. css의 기본 확장에 속합니다. less는 정적 인터페이스에서 스타일을 작성하는 데 더 적합합니다.

단점: JavaScript 엔진은 코드를 처리한 다음 수정된 CSS를 브라우저에 출력하는 데 추가 시간이 필요합니다.

사스의 장점과 단점

장점: 강력하고 풍부한 확장 Sass는 다른 스타일을 대체하기 위해 논리가 필요한 게임 또는 기타 효과에 적합합니다.

단점: 초보자에게 복잡하고 비우호적임

41. FOUC란? 그것을 피하는 방법?

FOUC: 스타일이 지정되지 않은 콘텐츠의 깜박임은 문서 스타일의 단기 실패라고도 할 수 있습니다. 주로 HTML이 로드되었지만 스타일 시트가 로드되지 않은 후 스타일 시트가 다시 로드되어 발생하는 깜박임 현상을 나타냅니다.

피하는 방법:

스타일 시트 전면 : 브라우저 렌더링 순서에 따라 CSS가 도입되거나 삽입됨

@import를 사용하지 않으려면 링크를 사용하십시오 .

42. 청산 플로팅 방식의 장점과 단점은 무엇입니까?

추가 라벨 방법: 플로트를 지우려는 사람을 위해 플로트 뒤에 빈 라벨을 추가합니다.

장점 : 이해하기 쉽고 작성하기 쉽다. (권장하지 않음)

단점: 무의미한 태그가 많이 추가되고 구조가 상대적으로 빈약하다.

부모가 추가한 오버플로 방법: BFC를 트리거하여 명확한 플로팅 효과를 얻을 수 있습니다.

장점: 간단하고 적은 코드, 우수한 브라우저 지원

단점: 콘텐츠가 늘어나면 자동 줄 바꿈 없이 콘텐츠가 숨겨지기 쉽고 오버플로우가 필요한 요소를 표시할 수 없습니다. 초과 크기가 숨겨지기 때문에 위치와 함께 사용할 수 없습니다.

after 의사 요소를 사용하여 플로트를 지웁니다. :after 메소드는 빈 요소의 업그레이드된 버전이며 별도로 태그를 지정할 필요가 없다는 장점이 있습니다.

장점: 클로즈드 플로팅이라는 개념에 맞게 구조가 의미론적으로 정확하고 이상한 문제가 발생하기 쉽지 않음(현재: Tencent, Netease, Sina 등 대형 웹사이트 사용)

단점: IE6-7이 지원하지 않기 때문에

43. 웹 페이지에서 홀수 또는 짝수 글꼴을 사용해야 합니까? 왜?

짝수는 나머지 웹 디자인과 비례 관계를 형성하기가 상대적으로 쉽습니다.

44. 애니메이션을 수동으로 작성해야 하는 경우 최소 시간 간격은 얼마라고 생각하며 그 이유는 무엇입니까? (알리)

대부분의 디스플레이의 기본 빈도는 초당 새로 고침 횟수 60Hz이므로 이론적인 최소 간격은1601/60*1000ms ＝ 16.7ms

45. base64의 원리와 장단점은?

이점은 암호화될 수 있으므로 HTTTP요청이 줄어듭니다.

CPU단점은 코덱을 소모해야 한다는 것입니다.

46. 유동적인 레이아웃, 성배 레이아웃, 이중 비행 날개 레이아웃?

성배 레이아웃과 이중 비행 날개 레이아웃의 차이점:

같은 점

둘의 기능은 동일하며 둘 다 양쪽에 고정 너비와 중간에 적응 너비가 있는 3열 레이아웃을 달성 하고 중간 부분은 HTML 코드 앞에 작성해야 합니다. 먼저 로드되고 렌더링됩니다.

차이점

주요 차이점은 중간 부분이 막히는 문제를 해결할 때 채택하는 솔루션이 다르다는 것입니다. 성배 레이아웃은 부모 요소에 padding-left 및 padding-right를 설정하고, 왼쪽 및 오른쪽 콘텐츠에 대한 위치를 상대적으로 설정하고, 왼쪽 및 오른쪽 콘텐츠를 이동하여 콘텐츠를 왼쪽으로 만드는 것입니다. 오른쪽은 잘 표시되고 이중 비행 날개 레이아웃 중간에 있는 div의 외부 레이어에는 콘텐츠를 배치할 또 다른 div가 설정되고 중간 div에는 margin-left 및 margin-right가 설정됩니다.

47. postcss의 역할

PostCSS는 JS 플러그인을 사용하여 CSS를 변환하는 도구입니다. 이러한 플러그인은 변수 및 믹스인을 지원하고 향후 CSS 구문, 인라인 이미지 등을 트랜스파일할 수 있습니다.

효과:

향후 css 지원: cssnext를 사용하여 향후 css 작성(postcss-cssnext 플러그인)

컴파일 속도가 크게 향상되었습니다. PostCSS는 전처리기보다 3-30배 빠르다고 주장합니다.

풍부한 플러그인 시스템, 손을 자유롭게.

범위를 구성 요소로 제한하는 css의 모듈화는 전역 범위의 문제를 피하고 더 이상 스타일 이름의 중복에 대해 걱정할 필요가 없습니다.

Postcss는 css를 동적으로 컴파일하는, 즉 런타임에 컴파일하는 css 포스트 프로세서입니다.

48. CSS에 콘텐츠 속성이 있습니까? 어떤 효과가 있습니까? 응용 프로그램은 무엇입니까?

css의 속성은 생성된 콘텐츠를 삽입하는 데 사용되는 의사content 요소에 특별히 적용됩니다 . before/after가장 일반적인 응용 프로그램은 의사 클래스를 사용하여 플로트를 지우는 것입니다.

49. 수평 센터링 방법

요소가 인라인 요소입니다. 상위 요소를 설정합니다.text-align:center

요소 너비가 고정된 경우 왼쪽과 오른쪽을 margin로 설정할 수 있습니다 auto.

절대 위치 지정 및 이동:absolute + transform

flex-box레이아웃을 사용하고 justify-content속성을 중심으로 지정

display로 설정tabel-ceil

50. CSS3의 애니메이션과 전환에 대해 자세히 이야기하십시오.

animation

css3 animation는 css3의 새로운 애니메이션 속성으로, 이 css3 애니메이션의 각 프레임은 @keyframes전달하여 선언하고, keyframes애니메이션의 이름을 선언하고, 애니메이션 프로세스를 from, 또는 백분율로 정의합니다.to

애니메이션 요소의 각 프레임 상태는 animation-name이 애니메이션을 참조하는 데 사용됩니다.동시에 css3 애니메이션은 애니메이션 지속 시간, 애니메이션 시작 시간, 애니메이션 방향, 애니메이션 루프 수를 정의할 수도 있습니다. , 애니메이션이 재생되는 방식.

이러한 관련 애니메이션 하위 속성은 다음과 같습니다.

animation-name애니메이션 이름 정의

animation-duration재생할 애니메이션의 지속 시간을 정의합니다.

animation-delay애니메이션 재생 지연 시간을 정의합니다.

animation-direction애니메이션의 재생 방향을 정의합니다.

animation-iteration-count재생 횟수 정의

animation-fill-mode애니메이션 재생 후 상태 정의

animation-play-state일시정지, 실행 등과 같은 재생 상태를 정의합니다.

animation-timing-function정속 재생, 감속 재생 등과 같은 재생 모드를 정의합니다.

transition

transition-property: 전환 효과 설정을 위한 css 속성 이름을 지정합니다.

transition-duration : 전환 효과를 완료하는 데 걸리는 시간(초 또는 밀리초)을 지정합니다.

transition-timing-function : 속도 효과의 속도 곡선을 지정하여 전환 기능을 지정합니다.

transition-delay : 나타나기 시작하는 지연 시간을 지정합니다.

51. CSS 해킹이란 무엇입니까? 일반적인 해킹

설명: CSS 스타일에 특수 기호를 추가하여 브라우저마다 다른 기호를 인식할 수 있습니다(브라우저에서 어떤 기호를 인식하는지에 대한 표준이 있으며 CSS 해킹은 이 표준을 기억하도록 하는 것입니다). 목적을 달성하기 위해 다양한 CSS 스타일 적용

일반적인 해킹:

속성 수준 해킹: 예를 들어 IE6은 밑줄 " "과 별표 "*"를 인식할 수 있고, IE7은 별표 "*"를 인식할 수 있지만 밑줄 " "은 인식할 수 없으며 firefox는 둘 다 인식할 수 없습니다.

선택기 수준 해킹: 예를 들어 IE6은 html .class{}를 인식할 수 있고 IE7 은 +html .class{} 또는 *:first-child+html .class{}를 인식할 수 있습니다 .

IE 조건부 주석 해킹: IE 조건부 주석은 Microsoft IE5에서 제공하는 비표준 논리 문입니다.

52. 브라우저는 CSS 선택자를 어떻게 파싱합니까?

브라우저가 CSS 선택자를 구문 분석하는 방식은 오른쪽에서 왼쪽입니다.

53. 분리된 스타일 모듈을 작성하고 아이디어를 표현하는 방법

CSS는 공개 CSS와 비즈니스 CSS의 두 부분으로 나눌 수 있습니다.

웹 사이트의 색 구성표, 글꼴 및 상호 작용은 공개 CSS로 추출됩니다. CSS 명명의 이 부분은 특정 비즈니스와 관련되어서는 안 됩니다.

비즈니스 CSS의 경우 통일된 이름을 지정하고 공통 접두사를 사용해야 합니다. 객체 지향 CSS를 참조할 수 있습니다.

54. 요소의 세로 비율 설정은 컨테이너의 높이를 기준으로 합니까?

不是

세로 및 가로 비율 설정은 모두 컨테이너를 기준으로 합니다 宽度. 마진과 패딩으로 확인할 수 있습니다.

55. 전체 화면 스크롤링의 원리는 무엇입니까? CSS의 어떤 속성이 사용됩니까?

원리는 그림 캐러셀의 원리와 유사하며 숨겨진 부분을 넘어 스크롤하면 표시됩니다.

가능한 CSS 속성:overflow:hidden; transform:translate(100%, 100%); display:none;

56. 요소를 부동으로 설정한 후 요소의 표시 값은 어떻게 변경됩니까?

요소가 부동으로 설정된 후 요소의 display값은 자동으로block

57. display:inline-block 디스플레이 간격은 언제입니까?

인접한 inline-block요소가 줄 바꿈 또는 공백으로 구분될 때 간격이 발생합니다.

inline-block수평 이 아닌 요소 inline-block도 수평 간격을 갖도록 설정됨

의 도움으로 수직 간격을 vertical-align:top;제거

수직 간격을 없애기 위해 상위 수준의 하위 요소 font-size：0;에

li같은 줄에 태그를 배치하면 세로 간격을 없앨 수 있지만 코드의 가독성이 떨어집니다.

58. pageX, clientX, screenX, offsetX의 차이점은 무엇입니까?

pageX/Y: 말려진 본문 부분의 길이를 포함한 전체 페이지에 대해

clientX/Y: 현재 본문 가시 영역에서 클릭 위치의 x, y 좌표

screenX/Y: 현재 컴퓨터 화면에서 클릭 위치의 x, y 좌표

offsetX/Y: 위치 지정이 있는 상위 상자의 x, y 좌표 기준

여기에 이미지 설명 삽입

59. IE 버전이 다른 브라우저의 호환성 테스트는 어떻게 하나요?

도구를 사용하여 IE 버전을 전환한 다음 IE 브라우저에서 테스트를 실행합니다.

60. 경계 반경 상세 설명

개발 과정에서 종종 border-radius: 50%를 설정하여 정사각형을 통과하는 원을 구현합니다.

경계 반경 매개변수 선택:

border-radius: 10px; 같은 크기의 둥근 모서리 4개를 만듭니다.

border-radius:10px 15px 10px 15px; 네 개의 값은 왼쪽 위 모서리, 오른쪽 위 모서리, 오른쪽 아래 모서리 및 왼쪽 아래 모서리를 나타냅니다.

border-radius:10px 15px; 첫 번째 값은 왼쪽 위 모서리와 오른쪽 아래 모서리를 나타내고 두 번째 값은 오른쪽 위 모서리와 왼쪽 아래 모서리를 나타냅니다.

border-radius:10px 15px 5px; 첫 번째 값은 왼쪽 상단 모서리를 나타내고 두 번째 값은 오른쪽 상단 모서리와 왼쪽 하단 모서리를 나타내며 세 번째 값은 오른쪽 하단 모서리를 나타냅니다.

61. CSS로 페이지의 글꼴을 더 선명하고 얇게 만드는 방법은 무엇입니까?

-webkit-font-smoothing: 앤티앨리어싱;

63. CSS3 그라디언트?

CSS3는 두 가지 유형의 그래디언트를 정의합니다.

선형 그라데이션 - 아래/위/왼쪽/오른쪽/대각선 방향

방사형 그라데이션 - (방사형 그라데이션) - 중심으로 정의

선형 그라데이션:

문법: background-image: linear-gradient방향, color-stop1, color-stop2,...);

방향: 그래디언트 방향/각도, 옵션(45deg, to bottom, to top, to right, to left, to left top...)

color-stop: rgba 색상을 선택하여 투명도를 설정하거나 设置色标点区域예를 들면 다음과 같습니다. rgba(255,255,255,0.3) 20%

방사형 그라데이션:

설명: 배경 이미지: radial-gradient(위치의 모양 크기, 시작 색상, …, 마지막 색상);

모양 매개변수는 모양을 정의합니다. 값 원 또는 타원일 수 있습니다. 그 중 circle은 원을 나타내고 ellipse는 타원을 나타낸다. 기본값은 타원입니다.

크기: 주로 방사형 그래디언트의 끝 모양 크기를 결정하는 데 사용됩니다. 생략하면 기본값은 "farthest-corner"입니다.

at position start point: 키워드(가로 방향 – 왼쪽, 가운데, 오른쪽, 세로 방향 – 위, 가운데, 아래), 특정 값 또는 백분율이 될 수 있는 중심점의 위치.

64. 반응형 레이아웃과 적응형 레이아웃의 차이점은 무엇입니까?

반응형 레이아웃은 페이지의 자동 조정 및 최적화를 실현하기 위해 CSS 미디어 쿼리를 사용하여 다른 장치 또는 뷰포트 너비에 따라 다른 스타일을 설정하여 다른 화면 크기에 적응하는 것을 말합니다. 반응형 레이아웃은 데스크탑, 태블릿 및 휴대폰과 같은 여러 장치에서 웹 사이트가 최적으로 표시되도록 할 수 있습니다.

적응형 레이아웃은 화면 크기에 따라 적절한 레이아웃 방법을 선택하여 다른 장치에서 페이지가 더 아름답고 읽기 쉽게 보이도록 만드는 것을 말합니다. 적응 레이아웃은 상대적으로 더 고정되어 있습니다.페이지 레이아웃은 일반적으로 여러 고정 레이아웃으로 구성됩니다.반응형 레이아웃과 같이 스타일을 직접 변경하는 대신 다양한 화면 크기에서 표시하기 위해 다양한 레이아웃 조합을 선택합니다.

65. z-index가 실패하는 몇 가지 상황

position 속성이 설정되지 않았거나 값이 정적입니다. z-index 속성을 사용하려면 먼저 요소의 position 속성을 상대, 절대 또는 고정으로 설정해야 합니다. 그렇지 않으면 z-index가 설정되어 있어도 작동하지 않습니다.

부모 요소의 z-index 값이 자식 요소보다 큰 경우: 부모 요소와 그 자식 요소에 z-index가 설정되어 있는 경우 자식 요소의 z-index가 유효하지 않을 수 있습니다.

부동 요소의 유효하지 않은 Z-인덱스: 부동 요소를 사용할 때 Z-인덱스 속성이 작동하지 않을 수 있습니다. 이는 플로팅 자체가 특정 캐스케이딩 특성을 가지고 있고 플로팅 요소의 쌓임 순서가 문서 흐름의 순서에 따라 결정되기 때문입니다.

66. float 후 표시 값을 변경하시겠습니까?

차단하다

67. CSS의 앵커

<a name="go">来我这里</a>
......
<a href="#go">我来了</a>

id 속성을 사용하여 name 속성을 대체하고, id를 사용하여 기준점을 정의하고, 레이블을 찾을 수 있습니다. name 속성은 a 태그에 대해서만 찾을 수 있습니다.

68. 모바일에서 1px 문제 해결

css pseudo-elements::after + transfrom으로 크기 조정

장점 : 모든 모델 호환 가능, 실제 1px 구현, 모서리 라운딩 가능. 오래된 프로젝트에 좋습니다.

단점: 사후 의사 요소를 일시적으로 사용하여 플로팅 제거에 영향을 미칠 수 있습니다.

뷰포트의 스케일 값 설정

장점: 모든 모델과 호환되며 1px를 직접 작성하는 것이 더 편리할 수 없습니다.

단점: 새로운 프로젝트에 적용 가능, 오래된 프로젝트가 많이 변경될 수 있음.

컴포넌트 라이브러리 vant/ant-design-mobile 사용

69. 모바일 H5 개발 브라우저의 기본 좌우 슬라이딩 동작 방지

html{
    
    
    touch-action:none;
}
//此时上下左右都不可滑动
--------改动
html{
    
    
touch-action:none;
touch-action:pan-y;
}

70. CSS에서 포지셔닝 위치 및 변형 이동 요소 비교

성능 측면에서: 변환 성능이 위치보다 훨씬 높습니다.

번역으로 이동해도 요소는 여전히 원래 공간을 차지합니다. 위치별로 이동하면 위치가 변경되어 다시 그리기가 트리거됩니다.

71.margin-left：auto，margin-right：auto，margin：auto区别

여백-왼쪽:자동右对齐

여백 오른쪽: 자동左对齐

여백: 자동居中

72.css 전체 화면 스크롤

overflow-y；overflow-x；scroll-snap-type;scroll-snap-align;필수 속성

<style>
        html,
        body {
     
     
            height: 100%;
            margin: 0;
        }

        ul {
     
     
            margin: 0;
            /* scroll-behavior: smooth 让页面在滚动时拥有平滑的过渡效果，而不是瞬间跳转 */
            scroll-behavior: smooth;
            font-size: 40px;
            width: 100%;
            height: 100%;
            /* 
            overflow-y: auto 表示当内容超出元素的高度时，元素会显示垂直方向的滚动条以便用户浏览。如果内容不超出元素的高度，则不会显示滚动条。
            overflow-x: hidden 则表示当内容超出元素的宽度时，元素不会显示水平方向的滚动条，同时超出部分的内容也将被隐藏。
            */
            overflow-y: auto;
            overflow-x: hidden;
            border: 1px solid #000;
            /* 
            scroll-snap-type: y mandatory; 表示在垂直方向上开启滚动对齐功能，并强制要求元素对齐到滚动容器的边缘。这样可以确保每个子元素都在独立的、整数倍的位置停留，从而实现更加规整的页面布局。
            */
            scroll-snap-type: y mandatory;
            /*设置父级*/
            padding: 0;
        }

        li {
     
     
            height: 100%;
            width: 100%;
            flex-shrink: 0;
            /* 
            scroll-snap-align: center; 则表示对齐方式为中心对齐，当子元素的中心点（水平轴和垂直轴的中心点）与滚动容器的中心点重合时，就会触发对齐效果。
            */
            scroll-snap-align: center;
            /*子级设置*/
            text-align: center;
        }

        li:nth-child(1) {
     
     
            background-color: teal;
        }

        li:nth-child(2) {
     
     
            background-color: gold;
        }

        li:nth-child(3) {
     
     
            background-color: green;
        }
    </style>

	<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>