이전 글 "웹 프론트엔드 필기시험 문제은행 - 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,
로그인 후 복사7 Q: Translate() 메서드가 Z축에서 요소의 위치를 이동할 수 있나요? ?A: 아니요. Translate() 메소드는 x축과 y축의 변위만 변경할 수 있습니다.8. Q: 다음 코드에서 "Sausage" 텍스트의 색상은 무엇인가요?로그인 후 복사로그인 후 복사로그인 후 복사로그인 후 복사로그인 후 복사로그인 후 복사로그인 후 복사ul {color:red;} li {color:blue;}로그인 후 복사A: 파란색.9. Q: 다음 코드에서 "Sausage" 텍스트의 색상은 무엇인가요?로그인 후 복사로그인 후 복사로그인 후 복사로그인 후 복사로그인 후 복사로그인 후 복사로그인 후 복사ul {color:red;} #must-buy {color:blue;}로그인 후 복사A: 파란색.10. Q: 다음 코드에서 "Sausage" 텍스트의 색상은 무엇인가요?로그인 후 복사로그인 후 복사로그인 후 복사로그인 후 복사로그인 후 복사로그인 후 복사로그인 후 복사.shopping-list .favorite { color: red; } #must-buy { color: blue; }로그인 후 복사A: 파란색.11、Q: 如下代码中文本“Sausage”的颜色是?로그인 후 복사로그인 후 복사로그인 후 복사로그인 후 복사로그인 후 복사로그인 후 복사로그인 후 복사ul#awesome { color: red; } ul.shopping-list li.favorite span { color: blue; }로그인 후 복사A: blue。12、Q: 如下代码中文本“Sausage”的颜色是?로그인 후 복사로그인 후 복사로그인 후 복사로그인 후 복사로그인 후 복사로그인 후 복사로그인 후 복사ul#awesome #must-buy { color: red; } .favorite span { color: blue!important; }로그인 후 복사A: blue。13、Q: 如下代码中文本“Sausage”的颜色是?로그인 후 복사로그인 후 복사로그인 후 복사로그인 후 복사로그인 후 복사로그인 후 복사로그인 후 복사ul.shopping-list li .highlight { color: red; } ul.shopping-list li .highlight:nth-of-type(odd) { color: blue; }로그인 후 복사A: blue。14、Q: 如下代码中文本“Sausage”的颜色是?로그인 후 복사로그인 후 복사로그인 후 복사로그인 후 복사로그인 후 복사로그인 후 복사로그인 후 복사#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位置如何变化：Hello
로그인 후 복사#example {margin-bottom: -5px;}로그인 후 복사A: 向上移动5px。16、Q: #example位置如何变化：Hello
로그인 후 복사#example {margin-left: -5px;}로그인 후 복사A: 向左移动5px。17、#i-am-useless 会被浏览器加载吗？
로그인 후 복사로그인 후 복사로그인 후 복사#i-am-useless {background-image: url('mypic.jpg');}로그인 후 복사A: 不会18、mypic.jpg 会被浏览器加载吗？
로그인 후 복사로그인 후 복사로그인 후 복사#test2 { background-image: url('mypic.jpg'); display: none; }로그인 후 복사A: 会被下载。19、mypic.jpg 会被浏览器加载吗？
로그인 후 복사로그인 후 복사로그인 후 복사#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 {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 중국어 웹사이트의 기타 관련 기사를 참조하세요!관련 라벨：css원천：github.io이전 기사：CSS 변수에 대해 당신이 몰랐을 수도 있는 것들!다음 기사：CSS를 사용하여 귀여운 만화 사자 애니메이션을 그리는 방법을 단계별로 안내해 드립니다.본 웹사이트의 성명본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.저자별 최신 기사'젠레스 존 제로' 엘렌의 만남 이벤트 미션 가이드2024-08-16 19:49:09'명조:워더링 웨이브'의 Drifter Diffraction의 에코 밴드 목록2024-08-16 19:47:50'원신' 밝은 빛을 포착하는 메커니즘은 무엇입니까?2024-08-16 19:47:38'하트타운 모바일게임' 업그레이드 및 개발 방식2024-08-16 19:47:23VGN 공동 브랜드 게임 'Elden's Circle' Lani/Faded 맞춤형 키보드 및 마우스 1개 판매 중: 키보드 549위안, 마우스 349위안2024-08-16 19:47:00'명조:워더링 웨이브' Haige Ensemble의 게임 플레이 소개2024-08-16 19:46:39'젠레스 존 제로' S급 에너지링 엠블럼 일러스트 목록2024-08-16 19:46:25'영원한 환난' S1 데스티니 트레져북 콘텐츠 소개2024-08-16 19:46:16'젠레스 존 제로'발레의 유령 3부 가이드2024-08-16 19:44:55'다음 레벨을 찾아라' 레벨 16~20 클리어 안내2024-08-16 19:44:30최신 이슈WordPress 6.0(add_editor_style)은 Gutenberg 편집기에서 style.css를 로드하지 않습니다.저는 맞춤형 WordPress 블록 테마를 만들기 위해 UdemyWordPress 과정을 수강하고 있습니다. function.php에 블록 유형을 성공적으로 등록...에서 2023-11-12 20:37:5002261큰 숫자에서는 작동하지 않는 소수의 CSS 선행 0최근에 100개가 넘는 목록 항목이 포함된 순서가 지정된 목록을 생성하는 문제에 직면했습니다. 나는 list-style:decimal-leading-zero;ol...에서 2023-11-07 10:35:5301236Sass 오류: 파일이 이미 로드되었습니다: @import '~src/css/quasar.variables.scss', 'quasar/src/css/variables.sass'; src\css\quasar.variables.scss저는 퀘이사 프레임워크를 사용하고 있으며 프로젝트를 컴파일하는 동안 위의 오류 모듈 빌드 실패(./node_modules/sass-loader/dist/cjs.j...에서 2023-11-06 21:38:5501219HTML/CSS에 배경 비디오를 삽입하는 방법은 무엇입니까?안녕하세요 여러분, 최근에 문제가 발생했습니다. 내 웹사이트에 비디오 배경을 설정하려고 하는데 중앙에 있는 텍스트가 맨 아래까지 계속 실행됩니다. 이유는 모르겠지...에서 2023-11-06 13:59:1301240JavaScript에서 색상이라는 CSS/HTML의 RGB 값을 얻는 방법[name-rgb]라는 Javascript 개체를 만들었습니다. 기본: 명명된Colors={AliceBlue:[240,248,255],AntiqueWhite:[2...에서 2023-11-06 09:05:5002210관련 주제더>CSSCSS 중심CSS에 그림을 삽입하는 방법디스플레이 너머의 CSS...CSS 글꼴 색상CSS는 무엇입니까?CSS에서 삼각형을 작성하는 방법CSS는 텍스트 색상을 설정인기 추천디스플레이 타원을 초과하도록 CSS를 설정하는 방법CSS에서 글꼴 크기를 설정하는 방법css中的hover怎么用CSS에서 문자 간격을 설정하는 방법css3新特性有哪些인기 튜토리얼더>관련 튜토리얼인기 추천최신 강좌CSS Flexbox 레이아웃으로 플레이235755G만큼 빠른 레이아웃 만들기: CSS 그리드 그리드 레이아웃27009New Dugu Jiujian: CSS3 필수 콘텐츠248149일간 가장 이해하기 쉬운 HTML+CSS 강좌38133CSS 코드 예160831최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)1394746 학습 시간JAVA 초보자용 비디오 튜토리얼2347185 학습 시간Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼493059 학습 시간웹 프론트 엔드 개발에 대한 빠른 소개213403 학습 시간PS 비디오 튜토리얼을 처음부터 마스터하세요842469 학습 시간[웹 프런트엔드] Node.js 빠른 시작3073 학습 시간해외 웹 개발 풀스택 강좌 총집합2480 학습 시간Go 언어 실습 GraphQL1958 학습 시간550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다464 학습 시간기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬10689 학습 시간최신 다운로드더>웹 효과웹사이트 소스 코드웹사이트 자료프론트엔드 템플릿[양식 버튼] jQuery 기업 메시지 양식 연락처 코드[플레이어 특수 효과] HTML5 MP3 뮤직 박스 재생 효과[메뉴 탐색] HTML5 멋진 입자 애니메이션 탐색 메뉴 특수 효과[양식 버튼] jQuery 시각적 양식 드래그 앤 드롭 편집 코드[플레이어 특수 효과] VUE.JS 모방 Kugou 음악 플레이어 코드[HTML5 특수 효과] 클래식 HTML5 푸시 박스 게임[그림 특수 효과] 이미지 효과를 추가하거나 줄이기 위해 jQuery 스크롤[사진 앨범 효과] CSS3 개인 앨범 커버 호버 확대/축소 효과[프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿[프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿[프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿[프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿[프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿[프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿[프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.[프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿[PNG 소재] 귀여운 여름 요소 벡터 자료(EPS+PNG)[PNG 소재] 4개의 빨간색 2023 졸업 배지 벡터 자료(AI+EPS+PNG)[배너 그림] 노래하는 새와 꽃 디자인 봄 배너 벡터 자료로 가득 찬 카트(AI+EPS)[PNG 소재] 황금 졸업 모자 벡터 자료(EPS+PNG)[PNG 소재] 흑백 스타일 산 아이콘 벡터 자료(EPS+PNG)[PNG 소재] 다양한 색상의 망토와 포즈를 갖춘 슈퍼히어로 실루엣 벡터 자료(EPS+PNG)[배너 그림] 플랫 스타일 식목일 배너 벡터 자료(AI+EPS)[PNG 소재] 9개의 만화 스타일의 폭발적인 채팅 거품 벡터 자료(EPS+PNG)[프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿[프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿[프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿[프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿[프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿[프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿[프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.[프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿회사 소개부인 성명SitemapPHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！
