7가지 중요한 CSS 인터뷰 질문

Directory

• 1. CSS3의 상자 모델
• 2. CSS 스프라이트에 대해 이야기해 보겠습니다. 에프) 사진)
• 4. 포지션의 속성값은 무엇인가요?
• 5. PNG, GIF, JPG, WEBP의 차이점은 무엇이며 어떻게 선택하나요?
• 6. CSS 선택자는 무엇인가요? 우선 사항?
• 7.플로팅 관련
• (1) 플로트를 언제 클리어해야 하나요?
  • (2) 플로트를 클리어하는 방법은?

특별 추천

: 2020 CSS 면접 질문 요약(최신)

1 CSS3의 상자 모델

CSS3에는 표준 상자 모델, IE 상자의 두 가지 유형이 있습니다. model

표준 박스 모델과 IE 박스 모델의 차이점은 다음과 같습니다. 표준 박스 모델의 너비와 높이는 콘텐츠의 너비와 높이를 나타내고, IE 상자 모델은 콘텐츠, 콘텐츠 여백, 테두리 합계를 참조합니다.
CSS3에서는 box-sizing:border-box를 사용하여 일반 상자 모델을 IE 상자 모델로 변환할 수 있습니다. 때로는 상자의 너비와 높이를 설정했지만 테두리를 변경하여 상자의 크기를 변경하려는 경우 별도의 작업 없이 이를 IE 상자 모델로 변환할 수 있습니다. 매번 상자 내용물의 크기를 계산하십시오.

• box-sizeing:border-box将普通盒模型转化为IE盒模型。有时候我们已经设置了一个盒子的宽高，但是，如果想要改变border，这样盒子的大小就会发生改变，我们就可以将其转化为IE盒模型，就不用每次计算盒子内容大小了。

• 在盒子模型中

  • box-sizeing:content-box表示标准盒模型（默认值）
  • box-sizeing:border-box表示IE盒模型（也就是怪异盒模型）

除此之外，还有：Flex弹性伸缩盒模型

2. display:none与visibility:hidden的区别

这两个属性都是让元素隐藏不可见

区别：

（1）在渲染树中

• display:none会让元素完全中渲染树中消失，渲染的时候不会占据任何空间；
• visibility:hidden不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见

（2）继承

• display:none是非继承属性，他的子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示。
• visibility:hidden是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility:visible可以让子孙节点显示。

（3）修改常规文档流中的元素的display通常会造成文档的重排，但是修改visibility属性只会造成本元素的重绘

（4）如果使用读屏器，设置为display:none的内容不会被读取，设置为visibility:hidden的内容会被读取。visibility:hidden

3. 说一说CSS的sprite（精灵图）

概念：

精灵图就是将多个小图片拼接在一个图片中，使用的时候通过background-position

상자 모델에서

box-sizing:content-box는 표준 상자 모델을 나타냅니다(기본값)

box-sizing:border-box IE 상자 모델을 나타냅니다(이상한 상자 모델이라고도 함)
• 또한 다음이 있습니다:
Flex 탄력적 상자 모델

2. display:none과 visible:hidden의 차이점

