CSS 면접 질문 29개 요약(지식 포인트 분석)-CSS 튜토리얼-php.cn

이 기사에서는 29가지 CSS 인터뷰 지식 포인트를 공유합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

CSS 면접 질문 29개 요약(지식 포인트 분석)

CSS는 Cascading Style Sheets의 약어로, HTML과 같은 마크업 언어로 작성된 문서의 레이아웃을 설명하는 데 사용되는 스타일 시트 언어입니다. 웹페이지를 디자인하는 데 사용되는 세 가지 총사 중 하나이며, 나머지 두 가지는 HTML 및 Javascript입니다. HTML和Javascript。

CSS 的设计目的是使样式和内容分离，包括布局、颜色和字体。这种分离可以提高内容的可访问性，在样式特征的规范中提供更多的灵活性和控制，通过在一个单独的. .css 文件中指定相关的 CSS，使多个 web 页面能够共享格式，并减少结构内容中的复杂性和重复。

它具有简单的语法，并使用大量的英文关键字来指定各种样式属性的名称。

既然我们已经讨论了CSS的基础知识，让我们来观察一下基于CSS的重要面试问题。

CSS 면접 질문 29개 요약(지식 포인트 분석)

问题1：什么是 CSS？

CSS（层叠样式表）是一种样式语言，对于 HTML 元素来说足够简单。它在网页设计中非常流行，其应用在XHTML中也很常见。

问题2：为什么要开发CSS？

CSS是在1997年开发的，作为一种web开发人员设计他们正在创建的web页面布局的方法。它的目的是让开发者将网站代码的内容和结构从视觉设计中分离出来。

这种结构和设计的分离允许HTML执行比原来更多的功能。

【推荐教程：CSS视频教程】

问题3：CSS的主要版本有哪些？

CSS的不同版本：

CSS1
CSS2
CSS2.1
CSS3

问题4：CSS样式的组成部分是什么？

一个样式规则由三部分组成：

选择器–选择器是 HTML 标记，用于选择要设置样式的内容。它根据其ID，类和名称选择 HTML元素。
属性–属性是 HTML 标签的一种属性。简而言之，所有 HTML 属性都转换为 CSS 属性。
值– CSS中的值定义CSS属性的一组有效值。

问题 5：有多少种方法可以将 CSS 集成为 web 页面

CSS 可以集成为三种方式

1、内联：直接在HTML元素上使用

<p>hello world</p>

로그인 후 복사

2、外部:在工作空间中创建单独的CSS文件，然后在创建的每个web页面中链接它们


<link>

로그인 후 복사

3、内部: web 页面的 head 元素在其中实现了内部 CSS。

     <style> 
             P{
                   color : lime;
               background-color:black;
                }
     </style>

로그인 후 복사

问题 6：谁在维护 CSS 规范？

万维网协会维护 CSS规范。

问题 7：伪元素是什么意思？

伪元素是添加到选择器的关键字，它允许一种样式，即所选元素的特定部分。CSS用于在HTML标记中应用样式，它允许在不影响实际文档的情况下对文档进行额外标记。它可以用来：

为第一个字母、行或元素设置样式。
插入内容

语法：

Selector: :pseudo-element
{Property1 :value;
Property2 :value;}

로그인 후 복사

问题 8：CSS有什么优势？

CSS的优点是:

一致性 – CSS有助于构建一致的框架，设计人员可以使用该框架来构建其他站点。因此，网页设计师的效率也提高了。
易于使用 – CSS 是非常容易学习和简化网站开发。所有代码都放在一个页面上，这意味着对代码行进行改进或编辑不需要重复修改多个页面.
*网站速度 *– 通常，一个网站使用的代码最多可以达到 2 页或更多。但是对于CSS，这不是问题。它只需要2-3
CSS는 레이아웃, 색상, 글꼴 등 스타일과 콘텐츠를 별도로 유지하도록 설계되었습니다. 이러한 분리를 통해 콘텐츠 접근성이 향상되고, 스타일 기능 사양에 더 많은 유연성과 제어가 제공되며, 여러 웹 페이지에서 형식을 공유하고 구조화된 콘텐츠의 복잡성과 중복을 줄일 수 있습니다.
간단한 구문을 가지고 있으며 다수의 영어 키워드를 사용하여 다양한 스타일 속성의 이름을 지정합니다.
이제 CSS의 기본 사항을 논의했으므로 중요한 CSS 기반 면접 질문을 살펴보겠습니다.

