웹 프런트엔드 필기 시험 문제 은행 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7442
15
1371
52
76
11
36
19
7
6
부트 스트랩 버튼을 사용하는 방법
Apr 07, 2025 pm 03:09 PM
부트 스트랩 버튼을 사용하는 방법? 부트 스트랩 CSS를 소개하여 버튼 요소를 만들고 부트 스트랩 버튼 클래스를 추가하여 버튼 텍스트를 추가하십시오.
부트 스트랩에 사진을 삽입하는 방법
Apr 07, 2025 pm 03:30 PM
Bootstrap에 이미지를 삽입하는 방법에는 여러 가지가 있습니다. HTML IMG 태그를 사용하여 이미지를 직접 삽입하십시오. 부트 스트랩 이미지 구성 요소를 사용하면 반응 형 이미지와 더 많은 스타일을 제공 할 수 있습니다. 이미지 크기를 설정하고 IMG-Fluid 클래스를 사용하여 이미지를 적응할 수 있도록하십시오. IMG 통과 클래스를 사용하여 테두리를 설정하십시오. 둥근 모서리를 설정하고 IMG 라운드 클래스를 사용하십시오. 그림자를 설정하고 그림자 클래스를 사용하십시오. CSS 스타일을 사용하여 이미지를 조정하고 배치하십시오. 배경 이미지를 사용하여 배경 이미지 CSS 속성을 사용하십시오.
부트 스트랩에서 파일을 업로드하는 방법
Apr 07, 2025 pm 01:09 PM
파일 업로드 기능은 Bootstrap을 통해 구현할 수 있습니다. 단계는 다음과 같습니다. 부트 스트랩 CSS 및 JavaScript 파일을 소개합니다. 파일 입력 필드를 만듭니다. 파일 업로드 버튼을 만듭니다. 파일 업로드를 처리합니다 (FormData를 사용하여 데이터를 수집 한 다음 서버로 전송); 사용자 정의 스타일 (선택 사항).
부트 스트랩 목록에서 기본 스타일을 제거하는 방법은 무엇입니까?
Apr 07, 2025 am 10:18 AM
부트 스트랩 목록의 기본 스타일은 CSS 재정의 상태에서 제거 할 수 있습니다. 보다 구체적인 CSS 규칙 및 선택기를 사용하여 부트 스트랩 기본 스타일을 우선적으로 "근접성 원리"및 "가중치 원리"를 따르십시오. 스타일 충돌을 피하기 위해보다 타겟팅 된 선택기를 사용할 수 있습니다. 재정의가 실패한 경우 사용자 정의 CS의 무게를 조정하십시오. 동시에 성능 최적화에주의를 기울이고, 과도하게 사용하지 않으며, 간결하고 효율적인 CSS 코드를 작성하십시오.
부트 스트랩 목록의 크기를 변경하는 방법은 무엇입니까?
Apr 07, 2025 am 10:45 AM
부트 스트랩 목록의 크기는 목록 자체가 아니라 목록이 포함 된 컨테이너의 크기에 따라 다릅니다. Bootstrap의 그리드 시스템 또는 Flexbox를 사용하면 컨테이너의 크기를 제어하여 목록 항목을 간접적으로 크기로 조정할 수 있습니다.
부트 스트랩을 레이아웃하는 방법
Apr 07, 2025 pm 02:24 PM
부트 스트랩을 사용하여 웹 사이트를 레이아웃하려면 그리드 시스템을 사용하여 페이지를 컨테이너, 행 및 열로 나누어야합니다. 먼저 컨테이너를 추가 한 다음 행에 행을 추가하고 행 내 열을 추가 한 다음 마지막으로 열에 내용을 추가하십시오. 부트 스트랩의 반응 형 레이아웃 함수는 중단 점 (XS, SM, MD, LG, XL)에 따라 레이아웃을 자동으로 조정합니다. 응답 형 클래스를 사용하여 다른 화면 크기의 다른 레이아웃을 달성 할 수 있습니다.
부트 스트랩 날짜를 보는 방법
Apr 07, 2025 pm 03:03 PM
답 : 부트 스트랩의 날짜 선택기 구성 요소를 사용하여 페이지에서 날짜를 볼 수 있습니다. 단계 : 부트 스트랩 프레임 워크를 소개하십시오. HTML에서 날짜 선택기 입력 상자를 만듭니다. 부트 스트랩은 선택기에 스타일을 자동으로 추가합니다. JavaScript를 사용하여 선택한 날짜를 얻으십시오.
