狐七的面试题库

css基础

3/22/2022 css

# 1. 请简述 css 盒子模型

查看答案

一个 css 盒子从外到内可以分成四个部分：

  1. margin（外边距）
  2. border （边框）
  3. padding（内边距）
  4. content（内容）

标准盒模型中的宽度（类似于box-sizing中的content-box），只是设置 content（内容）的宽和高，不包括padding和border。

怪异盒模型中的宽度（类似于box-sizing中的border-box），真正的宽高还包括padding和border：

  • 盒子真正的宽应该是：content宽度 + left padding + right padding + left border + right border
  • 盒子真正的高应该是：content高度 + top padding + bottom padding + top border + bottom border

# 1. BFC是什么？

查看答案

BFC 就是块级格式上下文，是页面盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。

# 2. BFC布局规则

查看答案
  1. 内部Box从上向下依次放置
  2. 垂直方向margin在同一个BFC容器中外边距重叠，取最大的值
  3. 子元素的margin-left与父元素的border-left相邻
  4. BFC不会与float box重叠，会依次排列
  5. BFC的子元素不会影响外界，反之一样
  6. BFC也会参与计算高度

# 3. 创建BFC的方式

查看答案
  • html根元素或者包含根元素的元素
  • float浮动：值不为none
  • 绝对定位：值不是static或者relative
  • overflow：不为visible
  • display：为表格布局或者弹性布局：inline-block，table-ceil，table-caption，flex...
  • column-span：all

# 4. BFC的作用

查看答案
  • 清除浮动
  • 可以解决margin塌陷问题（让父元素变成BFC，overflow:hidden）
  • 可以解决margin上下外边距合并问题（其中一个换成新的BFC或者中间添加一个BFC）
  • 实现多栏布局（比如左边固定，右边自适应，给右边变成BFC）

# 5. BFC、IFC、GFC 和 FFC都是什么？

查看答案

# BFC（Block formatting contexts）

块级格式上下文页面上的一个隔离的渲染区域。

# IFC（Inline formatting contexts）

内联格式上下文

  • IFC 的 line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的 padding/margin 影响)
  • IFC 中的 line box 一般左右都贴紧整个 IFC，但是会因为 float 元素而扰乱。
    • float 元素会位于 IFC 与 line box 之间，使得 line box 宽度缩短。
    • 同个 IFC 下的多个 line box 高度会不同。
  • IFC 中是不可能有块级元素的
    • 当插入块级元素时（如 p 中插入 div）会产生两个匿名块与 div 分隔开，即产生两个 IFC。每个 IFC 对外表现为块级元素，与 div 垂直排列。

# IFC的作用

  • 水平居中：当一个块要在环境中水平居中时，设置其为 inline-block 则会在外层产生 IFC，通过 text-align 则可以使其水平居中。
  • 垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其 vertical-align: middle，其他行内元素则可以在此父元素下垂直居中。

# GFC（GrideLayout formatting contexts）

网格布局格式化上下文

  • 当为一个元素设置 display 值为 grid 的时候，此元素将会获得一个独立的渲染区域。
  • 我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性
  • 在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。

# GFC的作用

首先同样是一个二维的表格，但 GridLayout 比 table：

  • 有更加丰富的属性来控制行列
  • 有更加丰富的属性来控制对齐
  • 更为精细的渲染语义

# FFC（Flex formatting contexts）

自适应（flex container）格式上下文。Flexbox 定义了伸缩容器内伸缩项目该如何布局。

  • display 值为 flex 或者 inline-flex 的元素将会生成自适应容器
  • 可惜这个牛逼的属性只有谷歌和火狐支持，不过在移动端也足够了，至少 safari 和 chrome 还是 OK 的。
  • Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。
  • 设置为 flex 的容器被渲染为一个块级元素，而设置为 inline-flex 的容器则渲染为一个行内元素。
  • 伸缩容器中的每一个子元素都是一个伸缩项目。
  • 伸缩项目可以是任意数量的。
  • 伸缩容器外和伸缩项目内的一切元素都不受影响。

# 6. 比较 opacity: 0、visibility: hidden、display: none

查看答案
  • display: none (不占空间，不能点击)（场景，显示出原来这里不存在的结构）
  • visibility: hidden（占据空间，不能点击）（场景：显示不会导致页面结构发生变动，不会撑开）
  • opacity: 0（占据空间，可以点击）（场景：可以跟transition搭配）

# 7. li 与 li 之间有看不见的空白间隔是什么原因引起的？如何解决？

查看答案

浏览器会把inline内联元素间的空白字符（空格、换行、Tab等）渲染成一个空格。为了美观，通常是一个放在一行，这导致换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。

解决办法：

  1. 为设置float:left。不足：有些容器是不能设置浮动，如左右切换的焦点图等。
  2. 将所有写在同一行。不足：代码不美观。
  3. 将内的字符尺寸直接设为0，即font-size:0。不足：中的其他字符尺寸也被设为0，需要额外重新设定其他字符尺寸，且在Safari浏览器依然会出现空白间隔。
  4. 消除的字符间隔letter-spacing:-8px。不足：这也设置了内部的字符间隔，因此需要将内部的字符间隔设为默认letter-spacing:normal。

# 8. 弹性盒子布局属性有那些请简述?

