찾다

집  >  기사  >  웹 프론트엔드  >  CSS 면접 질문(참고)

CSS 면접 질문(참고)

coldplay.xixi
coldplay.xixi앞으로
2020-08-03 16:02:442938검색

CSS 면접 질문(참고)

1. 표준 CSS 박스 모델을 도입하시나요? IE 하위 버전의 박스 모델 차이점은 무엇인가요? 표준 모델은 4가지 부분으로 구성됩니다.

콘텐츠 영역: 텍스트, 이미지 등의 요소를 배치할 수 있는 영역 일반적으로 너비와 높이입니다. 설정은 콘텐츠의 너비와 높이를 나타냅니다.
  • 여백 영역: 콘텐츠와 테두리 사이의 거리
  • 테두리 영역: 테두리
  • 외부 테두리 영역: 외부 테두리로 제한되며, 빈 영역을 사용하여 테두리 영역을 확장하고 별도의 인접 요소
  • 모델 구별:
표준 표현형은 상자 크기가 콘텐츠 상자로 설정된 상자 모델을 나타냅니다. 일반적으로 너비와 높이는 콘텐츠의 너비와 높이를 나타냅니다. IE 상자 모델은 상자 크기 조정 기능이 있는 상자를 경계 상자(border-box)로 나타냅니다. 너비와 높이의 계산은 콘텐츠+패딩+테두리입니다.


특별 추천

:2020년 CSS 면접 질문 요약(최신)

2.CSS 선택자는 무엇인가요? 어떤 것이 상속될 수 있나요?

