css前端面试题

1.什么是css盒子模型?

盒子模型包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素。

标准盒子模型和IE盒子模型的区别在于其对元素的width和height的不同解析:(元素的width和height的大小指的就是我们给元素设置的width和height的大小)。
    标准盒模型:元素的width和height = content
    IE盒模型:元素的width和height =( content+border+padding )

标准盒子模型:box-sizing:content-box

宽高指的是内容区域的宽高,

元素框的总宽度 = 元素width + padding的左右边距 + border的左右宽度 + margin的左右边距

标准盒子模型

怪异盒模型(IE盒子模型):box-sizing:border-box

宽高指的是border+padding+content区域的宽高

元素框的总宽度 = 元素(element)的width + margin的左右边距;

IE盒子模型

2.css选择器的优先级?

CSS选择器的优先级按照以下顺序排列:!important > 内联选择器 > ID选择器 > 类别选择器 > 属性选择器 > 伪类 > 元素选择器 > 通配符选择器 > 继承选择器。

  • 行内样式(style=""),带有 !important 或不带
  • ID 选择器 (#id) 带有或不带 !important
  • 类选择器 (class)、属性选择器(input[type="text"] )、伪类选择器(:hover,:first-child,:checked)等带有或不带 !important
  • 元素选择器(p,a,span)、伪元素选择器(::before)带有或不带 !important
  • 最后定义的同优先级规则(对于非 !important 规则)

3.使元素水平和垂直居中的不同方法有那些?

  • 绝对定位和transform
.container{
    position: relative;
    width: 100vw;
    height: 100vh;
}

.container .item {
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
    /*margin-left: 负的宽度的一半*/
    /*margin-top: 负的高度的一半*/
}
  • Flexbox布局
.container{
    display: flex;
    justify-content: center;
    aligin-items: center; 
    width: 100vw;
    height: 100vh;
}
  • Grid布局
.container{
    display: grid;
    place-items: center; 
    width: 100vw;
    height: 100vh;
}

4.什么是响应式设计?如何实现?

是一种网页设计方法,可以适应不同的屏幕尺寸和设备,旨在为跨平台的用户提供良好的交互体验。

实现的方法有: 

  • 百分比布局

           给子元素的宽高,设置成%

  • 媒体查询布局

           通过@media 媒体查询,可以通过给不同屏幕的大小编写不同的样式来实现响应式的布局。

@media (min-width: 768px) and (max-screen:1200px) {
    ...
}
  • rem 响应式布局

           rem 是相对于 html 根元素的字体大小(font-size)的单位。

           em: 相对于父级元素的字体大小,如果自身定义了font-size按自身来计算,如首行缩进

           比如:html { font-size: 14px;}  .box { width: 10rem; height: 20rem;}

           此时 1rem = 14px,所以 box 盒子的宽高分别为:140px 和 280px

           浏览器默认的font-size:16px,最小字体为12px,

          如果设置10px,可以使用 scale 进行缩放,{transform:scale(0.83),transform-origin: 0 0},默认缩放中心点是在盒子的正中心,如果我们需要文本左对齐,就需要改变中心点

  • vw 响应式布局

           vw 和 vh 分别相对的是视图窗口的宽度和视口窗的高度。

           1vw = 视口宽度*  1%,比如:浏览器宽度1200px, 1 vw = 1200px/100 = 12 px

            vmin:vw和vh中较小的那个。
            vmax:vw和vh中较大的那个。

  • flex 弹性布局

.container{
  display: flex;
  flex-direction: column;         // 主轴方向为纵向
  justify-content: space-between; // 两端对齐  
}

justify-content: space-around;  /* 均匀排列每个元素,每个元素周围分配相同的空间 */
  • gird网格布局

.container{
    display: grid; 
    grid-template-columns: repeat(4, 1fr);  /*定义4个相同的列*/
    grid-gap:10px;                          /*定义列之间的间距*/
}

自适应网格布局

.container{
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));  /*列宽度最小200px,为了适应屏幕自动填充网格中的项目*/
    grid-gap:10px;                          /*定义列之间的间距*/
}

