CSS相关面试题

1、标准盒子模型和IE怪异盒子模型？

• 标准盒子模型就是指的元素的宽度和高度仅包括的内容区域，不包括边框和内边距，也就是说，元素的实际宽度和高度等于内容区域的宽度和高度
• IE怪异盒子是指元素的高度和宽度，包括内容区域、内边距和边框，也就是说，元素的实际宽度和高度等于内容区域的宽度和高度加上内边距和边框的宽度。
• 在标准盒子模型中，可以通过设置元素的高度和宽度来控制内容区域的大小，而IE怪异盒子模型中，需要考虑到边框和内边距的影响，才能准确的控制内容区域的大小
• 为了避免浏览器兼容性的问题，可以在CSS中使用box-sizing属性来指定盒子模型的实现方式，默认值为content-box，表示标准盒子模型；而设置为border-box，则表示IE怪异盒子模型

2、CSS选择器？

• id选择器：
• 类选择器
• 标签选择器
• 后代选择器
• 伪类选择器
• 伪元素选择器
• 属性选择器
• 属性选择器
• 子选择器
• 相邻同胞选择器
• 群组选择器

优先级？

• 内联>ID选择器>类选择器>标签选择器
• 计算层面：

3、BFC的理解？

• BFC是块级格式化上下文，是页面当中的一块渲染区域，有自己的一块渲染规则，display的所有属性都会触发BFC，overflow属性也会触发BFC，清浊浮动，
• 应用场景：垂直外边距合并，都是正值取较大的，一正一负取两者之和，都是负值取较大的
• BFC的应用场景包括：
  • 1. 清除浮动：当一个元素设置了浮动后，它会脱离文档流，导致它的父元素高度塌陷，此时可以通过在父元素上触发BFC来清除浮动，使父元素能够正确地包含浮动元素。
    2. 防止margin重叠：当两个相邻元素的margin值相遇时，它们的margin值会合并，导致布局出现问题。此时可以通过在其中一个元素上触发BFC来避免margin重叠。
    3. 实现多栏布局：通过在容器元素上触发BFC，可以实现多栏布局，使得多个子元素能够在同一行内排列。
    4. 避免元素被浮动元素覆盖：当一个元素被浮动元素覆盖时，可以通过在该元素上触发BFC，使其脱离文档流，避免被浮动元素覆盖。
• 哪些情况触发BFC？
  • 1. 根元素或者包含根元素的元素
    2. 浮动元素float不是none时候
    3. 绝对定位元素position为absolute或fixed
    4. 行内块元素display为inline-block
    5. 表格单元格display为table-cell
    6. overflow不是visible的块级元素

4、元素垂直居中的方法？

1. 利用定位+margin：auto
2. 利用定位+margin：负值，top：50%；left：50%（已知宽高）
3. 利用定位+transform：（位置宽高）translate（-50%，-50%）可以使用 position 和 transform 属性将元素垂直居中。将元素的 position 属性设置为 absolute，然后使用 top 和 left 属性将元素定位到父元素的中心位置。最后使用 transform 属性将元素向上移动自身高度的一半
4. table布局：可以使用 table-cell 布局的 vertical-align 属性将元素垂直居中。将父元素的 display 属性设置为 table，子元素的 display 属性设置为 table-cell，然后设置 vertical-align 属性为 middle 即可。
5. flex布局：可以使用 flexbox 布局的 align-items 属性将元素垂直居中。将父元素的 display 属性设置为 flex，然后设置 align-items 属性为 center 即可。
6. grid布局

5、如何去实现一个双飞翼布局（两栏布局）？

• 利用flex布局，左边固定宽度，右边设置flex为1，右侧自适应

6、如何去实现一个三栏布局，中间自适应？

• 利用flex布局，左右两边设置为固定宽度，然后中间设置flex为1，就可以实现三栏布局，中间自适应

7、回流和重绘？

