클래식 CSS 인터뷰 질문-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

클래식 CSS 인터뷰 질문

coldplay.xixi

Aug 03, 2020 pm 03:18 PM

CSS 면접 질문

클래식 CSS 인터뷰 질문

1. 표준 박스 모델과 하위 버전 IE 박스 모델(이상한 모드)의 차이점은 무엇인가요?

표준 상자 모델: 콘텐츠 너비(콘텐츠)+테두리+패딩+여백;

IE 낮은 버전 상자 모델: 콘텐츠 너비(콘텐츠+테두리+패딩)+마진;

가장 큰 차이점은 상자 모델입니다. of 콘텐츠 부분의 높이와 너비입니다

border-box: IE 기존 상자 모델, 요소의 높이/너비 속성 설정은 테두리+패딩+콘텐츠 부분의 높이와 너비를 나타냅니다
:
2020 올해의 CSS 면접 질문 요약(최신)

2. CSS3 속성을 사용하여 삼각형 작성

<style>
p{
width: 0;
height: 0;
border-top: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid red;
border-left: 40px solid transparent;
}
</style>
</head>
<body>
<!-- 想要改变三角形的方向只需要改变border属性值（即tblr） -->
<p></p>
</body>

3. HTML5를 이해하는 방법은 무엇입니까?

(1) 프론트엔드 분야에서 H5는 단순한 기술적 포인트가 아닌 기술 집합(기술 스택)이므로 HTML 사양으로 이해할 수 없습니다. (2), html, css 및 js의 세 가지 측면에서 정리할 수 있습니다. > ~ ~ ~ > WeChat 공개 계정 개발

H5 개발은 일반적으로 포괄적인 H5 기술 스택(HTML 개선, CSS 개선, JavaScript 개선)을 사용하여 웹 애플리케이션 개발

4. CSS3의 새로운 기능은 무엇입니까?

(1), RGBA 및 투명도

(2), background-image, background-origin, background-size, background-repeat

(3), word-wrap(분할 수 없는 긴 단어 감싸기)word-wrap: break-word;

(4), text-shadow: text-shadow: 5px 5px 5px #ccc; (

수평 그림자, 수직 그림자, 흐림 거리, 그림자 색상

)

(5), 글꼴 -얼굴: 사용자 정의 자신만의 글꼴

(6),

둥근 모서리(테두리 반경): border-radius 속성은 둥근 모서리를 만드는 데 사용됩니다.

(7), box-shadow: 5px 5px 5px #ccc ;

( 8),

미디어 쿼리: 두 개의 CSS 세트를 정의하면 브라우저 크기가 변경될 때 서로 다른 속성이 사용됩니다

5. 모바일 프로젝트에서 box-sizing: border -box를 사용하는 이유는 무엇입니까?

box-sizing:border-box; 너비 오버플로를 방지하고 가로 스크롤 막대를 유발할 수 있습니다(모바일 프로젝트는 모두 고정되지 않은 너비입니다)

6. ?

display: none은 해당 요소를 표시하지 않으며 더 이상 문서 레이아웃에서 공간을 할당하지 않습니다(리플로우 + 다시 그리기).

visibility: hide은 해당 요소를 숨깁니다. 문서 원래 공간은 여전히 레이아웃에 유지됩니다(다시 그리기)

다시 그리기: 렌더 트리의 일부 요소가 속성을 업데이트해야 할 때 이러한 속성은 요소의 모양과 스타일에만 영향을 미치고 예를 들어 배경색인 경우 다시 그리기라고 합니다.

리플로우:

, 표시되는 DOM 요소 추가 또는 삭제와 같이 페이지의 레이아웃 및 기하학적 속성이 변경될 때 리플로우가 필요합니다.

、元素位置的改变

、元素尺寸的改变（边框、尺寸、填充、宽度、高度）

、内容的改变（比如文本的改变和图片大小的改变而引起的计算值宽度和高度的改变）

、页面渲染初始化

、浏览器窗口尺寸的改变-resize事件发生时

回流必将引起重绘，重绘不一定会引起回流

7、对BFC（块级格式化上下文block formatting context）的理解？

简单的来说BFC是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。

8、如何居中p？如何居中一个浮动元素？如何让绝对定位的p居中？

