[前端面试题]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属性不是static和relative
• 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的新特性有哪些?

• 新增 RGBA，HSLA 模式,新增透明度
• 使用 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+支持。
• 百分比%：相对长度单位，相对于父元素的百分比值
• vw和vh：CSS3中加入的 相对长度单位，取决于浏览器视窗的宽（高），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调节元素在侧轴的对齐方式