질문 1: CSS란 무엇인가요?
CSS(Cascading Style Sheets)
는 HTML 요소에 사용할 수 있을 만큼 간단한 스타일 언어입니다. 이는 웹 디자인에서 매우 인기가 높으며 XHTML에서도 그 응용이 일반적입니다. 🎜
🎜질문 2: CSS를 개발하는 이유는 무엇입니까? 🎜
🎜🎜CSS🎜는 웹 개발자가 자신이 만드는 웹 페이지의 레이아웃을 디자인하는 방법으로 1997년에 개발되었습니다. 그 목적은 개발자가 웹 사이트 코드의 내용과 구조를 시각적 디자인에서 분리할 수 있도록 하는 것입니다. 🎜🎜이러한 구조와 디자인의 분리를 통해 HTML은 원래보다 더 많은 기능을 수행할 수 있습니다. 🎜🎜【추천 튜토리얼: CSS 동영상 튜토리얼]🎜
🎜질문 3: CSS의 주요 버전은 무엇입니까? 🎜
🎜 다양한 CSS 버전: 🎜
```
//物理元素
我想用b标签加粗
 
//逻辑元素
我想用strong标签加粗
 
//两段文字都加粗了，而且视觉效果完全一样
```
로그인 후 복사
로그인 후 복사
🎜2, 🎜External🎜에서 사용: 작업 공간에서 별도의 CSS 파일을 생성한 후 생성된 각 웹 페이지에 링크합니다. 🎜
```
selector:pseudo-class{property:value;}
```
로그인 후 복사
로그인 후 복사
🎜3, 🎜Internal🎜: 웹 페이지의 헤드 요소가 여기에 구현됩니다. 내부 CSS. 🎜rrreee
🎜질문 6: CSS 사양은 누가 관리하나요? 🎜
🎜World Wide Web Consortium은 CSS 사양을 유지합니다. 🎜
🎜질문 7: 의사 요소는 무엇을 의미하나요? 🎜
🎜의사 요소는 선택한 요소의 특정 부분에 대한 스타일을 지정할 수 있도록 선택기에 추가된 키워드입니다. CSS는 HTML 마크업 내에 스타일을 적용하는 데 사용됩니다. 이를 통해 실제 문서에 영향을 주지 않고 문서에 추가 마크업을 허용할 수 있습니다. 다음 용도로 사용할 수 있습니다: 🎜
🎜구문: 🎜rrreee
🎜질문 8: CSS의 장점은 무엇인가요? 🎜
🎜 CSS의 장점은 다음과 같습니다. 🎜
Repositioning – CSS를 사용하면 페이지에서 웹 요소 위치의 변경 사항을 정의할 수 있습니다. 구현을 통해 개발자는 페이지의 미적 매력이나 기타 고려 사항에 맞게 HTML 요소를 원하는 곳에 배치할 수 있습니다.

질문 9: CSS 그래디언트란 무엇인가요?

그라데이션은 두 이미지 사이에 중간 프레임을 만들어 첫 번째 이미지의 모양을 얻은 다음 두 번째 이미지로 전개하는 프로세스로, 주로 애니메이션 제작에 사용됩니다.

질문 10: CSS 특수성이란 무엇입니까?

CSS 특이성은 요소가 사용해야 하는 스타일 선언을 결정하는 점수 또는 수준입니다. CSS에는 특정 수준의 선택기를 부여할 수 있는 네 가지 범주가 있습니다.

인라인 스타일
ID
클래스, 속성 및 의사 클래스
요소 및 의사 요소

질문 11: CSS의 단점은 무엇입니까

CSS의 단점은 다음과 같습니다.