• 在html中，每个元素都可以理解成一个盒子，在浏览器的解析过程中，会涉及到回流和重绘
• 回流，当页面中的元素发生布局或者几何属性的变化时，浏览器需要重新计算元素的位置和大小，然后重新布局整个页面的过程，回流会导致页面的重新渲染，因此也比较耗费性能
• 重绘，指的是当页面中的元素的样式发生变化时候，浏览器会重新绘制这些元素的外观，但是不会改变他们的布局或几何属性，重绘的代价比回流小，但是仍然会消耗一定的性能
• 触发回流时机：
  • 页面的首次渲染
  • 浏览器窗口大小发生变化
  • 元素的位置、大小、内容发生变化
  • 添加或删除可见的DOM元素
  • 修改元素的样式，例如宽度、高度、字体大小等
• 触发重绘时机：
  • 修改元素的背景颜色，字体颜色等样式属性
  • 修改元素的不透明度
  • 修改元素的文本内容

8、绘制三角形

• 不带颜色三角形：css旋转特性，构建一个元素20px，border-top/border-right构成直角三角形，下三角为例，旋转45度而得到
• border实现，给元素设置border:50px，边框颜色透明，类似于正方形，上下左右四个border，将正方形分成四部分，上三角为例，border-bottom设置颜色

9、移动端的1px边框

• 利用响应式布局，监听当前设备的大小，通过缩放，缩放的值就是监听当前屏幕设备的尺寸，通过媒体查询查询尺寸，对于屏幕进行缩放，实现移动端的1px边框
• 移动端的1px边框问题是由于移动设备的像素密度比较高，导致CSS中的1px实际上在屏幕上显示的像素可能是2px或3px，从而导致边框变粗或者变模糊
• 解决办法;
  • 使用CSS3的border-image属性，将边框图案作为背景图片，可以避免边框变粗或者变模糊的问题。
  • 使用viewport单位，如vw、vh、vmin、vmax等，来设置边框的宽度，这样可以根据屏幕的大小自适应调整边框的宽度。
  • 使用transform:scale()属性，将元素缩小一定比例，然后再放大，这样可以使边框变得更加锐利。
  • 使用伪元素:before或:after来实现边框，这样可以避免边框变粗或者变模糊的问题。
• 涉及dpr问题，设备像素比问题

10、响应式布局媒体查询三个关键字？

• and：且
• only：唯一的
• none：排除某个
• @media

11、CSS3新增的特性有哪些？

• 选择器：伪类选择器、nth选择器
• 动画：2D、3D动画
• grid布局：
• 媒体查询：
• 渐变：线性渐变、径向渐变
• flex布局：
• border：
• 字体：
• 边框：
• 多列布局：
• 蒙版：

12、CSS动画都有哪些？

• css动画就是为层叠样式表建议的允许的可扩展性标记语言，元素使用css的动画模块
• 过渡：transform(translate位移、scale缩放、rotate旋转、skew倾斜)
• 动画：animation（设置关键帧，通过animation定义名字，属性了解）
• 渐变：transition

13、3D动画中的perspective属性（3D动画景深）？

transform-style呈现3D样式效果

• 在3D动画中，perspective属性是值的场景的透视效果，也成为景深
• 指的是在3D场景中，物体离观察者越远，他们的大小和位置就会变得更小，这种效果可以让场景看起来更加的真实。
• perspective属性可以通过调整相机的位置和角度来进行实现，通常通过设置相机的视角、远近平面和近裁剪等参数来控制景深的效果
• 在3D动画中，透视效果可以让观众更好的感受到场景的深度和立体感，从而提高动画的真实感和沉浸感

14、可视视口和理想视口？

• 可视视口：设备的真实大小，可以看见的屏幕大小区域，可以随着浏览器窗口的大小来进行页面的调整
• 理想视口：网页的理想显示区域，是一个固定的值，不会随着浏览器窗口的大小而改变
• 布局视口：在浏览器中，是固定的，960px，浏览器网页的布局区域，包括可见和不可见的部分
• dpr：设备像素比，它是物理设备和css像素之间的比率
• ppi：每英寸像素比，是衡量显示器、手机屏幕等设备分辨率的常用单位，表示在每英寸的区域内有多少个像素点，ppi越高，显示的图像就越清晰
• viewport：指的是浏览器窗口中用于显示网页的区域，在网页开发中，viewport通常指的是网页的可视区域，也就是浏览器窗口中实际用于显示网页内容的区域