id 선택기(#myid)
  • 클래스 선택기(.myclassName)
  • 태그 선택기(p,h1,p)
  • 하위 선택기(ul>li)
  • 하위 선택기(li a)
  • 와일드카드 선택기( *)
  • 속성 선택기(a[rel="external"])
  • 의사 클래스 선택기(a:hover,li:nth-child)
  • 상속 가능한 스타일: 글꼴 -크기 글꼴 계열 색상
상속 불가능 스타일: 테두리 패딩 여백 높이 너비


3. CSS 우선순위는 어떻게 계산하나요?

우선순위 근접 원칙, 동일한 가중치 하에서 가장 가까운 스타일 정의가 정확합니다.
  • 스타일 로드 마지막에 로드된 위치가 우선합니다
  • 우선순위 는:

동일한 가중치 적용: 인라인 스타일(태그 내부)> 삽입된 스타일 시트(현재 파일 내)>외부 스타일(외부 파일 내)
  • 중요! tag
  • !important는 inline
  • 보다 우선순위가 높습니다. 4. 디스플레이의 값은 무엇인가요? 역할을 설명하세요

블록 블록 유형. 기본 너비는 상위 요소의 너비이며 너비와 높이를 설정할 수 있으며 줄 바꿈 표시
  • none 요소는 표시되지 않고 문서 흐름에서 제거됩니다.
  • 인라인 인라인 요소, 기본 너비는 콘텐츠 너비입니다. , 너비와 높이를 설정할 수 없으며 동일한 줄 표시
  • inline -block 기본 너비는 콘텐츠의 너비와 높이를 설정하고
  • list-item 처럼 표시할 수 있습니다. 블록 유형 요소의 경우 너비와 높이를 설정하여 동일한 행에 표시할 수 있습니다.
  • table 이 요소는 회계 테이블로 표시됩니다.
  • inherit는 상위 요소가 표시 값을 상속합니다. 속성
  • 5. 포지션 해제와 절대값은 무엇인가요?

absolute는 정적 값 부분이 있는 첫 번째 상위 요소를 기준으로 위치가 지정된 절대 위치 요소를 생성합니다.
  • fixed는 브라우저 창을 기준으로 위치가 지정된 절대 요소를 생성합니다.
  • relative는 일반 위치를 기준으로 상대적으로 위치가 지정된 요소를 생성합니다.
  • 정적 기본값을 지정합니다. 위치 지정 없이 요소는 일반적인 흐름
  • inherit에서 위치 속성의 값이 상위 요소
  • 에서 상속됨을 규정합니다.

Transition
  •   transition-property:width
  transition-duration:1s
  transition-timing-function:linear
  transition-delay:2s
Animation
  • animation :애니메이션 이름, 한 사이클에 소요된 시간, 구름 곡선(기본값 이즈), 애니메이션 지연(기본값 0), 애니메이션 재생 횟수(기본값 1), 애니메이션 역방향 재생 여부(기본값 일반) , 애니메이션 일시 중지 여부(기본 실행) code>

animation:动画名称，一个周期花费时间,云顶曲线(默认ease),动画延迟(默认0),动画播放次数(默认1),是否反向播放动画(默认normal),是否暂停动画(默认running)

  • 形状转换
transform: 使用于2D或3D转换的元素
transform-origin: 装换元素的位置(围绕哪个点进行装换).默认(x,y,z);

  • 选择器

  • 阴影

box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始的方向(默认是从里向外，设置inset就是从外往里)

  • 边框图片

border-image: 设置图片路径 设置边框背景图的分割方式 设置或检索对象的边框厚度 设置或检索对象的边框背景图向外扩展 设置边框图片的平铺方式

  • 边框圆角
  border-radius: n1 n2 n3 n4;
/* n1-n4 四个值得顺序是左上角，右上角，右下角，左下角 */
  • 反射(倒影)

box-reflect: 方向[above-上|below-下|right-右|left-左],偏移量,遮罩图片

  • 文字
  • 换行 word-break:normal(默认使用浏览器默认的换行规则)|break-all(允许在单词内换行)|keep-all(只能在半角空格或连字符处换行)
  • 超出省略号
overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;
  • 多行省略号
overflow:hiden;
text-overflow:ellipsis;用省略号"..."隐藏超出范围的文本
display:-webkit-box;  //将对象作为弹性伸缩盒子模型显示
-webkit-line-clamp:2; //用来限制在一个块元素显示的文本的行数
-webkit-box-orient:vertical;设置弹性盒对象的子元素的排列方式
  • 文字阴影

text-shadow: 水平阴影 垂直阴影 模糊阴影 阴影颜色Shape Transform

     .scale{
  position: relative;
  border:none;
 }
.scale:after{
  content: '';
  position: absolute;
  bottom: 0;
  background: #000;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
Selector

  • Shadow

box-shadow: 수평 그림자 위치 수직 그림자 위치 흐림 거리 그림자 크기 그림자 색상 그림자 시작 방향(기본값은 내부에서 외부로, 삽입 설정은 외부에서 내부로 설정됨)🎜🎜🎜Border image🎜🎜🎜border-image: 이미지 경로를 설정하고, 테두리 배경 이미지 분할 방법, 개체 설정 또는 검색 테두리 두께를 설정하거나 개체의 테두리 배경 이미지를 검색하여 바깥쪽으로 확장하고 테두리 이미지의 타일링 방법을 설정합니다.🎜🎜🎜border rounded Corners🎜🎜
 .wrapper{
   position:relative;
   overflow:hidden;
 }
🎜 🎜반사(반사)🎜🎜🎜box-reflect: 방향 [위-위|아래-아래|오른쪽-오른쪽|왼쪽-왼쪽], 오프셋, 마스크 이미지🎜🎜🎜text🎜🎜🎜🎜 line breakword-break:normal(기본적으로 브라우저 기본 줄 바꿈 규칙에 사용됨) | break-all(단어 내에서 줄 바꿈 허용) keep-all(반자 공백 또는 하이픈에서만 줄 바꿈 가능) code>🎜🎜줄임표 초과🎜🎜<pre class="brush:css;toolbar:false;">.clearfix{ zoom:1; } .clear:after{ content:&amp;#39;.&amp;#39;; height:0; clear:both; display:block; visibility:hidden; }</pre>🎜🎜여러 줄 줄임표 🎜🎜<pre class="brush:css;toolbar:false;">&lt;p class=&quot;md-warp&quot;&gt; &lt;span class=&quot;md-main&quot;&gt;&lt;/span&gt; &lt;/p&gt; .md-warp{ width: 400px; height: 300px; max-width: 100%; border: 1px solid #000; } .md-main{ display: block; width: 100px; height: 100px; background: #f00; }</pre>🎜🎜Text-shadow🎜🎜🎜<code>text-shadow: 가로 그림자 세로 그림자 흐림 그림자 색상🎜🎜🎜color🎜 🎜🎜rgba(rgb 색상 값, a는 투명도)🎜🎜🎜그라디언트 🎜🎜🎜선형 및 방사형 그라디언트🎜
  • filter(滤镜)

filter: 滤镜效果(透明度)

  • 弹性布局

弹性布局就是flex布局

-栅格布局

栅格化布局。就是grid

  • 盒模型
  • border-box 边框和内边距包含在元素的宽高之内
  • content-box 边框和内边距不包含在元素的宽高之内

7. 请解释一下css3的flex(弹性盒布局模型)以及使用场景

一个用于页面布局的全新css3功能，flexbox可以把列表放在同一个方向(从上到下排列，从左到右)，并且列表能延伸到占用可用的空间，较为复杂的布局还可以嵌套一个伸缩容器(flex container)来实现。采用flex布局的元素，成为flex容器。常规布局是基于块和内联流方向，而flex布局是基于flex布局flex-flow流可以很方便的用来做居中，能对不同屏幕大小自适应，在布局上有了比以前更加灵活的空间

8. 经常遇到的浏览器的兼容性问题有哪些，原因，解决方法是什么

  • png24位的图片在Ie6浏览器上出现背景。解决方案是做成png8
  • 浏览器默认的margin和padding不同。解决方案是假一个全局的*{margin:0;padding:0}来统一
  • IE6双边距bug；矿属性变迁float后，又有横向的margin情况下，在Ie6显示margin比设置的大。解决方案是在float的标签控制中加入display:inline；将其妆花为行内渐进识别的方式，从总体中逐步排除局部。
  • 设置较小高度标签(一般小于10px)，在IE6，IE7中高度超出自己设置高度。解决方法:给超出高度的标签设置overflow:hidden;或者设置行高line-hieght小于你设置的高度
  • chrome中文界面默认或将小于12px的文本强制按照12px的文本强制按照12px显示，可通过加入css属性 -webkit-text-size-adjust:none 解决

移动端

  • 1px边框问题。解决方案采用微元素模拟的方式
 .scale{
  position: relative;
  border:none;
 }
.scale:after{
  content: &#39;&#39;;
  position: absolute;
  bottom: 0;
  background: #000;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
  • 点透问题，在安卓某些版本触发两次点击问题。解决方案：引入fastclick处理点透问题
  • 安卓部分版本input里的placeholder位置偏上。解决方案：把input的line-height设为normal
  • ios的body位置overflow：hidden后仍然可以滚动。解决方案：一般在所有元素最外层再包一大盒子.wrapper
 .wrapper{
   position:relative;
   overflow:hidden;
 }
  • ios滚动卡顿。解决方案：在滚动的容器上加上webkit-over-flow-scrolling:touch;

9. 请解释一下为什么需要清浮动？清浮动的方式

清浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使页面后面的布局不能正常显示

  • 父级p定义height
  • 在浮动元素后面添加class为clear的空p元素，给这个p设置样式.clear{clear:both}
  • 给父容器添加overflow:hidden或者auto样式
  • 给父容器添加clearfix的class，用伪类clearfix:after；来这个样式。清除浮动
.clearfix{
    zoom:1;
}
.clear:after{
    content:&#39;.&#39;;
    height:0;
    clear:both;
    display:block;
    visibility:hidden;
}

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

margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin是用来布局分开元素，使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容与元素之间有一段间距

11.什么是伪类，什么是伪元素，他们的区别？

  • 伪类的受体是文档树中已有的元素，而伪元素则创建了一个DOM外的元素
  • 伪类用于添加元素的特殊效果，而伪元素则是添加元素的内容
  • 伪类使用的一个冒号，为元素使用两个冒号
  • 伪类更常用一些简单的动画或者交互的样式，例如滑入滑出，而为伪元素更常用语字体图标，清除浮动等

12. 什么是外边距合并

外边距合并指的是，当两个垂直外边距相遇时，他们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中较大者

13. 实现水平垂直居中

示例：

<p class="md-warp">
    <span class="md-main"></span>
</p>
.md-warp{
    width: 400px;
    height: 300px;
    max-width: 100%;
    border: 1px solid #000;
}
.md-main{
    display: block;
    width: 100px;
    height: 100px;
    background: #f00;
}

水平居中

  • margin法
    需要满足三个条件
  • 元素定宽
  • 元素为块级元素或行内元素设置display:block
  • 元素的margin:left或者margin-right都必须设置auto
    三个条件缺一不可
.md-main{
    margin: 0 auto
}
  • 定位法
  • 元素定宽
  • 元素绝对定位，并设置left:50%;
    +元素负做边距margin-left为宽度的一半
.md-wrap{
    position:relative;
}
.md-main{
    position:absolute;
    left:50%;
    margin-left:-50px
}

有些时候元素宽度不是固定的，依然可以使用定位法实现水平居中用到css3中的transform属性中的translate

.md-warp{
    position: relative;
}
// 注意此时md-main不设置width为100px
.md-main{
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
}
  • 文字水平居中

直接使用text-align:center即可

垂直居中

  • 定位法

和水平居中类似，只是把left:50%换成top:50%,副边距和transform属性进行对应更改即可

优点：能在各个浏览器下工作，结构简单明了，不需要增加额外的标签

 .md-warp{
    position: relative;
}
.md-main{
    position: absolute;
    /* 核心 */
    top: 50%;
    margin-top: -50px;
}

不确定高度的时候

.md-warp{
    position: relative;
}
.md-main{
    position: absolute;
    top: 50%;
    // 注意此时md-main不设置height为100px
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
}
  • 单行文本垂直居中

需要满足两个条件：

  • 元素内容是单行，并且其高度是固定不变的
  • 将其line-height设置成height的值一样
p{
    width: 400px;
    height: 300px;
    border: 1px solid #000;
}
span{
    line-height: 300px;
}

视窗单位的解决办法

让元素在视窗中居中，使用vh实现

.md-warp{
    position: relative;
}
.md-main{
    position: absolute;
    margin: 50vh auto 0;
    transform: translateY(-50%);
}

Flexbox的解决方案

完成这项工作只需要两个样式，在需要水平垂直居中的父元素中设置display:flex和在水平存执居中的元素设置margin:auto

.md-wrap{
    display:flex
}
.md-main{
    display:auto
}

Flexbox的实现文本的水平垂直居中同样很简单

 .md-warp{
    display:flex;
}
.md-main{
    display: flex;
  align-items: center;
  justify-content: center;
    margin: auto;
}

绝对垂直居中

.md-wrap{
    position: relative;
}
.md-main{
    position:absolute;
    top:0&#39;
    right:0
    bottom:0;
    left:0;
    margin:auto;
}

最好不要使用绝对定位，因为他对整体的布局影响相当的大

相关教程推荐：CSS视频教程

위 내용은 CSS 면접 질문(참고)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
이 기사는 cnblogs.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：2021 CSS3 면접 질문다음 기사：2021 CSS3 면접 질문

관련 기사

더보기