두 속성 모두 요소를 숨깁니다 🎜🎜🎜차이: 🎜 🎜🎜 (1) 렌더링 트리에서 🎜🎜🎜display:none은 요소를 렌더링 트리에서 완전히 사라지게 만들고 렌더링할 때 어떤 공간도 차지하지 않습니다. 🎜🎜visibility:hidden는 렌더링 트리에서 요소를 사라지게 하지 않습니다. 렌더링된 요소는 해당 공간을 계속 차지하지만 콘텐츠는 표시되지 않습니다🎜🎜🎜(2) Inherited🎜🎜🎜<code>display:none는 상속되지 않는 속성입니다. 해당 하위 노드는 상위 노드와 함께 렌더링 트리에서 사라지며 하위 노드의 속성을 수정하여 표시할 수 없습니다. 🎜🎜<code>visibility:hidden은 상속된 속성입니다. hidden을 상속하기 때문에 하위 노드는 사라집니다. 표시됩니다. 🎜🎜🎜(3) 일반 문서 흐름에서 요소의 display를 수정하면 일반적으로 문서가 재정렬되지만 visibility 속성을 ​​수정하면 요소만 재정렬됩니다. to be reraw🎜 🎜(4) 스크린 리더를 사용하면 display:none으로 설정된 콘텐츠는 읽혀지지 않고, visibility:hidden으로 설정된 콘텐츠는 읽혀지지 않습니다. 읽을 수 있습니다. visibility:hidden🎜🎜3. CSS 스프라이트에 대해 이야기해 봅시다🎜🎜🎜개념: 🎜🎜🎜스프라이트를 사용할 때 여러 개의 작은 그림을 하나의 그림으로 연결하는 것입니다. 요소 크기는 표시해야 하는 배경 패턴을 조정합니다. 🎜🎜🎜장점: 🎜🎜🎜🎜 HTTP 요청 수를 줄여 페이지 로딩 속도를 어느 정도 향상시킵니다. 🎜🎜 각 이미지에 헤더 정보가 있으므로 이미지 크기를 줄입니다. 동일한 헤더 정보로 인해 이미지의 바이트 수가 줄어 스타일을 변경하는 것이 편리합니다. 하나 또는 몇 개의 이미지에서 이미지의 색상이나 스타일만 수정하면 되며 전체 웹페이지의 스타일을 변경할 수 있습니다. 변경되었습니다. 🎜🎜사진 이름을 지정하는 수고를 덜었습니다. 하나 또는 여러 장의 사진에 이름을 지정하세요.🎜🎜🎜🎜단점: 🎜🎜

• 유지관리가 더 번거롭습니다. 페이지 배경이 조금 바뀌면 병합된 이미지 전체를 수정해야 합니다.
• 병합은 더 번거롭고 질서정연하게 하나의 이미지로 병합해야 합니다. 불필요한 배경을 방지하세요
• 와이드스크린이나 고해상도 화면의 적응형 페이지에서 그림의 너비가 충분하지 않으면 배경이 깨질 수 있습니다

4. ?

속성 값	개요
absolute	정적 위치 지정이 아닌 상위 요소를 기준으로 위치가 지정된 절대 위치 요소 생성
relative	상대 위치가 지정된 요소 생성 원래 위치
fixed	브라우저 창을 기준으로 위치가 지정된 절대 위치 요소 생성
static	기본값, 위치 지정 없음, 요소가 일반 문서 흐름에 나타남
inherit	규정 position 속성의 값은 상위 요소

5. PNG, GIF, JPG, WEBP의 차이점과 선택 방법은 무엇인가요?

(1) GIF

• GIF 이미지는 8비트 인덱스만 저장하고, 최대 256가지 색상을 지원하며,
• 무손실 압축 사용, 더 작은 크기
• 투명도 및 간단한 애니메이션 지원

적용 대상: : 간단한 로고 색상, 아이콘, 와이어프레임, 단순 애니메이션

(2) JPG

• 손실 압축을 사용하므로 압축 품질을 제어할 수 있습니다.
• 직접 색상, 풍부한 색상을 사용합니다.
• 투명도를 지원하지 않습니다.

적용 대상: 색상 풍부한 사진 및 그라데이션 이미지

(3) PNG

• png-8은 무손실 압축 및 8비트 인덱스 색상을 기반으로 하는 비트맵 형식으로 GIF보다 투명도를 더 잘 지원하고 동일한 품질에서 크기가 더 작습니다. . 그러나 애니메이션은 지원되지 않습니다. 아이콘, 배경, 버튼에 적합합니다.
• png-24는 무손실 압축을 사용하며 다이렉트 컬러 기반의 비트맵 형식입니다. 위의 것보다 크기는 크지만, 이미지 품질은 소스 파일이나 2차 편집이 필요한 이미지 형식으로 저장하기에 적합합니다.

