[편집 및 공유] 프론트엔드 인터뷰를 위한 CSS의 고주파 테스트 포인트 75개

이 기사에서는 학생들이 가을 모집에 성공하는 데 도움이 되는 프런트엔드 인터뷰를 위한 CSS의 고주파 테스트 포인트 75를 요약하고 공유합니다.

이론

1. 박스 크기 속성 값의 기능은 무엇입니까?

요소 상자 모델의 구문 분석 모드를 제어하는 ​​데 사용됩니다, 기본값은 content-box

• context-box: W3C의 표준 상자 모델, 높이/너비 속성 설정 참조할 요소는 콘텐츠 부분의 높이/너비입니다context-box：W3C 的标准盒子模型，设置元素的 height/width 属性指的是 content 部分的高/宽

• border-box

border-box: IE 기존 상자 모델. 요소의 높이/너비 속성 설정은 테두리 + 패딩 + 콘텐츠 부분의 높이/너비를 의미합니다

절대절대위치, yes 누구를 기준으로 하는 위치인가?

CSS 위치 속성은 문서에서 요소의 위치를 ​​지정하는 데 사용됩니다. 절대 요소는 일반 문서 흐름에서 이동되며 요소에 예약된 공간이 없습니다. 요소의 위치는 가장 가까운

비정적 위치의 상위 요소

를 기준으로 지정된 요소의 위치를 ​​지정하여 결정됩니다. 절대적으로 배치된 요소에는 여백이 설정될 수 있으며 다른 여백과 병합되지 않습니다.

3. 인라인 요소와 블록 수준 요소의 차이점은 무엇인가요?

인라인 요소: 인라인 요소는 해당 레이블의 테두리에 포함된 공간만 차지합니다.

블록 수준 요소: 블록 수준 요소는 상위 요소(컨테이너)의 전체 공간을 차지하므로 "블록"을 생성합니다.

차이:

새 줄을 시작할지 여부

: 기본적으로 인라인 요소는 새 줄에서 시작되지 않지만 블록 수준 요소는 새 줄에서 시작됩니다.

• 너비와 높이 설정 가능 여부
: 블록 수준 요소는 너비와 높이 속성을 설정할 수 있습니다. 참고: 블록 수준 요소의 너비를 설정하더라도 여전히 전용 라인을 차지합니다. 인라인 요소의 너비와 높이 설정이 유효하지 않습니다.

• 내부 및 외부 여백 설정이 가능한가요?
: 블록 수준 요소를 사용할 수 있습니다. 인라인 요소의 가로 패딩 왼쪽/오른쪽 및 여백 왼쪽/오른쪽은 여백 효과를 생성하지만 세로 패딩은- top/bottom, margin-top/bottom은 여백 효과를 생성하지 않습니다. (즉, 가로 방향은 유효하고, 세로 방향은 무효)

• 기타 포함 여부
: 블록 수준 요소에는 인라인 요소와 블록 수준 요소가 포함될 수 있습니다. 인라인 요소는 블록 수준 요소를 포함할 수 없습니다

• 4. 일반적인 인라인 요소와 블록 수준 요소는 무엇인가요?

1. 일반적인 인라인 요소<span>, <a>, <lable>, <strong>, <b>, <small>, <abbr>, &lt ; 버튼>, , , , <img alt="[편집 및 공유] 프론트엔드 인터뷰를 위한 CSS의 고주파 테스트 포인트 75개" ></abbr></small></b></strong></lable></a></span>

2. 공통 블록 수준 요소

<div>, <p>, </p> <li>, <h1> ~ <h6>, </h6> </h1> <form>, <header>, <hr>, <ol>, </ol> <ul>, <article>, <aside>, <dd>,<dl> <code><span>、<a>、<lable>、<strong>、<b>、<small>、<abbr>、<button>、<input>、<textarea>、<select>、<img alt="[편집 및 공유] 프론트엔드 인터뷰를 위한 CSS의 고주파 테스트 포인트 75개" ></select></textarea></button></abbr></small></b></strong></lable></a></span>

2、常见的块级元素