砖石布局,网格项根据垂直空间定位,从而产生视觉上的动态布局, 通过将grid-auto-rows 属性设置为minmax(100px, auto),网格将自动调整每行的高度。例如:

.container{
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 
    gird-auto-rows: minmax(100px,auto);
    grid-gap:10px;
}

5.弹性布局flexbox? { flex:1}表示什么?

css3引入的新的布局模式,提供了一种灵活的方式来排列容器的元素,它的所有子元素自动成为容器成员,称为flex项目item。它引入了两个轴:主轴和交叉轴。通过设置容器及其子元素的属性,可以控制它们的流动和对齐方式。

Flex布局的基本属性:

  • flex-direction:row | row-reverse | column | column-reverse

    定义了主轴的方向,可以是水平或垂直,以及其起始和结束的方向。

  • flex-wrap:nowrap | wrap | wrap-reverse

    决定了当容器空间不足时,项目是否换行。

  • flex-flow: row | column   wrap

    这是flex-direction和flex-wrap的简写形式。

  • justify-content:

    flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe

    设置项目在主轴上的对齐方式。

  • align-items:

    stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe

    定义了项目在交叉轴上的对齐方式。

  • align-content:

    flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;

    定义了多根轴线时,项目在交叉轴上的对齐方式。

  • gap row-gap、column-gap:设置容器内项目间的间距。

使用flexbox可以创建等高列,通过在容器上设置display:flex, 并将{ flex:1} 应用于子元素来实现。允许列扩展以均匀地填充可用空间。

.container {
 display:flex;
}
.container div {flex:1;}

当你设置 flex: 1 时,你告诉浏览器这个flex项目应该能够伸展来占据任何额外的空间,并且在需要时也可以缩小,而且不考虑它的初始大小。可以平均分配空间

flex : 1 其实是代表3个属性的简写:flex-grow、flex-shirnk、flex-basis,这3个属性是可以单独进行设置的

当设置了 flex:1 属性时,代表 flex-grow: 1、flex-shrink:1、flex-basis:0%

  • flex-grow: 分配剩余空间的相对比例。

        属性值:负值无效,默认为 0

        公式:原始宽度 + (剩余空间 / 总共分成多少份 * 当前元素所占分数)

  • flex-shrink: 指定了 flex 元素的收缩规则

        属性值:负值无效,默认值为 1

        公式:父元素原始宽度 * (原始宽度 / 所有项原始宽度总和)

  • flex-basis: 指定了 flex 元素在主轴方向上的初始大小   

        属性值:content | <‘width’> (即:可以百分比,也可以具体的数)默认值是 auto

注意:当设置了flex:1时,原先给元素设置的width属性是不会生效的 

6.css动画?

使用css关键帧可以实现脉动动画效果,通过定义具有重复循环的旋转动画,可以模拟记载旋转器

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.rotate {
    animation: rotate 1s linear infinite;
}

7.如何使用css grid创建网格布局?

要创建网格布局,需要定义网格容器并指定所需的行数和列数,可以使用 grid-template-rows 和 grid-template-columns 属性来设置网络轨道的大小

以下是kds项目中键盘布局:

grid-template-rows 和 grid-template-columns 为固定宽高

.keyboard-container {
    display: grid;
    grid-template-columns: 100px 100px 100px 100px;
    grid-template-rows: 80px 80px 80px 80px;
    grid-gap: 1px;         //间距,是 grid-column-gap 和 grid-row-gap 的合并简写形式
    grid-template-areas:
        'a b c d'
        'e f g h'
        'i j k l'
        'm n o l';
}
// [确认]键,占最后一列的两行 'l'
.enter {
  grid-area: l;
}

 . 号表示没有名称的网格项。可将一个单元格(或多个单元格)留作空白

.item1 {
  grid-area: myArea;
}
.grid-container {
  grid-template-areas: 'myArea myArea . . .';
}

8.使用sass或less等css预处理器有那些优点?