查看答案
  1. Flex-direction：弹性容器中子元素排列方式（主轴排列方式）
  2. Flex-wrap：设置弹性盒子的子元素超出父容器时是否换行
  3. Flex-flow：是 flex-direction 和 flex-wrap 简写形式
  4. Align-item：设置弹性盒子元素在侧轴上的对齐方式
  5. Align-content：设置行对齐
  6. Justify-content：设置弹性盒子元素在主轴上的对齐方式

# 9. Web Components（未来）有什么期待吗？

查看答案
  1. 原生规范，无需框架
  2. 原生使用，无需编译
  3. 真正的css scope

# 10. 定位的属性值有何区别?

查看答案

Position 有四个属性值：relative absolute fixed static

  • relative 相对定位，不脱离文档流，相对于自身定位
  • absolute 绝对定位，脱离文档流，相对于距离最近的有定位信息的祖先元素定位
  • fixed 固定定位，脱离文档流，相对于浏览器窗口定位
  • static 默认值，元素出现在正常的流中

# 11.css选择器有哪些?

查看答案
  • css2 选择器：
    • 元素选择器
    • id选择器
    • 群组选择器
    • 类选择器
    • *通配符选择器
    • 后代选择器
  • css2伪类选择器：
    • a:link
    • a:visited
    • a:hover
    • a:active
  • css3 选择器：
    • 空格
    • >
    • +相邻兄弟选择器
    • ~通用选择器（查找后面所有）
  • 结构伪类选择器：
    • 查找第几个 nth-child(n)
    • 查找同一类型第几个 nth-of-type
    • 查找唯一类型 only-of-type
  • 属性选择器：
    • 根据标签属性查找 [attr=value]
    • :root 查找根元素html标签
    • :empty 查赵空标签
  • 目标伪类选择器（表单）：
    • :enabled 查找可以使用的标签
    • :disabled 查找禁止使用的标签
    • :checked 查找被选中的标签
  • 伪元素选择器
    • ::selection 设置选中文本内容的高亮显示（只能用于背景色和文本颜色）
  • 否定伪类选择器：not()
  • 语言伪类选择器：lang（取值）

# 11.css选择器权重

查看答案
  • 元素选择器 1
  • 伪元素选择器 1
  • class选择器 10
  • 伪类选择器 10
  • 属性选择器 10
  • id选择器 100
  • 内联样式的权重 1000
  • 包含选择器权重 权重之和
  • 继承样式权重 0

# 选择器优先级

查看答案

!important > id选择器 > class选择器 > 标签选择器 > 继承的样式

样式表的来源不同时，优先级顺序为：内联样式> 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式

# 12. css那些属性可以继承？

查看答案

Css 继承特性主要是文本方面

  • 所有元素可继承：
    • visibility
    • cursor
  • 块级元素可继承：
    • text-indent
    • text-align
  • 列表元素可继承：
    • list-style
    • list-style-type
    • list-style-position
    • list-style-image
  • 内联元素可继承：
    • letter-spacing 字母间距
    • word-spacing 段落间距
    • line-height 行高
    • color 字体颜色
    • font 字体
    • font-family 字体种类
    • font-size 字体大小
    • font-style 字体样式
    • font-variant 小型大写字母文本
    • font-weight 字体粗细
    • text-decoration 文本修饰
    • text-transform 转换不同元素中的文本
    • direction 文本方向

# 13. 行内元素、块级元素、行内块元素有哪些？

查看答案
  • 行内元素：相邻的行内元素会排列在同一行，不会独占一行，根据内容撑开盒子，设置宽高无效。
    • a
    • br
    • i
    • em
    • img
    • input
    • select
    • span
    • sub
    • sup
    • u
    • textarea
  • 块级元素：会独占一行 可以设置宽高等属性
    • div
    • h1-h6
    • hr
    • p
    • ul
    • ol
    • table
    • address
    • blockquote
    • dir
    • from
    • menu
  • 行内块元素：相邻元素但是可以设置宽高等属性
    • button
    • del
    • iframe
    • ins

# 14. px，rem，em 的区别

查看答案

px
绝对长度单位，像素px是相对于显示器屏幕分辨率来说的

em
相对长度单位，相对于当前对象内文本的字体尺寸

  • em 的值并不是固定的
  • em 会继承父级元素的字体大小（参考物是父元素的font-size）

rem
相对长度单位，相对于html根元素的font-size

  • 1em = 1rem = 16px
  • 在body中加入font-size: 62.5%，这样直接就是原来的px数值除以10加上em就可以
  • 缺点：比如小说网站，屏幕越小的移动设备如果用了rem肯定文字就越小， 就会导致看文章的时候特别费眼

# 15. 请简述媒体查询

查看答案

媒体查询扩展了 media 属性, 就是根据不同的媒体类型设置不同的 css 样式，达到自适应的目的。

# animation和transition的区别

查看答案

animation：
创建动画序列，需要使用animation属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由@keyframes 规则实现，具体情况参见使用 keyframes 定义动画序列小节部分。

transition：
也可实现动画。 transition 强调过渡，是元素的一个或多个属性发生变化时产生的过渡 效果，同一个元素通过两个不同的途径获取样式，而第二个途径当某种 改变发生 （例如 hover）时才能获取样式，这样就会产生过渡动画。

更新时间: 2023-02-19 10:39

css3