<div>、<p>、</p> <li>、<h1> ~ <h6>、</h6> </h1> <form>、<header>、<hr>、<ol>、</ol> <ul>、<article>、<aside>、<dd>、<dl> <h2 data-id="heading-6">5. 브라우저에서 지원하는 최소 글꼴 크기를 어떻게 감지하나요? <strong></strong> </h2>JS를 사용하여 DOM 글꼴을 특정 값으로 설정한 다음 해당 값을 성공적으로 설정하면 지원된다는 의미입니다. <p></p> <h2 data-id="heading-7">6. CSS에서 "flex:1;"은 무엇을 의미하나요? <strong></strong> </h2>flex는 flex-grow, flex-shrink 및 flex-basis의 약어입니다. <p></p>auto(1 1 자동)와 none(0 0 자동)의 두 가지 바로가기 값 외에도 다음과 같은 설정 방법도 있습니다. <p></p> <ul>flex의 값이 음수가 아닌 숫자인 경우 number는 flex-grow 값이고 flex-shrink는 1이고 flex-basis는 0%이며 다음은 동일합니다: </ul> <pre class="brush:php;toolbar:false">.item {flex: 1;} .item {     flex-grow: 1;     flex-shrink: 1;     flex-basis: 0%; }</pre> </dl> <li>flex 값이 0이면 해당 세 값은 0 1 0%<pre class="brush:php;toolbar:false">.item {flex: 0;} .item {     flex-grow: 0;     flex-shrink: 1;     flex-basis: 0%; }</pre> <li> </dd></aside></article> </ul>더 많은 작성 방법을 보려면 <p>MDN-flex<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox" target="_blank" textvalue="MDN-flex"> 보기 </a></p> <h2 data-id="heading-8">를 참조하세요. 7 CSS 미디어 쿼리란 무엇인가요? <strong></strong> </h2>미디어 쿼리는 CSS2 시대부터 존재했으며 CSS3이 도입된 이후 더욱 강력해졌습니다. 부트스트랩의 반응형 기능은 여기서 비롯되었습니다. <p></p>간단히 말하면 미디어 쿼리는 CSS를 수정하기 위한 일종의 구문입니다. 미디어 쿼리를 도입하면 다양한 스타일 시트를 적용하기 위한 미디어 환경을 결정하는 표현식을 추가할 수 있습니다. 즉, 콘텐츠를 변경하지 않고도 페이지 레이아웃을 변경하여 다양한 장치에 정확하게 적응할 수 있습니다<p></p> <h2 data-id="heading-9"><strong>8. 페이지에서 스타일을 가져올 때 링크를 사용하는 것과 @import를 사용하는 것의 차이점은 무엇인가요? </strong></h2> <ul> <li><p>link는 HTML 태그이고 @import는 CSS에서 제공됩니다. </p></li> <li><p>페이지가 로드되면 링크도 동시에 로드되며 @import가 참조하는 CSS는 페이지가 로드될 때까지 기다립니다. </p></li> <li><p>link는 XHTML 태그이며 호환성 문제가 없지만 @import는 IE5 이상에서만 인식될 수 있습니다. </p></li> <li><p>link 스타일의 가중치는 @import의 가중치보다 높습니다. </p></li> </ul> <h2 data-id="heading-10"><strong>9. CSS는 왜 상위 선택자를 지원하지 않나요? </strong></h2> <p>이 질문에 대한 대답은 "왜 CSS 인접 형제 선택자는 다음 요소만 지원하고 이전 형제 요소는 지원하지 않습니까?"와 같습니다. </p> <p>브라우저는 HTML 문서를 앞에서 뒤로, 외부에서 내부로 구문 분석합니다. 그래서 헤더가 먼저 나오고 그 다음에 메인 컨텐츠가 나오는 페이지 로딩 상황을 자주 보게 됩니다. </p> <p>그러나 CSS가 상위 선택기를 지원하는 경우 HTML 문서를 렌더링하기 전에 페이지의 모든 하위 요소를 로드해야 합니다. 소위 "상위 선택기"는 하위 요소가 상위 요소에 영향을 미친다는 의미이기 때문입니다. 아직 로드되지 않았습니다. 조상 요소의 스타일에 어떻게 영향을 미치나요? 결과적으로 웹 페이지 렌더링 속도가 크게 느려지고 브라우저에 긴 화이트보드가 표시됩니다. 일반적으로 CSS와 HTML 자체의 렌더링 메커니즘에 의해 결정됩니다. </p> <h2 data-id="heading-11"><strong>10. 여백과 패딩은 어떤 시나리오에 적합합니까? </strong></h2> <p>여백을 사용해야 하는 경우: </p> <ul> <li>테두리 바깥에 공간을 추가해야 할 때 </li> <li>공간에 배경색이 필요하지 않습니다. </li> <li>위아래로 연결된 두 상자 사이의 공간이 서로 오프셋되어야 하는 경우. </li> </ul> <p>패딩을 사용하는 경우: </p> <ul> <li>테두리 안쪽에 공백을 추가해야 합니다</li> <li> 공백에는 배경색이 필요합니다</li> <li>위아래로 연결된 두 상자의 공백, 둘의 합이 되기를 바랍니다. </li> </ul> <h2 data-id="heading-12"><strong>11. 디스플레이의 가치는 무엇인가요? </strong></h2> <p>일반적인 것은 다음과 같습니다:</p> <table> <thead><tr class="firstRow"> <th align="center">value</th> <th align="center">description</th> </tr></thead> <tbody> <tr> <td align="center">none</td> <td align="center">요소가 표시되지 않습니다</td> </tr> <tr> <td align="center">block</td> <td align="center">이 요소는 다음과 같이 표시됩니다. 블록 수준 요소이며 이 요소의 앞뒤에 개행 문자가 있습니다. </td> </tr> <tr> <td align="center">인라인</td> <td align="center">기본값. 이 요소는 요소 앞이나 뒤에 줄 바꿈이 없는 인라인 요소로 표시됩니다. </td> </tr> <tr> <td align="center">inline-block</td> <td align="center">인라인 블록 요소. 너비와 높이를 설정하고 나란히 표시할 수 있습니다. </td> </tr> <tr> <td align="center">inline-table</td> <td align="center">이 요소는 테이블 앞뒤에 줄 바꿈 없이 인라인 테이블(테이블과 유사)로 표시됩니다. </td> </tr> <tr> <td align="center">table</td> <td align="center">이 요소는 테이블 앞뒤에 줄 바꿈이 있는 블록 수준 테이블(테이블과 유사)로 표시됩니다. </td> </tr> <tr> <td align="center">inherit</td> <td align="center">은 표시 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다. </td> </tr> <tr> <td align="center">grid</td> <td align="center">Grid는 가장 강력한 CSS 레이아웃 솔루션입니다. 웹 페이지를 그리드로 나누고, 서로 다른 그리드를 임의로 결합하여 다양한 레이아웃을 만들 수 있습니다. </td> </tr> <tr> <td align="center">flex</td> <td align="center">유연한 레이아웃은 상자 모양 모델에 최대의 유연성을 제공하는 데 사용됩니다. </td> </tr> </tbody> </table> <p>其他的可以自行查阅：<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/display" target="_blank" textvalue="MDN-display">MDN-display</a></p> <h2 data-id="heading-13"><strong>12. 两个同级的相邻元素之间，有看不见的空白间隔，是什么原因引起的？有什么解决办法？</strong></h2> <p>行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。</p> <p>解决方法：</p> <ul> <li>相邻元素代码代码全部写在一排</li> <li>浮动元素，float:left;</li> <li>在父级元素中用font-size:0;</li> </ul> <h2 data-id="heading-14"><strong>13. CSS 中，有哪些方式可以隐藏页面元素？有什么区别？</strong></h2> <p><strong>display:none</strong>：元素不可见，不占据空间，无法响应点击事件</p> <p><strong>visibility:hidden</strong>：元素不可见，占据页面空间，无法响应点击事件</p> <p><strong>opacity:0</strong>：改变元素透明度，元素不可见，占据页面空间，可以响应点击事件</p> <p><strong>设置height、width属性为0</strong>：将元素的 margin，border，padding，height和width 等影响元素盒模型的属性设置成0，如果元素内有子元素或内容，还应该设置其 overflow:hidden 来隐藏其子元素。特点：元素不可见，不占据页面空间，无法响应点击事件</p> <p><strong>position:absolute</strong>： 将元素移出可视区域，元素不可见，不影响页面布局</p> <p><strong>clip-path</strong>：通过裁剪的形式，元素不可见，占据页面空间，无法响应点击事件</p> <pre class="brush:php;toolbar:false">.hide { clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px); }</pre> <p>最常用的还是<code>display:none和visibility:hidden，其他的方式只能认为是奇招，它们的真正用途并不是用于隐藏元素，所以并不推荐使用它们

#	display: none	visibility: hidden	opacity: 0
页面中	不存在	存在	存在
重排	会	不会	不会
重绘	会	会	不一定
自身绑定事件	不触发	不触发	可触发
transition	不支持	支持	支持
子元素可复原	不能	能	不能
被遮挡的元素可触发事件	能	能	不能

14. 프런트엔드 프로젝트에서 CSS 스타일을 초기화해야 하는 이유는 무엇입니까?

브라우저 호환성 문제로 인해 브라우저마다 태그 기본값이 다릅니다. 브라우저의 CSS를 초기화하지 않으면 동일한 페이지가 브라우저마다 다르게 표시됩니다.

15. 표시:없음과 표시 여부:숨김의 차이점은 무엇인가요?

성능 측면에서

• display:none은 완전히 사라지고 문서 흐름에서 자리를 차지하지 않으며 브라우저는 요소를 구문 분석하지 않습니다.
• visibility:hidden은 시각적으로 사라집니다. 투명도가 0인 경우 효과는 문서 흐름에서 한 위치를 차지하고 브라우저는 요소를 구문 분석합니다.

성능 측면에서

• display:none보다 표시 여부:숨김을 사용하는 것이 좋습니다. :none 표시를 전환하면 페이지가 리플로우됩니다(페이지의 일부 요소가 크기, 레이아웃, 표시, 숨기기 등을 변경해야 할 경우 페이지가 다시 작성됩니다. 이것이 리플로우입니다(모든 페이지가 리플로우될 때 리플로우해야 함). 처음 로드됨) 표시 여부가 전환되면 리플로우가 발생하지 않습니다.

16. CSS3에는 어떤 새로운 기능이 추가되나요?

Selector: 범용 형제 선택기, 의사 클래스 선택기, 의사 요소 선택기, 제외 선택기, 상태 의사 클래스 선택기

새 스타일: 테두리, 상자 그림자, 배경, 텍스트, 색상

• border:

  • border-radius: 둥근 테두리 만들기
  • box-shadow: 요소에 그림자 추가
  • border-image: 이미지를 사용하여 테두리 그리기

• 배경: 배경과 관련된 몇 가지 새로운 속성, 즉 background-clip, background-origin, background-size 및 background-가 추가되었습니다. breakbackground-clip、background-origin、background-size和background-break

• 文字：word-wrap、text-overflow、text-shadow、text-decoration

过渡：transition

转换：transform

动画：animation