(4)WEBP

• Google에서 개발, 더 작은 크기
• 손실 압축 및 무손실 압축 지원
• 투명도 및 애니메이션 지원

적용 대상: webp를 지원하는 앱 또는 웹 페이지

형식	장점	단점	적용 가능한 시나리오
gif	작은 파일, 애니메이션 지원, 투명도, 호환성 문제 없음	256색만 지원	단순한 색상의 로고, 아이콘, 애니메이션 사진
jpg	풍부한 색상, 작은 파일	손실 압축, 반복 저장하면 사진 품질이 현저히 저하됨	다채로운 사진/그라데이션 이미지
png	무손실 압축, 투명도 지원, 간단한 사진 크기 작음	애니메이션을 지원하지 않습니다. 화려한 그림은 크기가 큽니다.	로고/아이콘/투명 그림
webp	작은 파일, 손실 및 무손실 압축 지원, 애니메이션, 투명도 지원	낮은 브라우저 호환성	앱 및 지원 webp 형식의 webview

6. CSS 선택자는 무엇인가요? 우선 사항?

selector	format
태그 선택기	p
class 선택기	#myclassname
id 선택기	#myid
인접 형제 선택자	h1 +p
하위 선택자	ul>li
하위 선택자	li a
와일드카드 선택자	*
속성 선택자	a[ref="eee"]
의사 클래스 선택기	li:last-child

다른 요소 바로 다음에 요소를 선택해야 하고 둘 다 동일한 상위 요소가 있는 경우 인접한 형제 선택기를 사용할 수 있습니다. 예를 들어 h1 요소 바로 뒤에 나타나는 단락의 상단 여백을 늘리려는 경우입니다. , 다음과 같이 작성할 수 있습니다:

h1 + p {margin-top:50px;}

선택기의 우선순위에 대해:

• 요소 선택기: 1
• class 선택기: 10
• id 선택기: 100
• 요소 태그: 1000

이어야 합니다.

• !중요 선언된 스타일의 우선순위가 가장 높습니다.
• 우선순위가 동일하면 마지막에 나타나는 스타일이 적용됩니다.
• 상속된 스타일의 우선순위가 가장 낮습니다.

속성 상속:

• 상속할 수 있는 속성 : 글꼴 크기, 글꼴 패밀리, 색상
• 상속할 수 없는 스타일: 테두리, 패딩, 여백, 너비, 높이

7. 플로팅 관련

요소를 부동으로 설정한 후 디스플레이가 자동으로 차단됩니다.

(1) 플로트를 언제 제거해야 합니까?

플로팅으로 인해 발생하는 문제는 다음과 같습니다.

• 부모 요소의 높이를 확장할 수 없어 부모와 동일한 수준의 요소에 영향을 미칩니다.
• 플로팅 요소와 동일한 수준의 부동적이지 않은 요소가 이를 따릅니다.
• 요소가 부동하는 경우 그 앞에 있는 요소도 부동되어야 합니다. 그렇지 않으면 페이지 구조에 영향을 미칩니다.

(2) 부동을 지우는 방법은 무엇입니까?

플로트를 지우는 방법은 다음과 같습니다.

• 부모 p의 height 속성을 ​​정의합니다. height属性
• 最后一个浮动元素之后添加一个空的p标签，并添加clear:both样式
• 包含浮动元素的父级标签添加overflow:hidden或者overflow:auto

目录

• 1. CSS3中的盒模型
• 2. display:none与visibility:hidden的区别
• 3. 说一说CSS的sprite（精灵图）
• 4. position的属性值有哪些？
• 5. PNG、GIF、JPG、WEBP的区别以及如何选择？
• 6. CSS选择器有哪些？优先级？
• 7. 浮动相关
• （1）什么时候需要清除浮动？
• （2）如何清除浮动？

