웹 프런트엔드 필기 시험 문제 은행 CSS 장

이전 글 "웹 프론트엔드 필기시험 문제은행 - HTML"에서는 HTML에 관한 프론트엔드 면접 문제 몇 가지를 공유해 드렸습니다. 다음 기사는 이전 기사에 이어 CSS 부분에 대한 필기 테스트 질문(답변 포함)을 공유합니다. 그 중 몇 개나 정답을 맞힐 수 있는지 봅시다!

1. CSS 속성은 대소문자를 구분합니까?

 ```
 ul {
     MaRGin: 10px;
 }
 ```

A: 구별은 없습니다. HTML과 CSS는 대소문자를 구분하지 않지만 더 나은 가독성과 팀 협업을 위해 일반적으로 XHTML에서는 요소 이름과 속성이 소문자여야 합니다.

2. Q: 인라인 요소에 margin-top 및 margin-bottom 설정이 작동하나요?

A: 작동하지 않습니다. (답은 효과가 있다고 하는데 개인적으로는 틀리다고 생각합니다.)

html의 요소는 대체된 요소와 대체되지 않은 요소로 구분됩니다.

• 대체 요소는 다른 콘텐츠의 자리 표시자로 사용되는 요소입니다. 가장 일반적인 것은 이미지 파일을 가리키는 img입니다. 그리고 입력 등 대부분의 양식 요소도 교체됩니다.

• 대체되지 않은 요소는 문서에 내용이 포함된 요소입니다. 예를 들어, 텍스트 콘텐츠가 요소 자체 내에 배치된 경우 단락은 대체되지 않은 요소입니다.

margin-top과 margin-bottom이 인라인 요소에서 작동하는지 논의하려면 인라인 대체 요소와 인라인 비대체 요소를 별도로 논의해야 합니다.

우선, 인라인 요소에 여백을 적용할 수 있다는 점을 분명히 해야 합니다. 그러나 사양에서는 허용됩니다. 그러나 대체되지 않는 인라인 요소에는 여백이 적용되므로 줄 높이에는 영향을 미치지 않습니다. . 여백은 실제로 투명하기 때문입니다. 따라서 margin-top 및 margin-bottom 선언에는 시각적 효과가 없습니다. 그 이유는 대체되지 않은 인라인 요소의 여백이 요소의 줄 높이를 변경하지 않기 때문입니다. 이는 영향을 미치는 인라인 대체되지 않은 요소의 왼쪽 및 오른쪽 여백에는 해당되지 않습니다.

교체된 요소에 설정된 여백은 줄 높이에 영향을 미치며, 위쪽 및 아래쪽 여백 값에 따라 줄 높이가 늘어나거나 줄어들 수 있습니다. 인라인 대체 요소의 왼쪽 및 오른쪽 여백은 대체되지 않은 요소의 왼쪽 및 오른쪽 여백과 동일한 효과를 갖습니다. 데모를 살펴보겠습니다.

http://codepen.io/paddingme/pen/JwCDF

3. Q: 인라인 요소에 padding-top 및 padding-bottom을 설정하면 높이가 증가합니까?

(원래 질문은 인라인 요소에 padding-top 및 padding-bottom을 설정하면 크기가 추가됩니까?)

A: 대답은 '아니오'입니다. 나는 같은 질문에 대해 약간 혼란스러워서 여기서 치수가 무엇을 의미하는지 잘 이해하지 못합니다. 옆에두고 분석해 봅시다. 인라인 요소의 경우 왼쪽 및 오른쪽 패딩을 설정하면 왼쪽 및 오른쪽 패딩이 표시됩니다. 상단 및 하단 패딩을 설정할 때 배경색을 설정한 후 패딩 영역이 증가하는 것을 볼 수 있습니다. 대체되지 않은 인라인 요소의 경우 행 높이에 영향을 미치지 않으며 상위 요소가 늘어나지 않습니다. 대체된 요소의 경우 상위 요소가 확장됩니다. 더 나은 이해를 위해 데모를 살펴보세요.

http://codepen.io/paddingme/pen/CnFpa

4. Q: 사용자가 브라우저를 재설정하거나 드래그할 때 글꼴 크기를 p: 10rem으로 설정하세요. window, 텍스트 크기도 변경됩니까?

A: 아니요.

rem은 HTML 루트 요소의 글꼴 크기를 기준으로 하는 상대적 측정 단위입니다. 창 크기가 변경되더라도 텍스트 크기는 변경되지 않습니다.

5. Q: 의사 클래스 선택기: 선택하면 라디오 또는 체크박스의 입력 유형에 작동하고 옵션에는 작동하지 않습니다.

A: 아니요.

checked 의사 클래스 선택기의 정의는 명확합니다.