居中p

<style>
p{
width: 200px;
height: 200px;
margin:0 auto;
background-color: pink;
}
</style>
</head>
<body>
<p></p>
</body>

居中一个浮动的元素上下左右居中

<style>
p{
width: 200px;
height: 200px;
background-color: pink;
float: left;
position: absolute;
left: 50%;
top: 50%;
margin: -100px 0 0 -100px;
}
</style>
</head>
<body>
<p></p>
</body>

绝对定位水平居中

<style>
p{
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
 
}
</style>
</head>
<body>
<p></p>
</body>

9、position的值？

static（默认）：按照正常文档流进行排列
relative（相对定位）不脱离文档流，参考自身的top、right、bottom、left进行定位
absolute（绝对定位）参考其最近的一个非static的父级元素通过top、right、bottom、left进行定位
fixed（固定定位）所固定的参照对象是可视窗口的位置

10、常见的兼容性问题

不同浏览器标签默认的padding和margin不一样，*{padding:0;margin:0}

chorme浏览器中文界面下默认会将小于12px的文本强制按照12px显示，可通过加入css属性-webkit-text-size-adjust:none;

11、为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。

浮动带来的问题：

父元素的高度无法被撑开

与浮动元素同级的非浮动元素（内联元素）会跟随其后

若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方式：

父级p定义高度

最后一个浮动元素后加空p标签，并添加样式clear：both

包含浮动元素的父标签添加样式overflow为hidden和auto

父级定义zoom

相关教程推荐：CSS视频教程

위 내용은 클래식 CSS 인터뷰 질문의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

이 기사는 CSDN에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

관련 기사

마우스 움직임을 시뮬레이션합니다Apr 22, 2025 am 11:45 AM

라이브 토크 나 수업 중에 대화식 애니메이션을 표시해야한다면 슬라이드와 상호 작용하기가 항상 쉽지 않다는 것을 알 수 있습니다.

Astro Actions 및 Fuse.js로 검색을 전원합니다Apr 22, 2025 am 11:41 AM

Astro를 사용하면 빌드 중에 대부분의 사이트를 생성 할 수 있지만 Fuse.js와 같은 것을 사용하여 검색 기능을 처리 할 수있는 작은 서버 측 코드가 있습니다. 이 데모에서는 퓨즈를 사용하여 개인 "북마크"세트를 검색합니다.

정의되지 않은 : 세 번째 부울 가치Apr 22, 2025 am 11:38 AM

문서가 저장되는 동안 Google 문서에서 볼 수있는 것과 유사한 프로젝트 중 하나에서 알림 메시지를 구현하고 싶었습니다. 다시 말해, a

제 3의 진술의 방어에서Apr 22, 2025 am 11:25 AM

몇 달 전에 나는 해커 뉴스를 썼고 (하나와 마찬가지로) IF 문을 사용하지 않는 것에 대한 (현재 삭제 된) 기사를 가로 질러 달렸습니다. 이 아이디어를 처음 접한다면 (나처럼

다국어 번역에 웹 스피치 API 사용Apr 22, 2025 am 11:23 AM

공상 과학 소설의 초기부터 우리는 우리와 대화하는 기계에 대해 환상을 가지고 있습니다. 오늘은 평범합니다. 그럼에도 불구하고 제작 기술

Jetpack Gutenberg 블록Apr 22, 2025 am 11:20 AM

Gutenberg가 핵심으로 풀려 났을 때를 기억합니다. 왜냐하면 나는 그날 WordCamp에 있었기 때문입니다. 지금은 몇 달이 지났으므로 점점 더 많은 것을 상상합니다.

VUE에서 재사용 가능한 페이지 매김 구성 요소 생성Apr 22, 2025 am 11:17 AM

대부분의 웹 애플리케이션의 배후에있는 아이디어는 데이터베이스에서 데이터를 가져 와서 최상의 방법으로 사용자에게 제시하는 것입니다. 우리가 거기에서 데이터를 다룰 때

'Box Shadows'와 Clip-Path를 함께 사용합니다Apr 22, 2025 am 11:13 AM

#039;는 당신이 의미있는 것처럼 보일 수있는 상황에 대한 약간의 단계를 수행하자. 이것에서

See all articles

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.