1. CSS3中的盒模型

CSS3中的盒模型有以下两种：标准盒模型、IE盒模型

• 标准盒模型和IE盒模型的区别就是：标准盒模型的宽高指的是内容的宽高，而IE盒模型的宽高指的是内容，内边距，边框的总和。

• 在CSS3中，可以使用box-sizeing:border-box将普通盒模型转化为IE盒模型。有时候我们已经设置了一个盒子的宽高，但是，如果想要改变border，这样盒子的大小就会发生改变，我们就可以将其转化为IE盒模型，就不用每次计算盒子内容大小了。

• 在盒子模型中

  • box-sizeing:content-box表示标准盒模型（默认值）
  • box-sizeing:border-box表示IE盒模型（也就是怪异盒模型）

除此之外，还有：Flex弹性伸缩盒模型

2. display:none与visibility:hidden的区别

这两个属性都是让元素隐藏不可见

区别：

（1）在渲染树中

• display:none会让元素完全中渲染树中消失，渲染的时候不会占据任何空间；
• visibility:hidden不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见

（2）继承

• display:none是非继承属性，他的子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示。
• visibility:hidden是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility:visible可以让子孙节点显示。

（3）修改常规文档流中的元素的display通常会造成文档的重排，但是修改visibility属性只会造成本元素的重绘

（4）如果使用读屏器，设置为display:none的内容不会被读取，设置为visibility:hidden的内容会被读取。visibility:hidden

마지막 플로팅 요소 뒤에 빈 p 태그를 추가하고 clear:both스타일 <h3></h3> <code>overflow:hidden 또는 overflow:auto

추가

Directory🎜🎜🎜🎜🎜1. CSS3의 상자 모델🎜🎜 2. 차이점 display:none과 visible:hidden 사이🎜🎜3. CSS 스프라이트에 대해 이야기해 보겠습니다🎜🎜4. 위치의 속성 값은 무엇인가요? 🎜🎜5. PNG, GIF, JPG, WEBP의 차이점은 무엇이며 어떻게 선택하나요? 🎜🎜6. CSS 선택자는 무엇인가요? 우선 사항? 🎜🎜7.플로팅 관련🎜🎜🎜 (1) 플로트를 언제 클리어해야 하나요? 🎜🎜(2) 플로트를 클리어하는 방법은 무엇인가요? 🎜🎜🎜🎜🎜🎜1. CSS3의 상자 모델 🎜🎜CSS3에는 표준 상자 모델과 IE 상자 모델의 두 가지 유형이 있습니다🎜🎜
🎜🎜🎜🎜표준 박스 모델과 IE 박스 모델의 차이점은 표준 박스 모델의 너비와 높이는 너비를 참조하세요. 콘텐츠의 높이, IE 박스 모델의 너비와 높이는 콘텐츠, 패딩, 테두리의 합을 의미합니다. 🎜🎜🎜🎜CSS3에서는 box-sizing:border-box를 사용하여 일반 상자 모델을 IE 상자 모델로 변환할 수 있습니다. 때로는 상자의 너비와 높이를 설정했지만 테두리를 변경하여 상자의 크기를 변경하려는 경우 별도의 작업 없이 이를 IE 상자 모델로 변환할 수 있습니다. 매번 상자 내용물의 크기를 계산하십시오. 🎜🎜🎜🎜상자 모델에서🎜🎜🎜box-sizing:content-box는 표준 상자 모델을 나타냅니다(기본값) 🎜🎜box-sizing:border-box IE 상자 모델을 나타냅니다(이상한 상자 모델이라고도 함)🎜🎜🎜🎜🎜또한 다음이 있습니다: 🎜Flex 탄력적 상자 모델🎜🎜🎜🎜🎜2. display:none과 visible:hidden의 차이점🎜🎜두 속성 모두 요소를 숨깁니다 🎜🎜🎜차이: 🎜 🎜🎜 (1) 렌더링 트리에서 🎜🎜🎜display:none은 요소를 렌더링 트리에서 완전히 사라지게 만들고 렌더링할 때 어떤 공간도 차지하지 않습니다. 🎜🎜visibility:hidden는 렌더링 트리에서 요소를 사라지게 하지 않습니다. 렌더링된 요소는 해당 공간을 계속 차지하지만 콘텐츠는 표시되지 않습니다🎜🎜🎜(2) Inherited🎜🎜🎜<code>display:none는 상속되지 않는 속성입니다. 해당 하위 노드는 상위 노드와 함께 렌더링 트리에서 사라지며 하위 노드의 속성을 수정하여 표시할 수 없습니다. 🎜🎜<code>visibility:hidden은 상속된 속성입니다. hidden을 상속하기 때문에 하위 노드는 사라집니다. 표시됩니다. 🎜🎜🎜(3) 일반 문서 흐름에서 요소의 display를 수정하면 일반적으로 문서가 재정렬되지만 visibility 속성을 ​​수정하면 요소만 재정렬됩니다. to be reraw🎜 🎜(4) 스크린 리더를 사용하면 display:none으로 설정된 콘텐츠는 읽혀지지 않고, visibility:hidden으로 설정된 콘텐츠는 읽혀지지 않습니다. 읽을 수 있습니다. 가시성:숨김🎜🎜3 CSS 스프라이트에 대해 이야기해 보겠습니다🎜🎜🎜개념:🎜🎜

