CSS에 관한 몇 가지 인터뷰 질문-CSS 튜토리얼-php.cn

CSS에 관한 몇 가지 인터뷰 질문

이 글은 주로 CSS에 관한 인터뷰 질문을 공유하는데 참고할만한 가치가 있어 모두에게 도움이 되길 바랍니다. 편집자를 따라가서 살펴보겠습니다.

1 위쪽 및 아래쪽 여백이 겹치는 문제

겹치는 요소 주위를 컨테이너로 감싸고 컨테이너를 트리거하여 BFC를 생성합니다.
예:

<p class="aside"></p>
<p class="text">
    <p class="main"></p>
</p>
<!--下面是css代码-->
 .aside {
            margin-bottom: 100px;  
            width: 100px;
            height: 150px;
            background: #f66;
        }
        .main {
            margin-top: 100px;
            height: 200px;
            background: #fcc;
        }
         .text{
            /*盒子main的外面包一个p，通过改变此p的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/
            overflow: hidden;  //此时已经触发了BFC属性。
        }

로그인 후 복사

주제 추천: 2020 CSS 면접 질문 요약(최신)

2 요소를 float로 설정한 후 요소의 표시 값은 어떻게 되나요?

자동으로 display:block

3으로 변경됩니다. 모바일 레이아웃에 미디어 쿼리를 사용해 본 적이 있나요?

미디어 쿼리를 통해 다양한 크기와 크기의 미디어에 대해 다양한 CSS를 정의하여 해당 장치의 디스플레이에 적응할 수 있습니다.

Inside
CSS : @media 전용 화면 및 (max-device-width:480px) {/css 스타일/}

4 CSS 전처리기를 사용하시겠습니까?

Less sass

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

과도한 제약을 피하세요
후손 선택자를 피하세요.
체인 선택자를 피하세요. 간결한 구문
불필요한 네임스페이스를 피하세요
불필요한 중복 방지
의미를 나타내는 이름을 사용하는 것이 가장 좋습니다. 좋은 클래스 이름은 보이는 것보다 클래스 이름이 무엇인지 설명해야 합니다
피하세요! 중요합니다. 다른 선택기를 선택할 수 있습니다.
규칙을 최대한 간소화하고, 여러 범주의 반복되는 규칙을 병합할 수 있습니다.
6 브라우저는 CSS 선택기를 어떻게 구문 분석합니까?

CSS 선택자는 오른쪽에서 왼쪽으로 구문 분석됩니다. 왼쪽에서 오른쪽으로의 일치가 규칙에 맞지 않는 것으로 확인되면 역추적(backtracking)이 필요하게 되며 이로 인해 많은 성능 손실이 발생합니다. 오른쪽에서 왼쪽으로 일치하는 경우 먼저 가장 오른쪽 노드를 모두 찾습니다. 각 노드에 대해 루트 요소 또는 조건을 충족하는 일치 규칙이 발견될 때까지 상위 노드를 검색한 다음 이 분기의 순회가 종료됩니다. 두 매칭 규칙의 성능은 매우 다릅니다. 왜냐하면 오른쪽에서 왼쪽 매칭은 첫 번째 단계의 조건을 충족하지 않는 가장 오른쪽 노드(리프 노드)를 대량으로 필터링하는 반면, 왼쪽에서 왼쪽 매칭의 성능은 매우 다르기 때문입니다. 올바른 일치 규칙 검색 실패로 인해 모두 낭비됩니다. CSS가 파싱된 후 파싱된 결과를 DOM 트리의 내용과 함께 분석하여 최종적으로 드로잉에 사용되는 렌더 트리를 구축해야 합니다. 렌더 트리(WebKit의 "첨부" 프로세스)를 생성할 때 브라우저는 CSS 구문 분석 결과(스타일 규칙)를 기반으로 DOM 트리의 각 요소에 대해 어떤 종류의 렌더 트리를 생성할지 결정해야 합니다.

7 웹 페이지에 홀수 또는 짝수 글꼴을 사용해야 합니까? 왜?

使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。

8 margin和padding分别适合什么场景使用？

何时使用margin：

需要在border外侧添加空白
空白处不需要背景色
上下相连的两个盒子之间的空白，需要相互抵消时。

何时使用padding：

需要在border内侧添加空白
空白处需要背景颜色
上下相连的两个盒子的空白，希望为两者之和。

兼容性的问题：在IE5 IE6中，为float的盒子指定margin时，左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display：inline解决。

9 元素竖向的百分比设定是相对于容器的高度吗？

当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

10 全屏滚动的原理是什么？用到了CSS的哪些属性？

原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行y轴定位，也可以通过margin-top实现
overflow：hidden；transition：all 1000ms ease；

11 什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有meta声明的viewport。

<
meta 
name
=
"’viewport’"
 
content
=
"”width=device-width,"
 
initial
-
scale
=
"1."
 
maximum
-
scale
=
"1,user-scalable=no
”"
/>

로그인 후 복사

12 视差滚动效果？

视差滚动（Parallax Scrolling）通过在网页向下滚动的时候，控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。

CSS3实现
优点：开发时间短、性能和开发效率比较好，缺点是不能兼容到低版本的浏览器
jQuery实现
通过控制不同层滚动速度，计算每一层的时间，控制滚动效果。
优点：能兼容到各个版本的，效果可控性好
缺点：开发起来对制作者要求高
插件实现方式
例如：parallax-scrolling，兼容性十分好

13 ::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。

:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after

14 你对line-height是如何理解的？

行高是指一行文字的高度，具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。
单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以把height删除。

多行文本垂直居中：需要设置display属性为inline-block。

15 怎么让Chrome支持小于12px 的文字？

p
{
font
-
size
:
10px
;
-
webkit
-
transform
:
scale
(
0.8
);}
 
//0.8是缩放比例

로그인 후 복사

16 让页面里的字体变清晰，变细用CSS怎么做？

-webkit-font-smoothing在window系统下没有起作用，但是在IOS设备上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。

17 position:fixed;在android下无效怎么处理？

meta 
name
=
"viewport"
 
content
=
"width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
/>

로그인 후 복사

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

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

19 li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。
解决方法：

可以将
代码全部写在一排
浮动li中float：left
在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px

20 display:inline-block 什么时候会显示间隙？

有空格时候会有间隙解决：移除空格
여백이 양수인 경우 해결 방법: 여백에 음수 값을 사용하세요
font-size 사용 시 해결 방법: 글꼴 크기:0, 문자 간격, 단어 간격

21 예 높이 적응형 p는 내부에 두 개의 p가 있고 하나는 높이가 100px이고 다른 하나는 나머지 높이를 채울 것으로 예상됩니다

외부 p는 위치: 상대를 사용합니다. 적응형 높이 요구 사항이 있는 p는 위치: 절대를 사용합니다. ; 위쪽: 100px; 아래쪽: 0; 왼쪽: 0

22 png, jpg, gif 이미지 형식과 사용 시기를 설명하세요. webp에 대해 배운 적이 있나요?

png는 무손실 데이터 압축 비트맵 파일 형식인 휴대용 네트워크 그래픽(Portable Network Graphics)입니다. 장점은 압축률이 높고 색상이 좋습니다. 대부분의 장소에서 이용 가능합니다.
jpg는 사진에 사용되는 왜곡 압축 방법으로 톤과 색상의 부드러운 변화를 잘 구현하는 파괴적인 압축 방법입니다. www에서 사진을 저장하고 전송하는 데 사용되는 형식입니다.
gif는 8비트 색상으로 트루컬러 이미지를 재현하는 비트맵 파일 형식입니다.
webp 형식은 Google이 2010년에 출시한 이미지 형식입니다. 압축률은 jpg의 2/3에 불과하고 크기는 png보다 45% 작습니다. 단점은 압축 시간이 더 오래 걸리고 호환성이 좋지 않다는 점입니다. 현재 Google과 Opera에서는 이를 지원하지 않습니다.

23 본문 뒤에 쓰는 스타일 태그와 본문 앞에 쓰는 스타일 태그의 차이점은 무엇인가요?

페이지는 위에서 아래로 로드됩니다. 물론 스타일이 먼저 로드됩니다.
body 태그 뒤에 작성됩니다. 브라우저는 HTML 문서를 한 줄씩 파싱하기 때문에 마지막에 작성된 스타일 시트(개요 또는 스타일 태그에 작성된)를 파싱하면 브라우저가 이전 렌더링을 중지하고 로드 및 파싱을 기다리게 됩니다. . 스타일 시트가 다시 렌더링된 후 Windows의 IE에서 FOUC 현상(예: 스타일 오류로 인한 페이지 깜박임 문제)이 발생할 수 있습니다.

24 CSS 속성 오버플로 속성은 의 콘텐츠 영역 내용을 어떻게 정의합니까? 오버플로 요소가 처리되었나요?

파라미터가 스크롤되면 반드시 스크롤바가 나타납니다.
매개변수가 auto인 경우 하위 요소의 콘텐츠가 상위 요소보다 크면 스크롤 막대가 나타납니다.
매개변수가 표시되면 오버플로 콘텐츠가 상위 요소 외부에 나타납니다.
매개변수를 숨기면 오버플로가 숨겨집니다.

25 CSS Sprites를 설명하겠습니다

페이지에 포함된 모든 이미지를 하나의 큰 이미지로 포함시킨 다음 CSS 배경 이미지, 배경 반복 및 배경 위치 조합을 사용합니다. . CSS 스프라이트를 사용하면 웹페이지의 http 요청을 크게 줄일 수 있으므로 페이지 성능이 크게 향상됩니다. CSS 스프라이트는 이미지 바이트를 줄일 수 있습니다.