클래식 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은 해당 요소를 숨깁니다. 문서 원래 공간은 여전히 레이아웃에 유지됩니다(다시 그리기)

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

리플로우:

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

<2>、元素位置的改变

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

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

<5>、页面渲染初始化

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

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

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

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

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

<1>居中p

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

로그인 후 복사

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

<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>

로그인 후 복사

<3>绝对定位水平居中

<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的值？