精灵图就是将多个小图片拼接在一个图片中，使用的时候通过background-position元素尺寸调节需要显示的背景图案。

优点：

• 减少HTTP请求数，在一定程度上提高了页面的加载速度
• 减少图片的体积，因为每个图片都有一个头信息，把多个图片放在一起，会共用一个头信息，较少了图片的字节数
• 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。
• 减少了图片命名的困扰，只要给一张或几张图片命名即可

缺点：

• 유지관리가 더 번거롭습니다. 페이지 배경이 조금 바뀌면 병합된 이미지 전체를 수정해야 합니다.
• 병합은 더 번거롭고 질서정연하게 하나의 이미지로 병합해야 합니다. 불필요한 배경을 방지하세요
• 와이드스크린이나 고해상도 화면의 적응형 페이지에서 그림의 너비가 충분하지 않으면 배경이 깨질 수 있습니다

4. ?

속성 값	개요
absolute	정적 위치 지정이 아닌 상위 요소를 기준으로 위치가 지정된 절대 위치 요소 생성
relative	상대 위치가 지정된 요소 생성 원래 위치
fixed	브라우저 창을 기준으로 위치가 지정된 절대 위치 요소 생성
static	기본값, 위치 지정 없음, 요소가 일반 문서 흐름에 나타남
inherit	규정 position 속성의 값은 상위 요소

5. PNG, GIF, JPG, WEBP의 차이점과 선택 방법은 무엇인가요?

(1) GIF

• GIF 이미지는 8비트 인덱스만 저장하고, 최대 256가지 색상을 지원하며,
• 무손실 압축 사용, 더 작은 크기
• 투명도 및 간단한 애니메이션 지원

적용 대상: : 간단한 로고 색상, 아이콘, 와이어프레임, 단순 애니메이션

(2) JPG

• 손실 압축을 사용하므로 압축 품질을 제어할 수 있습니다.
• 직접 색상, 풍부한 색상을 사용합니다.
• 투명도를 지원하지 않습니다.

적용 대상: 색상 풍부한 사진 및 그라데이션 이미지

(3) PNG

• png-8은 무손실 압축 및 8비트 인덱스 색상을 기반으로 하는 비트맵 형식으로 GIF보다 투명도를 더 잘 지원하고 동일한 품질에서 크기가 더 작습니다. . 그러나 애니메이션은 지원되지 않습니다. 아이콘, 배경, 버튼에 적합합니다.
• png-24는 무손실 압축을 사용하며 다이렉트 컬러 기반의 비트맵 형식입니다. 위의 것보다 크기는 크지만, 이미지 품질은 소스 파일이나 2차 편집이 필요한 이미지 형식으로 저장하기에 적합합니다.

