웹 프런트엔드 필기 시험 문제 은행 CSS 장
- WBOY앞으로
- 2022-04-21 14:33:543603검색
이전 글 "웹 프론트엔드 필기시험 문제은행 - 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 의사 클래스 선택기는 모든 라디오(d11dad02a1f3abd212da65221b2dc681), 체크박스(f4203f850df4b01f9fbbee9b01ea3000) 또는 활성화 상태로 선택되거나 전환되는 옵션(221f08282418e2996498697df914ce4e의 5a07473c87748fb1bf73f23d45547ab8) 요소는 사용자가 요소를 클릭하거나 다른 값을 선택하여 이 상태를 변경할 수 있습니다. : 확인된 의사 클래스는 더 이상 이 요소에 적용되지 않지만 관련 요소에는 적용됩니다.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!