버전이 너무 많습니다 – HTML이나 Javascript와 같은 다른 매개변수에 비해 CSS에는 CSS1, CSS2, CSS2.1, CSS3. 결과적으로 CSS는 특히 초보자에게 매우 혼란스럽습니다.
보안 부족 - CSS는 개방형 텍스트 기반 시스템이므로 덮어쓰는 것을 방지하는 보안 시스템이 내장되어 있지 않습니다. 읽기/쓰기 액세스 권한이 있으면 누구나 CSS 파일을 변경하고 링크를 변경할 수 있습니다.
Fragmentation - CSS를 사용하면 다른 브라우저에서는 작동하지 않을 수 있습니다. 따라서 웹사이트를 활성화하기 전에 웹 개발자는 여러 브라우저에서 프로그램을 실행하여 호환성을 테스트해야 합니다.
복잡성 – Microsoft FrontPage와 같은 타사 소프트웨어를 사용하면 CSS가 복잡해질 수 있습니다.

질문 13: RWD(반응형 웹 디자인)란 무엇인가요?

RWD(반응형 웹 디자인) 기술은 모바일, 태블릿, 데스크탑, 노트북과 같은 모든 화면 크기와 장치에서 완벽하게 작동하는 데 사용됩니다. 각 장치마다 다른 페이지를 만들 필요가 없습니다.

질문 14: CSS 스프라이트의 이점은 무엇입니까?

CSS 스프라이트의 이점은 다음과 같습니다.

다양한 작은 이미지를 하나의 이미지로 결합하여 웹 페이지 로딩 시간을 줄입니다.
HTTP 요청을 줄여 로드 시간을 줄입니다.

질문 14: CSS 컨텍스트 선택기가 무엇인가요?

컨텍스트 선택자는 엄밀히 말하면 공백으로 구분된 태그 이름 집합인 descendant Combined Selector라고 합니다. 지정된 상위 요소의 하위 항목인 태그를 선택하는 데 사용됩니다. 태그의 계층 구조에 이러한 상위 "업스트림"이 있는 한 해당 태그가 선택됩니다. 태그와 상위 항목인 컨텍스트 사이에 몇 개의 수준이 있는지는 중요하지 않습니다.

질문 15: 점진적 향상과 원활한 저하란 무엇입니까?

점진적 향상의 개념은 낮은 수준의 브라우저에서 사이트 페이지의 사용성과 접근성을 보장하는 것을 기반으로 가장 기본적인 사용성부터 시작하는 것을 의미합니다. , 점차적으로 기능을 추가하고 사용자 경험을 개선합니다. 본질적으로 마크업 언어를 사용하여 페이지를 작성하고 스타일 시트를 통해 페이지 스타일을 제어하는 등 일상적인 개발 습관 중 일부는 모두 점진적인 향상 개념에 속하며 다음과 같은 새로운 기술의 사용도 포함됩니다. HTML5 및 CSS3과 같은 고급 브라우저는 페이지에 대한 사용자 경험을 풍부하게 향상시킵니다.

원활한 성능 저하의 개념은 먼저 최신 기술을 사용하여 고급 브라우저에 맞는 가장 강력한 기능과 사용자 경험을 구축한 다음 일상적으로 사용되는 하위 수준 브라우저의 한계를 기반으로 지원되지 않는 기능과 경험을 점차적으로 약화시키는 것을 의미합니다. life IE 개발에서 원활한 성능 저하의 일반적인 예는 먼저 Chrome용 페이지 코드를 작성한 다음 IE에서 예외를 수정하거나 IE에서 구현할 수 없는 기능을 제거하는 것입니다.

그래서 이 두 가지 개념적 방법은 다음과 같습니다. 실제로 우리의 일상적인 개발 작업에서 "점진적 향상"과 "부드러운 저하"라는 용어는 최근 몇 년 동안 대중화되기 시작했습니다. 현재 HTML5 및 CSS3의 실제 적용에서 이 두 가지 개념은 특히 중요합니다. 끊임없이 변화하는 새로운 기술을 사용하여 주류 브라우저에서 기본적인 유용성을 갖춘 사이트를 구축하고 고급 브라우저에 대한 경험을 향상시키는 방법은 무엇입니까? 이는 개발 과정에서 우리가 명확히 해야 할 아이디어입니다.