css预处理器通过引入变量、嵌套、mixin和函数等功能在增强css的功能。这些功能使代码更加模块化、可重用且更易于维护。

$parmary-color: #f00;

.container {
   color: $parmary-color
}

sass和less的区别:

  编译环境不一样:Sass的安装需要Ruby环境,是在服务器端处理的。而Less需要引入 less.js来处理

变量名不一样。Less中使用@,而Sass中使用$

输出设置: SASS提供了多种输出选项,如嵌套、展开、紧凑和压缩,这为开发者提供了灵活的控制输出CSS样式的方法。而LESS的输出设置较为简单,通常直接输出编译后的CSS代码。‌

Sass支持条件语句,如if…else、for循环等,而Less不支持

9.display:none; 和visibility:hidden;的区别是什么?

  • display:none; 彻底消失,释放空间。能引发页面的reflow回流(重排)。
  • visibility:hidden; 就是隐藏,但是位置没释放,好比opacity:0; 不引发页面回流。

10.回流/重排、重绘是什么?

    ①、回流的定义 :当Rendering Tree 中部分元素的尺寸大小、布局、隐藏等属性改变时,浏览器的布局需要调整,则需要重新渲染DOM。这个过程就叫回流。回流也叫重排(对整个页面进行重新排版)。

    ②、重绘的定义:当元素属性的改变不影响DOM Tree的结构,即不会影响浏览器的布局,只是“表象”发生变化(如background-color,visibility等),那么针对新样式对元素进行重新绘制。

二者的联系

  • 回流一定会引起重绘,重绘不一定引起回流。
  • 回流需要重新渲染DOM,也要重新处理Rendering Tree。即回流的开销比重绘要大。

11.解释CSS中的‌继承和‌层叠的概念,并举例说明如何影响样式应用

  • 继承:是CSS的一个特性,它允许一些属性自动应用于特定元素的子元素。例如,文本颜色(color)和字体大小(font-size)可以从父元素继承到子元素。
  • 层叠: 规定了当多个样式作用于同一个元素时,如何确定最终的样式。也就是选择器优先级

12.解释什么是CSS的will-change属性,并讨论其如何帮助优化页面性能。

will-change属性用于通知浏览器特定css属性即将发生的更改。允许浏览器提前为更改做好准备,有助于优化渲染性能。

13.如何优化CSS以提高页面加载速度

  1. 尽量少的去对标签进行选择,而是用class 
  2. 选择器优化嵌套,尽量避免层级过深
  3. 属性是可以通过继承而来的,避免对这些属性重复指定规则
  4. 尽量减少页面重排、重绘

相关推荐

  1. 端面试题css

    2024-07-20 22:46:03       52 阅读
  2. 端面试题 ===> 【CSS

    2024-07-20 22:46:03       33 阅读
  3. 端面试题--CSS系列(一)

    2024-07-20 22:46:03       64 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-20 22:46:03       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-20 22:46:03       102 阅读
  3. 在Django里面运行非项目文件

    2024-07-20 22:46:03       83 阅读
  4. Python语言-面向对象

    2024-07-20 22:46:03       92 阅读

热门阅读

  1. 力扣第二十二题——括号生成

    2024-07-20 22:46:03       26 阅读
  2. WebKit简介及工作流程

    2024-07-20 22:46:03       21 阅读
  3. 编程中的智慧之设计模式一

    2024-07-20 22:46:03       26 阅读
  4. NVM配置

    NVM配置

    2024-07-20 22:46:03      23 阅读
  5. 获取磁盘剩余容量-----c++

    2024-07-20 22:46:03       25 阅读
  6. springboot3.2 RedisCacheManager配置

    2024-07-20 22:46:03       24 阅读
  7. springSecurity学习之springSecurity简介

    2024-07-20 22:46:03       26 阅读
  8. 分布式锁-redisson锁重试和WatchDog机制

    2024-07-20 22:46:03       19 阅读
  9. Photoshop图层类型

    2024-07-20 22:46:03       23 阅读
  10. (一)js前端开发中设计模式前篇之对象

    2024-07-20 22:46:03       24 阅读