CSS에 관한 몇 가지 인터뷰 질문

이 글은 주로 CSS에 관한 인터뷰 질문을 공유하는데 참고할만한 가치가 있어 모두에게 도움이 되길 바랍니다. 편집자를 따라가서 살펴보겠습니다.

1 위쪽 및 아래쪽 여백이 겹치는 문제

겹치는 요소 주위를 컨테이너로 감싸고 컨테이너를 트리거하여 BFC를 생성합니다.
예:

<p class="aside"></p>
<p class="text">
    <p class="main"></p>
</p>
<!--下面是css代码-->
 .aside {
            margin-bottom: 100px;  
            width: 100px;
            height: 150px;
            background: #f66;
        }
        .main {
            margin-top: 100px;
            height: 200px;
            background: #fcc;
        }
         .text{
            /*盒子main的外面包一个p，通过改变此p的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/
            overflow: hidden;  //此时已经触发了BFC属性。
        }

주제 추천: 2020 CSS 면접 질문 요약(최신)

2 요소를 float로 설정한 후 요소의 표시 값은 어떻게 되나요?

자동으로 display:block

3으로 변경됩니다. 모바일 레이아웃에 미디어 쿼리를 사용해 본 적이 있나요?

미디어 쿼리를 통해 다양한 크기와 크기의 미디어에 대해 다양한 CSS를 정의하여 해당 장치의 디스플레이에 적응할 수 있습니다.

1. 93f0f5c25f18dab9d176bd4f6de5d30eInside36b1421f6d7c20af29481e8d5e090514代码全部写在一排

2. 浮动li中float：left

3. 在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px

20 display:inline-block 什么时候会显示间隙？

1. 有空格时候会有间隙 解决：移除空格

2. 여백이 양수인 경우 해결 방법: 여백에 음수 값을 사용하세요

3. font-size 사용 시 해결 방법: 글꼴 크기:0, 문자 간격, 단어 간격

21 예 높이 적응형 p는 내부에 두 개의 p가 있고 하나는 높이가 100px이고 다른 하나는 나머지 높이를 채울 것으로 예상됩니다

외부 p는 위치: 상대를 사용합니다. 적응형 높이 요구 사항이 있는 p는 위치: 절대를 사용합니다. ; 위쪽: 100px; 아래쪽: 0; 왼쪽: 0

22 png, jpg, gif 이미지 형식과 사용 시기를 설명하세요. webp에 대해 배운 적이 있나요?

1. png는 무손실 데이터 압축 비트맵 파일 형식인 휴대용 네트워크 그래픽(Portable Network Graphics)입니다. 장점은 압축률이 높고 색상이 좋습니다. 대부분의 장소에서 이용 가능합니다.

2. jpg는 사진에 사용되는 왜곡 압축 방법으로 톤과 색상의 부드러운 변화를 잘 구현하는 파괴적인 압축 방법입니다. www에서 사진을 저장하고 전송하는 데 사용되는 형식입니다.

3. gif는 8비트 색상으로 트루컬러 이미지를 재현하는 비트맵 파일 형식입니다.

4. webp 형식은 Google이 2010년에 출시한 이미지 형식입니다. 압축률은 jpg의 2/3에 불과하고 크기는 png보다 45% 작습니다. 단점은 압축 시간이 더 오래 걸리고 호환성이 좋지 않다는 점입니다. 현재 Google과 Opera에서는 이를 지원하지 않습니다.

23 본문 뒤에 쓰는 스타일 태그와 본문 앞에 쓰는 스타일 태그의 차이점은 무엇인가요?

페이지는 위에서 아래로 로드됩니다. 물론 스타일이 먼저 로드됩니다.
body 태그 뒤에 작성됩니다. 브라우저는 HTML 문서를 한 줄씩 파싱하기 때문에 마지막에 작성된 스타일 시트(개요 또는 스타일 태그에 작성된)를 파싱하면 브라우저가 이전 렌더링을 중지하고 로드 및 파싱을 기다리게 됩니다. . 스타일 시트가 다시 렌더링된 후 Windows의 IE에서 FOUC 현상(예: 스타일 오류로 인한 페이지 깜박임 문제)이 발생할 수 있습니다.

24 CSS 속성 오버플로 속성은 의 콘텐츠 영역 내용을 어떻게 정의합니까? ​​오버플로 요소가 처리되었나요?

파라미터가 스크롤되면 반드시 스크롤바가 나타납니다.
매개변수가 auto인 경우 하위 요소의 콘텐츠가 상위 요소보다 크면 스크롤 막대가 나타납니다.
매개변수가 표시되면 오버플로 콘텐츠가 상위 요소 외부에 나타납니다.
매개변수를 숨기면 오버플로가 숨겨집니다.

25 CSS Sprites를 설명하겠습니다

페이지에 포함된 모든 이미지를 하나의 큰 이미지로 포함시킨 다음 CSS 배경 이미지, 배경 반복 및 배경 위치 조합을 사용합니다. . CSS 스프라이트를 사용하면 웹페이지의 http 요청을 크게 줄일 수 있으므로 페이지 성능이 크게 향상됩니다. CSS 스프라이트는 이미지 바이트를 줄일 수 있습니다.

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

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