질문 16: 웹 페이지에 아이콘을 어떻게 추가하나요?

font-awesome 또는 Alibaba의 iconfont와 같은 아이콘 라이브러리를 사용하여 HTML 웹 페이지에 아이콘을 추가할 수 있습니다. 인라인 HTML 요소에 지정된 아이콘 클래스의 이름을 추가해야 합니다. ( 또는 ). 아이콘 라이브러리의 아이콘은 확장 가능한 벡터이며 CSS를 사용하여 사용자 정의할 수 있습니다. font-awesome或者阿里的 iconfont 之类的图标库将图标添加到HTML网页。我们必须将给定图标类的名称添加到任何内联HTML元素中。（或）。图标库中的图标是可缩放的矢量，可以使用CSS进行自定义。

问题 17：哪个属性指定边框的宽度？

border-width

🎜질문 17: 테두리 너비를 지정하는 속성은 무엇인가요? 🎜🎜🎜border-width는 테두리 너비를 지정합니다. 🎜

问题 18：如何区分物理标签和逻辑标签?

物理标签被称为表示标记，而逻辑标签对于外观是无用的。物理标签是较新的版本，而逻辑标签是旧的并且专注于内容。

如题，我们的标签元素写上后，浏览器就会渲染出结果，但不仅仅是这么简单

//物理元素
<b>我想用b标签加粗</b>
 
//逻辑元素
<strong>我想用strong标签加粗</strong>
 
//两段文字都加粗了，而且视觉效果完全一样

로그인 후 복사

确实，文字加粗了，两者都达到了我们想要的目的，但是我们忽略了一个问题，既然b标签可以加粗，那么strong这个标签同样是加粗，存在的意义又是什么呢？既然W3C定义了两个，它们之间的不同点是什么呢？它们之间的相同点又是什么呢？

物理元素

物理元素，又叫实体标签，它所做的是一种物理行为，比如上面我把一段文字用b标签加粗了，它所传达的给浏览器，告诉浏览器我要加粗这段文字，从单词Bold中也可以看出来，英文中仅仅是加粗的意思，并没有其他作用。总结来说就是一句话：物理元素就是告诉浏览器该怎么显示出来。

逻辑元素

逻辑元素，从英文字面上Strong就可以看出它是强调的意思，所以我们用这个逻辑元素(如上strong)来向浏览器传达一个强调某段文字重要性的消息，说明此文字较为重要，也有利于搜索引擎收录。

Web标准主张XHTML不涉及具体的表现形式，“强调”可以用加粗来强调，也可以用别的方式强调，也可以通过css来改变strong的具体表现，还有就是并不是有了strong逻辑标签，就不用b标签来表示字体加粗了，b标签和strong标签默认情况下强调的效果一致，strong完全可以定义成别的样式，用来强调效果，但是最好符合W3C标准，它更提倡内容与样式分离，所以单纯为了达到加粗而使用b标签不建议这样做，从XHTML文档有意义性及用户体验角度来说，strong逻辑标签更加合适，而SEO方面，则针对优化情况而定。

问题19：如何在CSS中定义一个伪类?它们是用来干什么的

CSS伪类是用来添加一些选择器的特殊效果。伪类的语法

selector:pseudo-class{property:value;}

로그인 후 복사

问题 20：CSS和SCSS有什么区别？

CSS 和 SCSS 之间的区别如下：

CSS是一种用于设计web页面的样式语言，而SCSS用于为浏览器组合CSS样式表。
SCSS 提供了一些变量，可以使用这些变量来缩短代码，这是与 CSS 相比的一大优势。

问题 21：嵌入式样式表的优缺点是什么？

嵌入式样式表的优点:

可以在一个文档中创建多种标签类型。
在复杂情况下，可以使用选择器和分组方法来应用样式。
无需额外下载。