其他：渐变、flex弹性布局、Grid栅格布局、媒体查询、混合模式等等...

17. 什么是硬件加速？

• 硬件加速就是将浏览器的渲染过程交给GPU处理，而不是使用自带的比较慢的渲染器。这样就可以使得 animation 与 transition

• 텍스트: 단어 줄 바꿈, 텍스트 오버플로, 텍스트 그림자, 텍스트 장식

• transition

  : 전환

transformation: 변환

animation
• : animation

Others
• : 그라데이션, flexelastic 레이아웃, Grid 그리드 레이아웃, 미디어 쿼리, 블렌딩 모드 등...

  17. 하드웨어 가속이란 무엇인가요?

하드웨어 가속은 내장된 느린 렌더러를 사용하는 대신 브라우저의 렌더링 프로세스를 GPU에 넘겨주는 것입니다. 이렇게 하면 애니메이션과 전환이 더 부드러워집니다.
CSS를 사용하면 브라우저에서 하드웨어 가속을 활성화하여 GPU(그래픽 처리 장치)가 작동하도록 하여 성능을 향상시킬 수 있습니다.

대부분의 컴퓨터 그래픽 카드는 이제 하드웨어 가속을 지원합니다. 이를 고려하여 GPU의 성능을 사용하여 웹 사이트나 응용 프로그램이 보다 원활하게 작동하도록 할 수 있습니다.

18. ::before와 :after에서 이중 콜론과 단일 콜론의 차이점은 무엇인가요? 그들이 무엇을 하는지 설명해주세요.

단일 콜론(:)은 CSS3 의사 클래스에 사용됩니다. 일반적으로 호버, 링크 등과 같은 일부 특수한 요소 상태와 일치합니다.

🎜CSS3에는 이중 콜론(::)이 사용됩니다. 의사 요소(pseudo-elements) 이중 콜론과 의사 요소 이름으로 구성되며, 의사 요소는 일반적으로 뒤, 앞 등과 같은 특수한 위치와 일치합니다. 🎜🎜🎜🎜새 CSS3에 도입된 의사 요소는 더 이상 이전 단일 콜론 작성 방법을 지원하는 것이 허용되지 않습니다.🎜🎜🎜🎜삽입된 콘텐츠가 다른 콘텐츠보다 먼저 표시되도록 하려면 ::before를 사용하고, 그렇지 않으면 ::를 사용하세요. after, 코드 순서 측면에서 ::after에 의해 생성된 콘텐츠는 ::before🎜🎜🎜🎜pseudo-class🎜🎜🎜19에 의해 생성된 콘텐츠보다 늦습니다. 🎜🎜🎜대부분의 초보자는 CSS 매칭이 왼쪽에서 오른쪽으로 이루어진다고 생각하겠지만 실제로는 그 반대입니다. 🎜🎜CSS 일치는 렌더 트리가 구축될 때 발생합니다(Chrome 개발자 도구는 이를 레이아웃 프로세스에 속합니다). 이때 브라우저는 DOM을 구축하고 CSS 스타일을 얻었는데, 이때 해야 할 일은 DOM의 노드와 스타일을 일치시키는 것입니다. 성능을 향상시키기 위해 브라우저가 해야 할 일은 빠른 일치입니다. . 🎜🎜우선, 브라우저가 "표시되는" 노드에 해당하는 규칙을 찾는다는 점을 분명히 합시다. 이는 jQuery 선택기와 다르며, 후자는 해당 노드를 찾기 위해 규칙을 사용하므로 더 빠를 수 있습니다. 왼쪽에서 오른쪽으로. 하지만 전자의 경우 CSS의 크기가 크기 때문에 CSS 파일에 수천 개의 규칙이 있을 수 있으며 현재 노드의 경우 대부분의 규칙을 일치시킬 수 없습니다. 오른쪽(또한 오른쪽부터)에서 매칭을 시작하면 더 정확한 위치에서 시작하여 대부분의 부적절한 노드를 더 빨리 제거할 수 있습니다. 왼쪽에서 시작하면 더 깊게 들어갈 때만 매칭 실패를 찾을 수 있습니다. . 대부분의 규칙의 수준이 더 깊다면 자원 낭비가 됩니다. 🎜🎜위에 덧붙여, DOM 구성은 "단계별"이며 DOM은 렌더 트리 구성을 차단하지 않으며(CSSOM 블록만) 요소가 더 일찍 렌더링되도록 허용한다고 앞서 언급했습니다. 페이지. 🎜🎜다음 상황을 고려해보세요. 현재 DOM의 일부만 빌드하고 CSSOM이 완료되면 브라우저가 렌더 트리를 빌드합니다. 🎜

이때 각 노드에 대해 오른쪽에서 왼쪽으로 일치하는 규칙이 발견되면 해당 노드의 상위 노드가 레이어별로 일치하는지 관찰하기만 하면 되며 해당 상위 노드는 이미 DOM에 있어야 합니다. 이번에는.

그러나 반대로 DOM에 아직 존재하지 않는 노드를 매칭할 수도 있으며, 이때 매칭 프로세스는 리소스를 낭비합니다.

20. CSS 성능을 최적화하고 향상시키는 방법은 무엇입니까?

• 과도한 제약을 피하세요

• 후손 선택자를 피하세요

• 체인 선택자를 피하세요

• 간단한 구문을 사용하세요

• 불필요한 네임스페이스를 피하세요

• 불필요한 것을 피하세요

• 의 반복 의미론적 이름을 사용하는 것이 가장 좋습니다. 좋은 클래스 이름은 보이는 것보다 클래스 이름이 무엇인지 설명해야 합니다

• !important를 피하세요. 다른 선택자를 선택할 수 있습니다

• 규칙을 최대한 간결하게 하여 여러 클래스에서 반복되는 규칙을 병합할 수 있습니다

21. 스타일 태그를 본문 앞이나 뒤에 쓰면 어떤 차이가 있나요?

페이지 로딩은 위에서 아래로 진행됩니다. 물론 스타일이 먼저 로딩됩니다.

body 태그 뒤에 작성됩니다. 브라우저는 HTML 문서를 한 줄씩 파싱하므로 마지막에 작성된 스타일 시트(개요 또는 스타일 태그에 작성된)를 파싱하면 브라우저가 이전 렌더링을 중단하고 로딩을 기다리게 됩니다. 스타일 시트를 파싱하고 다시 렌더링한 후 Windows IE에서 FOUC 현상이 발생할 수 있습니다(즉, 스타일 실패로 인한 페이지 깜박임 문제)

22. 컨테이너 높이에 대한 요소의 세로 백분율 설정입니다. ?

요소의 너비를 백분율로 설정하는 경우 상위 컨테이너의 너비를 기준으로 계산됩니다. 그러나 padding-top, padding-bottom, margin-top, margin과 같은 수직 거리를 나타내는 일부 속성의 경우 -bottom 등은 백분율로 설정할 때 높이가 아닌 상위 컨테이너의 너비를 기준으로 합니다.

23. 전환과 애니메이션의 차이점은 무엇인가요?

• transition은 전환 속성으로, 구현 시 애니메이션을 실행하기 전에 이벤트(예: 마우스 이동, 포커스, 클릭 등)를 트리거해야 합니다. 플래시 트위닝 애니메이션과 유사하며 시작 키프레임과 끝 키프레임을 설정합니다. transition 是过度属性，强调过度，它的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。它类似于flash的补间动画，设置一个开始关键帧，一个结束关键帧。

• animation 是动画属性，它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。它也类似于flash的补间动画，但是它可以设置多个关键帧（用@keyframe定义）完成动画。

24. 说说你对盒子模型的理解？

当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）

一个盒子由四个部分组成：content、padding、border、margin