:checked CSS 의사 클래스 선택기는 모든 라디오(), 체크박스() 또는 활성화 상태로 선택되거나 전환되는 옵션(의 ) 요소는 사용자가 요소를 클릭하거나 다른 값을 선택하여 이 상태를 변경할 수 있습니다. : 확인된 의사 클래스는 더 이상 이 요소에 적용되지 않지만 관련 요소에는 적용됩니다.

6. Q: HTML 텍스트에서 의사 클래스: 루트는 항상 html 요소를 가리킵니까?

A: 아니요(답변에는 yes ==||가 나와 있습니다). 다음은 Zhihu에서 발췌한 것입니다. 루트와 html이 CSS3에서 동일한 요소를 참조합니까? 답:

한 손가락으로 루트를 만듭니다. 이 루트는 html이 아닐 수 있습니다. 조각 html이고 루트가 생성되지 않은 경우 조각의 루트가 됩니다. 데이터 URL(Firefox, Chrome, Safari, Opera)을 지원하는 브라우저에 아래 URL을 입력하면 다음과 같은 내용이 표시됩니다.

data:application/xhtml+xml,<div xmlns="http://www.w3.org/1999/xhtml"><style>:root { background: green; } html { background: red !important; }</style></div>

7 Q: Translate() 메서드가 Z축에서 요소의 위치를 ​​이동할 수 있나요? ?

A: 아니요. Translate() 메소드는 x축과 y축의 변위만 변경할 수 있습니다.

8. Q: 다음 코드에서 "Sausage" 텍스트의 색상은 무엇인가요?

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

ul {color:red;}
li {color:blue;}

A: 파란색.

9. Q: 다음 코드에서 "Sausage" 텍스트의 색상은 무엇인가요?

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

ul {color:red;}
#must-buy {color:blue;}

A: 파란색.

10. Q: 다음 코드에서 "Sausage" 텍스트의 색상은 무엇인가요?

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

.shopping-list .favorite {
    color: red;
}
#must-buy {
    color: blue;
}

A: 파란색.

11、Q: 如下代码中文本“Sausage”的颜色是?

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

ul#awesome {
    color: red;
}
ul.shopping-list li.favorite span {
    color: blue;
}

A: blue。

12、Q: 如下代码中文本“Sausage”的颜色是?

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

ul#awesome #must-buy {
    color: red;
}
.favorite span {
    color: blue!important;
}

A: blue。

13、Q: 如下代码中文本“Sausage”的颜色是?

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

ul.shopping-list li .highlight {
    color: red;
}
ul.shopping-list li .highlight:nth-of-type(odd) {
    color: blue;
}

A: blue。

14、Q: 如下代码中文本“Sausage”的颜色是?

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

#awesome .favorite:not(#awesome) .highlight {
    color: red;
}
#awesome .highlight:nth-of-type(1):nth-last-of-type(1) {
    color: blue;
}

A: blue。

15、Q:#example位置如何变化：

<p id="example">Hello</p>

#example {margin-bottom: -5px;}

A: 向上移动5px。

16、Q: #example位置如何变化：

<p id="example">Hello</p>

#example {margin-left: -5px;}

A: 向左移动5px。

17、#i-am-useless 会被浏览器加载吗？

<div id="test1">
    <span id="test2"></span>
</div>

#i-am-useless {background-image: url('mypic.jpg');}

A: 不会

18、mypic.jpg 会被浏览器加载吗？

<div id="test1">
    <span id="test2"></span>
</div>

#test2 {
    background-image: url('mypic.jpg');
    display: none;
}

A: 会被下载。

19、mypic.jpg 会被浏览器加载吗？

<div id="test1">
    <span id="test2"></span>
</div>

#test1 {
    display: none;
}
#test2 {
    background-image: url('mypic.jpg');
    visibility: hidden;
}

A: 不会被下载。

20、Q: only 选择器的作用是？

@media only screen and (max-width: 1024px) {argin: 0;}

A：停止旧版本浏览器解析选择器的其余部分。

only 用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query 但却支持Media Type 的设备隐藏样式表的。其主要有：支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only 不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会不读了样式，因为其先读only 而不是screen；另外不支持Media Qqueries 的浏览器，不论是否支持only，样式都不会被采用。

21、Q:overfloa:hidden 是否形成新的块级格式化上下文？

<div>
    <p>I am floated</p>
    <p>So am I</p>
</div>

div {overflow: hidden;}
p {float: left;}

A：会形成。

会触发BFC的条件有：

• float的值不为none。

• overflow的值不为visible。

• display的值为table-cell, table-caption, inline-block 中的任何一个。

• position的值不为relative 和static。

22、Q: screen关键词是指设备物理屏幕的大小还是指浏览器的视窗？

@media only screen and (max-width: 1024px) {margin: 0;}

A: 浏览器视窗

（学习视频分享：css视频教程）

위 내용은 웹 프런트엔드 필기 시험 문제 은행 CSS 장의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!