(4)WEBP

• Google에서 개발, 더 작은 크기
• 손실 압축 및 무손실 압축 지원
• 투명도 및 애니메이션 지원

적용 대상: webp를 지원하는 앱 또는 웹 페이지

형식	장점	단점	적용 가능한 시나리오
gif	작은 파일, 애니메이션 지원, 투명도, 호환성 문제 없음	256색만 지원	단순한 색상의 로고, 아이콘, 애니메이션 사진
jpg	풍부한 색상, 작은 파일	손실 압축, 반복 저장하면 사진 품질이 현저히 저하됨	다채로운 사진/그라데이션 이미지
png	무손실 압축, 투명도 지원, 간단한 사진 크기 작음	애니메이션을 지원하지 않습니다. 화려한 그림은 크기가 큽니다.	로고/아이콘/투명 그림
webp	작은 파일, 손실 및 무손실 압축 지원, 애니메이션, 투명도 지원	낮은 브라우저 호환성	앱 및 지원 webp 형식의 webview

6. CSS 선택자는 무엇인가요? 우선 사항?

selector	format
태그 선택기	p
class 선택기	#myclassname
id 선택기	#myid
인접 형제 선택자	h1 +p
하위 선택자	ul>li
하위 선택자	li a
와일드카드 선택자	*
속성 선택자	a[ref="eee"]
의사 클래스 선택기	li:last-child

다른 요소 바로 다음에 요소를 선택해야 하고 둘 다 동일한 상위 요소가 있는 경우 인접한 형제 선택기를 사용할 수 있습니다. 예를 들어 h1 요소 바로 뒤에 나타나는 단락의 상단 여백을 늘리려는 경우입니다. , 다음과 같이 작성할 수 있습니다:

h1 + p {margin-top:50px;}

선택기의 우선순위에 대해:

• 요소 선택기: 1
• class 선택기: 10
• id 선택기: 100
• 요소 태그: 1000

이어야 합니다.

• !중요 선언된 스타일의 우선순위가 가장 높습니다.
• 우선순위가 동일하면 마지막에 나타나는 스타일이 적용됩니다.
• 상속된 스타일의 우선순위가 가장 낮습니다.

속성 상속:

• 상속할 수 있는 속성 : 글꼴 크기, 글꼴 패밀리, 색상
• 상속할 수 없는 스타일: 테두리, 패딩, 여백, 너비, 높이

7. 플로팅 관련

요소를 부동으로 설정한 후 디스플레이가 자동으로 차단됩니다.

(1) 플로트를 언제 제거해야 합니까?

플로팅으로 인해 발생하는 문제는 다음과 같습니다.

• 부모 요소의 높이를 확장할 수 없어 부모와 동일한 수준의 요소에 영향을 미칩니다.
• 플로팅 요소와 동일한 수준의 부동적이지 않은 요소가 이를 따릅니다.
• 요소가 부동하는 경우 그 앞에 있는 요소도 부동되어야 합니다. 그렇지 않으면 페이지 구조에 영향을 미칩니다.

(2) 부동을 지우는 방법은 무엇입니까?

플로트를 지우는 방법은 다음과 같습니다.

• 부모 p의 height 속성을 ​​정의합니다. height属性
• 最后一个浮动元素之后添加一个空的p标签，并添加clear:both样式
• 包含浮动元素的父级标签添加overflow:hidden或者overflow:auto
마지막 플로팅 요소 뒤에 빈 p 태그를 추가하고 clear:both스타일

플로팅 요소가 포함된 상위 태그에 overflow:hidden 또는 overflow:auto 추가

권장 관련 튜토리얼:

CSS 비디오 튜토리얼🎜🎜🎜

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