标准盒子模型：标准盒子模型，是浏览器默认的盒子模型

从上图可以看到：

• 盒子总宽度 = width + padding + border + margin;
• 盒子总高度 = height + padding + border + margin

也就是，width/height 只是内容高度，不包含 padding 和 border 值

所以上面问题中，设置width为200px，但由于存在padding，但实际上盒子的宽度有240px

IE 怪异盒子模型

从上图可以看到：

• 盒子总宽度 = width + margin;
• 盒子总高度 = height + margin;

也就是，width/height 包含了 padding 和 border 

animation은 애니메이션 속성으로, 구현 시 이벤트 트리거가 필요하지 않으며 시간을 설정한 후 자체적으로 실행할 수 있으며 애니메이션이 반복될 수 있습니다. 또한 플래시 트윈 애니메이션과 유사하지만 여러 키프레임(@keyframe으로 정의됨)을 설정하여 애니메이션을 완성할 수 있습니다.

24. 박스 모델에 대한 이해를 알려주세요.

문서를 레이아웃할 때 브라우저의 렌더링 엔진은 표준 중 하나인 CSS 기본 상자 모델을 기반으로 모든 요소를 ​​직사각형 상자로 나타냅니다. ) 상자는 콘텐츠)의 네 부분으로 구성됩니다. >, padding, border, margin

• 표준 상자 모델

  : 브라우저의 기본 상자 모델인 표준 상자 모델

• 당신처럼 위 그림에서 볼 수 있습니다:

상자의 총 너비 = 너비 + 패딩 + 테두리 + 여백

상자의 총 높이 = 높이 + 패딩 + 테두리 + 여백

즉, width/height는 콘텐츠 높이일 뿐이며 padding 및 border 값을 포함하지 않습니다. ​​

• 위 질문에서 를 width는 200px이지만 padding으로 인해 상자의 실제 너비는 240px입니다.

• IE 이상한 상자 모델
  🎜🎜🎜위 사진에서 볼 수 있듯이: 🎜🎜🎜 상자의 총 너비 = 너비 + 여백;🎜🎜상자의 총 높이 = 높이 + 여백;🎜🎜🎜즉, 너비/높이에는 패딩이 포함됩니다. 및 테두리 값 ​​🎜 🎜🎜25.Atom CSS란 무엇입니까? 장점과 단점은 무엇입니까? 🎜🎜🎜Atom CSS: Atomic CSS는 클래스가 한 가지 작업만 수행한다는 의미입니다. 🎜🎜BEM과 같이 일반적으로 사용되는 규칙과 달리 원자성 CSS는 분할되며 모든 CSS 클래스에는 고유한 CSS 규칙이 있습니다.🎜🎜🎜장점🎜🎜🎜🎜🎜CSS 크기를 줄이고 CSS 재사용을 향상시킵니다.🎜🎜🎜 🎜복잡성을 줄입니다. 명명🎜🎜🎜🎜🎜단점🎜🎜🎜🎜🎜메모리 비용이 증가합니다. CSS를 원자로 분할한 후 작성하기 전에 일부 클래스를 기억해야 합니다. tailwindcss가 완전한 도구 체인을 제공하더라도 배경을 작성할 때 시작이 bg라는 것을 기억해야 합니다. 🎜🎜🎜🎜 HTML 구조의 복잡성이 증가합니다. 전체 DOM에 이러한 클래스 이름이 있으면 필연적으로 디버깅에 문제가 발생할 수 있습니다. 때로는 특정 CSS 문제를 찾기가 어렵습니다🎜

• 你仍需要起class名。对于大部分属性而言，你可以只用到center,auto，100%，这些值，但是有时候你仍需要设定不一样的参数值，例如left，top，这时候你还需要起一个class名

26. 脱离文档流有哪些方法？

• float：使用 float 脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。

• absolute：absolute 称为绝对定位，是相对于该元素的父类（及以上，如果直系父类元素不满足条件则继续向上查询）元素进行定位的，并且这个父类元素的position必须是非static定位的（static是默认定位方式）。

• fixed: 固定定位，完全脱离文档流，相对于浏览器窗口进行定位。（相对于浏览器窗口就是相对于html）

27. CSSOM树和DOM树是同时解析的吗？

浏览器会下载 HTML 解析页面生成 DOM 树，遇到 CSS 标签就开始解析 CSS，这个过程不会阻塞，但是如果遇到了 JS 脚本，此时假如 CSSOM 还没有构建完，需要等待 CSSOM 构建完，再去执行 JS 脚本，然后再执行 DOM 解析，此时会阻塞。

28. CSS Sprites 是什么，如何使用？

CSS Sprites是一种网页图片应用处理方式，就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位。

优点：

• 减少网页的http请求，提高性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
• 减少图片的字节：多张图片合并成1张图片的字节小于多张图片的字节总和；
• 减少了命名困扰：只需对一张集合的图片命名，不需要对每一个小元素进行命名提高制作效率；

缺点：

• 图片合成比较麻烦；
• 背景设置时，需要得到每一个背景单元的精确位置；
• 维护合成图片时，最好只是往下加图片，而不要更改已有图片。

29. 如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。

30. canvas 在标签上设置宽高，与在 style 中设置宽高有什么区别？

• canvas标签的width和height是画布实际宽度和高度，绘制的图形都是在这个上面。

• 而style的width和height是canvas在浏览器中被渲染的高度和宽度。

• 如果canvas的width和height没指定或值不正确，就被设置成默认值。

31. 相邻的两个 inline-block 节点为什么会出现间隔，该如何解决？

真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子：

<input> <input>

我们使用CSS更改非inline-block水平元素为inline-block水平，也会有该问题

这种表现是符合规范的应该有的表现。

元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。

不过，这类间距有时会对我们布局，或是兼容性处理产生影响，以下展示几种方法去掉

• 移除空格：元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就木有了

• 使用margin负值

  .space a { 
      display: inline-block; 
      margin-right: -3px; 
  }

• 使用font-size:0

  .space { font-size: 0; } 
  .space a { font-size: 12px; }

• 使用letter-spacing

  .space { letter-spacing: -3px; } 
  .space a { letter-spacing: 0; }

• 使用word-spacing

  .space { word-spacing: -6px; } 
  .space a { word-spacing: 0; }

32. Sass、Less 是什么？为什么要使用他们？

他们都是 CSS 预处理器，是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。 例如 Less 是一种动态样式语言，将 CSS 赋予了动态语言的特性，如变量，继承，运算， 函数，LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可以在服务端运行 (借助 Node.js)。

它们的优点？

• 结构清晰，便于扩展。 可以方便地屏蔽浏览器私有语法差异。封装对浏览器语法差异的重复处理， 减少无意义的机械劳动。

• 可以轻松实现多重继承。 完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

33. CSS3 新增伪类有哪些？

• p:first-of-type 选择属于其父元素的首个元素
• p:last-of-type 选择属于其父元素的最后元素
• p:only-of-type 选择属于其父元素唯一的元素
• p:only-child 选择属于其父元素的唯一子元素
• p:nth-child(2) 选择属于其父元素的第二个子元素
• :enabled :disabled 表单控件的禁用状态。
• :checked 单选框或复选框被选中
• ...

34. CSS 动画和 JS 实现动画分别有哪些优缺点？

1. CSS动画

优点

• 浏览器可以对动画进行优化
• 代码相对简单,性能调优方向固定
• 对于帧速表现不好的低版本浏览器，CSS3可以做到自然降级，而JS则需要撰写额外代码

缺点

• 运行过程控制较弱,无法附加事件绑定回调函数
• 代码冗长，想用CSS实现稍微复杂一点动画,最后CSS代码都会变得非常笨重

