详解面试题之CSS篇（持续更新~）

布氏实习生
147 阅读7分钟

前言

目前想整理一组前端面试系列文章，尽可能详细讲解每一道面试题，欢迎评论区查漏补缺，也欢迎各位提供面试题，不断扩大完善本系列文章内容，也希望大家多多点赞、收藏、关注！尽可能让我有动力坚持下去。后续会配置上思维导图。

  • 详解面试题之CSS篇
  • 详解面试题之HTML篇
  • 详解面试题之JavaScript篇

1、防止高度坍塌

思路

  1. 什么是高度坍塌
  2. 造成坍塌的原因是什么
  3. 解决方法及其优缺点

范例

  1. 高度坍塌：父元素不写高度时，子元素写了浮动后，父元素会发生高度坍塌（造成父元素高度为 0）。父元素的高度，都是由内部未浮动子元素的高度撑起的 如果子元素浮动起来，就不占用普通文档流的位置。父元素高度就会失去支撑，也称为高度坍塌
  2. 解决办法：

  • 1、给父元素添加声明overflow：hidden

    优点：代码少、简单

    缺点: 不能和position定位配合使用，超出的尺寸会被隐藏

    原理：CSS中的overflow :hidden属性会强制要求父元素必须包裹住 所有内部浮动的元素，以及所有元素的margin范围。

  • 2、在浮动元素下方添加空div，并给元素声明 clear：both，保险起见，再加height:0。清除个别块元素可能自带的height:16px;

    缺点：需要添加多余的空标签并添加属性，影响选择器查找元素

    原理: 利用clear:both属性和父元素必须包含非浮动的元素两个原理

  • 3、父元素添加浮动

    缺点: 浮动可能产生新的浮动问题

    原理: 浮动属性也会强制父元素扩大到包含所有浮动的内部元素

  • 4、父元素定义display:table（详情看第二题讲解）

  • 5、万能方式: 

    box::after{  
         content: "";
         display: block;  
         clear: both;  
         height: 0; /*为了清楚个别块元素自带的16px高度*/‎  
 }

可能的追问

  1. ::before 和 :after 的双冒号和单冒号有什么区别？
  2. 为什么需要清除浮动？清除浮动的方式

2、BFC

思路

  1. 什么是BFC
  2. 布局规则
  3. 如何创建

范例

  1. BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有块级元素参与，它规定了内部的块级元素如何布局，并且与这个区域外部毫不相干。外部元素也不会影响这个渲染区域内的元素。简单说：BFC就是页面上的一个隔离的独立渲染区域，区域里面的子元素不会影响到外面的元素。外面的元素也不会影响到区域里面的子元素。
  2. Box，盒子，是 CSS 布局的对象和基本单位，直观点说，就是一个页面是由很多个盒子区域组成。元素的类型和 display 属性，决定了这个盒子区域的类型。不同类型的盒子区域内的子元素， 会以不同的 Formatting Context（一个决定如何渲染文档的容器）方式渲染。
    • 块级元素盒子，display 属性为 block, list-item, table 的元素，会生成块级元素渲染区域。并且以 BFC( block fomatting context)方式渲染；
    • 行级元素盒子，display 属性为 inline, inline-table 的元素，会生成行级元素渲染区域。并且以 IFC( inline formatting context)方式渲染；
    • 所以，CSS 中最常见的渲染方式有两大类：BFC 和 IFC
  3. BFC的布局规则:默认，内部的块元素会在垂直方向，一个接一个地放置。每个块元素独占一行。块元素垂直方向的总距离由margin决定。属于同一个BFC的两个相邻块元素在垂直方向上的margin会发生重叠/合并。但水平方向的margin不会。左侧BFC渲染区域的margin，必须与右侧BFC渲染区域的margin相衔接，不能出现重叠。BFC渲染区域不会与float浮动定义的元素区域重叠。‎计算父元素BFC渲染区域的高度时，内部浮动元素的高度，都必须算在内。
  4. 如何创建BFC
    • float的值不是none
    • position的值不是static或者relative。
    • display的值是inline-block、table-cell、flex、table-caption或者inline-flex
    • overflow的值不是visible

