20가지 기본 CSS 인터뷰 질문-CSS 튜토리얼-php.cn

20가지 기본 CSS 인터뷰 질문

이 글은 주로 기본적인 CSS 인터뷰 질문을 공유하는데, 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다. 편집자를 따라가서 살펴보겠습니다.

1 표준 CSS 박스 모델을 도입하시나요? IE 하위 버전의 박스 모델과 어떻게 다릅니까?

표준 박스 모델: 너비 = 콘텐츠 너비(콘텐츠) + 테두리 + 패딩 + 여백
낮은 버전 IE 박스 모델: 너비 = 콘텐츠 너비(콘텐츠+테두리+패딩) + 여백

특별 추천 : 2020년 CSS 면접 질문 요약(최신)

요소의 상자 모델을 제어하는 데 사용되는 구문 분석 모드, 기본값은 content-box
context-box: W3C의 표준 상자 모델, 높이/너비 설정 요소의 속성은 콘텐츠 부분의 높이/너비를 나타냅니다.
border-box: IE 기존 상자 모델. 요소의 높이/너비 속성 설정은 테두리 + 패딩 + 콘텐츠 부분의 높이/너비를 의미합니다.

3 CSS 선택자는 무엇인가요? 어떤 속성을 상속받을 수 있나요?

CSS 선택기: id 선택기(#myid), 클래스 선택기(.myclassname), 태그 선택기(p, h1, p), 인접 선택기(h1 + p), 하위 선택기(ul > li), 하위 항목 선택기(li a), 와일드카드 선택기(*), 속성 선택기(a[rel="external"]), 의사 클래스 선택기(a:hover, li:nth-child)

상속 속성: 글꼴- 크기, 글꼴 계열, 색상

상속 불가능한 스타일: 테두리, 패딩, 여백, 너비, 높이

우선순위(근접성 원칙): !important > ; important는 인라인 우선순위보다 높습니다

4 CSS 우선순위 알고리즘은 어떻게 계산되나요?

Element selector: 1class selector: 10
id selector: 100
Element label: 1000

! important로 선언된 스타일이 가장 우선순위가 높으며, 충돌이 있을 경우 충돌이 발생합니다. 다시 계산됩니다.
우선순위가 동일할 경우 마지막에 나타나는 스타일이 선택됩니다.
상속된 스타일의 우선순위가 가장 낮습니다.

5 CSS3의 새로운 의사 클래스는 무엇입니까?

p:first-of-type은 상위 요소에 속한 첫 번째 요소를 선택합니다.p:last-of-type은 상위 요소에 속하는 요소
p:only-of-type의 마지막 요소는 상위 요소에 속하는 유일한 요소를 선택합니다.
p:only-child는 상위 요소에 속하는 유일한 하위 요소를 선택합니다.
p:nth- child(2)는 상위 요소에 속한 번째 요소를 선택합니다. 두 개의 하위 요소
:enabled :disabled 양식 컨트롤의 비활성화 상태입니다.
:checked 라디오 버튼 또는 체크박스가 선택되어 있습니다.

6 P를 센터링하는 방법은? 부동 요소를 중앙에 배치하는 방법은 무엇입니까? 절대 위치에 있는 p를 중앙에 배치하는 방법은 무엇입니까?

border: 1px solid red;
margin: 0 auto; 
height: 50px;
width: 80px;

로그인 후 복사

플로팅 요소의 상단, 하단, 왼쪽 및 오른쪽 중심 지정:

border: 1px solid red;
float: left;
position: absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;

로그인 후 복사

절대 위치 지정의 왼쪽 및 오른쪽 중심 지정:

border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: 0 auto;
left: 0;
right: 0;

로그인 후 복사

还有更加优雅的居中方式就是用flexbox，以后会做整理。

7 display有哪些值？说明他们的作用?

inline（默认）–内联
none–隐藏
block–块显示
table–表格显示
list-item–项目列表
inline-block

8 position的值？

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

9 CSS3有哪些新特性？

RGBA和透明度
background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
word-wrap（对长的不可分割单词换行）word-wrap：break-word
文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）
font-face属性：定义自己的字体
圆角（边框半径）：border-radius 属性用于创建圆角
边框图片：border-image: url(border.png) 30 30 round
盒阴影：box-shadow: 10px 10px 5px #888888
媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性

10 请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。

11 用纯CSS创建一个三角形的原理是什么？

首先，需要把元素的宽度、高度设为0。然后设置边框样式。

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

로그인 후 복사

12 一个满屏品字布局如何设计?

第一种真正的品字：

三块高宽是确定的；
上面那块用margin: 0 auto;居中；
下面两块用float或者inline-block不换行；
用margin调整位置使他们居中。

第二种全屏的品字布局:

上面的p设置成100%，下面的p分别宽50%，然后使用float或者inline使其不换行。

13 常见的兼容性问题？

不同浏览器的标签默认的margin和padding不一样。*{margin:0;padding:0;}
IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：display:inline;将其转化为行内属性。
渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

{
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}

로그인 후 복사

设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

14 为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

15 absolute的containing block计算方式跟正常流有什么不同？

无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：

若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；
否则,则由这个祖先元素的 padding box 构成。

如果都找不到，则为 initial containing block。

补充：

static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分）
absolute: 向上找最近的定位为absolute/relative的元素
fixed: 它的containing block一律为根元素(html/body)

16 CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别？

当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。

chrome中，使用collapse值和使用hidden没有区别。
Firefox, Opera 및 IE에서는 축소 값을 사용하는 것과 display:none을 사용하는 것 사이에 차이가 없습니다.

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

display: none은 해당 요소를 표시하지 않으며 더 이상 문서 레이아웃에서 공간을 할당하지 않습니다(리플로우 + 다시 그리기)
visibility: hide는 해당 요소를 숨기고 문서 레이아웃에서 원래 공간을 계속 유지합니다(다시 그리기)

18 위치, 표시, 오버플로, 부동의 특징이 서로 겹쳐지면 어떻게 될까요?

display 속성은 요소가 생성해야 하는 상자 유형을 지정하고, position 속성은 요소의 위치 지정 유형을 지정합니다. float 속성은 요소가 부동하는 방향을 정의하는 레이아웃 방법입니다.
우선 순위 메커니즘과 유사: 위치: 절대/고정이 가장 높은 우선 순위를 가집니다. 이 경우 부동 소수점은 작동하지 않으며 표시 값을 조정해야 합니다. 부동소수점이나 절대값으로 배치된 요소는 블록 요소나 테이블만 될 수 있습니다.

19 BFC 사양(블록 형식화 컨텍스트)을 이해하고 계십니까?

BFC는 내부 블록박스 배치 방식을 규정하고 있습니다.
위치 지정 방식:

내부 상자는 수직 방향으로 차례로 배치됩니다.
Box의 세로 방향 거리는 여백에 따라 결정됩니다. 동일한 BFC에 속하는 인접한 두 Box의 여백은 겹칩니다.
각 요소의 여백 상자 왼쪽은 포함 블록 테두리 상자의 왼쪽에 닿습니다.
BFC 영역은 플로트 박스와 겹치지 않습니다.
BFC는 페이지에서 격리된 독립 컨테이너입니다. 컨테이너 내부의 하위 요소는 외부 요소에 영향을 주지 않습니다.
BFC의 높이를 계산할 때 플로팅 요소도 계산에 참여합니다.

BFC는 다음 조건 중 하나가 충족될 때 트리거될 수 있습니다.

루트 요소, 즉 html
float의 값이 없음이 아닙니다(기본값)
오버플로 값 표시되지 않음(기본값)
표시 값은 inline-block, table-cell, table-caption
위치 값은 절대 또는 고정입니다

20 플로트가 나타나는 이유는 무엇이며 언제 지워야 하나요? 플로트를 지우는 방법?

플로팅 요소는 해당 요소가 포함된 테두리나 플로팅 요소의 테두리에 닿을 때 그대로 유지됩니다. 플로팅된 요소가 문서 흐름에 없기 때문에 문서 흐름 블록 상자는 플로팅된 상자가 존재하지 않는 것처럼 동작합니다. 부동 요소는 문서 흐름의 블록 상자에 떠 있습니다.
플로팅으로 인한 문제: