胖蔡说技术
随便扯扯

[前端面试题]CSS面试题

1、CSS实现元素两个盒子垂直水平居中方法

  • 子布局设置为绝对布局:position:absolte; 父布局设置为相对布局,且子布局设置为父布局宽高的50%,然后通过向上、向左移动自身宽高的负一半。
  • 通过使用transform实现向x轴、y轴移动,样式如:transform: translate(-50%,-50%); 在上述前提下。
  • 父布局宽高固定,可以在子布局中通过:margin:auto;实现垂直水平居中。
  • flex布局,通过在父布局中设置:justify-content:center;align-items:center;
  • 父布局使用table-cell与转换text-allign(可以对行内块生效)

2、BFC的理解

BFC(Block Formatting Contenxts) : 块级格式上下文,块格式上下文,是一块独立的渲染区域,内部元素不会影响外部的元素。通过BFC可以用于清除元素内部浮动,解决盒子margin合并问题,如何使用BFC:

  • float不是none
  • overflow属性不是visible
  • position属性不是staticrelative
  • display属性为以下值 : table-cell 、 inline-block 、 table-caption

3、盒子模型的理解

CSS 将html每一个元素都抽象为一个盒子,每个盒子有固定的组成部分,为了能达到相应的效果,我们需要对每个盒子的组成部分进行设置、布局。盒子模型将一个html元素分成4个部分组成:

  • 外边距:margin
  • 内边距:padding
  • 边框:border
  • 内容:content

盒子模型类型分为:

  • W3C标准盒子模型
  • IE标准盒子模型(怪异盒子模型)

准盒子模型=content(内容)+border(边框)+padding(内边距),怪异盒子模型=content(内容)(已经包含了 padding 和 border)。

4、CSS选择器的权重

!important > 行内样式 >ID选择器 > 类选择器 > 标签选择器 > 通配符 > 继承 > 浏览器默认属性

5、CSS中哪些属性不可继承

元素的自带属性不可被继承,比如a标签的颜色,如下为CSS中不可继承的属性:

  • display:元素的格式
  • 文本属性:vertical-align、text-decoration
  • 盒子模型属性:width、height、margin、border、padding
  • 背景属性:background、background-color、background-image

6、Bootstrap 栅格系统的工作原理?

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。

7、CSS3的新特性有哪些?

  • 新增 RGBAHSLA 模式,新增透明度
  • 使用 box-shadow 属性,可以为元素添加投影效果,包括阴影的颜色、大小、模糊度和偏移量等。
  • CSS3允许通过 border-radius 属性为元素的边框添加圆角,创建圆形、椭圆形或具有不同角度的矩形边框。
  • CSS3 引入了linear-gradient(线性渐变)和radial-gradient (径向渐变),允许在元素的背景中创建平滑过渡的颜色效果。
  • 自定义动画:CSS3的 @keyframes 规则允许创建复杂的动画效果,通过定义关键帧和过渡细节来控制动画的执行
  • 使用 transform 属性,可以对元素进行旋转、缩放、倾斜和平移等变换操作
  • CSS3提供了更多的字体控制选项,包括使用 @font-face 规则引入自定义字体文件,以及设置字体的粗细、斜体、大小调整和字间距等。
  • 弹性布局:flex
  • 新增多种选择器:伪类选择器、伪元素选择器、属性选择器等
  • 通过 column-count 和 column-width 等属性,可以将文本内容分成多列显示,类似报纸或杂志的版面布局。
  • 媒体查询允许根据设备的特性和屏幕尺寸来适应不同的样式和布局。通过媒体查询,可以创建响应式网页设计,使网页在不同设备上显示良好。
  • CSS3的 filter 属性允许应用各种图形效果到元素上,如模糊、亮度调整、对比度调整、灰度化、色彩反转等,为图像和元素添加特殊的视觉效果。
  • 网格布局:Grid

8、position的值有哪些,分别有什么作用?

  • static(静态定位):默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
  • relative(相对定位):生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常(原先本身)位置进行定位。可通过z-index进行层次分级。
  • absolute(绝对定位):生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
  • fixed(固定定位):生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

9、::before和::after中双冒号和单冒号有什么区别、作用?

伪元素在 CSS1 中已存在,当时语法是用 : 表示,如 :before 和 :after,后来在 CSS3 中修订,伪元素用 :: 表示,如 ::before 和 ::after,以此区分伪元素和伪类,为了兼容性各浏览器,继续使使用 :after 这种老
语 法表示伪元素。

  • 单冒号(:)用于 CSS3 的伪类
  • 双冒号(::)用于 CSS3 的伪元素

伪类用于向某些选择器添加特殊的效果。它并不改变任何DOM内容。只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见。伪元素创建了一个虚拟容器,这个容器不包含任何DOM元素,但是可以包含内容。另外,开发者还可以为伪元素定制样式。

伪类与伪元素的本质区别就是是否抽象创造了新元素;可以同时使用多个伪类,而只能同时使用一个伪元素。

10、CSS中单位有哪些?相互之间有什么区别?

  • px像素:绝对单位,页面按精确像素展示
  • in:表示英寸,是一个物理单位,在CSS中被直接映射成为px; 转换的方法是 1in = 96px
  • cm:表示厘米,在生活中常用的单位,同样被映射为 px; 转换方法为 1cm = 37.8px
  • mm:表示毫米,与cm类似,转换方法为 1mm = 0.1cm = 3.78px
  • em:参考物是父元素的font-size,具有继承的特点。相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。
  • rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持。
  • 百分比%:相对长度单位,相对于父元素的百分比值
  • vwvhCSS3中加入的 相对长度单位,取决于浏览器视窗的宽(高),1vw 即为浏览器视窗宽度的1/100,适用于依据屏幕宽或高进行的排版,适用于自适应。

11、元素的显示与隐藏?

  • display:none 隐藏对应的元素,在文档布局中不再给它分配空间,它各边的元素会合拢,就当他从来不存在。
  • visibility:hidden 隐藏对应的元素,但是在文档布局中仍保留原来的空间。

12、如何绘制一个0.5px的直线?

使用transform设置scale函数,代码如下:

height: 1px;
transform: scale(0.5);

13、简单介绍一下Flex布局

Flex布局是html中的弹性布局,需要将指定容器设置为flex布局,通过设置flex属性实现界面布局,flex布局支持:

  • 主轴对齐方式:使用justify-content调节元素在主轴的对齐方式
    • flex-start:默认值,起点开始依次排序
    • flex-end:终点依次排列
    • center:沿主轴居中排序
    • space-around:弹性盒子沿主轴均匀排列,空白间距均分在弹性盒子两侧
    • space-between:弹性盒子沿主轴均匀排列,空白间距均分在相邻盒子之间
    • space-evenly:弹性盒子沿主轴均匀排列,弹性盒子与容器之间间距相等
  • 侧轴对齐方式:使用align-items调节元素在侧轴的对齐方式
赞(0) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » [前端面试题]CSS面试题
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