可能的追问

  1. 可以解决哪些问题?（避免垂直方向margin合并、避免垂直方向margin溢出、自适应两栏布局、防止高度坍塌）
  2. 什么是margin合并、margin溢出
  3. display:none与visibility:hidden的区别
  4. 对盒模型的理解
  5. 两栏布局、三栏布局的实现

3、弹性布局

思路

  1. 弹性布局的概念
  2. 父元素上设置的属性
  3. 每个子元素项目可单独设置的属性

范例

  1. 弹性布局主要定义父元素中子元素的布局方式，让布局能适用多种情况提供最大灵活性。
  2. 几个概念：容器---父元素；项目---多个子元素；主轴---子元素排列方向上的轴（默认从左向右）；交叉轴---与主轴方向垂直的轴（默认从上到下）。
  3. 父元素上设置的属性：
    • display:flex 父元素变成弹性布局渲染区域
    • flex-direction 指定容器主轴的排列方向
      • row 默认从左向右
      • row-reverse 从右向左
      • column 从上到下
      • column-reverse 从下到上
    • flex-wrap 当主轴排列不下所有元素时，是否自动换行
      • 默认nowrap 父元素空间不够，也不换行！所有子元素项目自动等比缩小。
      • wrap 当内容放不下时，自动换行，不缩小
    • flex-flow flex-direction + flow-wrap的简写形式； 
      //语法:
flex-flow: flex-direction flex-wrap
    • justify-content 定义项目在主轴上的对齐方式
      • flex-start 以主轴起点对齐 --- 默认左对齐，从左向右排列
      • flex-end 以主轴终点对齐 --- 默认右对齐，从右向左排列
      • center 在主轴上居中对齐
      • space-between，表示两端对齐 第一个元素紧贴最左边，最后元素紧贴最右边。中间多个元素在剩余空间中等间距排列
      • space-around，表示每个项目两端间距相同 所有元素均分空白间距，包括第一个元素左边间距和最后一个元素右边间距，均是等距离分布
    • align-items 定义所有子元素在交叉轴上的对齐方式
      • flex-start，表示让项目以交叉轴的起点方向对齐 --- 默认置顶对齐
      • flex-end，表示让项目以交叉轴的终点方向对齐 --- 默认置底对齐
      • center，表示让项目以交叉轴的中线居中对齐 --- 垂直方向居中对齐
      • baseline，表示让项目以交叉轴的基线对齐 --- 以内容文字的基线对齐
      • stretch，表示如果项目未设置尺寸，就让项目在交叉轴上占满所有空间 --- 所有子元素项，垂直方向拉伸，默认沾满高度
  4. 每个子元素项目可单独设置的属性:
    • order 专门定义项目在主轴上的排列顺序 其值为整数数字，无需单位。值越小，越靠近起点；值越大，越靠近结尾，默认值都是0。
    • flex-grow 专门定义项目的放大比例 如果容器有足够的空间，项目可以放大 其值为整数数字，无需单位。 默认情况，项目不放大。 默认值都是0 取值越大，占据剩余的空间越多。 取值都一样，则占据空间始终一样大
    • flex-shrink 专门定义项目的缩小比例 如果容器空间不足时，项目可以缩小。 缩小的比例取决于flex-shrink的值。 其默认值为1，表示空间不足时，则等比缩小。 可改为0，表示不缩小。
    • align-self 专门单独定义某一个项目在交叉轴上的对齐方式 其取值和align-items完全一样。只是多了一个auto值，表示继承父元素的align-items效果。

可能的追问

  1. align-self与align-items属性对比

先写到这，下一题写水平居中和垂直居中的总结,有什么新的想法，欢迎评论区集结。

avatar
文章
阅读
粉丝