2. JS 动画

优点

• 控制能力很强, 可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消都是可以做到的。
• 动画效果比css3动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只有js动画才能完成
• CSS3有兼容性问题，而JS大多时候没有兼容性问题

缺点

• 代码的复杂度高于CSS动画
• JavaScript在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情况

35. 为什么会出现浮动？什么时候需要清除浮动？清除浮动的方式有哪些？

什么是浮动：浮动（float）最初是为了让文字环绕图片排布，就想报纸上面的图文混排模式。但 Web 开发人员很快意识到，任何东西都可以浮动，而不仅仅是图像，所以浮动的使用范围扩大了。浮动曾被用来实现整个网站页面的布局，它使信息列得以横向排列（默认的设定则是按照这些列在源代码中出现的顺序纵向排列）。目前出现了更新更好的页面布局技术，所以使用浮动来进行页面布局应被看作传统的布局方法。

什么时候需要清除浮动：

• 父元素的高度无法被撑开，影响与父元素同级的元素
• 与浮动元素同级的非浮动元素（内联元素）会跟随其后
• 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方式：

• 父级div定义height
• 最后一个浮动元素后加空div标签 并添加样式clear:both。
• 包含浮动元素的父标签添加样式overflow为hidden或auto。
• 父级div定义zoom

36. IconFont 的原理是什么？

IconFont 的使用原理来自于 css 的 @font-face 属性。

这个属性用来定义一个新的字体，基本用法如下：

@font-face { 
    font-family: <yourfontname>; 
    src: <url> [<format>],[<source> [<format>]], *; 
    [font-weight: <weight>]; 
    [font-style: <style>]; 
}</style></weight></format></source></format></url></yourfontname>

• font-family：为载入的字体取名字。
• src：[url]加载字体，可以是相对路径，可以是绝对路径，也可以是网络地址。[format]定义的字体的格式，用来帮助浏览器识别。主要取值为：【truetype(.ttf)、opentype（.otf）、truetype-aat、embedded-opentype(.eot)、svg(.svg)、woff(.woff)】。
• font-weight：定义加粗样式。
• font-style：定义字体样式。

37. 分析比较 opacity:0、visibility:hidden、display:none 优势和使用场景

可以从以下三点进行分析

1. 结构

• display: none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击
• visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击
• opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击

2. 继承

• display: none和opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。
• visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显示。

3. 性能

• display: none: 修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大
• visibility: hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容
• opacity: 0:修改元素会造成重绘，性能消耗较少

38. CSS 中有哪些定位方式？（position有哪些属性值？）

static: 这个是元素的默认定位方式，元素出现在正常的文档流中，会占用页面空间。

relative: 相对定位方式，相对于其原来的位置进行定位。会占用该元素在文档中初始的页面空间，即在使用top，bottom，left，right进行移动位置之后依旧不会改变其所占用空间的位置。可以使用z-index进行在z轴方向上的移动。

absolute: 绝对定位方式，脱离文档流，不会占用页面空间。以最近的不是static定位的父级元素作为参考进行定位，如果其所有的父级元素都是static定位，那么此元素最终则是以当前窗口作为参考进行定位。

fixed: 绝对定位方式，直接以浏览器窗口作为参考进行定位。其它特性同absolute定位。 当父元素使用了transform的时候，会以父元素定位。

sticky: 粘性定位，可以简单理解为relative和fixed布局的混合。当粘性约束矩形在可视范围内为relative，反之，则为fixed粘性定位元素如果和它的父元素一样高，则垂直滚动的时候，粘性定位效果是不会出现的，它的定位效果完全受限于父级元素们。

39. flexbox(弹性盒布局模型)是什么，使用什么场景？

Flexible Box 简称 flex，意为”弹性布局”，可以简便、完整、响应式地实现各种页面布局

采用Flex布局的元素，称为flex容器container

它的所有子元素自动成为容器成员，称为flex项目item

容器中默认存在两条轴，主轴和交叉轴，呈90度关系。项目默认沿主轴排列，通过flex-direction来决定主轴的方向。每根轴都有起点和终点，这对于元素的对齐非常重要

关于flex常用的属性，我们可以划分为容器属性和容器成员属性

容器属性有：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content

容器成员属性有： order、flex-grow、flex-shrink、flex-basis、flex、align-self

更多属性写法可前往 MDN-flex 查看

40. Z-index 속성은 언제 유효하지 않게 되나요?

일반적으로 Z-색인은 두 개의 겹치는 레이블이 있을 때 사용되며, 특정 상황에서는 그 중 하나가 다른 레이블 위나 아래에 나타나도록 제어할 수 있습니다. z-index 값이 클수록 높아집니다. Z-색인 요소의 위치 속성은 상대, 절대 또는 고정이어야 합니다.

다음 상황에서는 z-index 속성이 유효하지 않습니다.

• 상위 요소의 위치가 상대적인 경우 하위 요소의 Z-index가 유효하지 않습니다. 해결 방법: 상위 요소의 위치를 ​​절대 또는 정적으로 변경합니다.

• 요소는 위치 속성을 비정적 속성으로 설정하지 않습니다. 해결책: 요소의 위치 속성을 상대, 절대 또는 고정 중 하나로 설정하십시오.

• 요소는 z-인덱스를 설정하는 동안 부동 소수점도 설정합니다. 해결 방법: float를 제거하고 디스플레이로 변경:

41. BFC를 트리거하는 방법과 BFC의 적용 시나리오는 무엇입니까?

다음으로 이동하려면 클릭하세요. 프런트 엔드 레이아웃에 대한 BFC에 대한 간략한 설명

42 CSS 로딩으로 인해 차단이 발생합니까?

먼저 결론을 내리겠습니다.

• css 로딩은 DOM 트리의 구문 분석을 차단하지 않습니다.
• css 로딩은 DOM 트리의 렌더링을 차단합니다.
• css 로딩은 후속 js 문 실행을 차단합니다.

사용자에게 화면이 장시간 표시되는 것을 방지하려면 CSS 로딩 속도를 최대한 개선해야 합니다. 예를 들어 다음 방법을 사용할 수 있습니다.

• CDN을 사용하세요(CDN에서는 네트워크 상태에 따라 가장 가까운 캐시된 콘텐츠를 찾아냅니다. 노드는 리소스를 제공하므로 로딩 시간을 줄일 수 있습니다.

• CSS를 압축합니다. (webpack, gulp 등 다양한 패키징 도구를 사용할 수 있습니다.) , 또는 gzip 압축을 켤 수 있습니다)

• 캐시를 합리적으로 사용하세요(캐시 제어, 만료, E-태그를 설정하는 것이 좋지만 한 가지 주의할 점은 파일이 업데이트된 후에는 캐시를 피해야 한다는 것입니다) 캐싱의 영향 중 하나는 파일 이름 뒤에 버전 번호를 추가하는 것입니다. )

• http 요청 수를 줄이고, 여러 CSS 파일을 병합하거나, 인라인 스타일을 직접 작성하세요(인라인 스타일의 한 가지 단점은 다음과 같습니다). 캐시할 수 없음)

43. 브라우저 렌더링 프로세스에 대해 간략히 설명합니다

브라우저 렌더링 프로세스는 다음과 같습니다.

• HTML은 파일을 구문 분석하여 DOM 트리를 생성하고, CSS 파일을 구문 분석하여 CSSOM 트리를 생성합니다.

• Dom 트리와 CSSOM 트리를 결합하여 렌더 트리 생성

• 렌더 트리에 따라 렌더링하고 그려 픽셀을 화면에 렌더링합니다.

프로세스에서 볼 수 있습니다.