嵌入式样式表的缺点：

无法控制多个文档。

问题 22：列出使用的各种媒体类型。

不同的介质不区分大小写，因此它们具有不同的属性。他们是：

aural - 用于语音和音频合成器
print - 用于打印机
projection - 用于方案展示，比如幻灯片
handheld - 用于小的手持的设备
screen - 用于电脑显示器

问题 23：font 的属性有哪些？

Font-style
Font-variant
Font-weight
Font-size/line-weight
Font-family

问题 24：“规则集”是什么意思？

该指令告诉浏览器如何在HTML页面上渲染特定元素。它由一个选择器和一个遵循规则集的声明块组成。选择器可以附加到其他选择器，以通过规则集进行标识。

问题 25：什么是 CSS 框架？

CSS 框架是一个库，它允许使用CSS语言进行更轻松，更符合标准的Web设计。这些框架中的大多数至少包含一个网格以及更多功能和其他基于Javascript的功能。一些著名的CSS框架有：ACSS，Bulma，YAML，Foundation等。

질문 26: 이미지 base64 인코딩 사용의 장점과 단점을 간략하게 소개하세요.

base64 인코딩은 특정 알고리즘을 사용하여 이미지를 긴 문자열로 인코딩하는 이미지 처리 형식입니다. 페이지에 표시될 때 해당 문자열을 사용하여 이미지의
url 속성을 대체할 수 있습니다.
base64 사용의 장점은 다음과 같습니다.
(1) 이미지에 대한 HTTP 요청 감소
base64 사용의 단점은 다음과 같습니다.
(1) base64의 인코딩 원리에 따르면 인코딩된 크기는 이미지 크기보다 1/3 더 큽니다. 큰 이미지를 HTML/CSS로 인코딩하면 파일 크기가 늘어나고 파일 로딩 속도에 영향을 미칠 뿐만 아니라 브라우저가 HTML 또는 CSS 파일을 구문 분석하고 렌더링하는 데 걸리는 시간도 늘어납니다. .
(2) base64를 사용하여 직접 캐시하는 것은 불가능합니다. 캐시하려면 HTML이나 CSS와 같은 base64가 포함된 파일만 캐시하면 됩니다. 이는 도메인에서 이미지를 직접 캐시하는 것보다 훨씬 나쁩니다.
(3) 호환성 문제, ie8 이전 브라우저는 지원되지 않습니다.
일반적으로 일부 웹사이트의 작은 아이콘은 base64 이미지를 사용하여 도입할 수 있습니다.

질문 27: BFC 사양(블록 형식화 컨텍스트)을 이해하고 계십니까?

BFC는 요소가 BFC를 형성한 후 내부 요소에 의해 생성된 레이아웃이 외부 요소에 영향을 주지 않으며 외부 요소의 레이아웃이 BFC의 내부 요소에 영향을 미치지 않는다는 것을 의미합니다. BFC는 고립된 지역과 같으며 다른 지역에 영향을 미치지 않습니다.

일반적으로 루트 요소는 부동 및 절대 위치 요소도 BFC를 형성합니다. 표시 속성의 값이 inline-block 또는 flex입니다. 또한 요소의 오버플로 값이 표시되지 않는 경우 BFC가 생성됩니다.

질문 28: IFC란 무엇인가요?

IFC는 다음과 같은 몇 가지 레이아웃 규칙이 있는 행 수준 서식 컨텍스트를 나타냅니다. (1) 행 수준 컨텍스트 내부의 상자는 가로 방향으로 차례로 배치됩니다. (2) 한 줄이 부족하면 자동으로 다음 줄로 전환됩니다.

(3) 행 수준 컨텍스트의 높이는 내부에서 가장 높은 인라인 상자의 높이에 따라 결정됩니다.

질문 29: CSS를 최적화하고 성능을 향상시키는 방법은 무엇입니까?

