1 표준 CSS 박스 모델을 도입하시나요? IE 하위 버전의 박스 모델과 어떻게 다릅니까?
표준 박스 모델: 너비 = 콘텐츠 너비(콘텐츠) + 테두리 + 패딩 + 여백
낮은 버전 IE 박스 모델: 너비 = 콘텐츠 너비(콘텐츠+테두리+패딩) + 여백
특별 추천: 2020년 CSS 면접 질문 요약(최신)
2 box-sizing 속성?
요소 상자 모델의 구문 분석 모드를 제어하는 데 사용되며 기본값은 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)
상속 가능한 속성: 글꼴 크기, 글꼴- family, color
상속 불가능한 스타일: border, padding, margin, width, height
우선순위(근접성 원칙): !important > [ id > class > tag ]
!important는 인라인보다 우선순위가 높습니다
4 CSS 우선순위 알고리즘은 어떻게 계산되나요?
요소 선택자: 1
클래스 선택자: 10
id 선택자: 100
요소 라벨: 1000
5 CSS3의 새로운 의사 클래스는 무엇인가요?
p:first-of-type은 상위 요소에 속한 첫 번째 요소를 선택합니다.
p:last-of-type은 상위 요소에 속한 마지막 요소를 선택합니다. element
p:only-of-type은 상위 요소에 속한 유일한 요소를 선택합니다.
p:only-child는 상위 요소에 속한 유일한 하위 요소를 선택합니다.
p:nth-child(2)는 두 번째 하위 요소를 선택합니다. 상위 요소에 속합니다
: 활성화:비활성화 양식 컨트롤의 비활성화 상태입니다.
:checked 라디오 버튼 또는 체크박스가 선택되어 있습니다.
6 P를 센터링하는 방법은? 부동 요소를 중앙에 배치하는 방법은 무엇입니까? 절대 위치에 있는 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 디스플레이의 가치는 무엇인가요?
inline(기본값) - inline
none - Hidden
block - 블록 표시
table - 테이블 표시
list-item - 항목 목록
inline-block
8 위치 값?
정적(기본값): 일반적인 문서 흐름에 따라 정렬
상대적 위치 지정: 문서 흐름에서 벗어나지 않고 자체 정적 위치를 참조하여 위쪽, 아래쪽, 왼쪽, 오른쪽으로 위치 지정; 절대(절대 위치 지정): 참조 거리 정적이 아닌 가장 최근의 상위 요소는 위쪽, 아래쪽, 왼쪽, 오른쪽을 통해 위치가 지정됩니다.
고정(고정 위치 지정): 고정 참조 개체는 시각적 창입니다.
9 CSS3의 새로운 기능은 무엇인가요?
10 CSS3의 flexbox(유연한 상자 레이아웃 모델)와 적용 가능한 시나리오를 설명해 주세요.
이 레이아웃 모델의 목적은 컨테이너의 항목에 대한 공간을 레이아웃, 정렬 및 할당하는 보다 효율적인 방법을 제공하는 것입니다. 전통적인 레이아웃 방식에서는 블록 레이아웃이 위에서 아래로 수직 방향으로 블록을 배열하는 반면, 인라인 레이아웃은 블록을 수평 방향으로 배열합니다. Flexbox 레이아웃에는 이러한 고유한 방향 제한이 없으며 개발자가 자유롭게 조작할 수 있습니다.시험 시나리오: 유연한 레이아웃은 모바일 프런트 엔드 개발에 적합하며 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 핀 캐릭터의 화면 전체 레이아웃을 디자인하는 방법은 무엇입니까?
첫 번째 실제 핀 캐릭터:第二种全屏的品字布局:
上面的p设置成100%,下面的p分别宽50%,然后使用float或者inline使其不换行。
13 常见的兼容性问题?
*{margin:0;padding:0;}
渐进识别的方式,从总体中逐渐排除局部。首先,巧妙的使用“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识别*/ }
14 为什么要初始化CSS样式
因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
15 absolute的containing block计算方式跟正常流有什么不同?
无论属于哪种,都要先找到其祖先元素中最近的 position 值不为 static 的元素,然后再判断:
如果都找不到,则为 initial containing block。
补充:
16 CSS里的visibility属性有个collapse属性值?在不同浏览器下以后什么区别?
当一个元素的visibility属性被设置成collapse值后,对于一般的元素,它的表现跟hidden是一样的。
17 display:none与visibility:hidden的区别?
display:none 不显示对应的元素,在文档布局中不再分配空间(回流+重绘)
visibility:hidden 隐藏对应元素,在文档布局中仍保留原来的空间(重绘)
18 position跟display、overflow、float这些特性相互叠加后会怎么样?
display属性规定元素应该生成的框的类型;position属性规定元素的定位类型;float属性是一种布局方式,定义元素在哪个方向浮动。
类似于优先级机制:position:absolute/fixed优先级最高,有他们在时,float不起作用,display值需要调整。float 或者absolute定位的元素,只能是块元素或表格。
19 对BFC规范(块级格式化上下文:block formatting context)的理解?
BFC规定了内部的Block Box如何布局。
定位方案:
满足下列条件之一就可触发BFC
20 为什么会出现浮动和什么时候需要清除浮动?清除浮动的方式?
浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中,所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。
浮动带来的问题:
清除浮动的方式:
21 上下margin重合的问题
在重合元素外包裹一层容器,并触发该容器生成一个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属性。 }
22设置元素浮动后,该元素的display值是多少?
自动变成display:block
23 移动端的布局用过媒体查询吗?
通过媒体查询可以为不同大小和尺寸的媒体定义不同的css,适应相应的设备的显示。
24 使用 CSS 预处理器吗?
Less sass
25 CSS优化、提高性能的方法有哪些?
26 浏览器是怎样解析CSS选择器的?
CSS选择器的解析是从右向左解析的。若从左向右的匹配,发现不符合规则,需要进行回溯,会损失很多性能。若从右向左匹配,先找到所有的最右节点,对于每一个节点,向上寻找其父节点直到找到根元素或满足条件的匹配规则,则结束这个分支的遍历。两种匹配规则的性能差别很大,是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点(叶子节点),而从左向右的匹配规则的性能都浪费在了失败的查找上面。
而在 CSS 解析完毕后,需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree,最终用来进行绘图。在建立 Render Tree 时(WebKit 中的「Attachment」过程),浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果(Style Rules)来确定生成怎样的 Render Tree。
27 在网页中的应该使用奇数还是偶数的字体?为什么呢?
使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体(中易宋体)从 Vista 开始只提供 12、14、16 px 这三个大小的点阵,而 13、15、17 px时用的是小一号的点。(即每个字占的空间大了 1 px,但点阵没变),于是略显稀疏。
28 margin和padding分别适合什么场景使用?
何时使用margin:
何时使用padding:
兼容性的问题:在IE5 IE6中,为float的盒子指定margin时,左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display:inline解决。
29 元素竖向的百分比设定是相对于容器的高度吗?
当按百分比设定一个元素的宽度时,它是相对于父容器的宽度计算的,但是,对于一些表示竖向距离的属性,例如 padding-top , padding-bottom , margin-top , margin-bottom 等,当按百分比设定它们时,依据的也是父容器的宽度,而不是高度。
30 全屏滚动的原理是什么?用到了CSS的哪些属性?
31 什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端,而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有meta声明的viewport。
<meta name=’viewport’ content=”width=device-width, initial-scale=1. maximum-scale=1,user-scalable=no”>
32 视差滚动效果?
视差滚动(Parallax Scrolling)通过在网页向下滚动的时候,控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。
33 ::before 和 :after中双冒号和单冒号有什么区别?解释一下这2个伪元素的作用
:before 和 :after 这两个伪元素,是在CSS2.1里新出现的。起初,伪元素的前缀使用的是单冒号语法,但随着Web的进化,在CSS3的规范里,伪元素的语法被修改成使用双冒号,成为::before ::after
34 你对line-height是如何理解的?
行高是指一行文字的高度,具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height,没有定义height属性,最终其表现作用一定是line-height。
单行文本垂直居中:把line-height值设置为height一样大小的值可以实现单行文字的垂直居中,其实也可以把height删除。
多行文本垂直居中:需要设置display属性为inline-block。
35 怎么让Chrome支持小于12px 的文字?
p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例
36 让页面里的字体变清晰,变细用CSS怎么做?
-webkit-font-smoothing在window系统下没有起作用,但是在IOS设备上起作用-webkit-font-smoothing:antialiased是最佳的,灰度平滑。
37 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"/>
38 如果需要手动写动画,你认为最小时间间隔是多久,为什么?
多数显示器默认频率是60Hz,即1秒刷新60次,所以理论上最小间隔为1/60*1000ms = 16.7ms。
39 li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?
行框的排列会受到中间空白(回车空格)等的影响,因为空格也属于字符,这些空白也会被应用样式,占据空间,所以会有间隔,把字符大小设为0,就没有空格了。
解决方法:
40 display:inline-block 什么时候会显示间隙?
41 有一个高度自适应的p,里面有两个p,一个高度100px,希望另一个填满剩下的高度
外层p使用position:relative;高度要求自适应的p使用position: absolute; top: 100px; bottom: 0; left: 0
42 png、jpg、gif 这些图片格式解释一下,分别什么时候用。有没有了解过webp?
43 본문 뒤에 쓴 스타일 태그와 본문 앞에 쓴 스타일 태그의 차이점은 무엇인가요?
페이지 로딩은 위에서 아래로 진행됩니다. 물론 스타일이 먼저 로딩됩니다.
body 태그 뒤에 작성됩니다. 브라우저는 HTML 문서를 한 줄씩 파싱하기 때문에 마지막에 작성된 스타일 시트(개요 또는 스타일 태그에 작성된)를 파싱하면 브라우저가 이전 렌더링을 중지하고 로드 및 파싱을 기다리게 됩니다. . 스타일 시트가 다시 렌더링된 후 Windows IE에서 FOUC가 발생할 수 있습니다(예: 스타일 오류로 인한 페이지 깜박임 문제)
44 CSS 속성 오버플로 속성은 오버플로 요소의 콘텐츠 영역 내용을 처리하는 방법을 정의합니다. ?
매개변수 스크롤하면 스크롤 막대가 나타납니다.
매개변수가 auto인 경우 하위 요소의 콘텐츠가 상위 요소보다 크면 스크롤 막대가 나타납니다.
매개변수가 표시되면 오버플로 콘텐츠가 상위 요소 외부에 나타납니다.
매개변수를 숨기면 오버플로가 숨겨집니다.
45 CSS Sprites에 대해 설명하겠습니다
페이지에 포함된 모든 이미지를 하나의 큰 이미지로 만든 다음 CSS 배경 이미지, 배경 반복, 배경 위치 조합을 사용하여 배경 위치를 지정합니다. CSS 스프라이트를 사용하면 웹페이지의 http 요청을 크게 줄일 수 있으므로 페이지 성능이 크게 향상됩니다. CSS 스프라이트는 이미지 바이트를 줄일 수 있습니다.
지속적으로 업데이트 중...
추천 관련 튜토리얼: CSS 비디오 튜토리얼
위 내용은 답변이 포함된 50가지 기본 CSS 인터뷰 질문의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!