• DOM 구문 분석과 CSS 구문 분석은 두 개의 병렬 프로세스이므로 CSS 로딩이 DOM 구문 분석을 차단하지 않는 이유도 설명됩니다.

• 렌더 트리는 DOM 트리와 CSSOM 트리에 의존하기 때문에 CSSOM 트리가 빌드될 때까지, 즉 CSS 리소스 로딩이 완료될 때까지(또는 CSS 리소스 로딩이 실패할 때) 렌더링을 시작해야 합니다. 따라서 CSS 로딩은 Dom 렌더링을 차단합니다.

• js는 이전 Dom 노드 및 CSS 스타일에서 작동할 수 있으므로 브라우저는 html에서 CSS 및 js의 순서를 유지합니다. 따라서 후속 js가 실행되기 전에 스타일 시트가 로드되어 실행됩니다. 따라서 CSS는 후속 js의 실행을 차단합니다.

44. js와 css는 DOM 트리 구성에 어떤 영향을 미치나요?

다음으로 이동하려면 클릭하세요. js와 CSS는 DOM 트리 구성에 어떤 영향을 미치나요?

45. 리플로우와 다시 그리기를 이해하는 방법은 무엇입니까? 어떤 상황에서 발동되나요?

클릭하면 프런트엔드 페이지 "리플로우 및 다시 그리기"로 이동합니다

46.반응형 디자인이란? 반응형 디자인의 기본 원칙은 무엇입니까? 그것을 구현하는 방법?

이란: 반응형 웹 디자인은 웹 페이지 디자인 레이아웃입니다. 페이지의 디자인 및 개발은 사용자 행동 및 장치 환경(시스템 플랫폼, 화면 크기, 화면 방향 등)을 기반으로 해야 합니다.

반응형 인터페이스를 설명하는 가장 유명한 문장은 "콘텐츠는 물과 같다"입니다. PC+태블릿+휴대폰에 동시에 적용

휴대용 단말기에 접근하면 탭 탐색이 클래식 서랍 탐색으로 변경됩니다.

웹사이트 레이아웃은 뷰포트에 따라 모듈의 크기와 위치를 조정합니다
기본 원리:
• 반응형 디자인의 기본 원리는 처리를 위한 미디어 쿼리를 통해 다양한 장치 화면 크기를 감지하는 것입니다. 반응형 디자인 구현은 일반적으로 다음 측면에서 생각합니다.
• 弹性盒子（包括图片、表格、视频）和媒体查询等技术
• 使用百分比布局创建流式布局的弹性UI，同时使用媒体查询限制元素的尺寸和内容变更范围
• 使用相对单位使得内容自适应调节
• 选择断点，针对不同断点实现不同布局和内容展示

总结：

响应式布局优点：

• 面对不同分辨率设备灵活性强
• 能够快捷解决多设备显示适应问题

缺点：

• 仅适用布局、信息、框架并不复杂的部门类型网站
• 兼容各种设备工作量大，效率低下
• 代码累赘，会出现隐藏无用的元素，加载时间加长
• 其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
• 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

47. 说说对 CSS 预编语言的理解，主流的有哪些？

理解： 预处理语言扩充了css语言，增加了诸如变量、混合（mixin）、函数等功能，让 css 更易维护、方便。本质上，预处理是css的超集，包含一套自定义的语法及一个解析器，根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 css 文件

有哪些： css预编译语言在前端里面有三大优秀的预编处理器，分别是：sass、less、stylus

48. CSS 中1像素问题是什么？有哪些解决方案？

1px边框问题由来： 苹果 iPhone4 首次提出了 Retina Display（视网膜屏幕）的概念，在 iPhone4 使用的视网膜屏幕中，把 2x2 个像素当 1 个物理像素使用，即使用 2x2 个像素显示原来 1 个物理像素显示的内容，从而让 UI 显示更精致清晰，这 2x2 个像素叫做逻辑像素。

像这种像素比（像素比（即dpr）＝ 物理像素 / 逻辑像素）为 2 的视网膜屏幕也被称为二倍屏，目前市面上还有像素比更高的三倍屏、四倍屏。

而 CSS 中 1px 指的是物理像素，因此，设置为 1px 的边框在 dpr = 2 的视网膜屏幕中实际占用了 2 个逻辑像素的宽度，这就导致了界面边框变粗的视觉体验。

解决方案：使用 transform 解决

通过设置元素的 box-sizing 为 border-box，然后构建伪元素，再使用 CSS3 的 transform 缩放，这是目前市面上最受推崇的解决方法。这种方法可以满足所有的场景，而且修改灵活，唯一的缺陷是，对于已使用伪元素的元素要多嵌套一个无用元素。具体的实现如下：

.one-pixel-border {
  position: relative;
  box-sizing: border-box;
}

.one-pixel-border::before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  border: 1px solid red;
  transform: translate(-50%, -50%) scale(0.5, 0.5);
}

这样就可以得到 0.5px 的边框。

还可以结合媒体查询（@media）解决不同 dpr 值屏幕的边框问题，如下：

@media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  ...
}

@media screen and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  ...
}

当然还有不少其他的解决方案：border-image、background-image、viewport + rem + js、box-shadow等，但都有各自的缺点，不进行推荐，此处也不做详细介绍。

49. overflow:scroll 时不能平滑滚动的问题怎么处理？

以下代码可解决这种卡顿的问题：

-webkit-overflow-scrolling: touch;

是因为这行代码启用了硬件加速特性，所以滑动很流畅。

50. CSS 单位中 px、em 和 rem 的区别？

• px 像素（Pixel）。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一 个虚拟长度单位，是计算机系统的数字化图像长度单位

• em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字 体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大 小，因此并不是一个固定的值

• rem 是 CSS3 新增的一个相对单位（root em，根 em），使用 rem 为元素设定字 体大小时，仍然是相对大小，但相对的只是 HTML 根元素

区别： IE 无法调整那些使用 px 作为单位的字体大小，而 em 和 rem 可以缩放，rem 相对的只是 HTML 根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐 层复合的连锁反应。目前，除了 IE8 及更早版本外，所有浏览器均已支持 rem。

51. CSS를 사용하여 페이지 성능을 향상시키는 방법은 무엇입니까?

클릭하여 다음으로 이동하세요. CSS를 사용하여 페이지 성능을 향상시키는 방법은 무엇입니까?

52. 글자 간격과 단어 간격의 차이점은 무엇인가요?

문자 간격은 모든 문자에 적용되지만 단어 간격은 공백 문자에만 적용됩니다. 즉, 단어 간격의 역할은 공백의 간격 너비를 늘리는 것입니다. letter-spacing作用于所有字符，但word-spacing仅作用于空格字符。换句话说，word-spacing的作用就是增加空格的间隙宽度。

53. 无依赖绝对定位是什么？

没有设置left/top/right/bottom属性值的绝对定位称为“无依赖绝对定位”。无依赖绝对定位其定位的位置和没有设置position:absolute时候的位置相关。

54. 层叠准则？

（1）谁大谁上：当具有明显的层叠水平标识的时候，如生效的z-index属性值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。

（2）后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

55. font-weight 的特殊性？

如果使用数值作为font-weight属性值，必须是100～900的整百数。因为这里的数值仅仅是外表长得像数值，实际上是一个具有特定含义的关键字，并且这里的数值关键字和字母关键字之间是有对应关系的。

56. text-indent 的特殊性？

（1）text-indent 仅对第一行内联盒子内容有效。

（2）非替换元素以外的 display 计算值为 inline 的内联元素设置 text-indent值无效，如果计算值 inline-block/inline-table 则会生效。

（3）<input>标签按钮 text-indent 值无效。

（4）<button></button>

53. 의존성 없는 절대 위치 지정이란 무엇인가요?

왼쪽/위/오른쪽/아래 속성값을 설정하지 않고 절대 위치를 지정하는 것을 "종속성 없는 절대 위치 지정"이라고 합니다. 종속성 없는 절대 위치 지정의 위치는 position:absolute가 설정되지 않은 경우의 위치와 관련됩니다.

54. 계단식 지침은 무엇인가요?

(1) 누가 더 큰가: 동일한 스택 컨텍스트 필드에 유효한 z-index 속성 값과 같은 명백한 스택 레벨 식별자가 있는 경우 더 큰 스택 레벨 값을 가진 것이 더 작은 것을 덮습니다.

(2) 뒤에서 오기: 요소의 스택 수준이 일관되고 스택 순서가 동일하면 DOM 흐름의 이후 요소가 이전 요소를 덮어씁니다.

55. 글꼴 두께의 특별한 특성은 무엇인가요?

font-weight 속성 값으로 숫자 값을 사용하는 경우 100에서 900 사이의 정수여야 합니다. 여기의 숫자는 숫자로만 보이기 때문에 실제로는 특정한 의미를 지닌 키워드이고, 여기서 숫자 키워드와 문자 키워드 사이에는 상응하는 관계가 있습니다.

56. text-indent의 특별한 기능은 무엇인가요?

(1) text-indent는 인라인 상자 내용의 첫 번째 줄에만 유효합니다.

(2) 표시 계산 값이 인라인인 대체되지 않은 요소를 제외한 인라인 요소에 대한 텍스트 들여쓰기 값 설정은 계산된 값이 인라인 블록/인라인 테이블인 경우 유효하지 않습니다.

(3) <input> 라벨 버튼의 텍스트 들여쓰기 값이 잘못되었습니다.

(4)<button></button>레이블 버튼의 텍스트 들여쓰기 값이 유효합니다.

(5) text-indent의 백분율 값은 현재 요소가 아닌 현재 요소의 "포함 블록"을 기준으로 계산됩니다.

57. rem 레이아웃을 사용하면 어떤 장점과 단점이 있나요?

장점:

화면 해상도가 매우 다양한 시대에 rem이 화면 해상도와 연결되어 있는 한 페이지의 전체 크기 조정이 가능하여 장치의 디스플레이가 통일될 수 있습니다. 게다가 이제 대부분의 브라우저가 rem을 지원하고 호환성도 매우 좋습니다.

단점:

(1) 이상한 DPR 장치에서는 성능이 그다지 좋지 않습니다. 예를 들어 Huawei의 일부 고급 모델은 rem 레이아웃을 사용할 때 혼란을 야기합니다.

(2) iframe 참조를 사용하는 데에도 문제가 있습니다.

(3) rem은 다양한 화면 크기에 적응하는 데 있어서 현재 두 가지 주요 플랫폼의 디자인 철학과 일치하지 않습니다. 즉, 대형 스크린의 등장은 더 크고 선명한 것을 보기 위한 것인지, 아니면 더 많이 보기 위한 것인지이다. 질문.

58. 선호하는 최소 너비는 얼마인가요?

"선호되는 최소 너비"는 요소가 가장 적합한 최소 너비를 나타냅니다. 동아시아 스크립트(예: 중국어)의 최소 너비는 각 중국어 문자의 너비입니다. 서양어 텍스트의 최소 너비는 영어 문자의 특정 연속 단위에 의해 결정됩니다. 모든 영어 문자가 연속 단위를 형성하는 것은 아니며 일반적으로 공백(일반 공백), 대시, 물음표 및 기타 비영어 문자로 끝납니다. 🎜🎜영어 문자를 중국어와 동일하게 만들고 각 문자가 최소 너비 단위를 사용하도록 하려면 CSS에서 word-break:break-all을 사용해 볼 수 있습니다. 🎜🎜🎜59. height:100%가 왜 유효하지 않나요? 🎜🎜🎜일반적인 문서 흐름의 요소의 경우 백분율 높이 값이 작동하려면 상위 항목에 적용할 수 있는 높이 값이 있어야 합니다. 🎜🎜그 이유는 포함 블록의 높이가 명시적으로 지정되지 않은 경우(즉, 높이는 콘텐츠에 의해 결정됨) 요소의 위치가 절대적으로 지정되지 않은 경우 계산된 값이 자동으로 해석되기 때문입니다. , 계산에 참여할 수 없습니다. 🎜🎜절대 위치 지정을 사용하는 요소는 상위 요소의 높이가 자동으로 계산되더라도 계산된 값을 갖습니다. 🎜🎜🎜60. min-width/max-width 및 min-height/max-height 속성 사이의 규칙을 덮어쓰시겠습니까? 🎜🎜🎜 (1) max-width는 너비가 행 스타일이거나 !important가 설정된 경우에도 너비를 재정의합니다. 🎜🎜(2) 최소 너비는 최대 너비보다 우선합니다. 이 규칙은 최소 너비와 최대 너비가 충돌할 때 발생합니다. 🎜🎜🎜61.인라인박스 모델이 뭔가요? 🎜🎜🎜 (1) 콘텐츠 영역. 콘텐츠 영역은 텍스트를 둘러싸고 있는 보이지 않는 상자를 의미하며, 그 크기는 문자 자체의 특성에 의해서만 결정됩니다. (문자 상자); 그러나 그림과 같은 대체 요소와 같은 일부 요소의 경우 내용이 분명히 텍스트가 아니며 따라서 이러한 경우에는 문자 상자가 없습니다. 요소, 컨텐츠 영역은 요소 그 자체라고 볼 수 있습니다. 🎜

（2）内联盒子（inline box）。“内联盒子”不会让内容成块显示，而是排成一行，这里的“内联盒子”实际指的就是元素的“外在盒 子”，用来决定元素是内联还是块级。该盒子又可以细分为“内联盒子”和“匿名内联盒子”两类。

（3）行框盒子（line box），每一行就是一个“行框盒子”（实线框标注），每个“行框盒子”又是由一个一个“内联盒子”组成的。

（4）包含块（containing box），由一行一行的“行框盒子”组成。

62. content 与替换元素的关系？

content属性生成的对象称为“匿名替换元素”。

（1）我们使用content生成的文本是无法选中、无法复制的，好像设置了user select:none声明一般，但是普通元素的文本却可以被轻松选中。同时，content生成的文本无法被屏幕阅读设备读取，也无法被搜索引擎抓取，因此，千万不要自以为是地把重要的文本信息使用content属性生成，因为这对可访问性和SEO都很不友好。

（2）content生成的内容不能左右:empty伪类。

（3）content动态生成值无法获取。

63. margin:auto 的填充规则？

margin的'auto'可不是摆设，是具有强烈的计算意味的关键字，用来计算元素对应方向应该获得的剩余间距大小。但是触发mar gin:auto计算有一个前提条件，就是width或height为auto时，元素是具有对应方向的自动填充特性的。

（1）如果一侧定值，一侧auto，则auto为剩余空间大小。

（2）如果两侧均是auto，则平分剩余空间。

64. overflow 的特殊性？

（1）一个设置了overflow:hidden声明的元素，假设同时存在border属性和padding属性，则当子元素内容超出容器宽度 高度限制的时候，剪裁的边界是border box的内边缘，而非padding box的内边缘。

（2）HTML中有两个标签是默认可以产生滚动条的，一个是根元素，另一个是文本域。

（3）滚动条会占用容器的可用宽度或高度。

（4）元素设置了overflow:hidden声明，里面内容高度溢出的时候，滚动依然存在，仅仅滚动条不存在！

代码篇

1. 下面代码中，p标签的背景色是什么？