로딩 성능:
(1) CSS 압축: 작성된 CSS를 패킹하고 압축하면 볼륨을 많이 줄일 수 있습니다.
(2) CSS 단일 스타일: 아래쪽 및 왼쪽 여백이 필요한 경우 margin:top 0 Bottom 0; 을 선택하는 경우가 많지만 margin-bottom:bot
tom;margin-left:left;
(3) @import의 사용을 줄이고, 링크를 사용하는 것이 좋습니다. 후자는 페이지가 로드될 때 함께 로드되고, 전자는 로드되기 전에 페이지가 로드될 때까지 기다리기 때문입니다.
선택기 성능:
(1) 키 선택기. 선택기의 마지막 부분은 키 선택기(즉, 대상 요소와 일치하는 데 사용되는 부분)입니다. CSS 선택기는 오른쪽에서
왼쪽으로 일치됩니다. 하위 선택기를 사용할 때 브라우저는 모든 하위 요소를 순회하여 지정된 요소인지 등을 확인합니다.
(2) 규칙에 키 선택기로 ID 선택기가 있는 경우 규칙에 태그를 추가하지 마세요. 관련 없는 규칙을 필터링하여 스타일 시스템이 일치시키는 데 시간을 낭비하지 않도록 합니다.
(3) *{}와 같은 와일드카드 규칙을 사용하지 마세요. 계산량이 엄청납니다! 필요한 요소만 선택하세요.
(4) 라벨을 최대한 적게 선택하고 대신 클래스를 사용하세요.
(5) 하위 선택자를 최대한 적게 사용하고 선택자의 무게를 줄입니다. 하위 항목 선택기의 비용이 가장 높습니다. 선택기의 깊이를 최소로 줄이세요. 최대값은
3개 수준을 초과하지 않아야 합니다.
(6) 어떤 속성이 상속될 수 있는지 이해하고 이러한 속성에 대한 규칙을 반복적으로 지정하지 마십시오.
렌더링 성능:
(1) 고성능 속성(부동 및 위치 지정)을 신중하게 사용하십시오.
(2) 페이지 재배열 및 다시 그리기를 최소화합니다.
(3) 빈 규칙 제거: {}. 규칙이 비어 있는 이유는 일반적으로 스타일을 예약하기 위한 것입니다. 이러한 빈 규칙을 제거하면 CSS 문서의 크기가 확실히 줄어듭니다.
(4) 속성 값이 0이면 단위가 추가되지 않습니다.
(5) 속성값은 부동 소수점 0.**이며, 소수점 앞의 0은 생략 가능합니다.
(6) 다양한 브라우저 접두사를 표준화합니다. 브라우저 접두사가 있는 항목이 먼저 옵니다. 표준 속성은 다음과 같습니다.
(7) @import 접두사를 사용하지 마십시오. CSS 로딩 속도에 영향을 미칩니다.
(8) 선택기 중첩을 최적화하고 너무 깊은 수준은 피하십시오.
(9) 동일한 페이지의 비슷한 부분에 작은 아이콘인 CSS 스프라이트 이미지는 사용하기 편리하고 페이지 요청 수를 줄이지만 동시에 이미지 자체가 커지므로 사용 시 신중하게 고려하세요. 사용하기 전 장점과 단점.
(10) 표시 속성을 올바르게 사용하십시오. 표시의 역할로 인해 일부 스타일 조합이 유효하지 않게 되며, 이는 스타일 크기만 늘리고 구문 분석 성능에도 영향을 미칩니다.
(11) 웹 글꼴을 남용하지 마세요. WebFonts는 중국 웹사이트에서는 생소할 수 있지만 해외에서는 매우 인기가 높습니다. 웹 글꼴은 크기가 큰 경우가 많으며 일부 브라우저에서는 웹 글꼴을 다운로드할 때 페이지 렌더링을 차단하고 성능을 저하시킵니다.
유지보수성 및 견고성:
(1) 동일한 속성을 가진 스타일을 추출하고 통합한 후 클래스를 통해 페이지에서 사용하여 CSS의 유지보수성을 향상시킵니다.
(2) 스타일과 내용의 분리: CSS 코드를 외부 CSS에 정의합니다.

원본 주소: https://codersera.com/blog/top-css-interview-questions-and-answers/