<style>
     #parent p { background-color: red;  }
      div .a.b.c.d.e.f.g.h.i.j.k p{ background-color: green;  
</style>
......
<div>
     <div>
         <p>xxxx</p>
     </div>
</div>

大家需要注意，权重是按优先级进行比较的，而不是相加规则。

答案：red。

2. 假设下面样式都作用于同一个节点元素span，判断下面哪个样式会生效？

body#god div.dad span.son {
    width: 200px;
}
body#god span#test {
    width: 250px;
}

本题考察css的样式优先级权重，大家需要记住：

当两个权值进行比较的时候，是从高到低逐级将等级位上的权重值（如 权值 1,0,0,0 对应--> 第一等级权重值，第二等级权重值，第三等级权重值，第四等级权重值）来进行比较的，而不是简单的 1000个数 + 100个数 + 10个数 + 1个数 的总和来进行比较的，换句话说，低等级的选择器，个数再多也不会越等级超过高等级的选择器的优先级的。 所以本题的分析思路是：

• 先比较高权重位，即第一个样式的高权重为 #god = 100
• 第二个样式的高权重为 #god + #text = 200
• 100
• 所以最终计算结果是取 width: 250px;
• 若两个样式的高权重数量一样的话，则需要比较下一个高权重！

答案：width: 250px;

3. 第二个子元素的高度是多少？

<div>
    <div></div>
    <div></div>
</div>
<style>
    .container{
        display: flex;
    }
    .container > div {
        width: 100px;
    }
</style>

Flex 布局会默认：

• 把所有子项变成水平排列。
• 默认不自动换行。
• 让子项与其内容等宽，并把所有子项的高度变为最高子项的高度。

答案：100px

手写篇

1. 如何从 html 元素继承 box-sizing

html { 
    box-sizing: border-box; 
} 
*, *:before, *:after { 
    box-sizing: inherit; 
}

2. 如何使用css来实现禁止移动端页面的足有滑动手势？

最简单的方法：

html { 
    touch-action: none; 
    touch-action: pan-y; 
}

还可以直接指定对应元素的宽度和overflow：

html { 
    width: 100vw; 
    overflow-x: hidden; 
}

3. 如何使用 CSS 画一个三角形

.box {
   width: 0;
   height: 0;
   border-style:solid;
   border-width: 0 50px 50px;
   border-color: transparent transparent #d9534f;
}

4. 如何实现两栏布局，右侧自适应？三栏布局中间自适应？

两栏布局

浮动实现

  <style>
    .box{
       overflow: hidden; 
    }
    .left {
       float: left;
       width: 200px;
       background-color: gray;
       height: 400px;
    }
    .right {
       margin-left: 210px;
       background-color: lightgray;
       height: 200px;
    }
</style>
<div>
    <div>左边</div>
    <div>右边</div>
</div>

flex实现

  <style>
    .box{
       display: flex;
    }
    .left {
       width: 100px;
       background-color: skyblue;
       height: 400px;
    }
    .right {
       flex: 1;
       background-color: pink;
       height: 200px;
    }
  </style>
  <div>
    <div>左边</div>
    <div>右边</div>
  </div>

三栏布局

  <style>
    .wrap {
        display: flex;
        justify-content: space-between;
    }
    .left,
    .right,
    .middle {
        height: 500px;
    }
    .left {
        width: 200px;
        background: coral;
    }
    .right {
        width: 120px;
        background: lightblue;
    }
    .middle {
        background: #555;
        width: 100%;
        margin: 0 20px;
    }
  </style>
  <div>
    <div>左侧</div>
    <div>中间</div>
    <div>右侧</div>
  </div>

5. 单行文本如何实现两端对齐

方法一：添加一行

根据justify对最后一行无效，我们可以新增一行，使该行文本不是最后一行，实现如下：

<style>
//scss
  .item {
      height: 32px;
      line-height: 32px;
      margin-bottom: 8px;
      .label {
          display: inline-block;
          height: 100%;
          width: 100px;
          text-align: justify;
          vertical-align: top;
          &::after {
              display: inline-block;
              width: 100%;
              content: &#39;&#39;;
              height: 0;
          }
      }
      .value {
          padding-right: 10px;
      }
  }
</style>
  <div>
    <span>哈哈哈</span>：
    <span>哈哈哈</span>
  </div>

方法二： text-align-last

text-align-last，该属性定义的是一段文本中最后一行在被强制换行之前的对齐规则。

   //scss
  .item {
      margin-bottom: 8px;
      .label {
          display: inline-block;
          height: 100%;
          min-width: 100px;
          text-align: justify;
          text-align-last: justify;
      }
      .value {
          padding-right: 10px;
      }
  }

6. 使用 CSS 实现一个无限循环动画

  <style>
   .anima {
      width: 800px;
      height: 600px;
      animation-name: likes; 
      animation-direction: alternate; 
      animation-timing-function: linear;
      animation-delay: 0s;
      animation-iteration-count: infinite;
      animation-duration: 1s; 
    }

  @keyframes likes {
    0%{
        transform: scale(1);
    }
    25%{
        transform: scale(0.9);
    }
    50%{
        transform: scale(0.85);
    }
    75%{
        transform: scale(0.9);
    }
    100%{
        transform: scale(1);
    }
  }
  </style>
  <image></image>

7. 如何实现单行、多行文本溢出隐藏？

单行文本溢出隐藏

<style>
   div {
      width: 100px;
      height: 100px;
      /* 溢出隐藏 */
      overflow: hidden;           
      /* 溢出用省略号显示 */
      text-overflow: ellipsis;   
      /* 规定段落中的文本不进行换行   */
      white-space: nowrap;  
   }
  </style>
  <div>
    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
  </div>

多行文本溢出隐藏

<style>
   div {
      width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      /* 作为弹性伸缩盒子模型显示 */
      display: -webkit-box;
      /* 显示的行数 */
      -webkit-line-clamp: 3;
      /* 设置伸缩盒子的子元素排列方式：从上到下垂直排列 */
      -webkit-box-orient: vertical;
   }
  </style>
  <div>
    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
  </div>

8. CSS 垂直居中有哪些实现方式？

我们在布局一个页面时，通常都会用到水平居中和垂直居中，处理水平居中很好处理，不外乎就是设定margin:0 auto;或是text-align:center;,就可以轻松解决掉水平居中的问题，但一直以来最麻烦对齐问题就是「垂直居中」，以下将介绍几种单纯利用CSS垂直居中的方式，只需要理解背后的原理就可以轻松应用。

下面为公共代码：

<style>
.box {
  width: 300px;
  height: 300px;
  background: #ddd;
}
.small {
  background: red;
}
</style>


    <div>
        <div>small</div>
    </div>

1. absolute + margin实现

方法一：

  .box {
    position: relative;
  }
  .small {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px;
    width: 100px;
    height: 100px;
  }

方法二：

  .box {
    position: relative;
  }
  .small {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100px;
    height: 100px;
  }

2. absolute + calc 实现

  .box {
    position: relative;
  }
  .small {
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    width: 100px;
    height: 100px;
  }

3. absolute + transform 实现

  .box {
    position: relative;
  }
  .small {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 100px;
    height: 100px;
  }

4. 转行内元素

  .box {
    line-height: 300px;
    text-align: center;
    font-size: 0px;
  }
  .small {
    padding: 6px 10px;
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    line-height: 16px;
  }

5. 使用flex

方法一：

  .box {
    display: flex;
    justify-content: center;
    align-items: center;
  }

方法二：

  .box {
    display: flex;
    justify-content: center;
  }
  .small {
    align-self: center;
  }

更多编程相关知识，请访问：编程视频！！