前端CSS面试常见题

边界塌陷

  1. 盒模型有两种:W3C盒模型和IE盒模型,区别在于宽度是否包含边框

  2. 定义:同时给兄弟/父子盒模型设置上下边距,理论上边距值是两者之和,实际上不是

  3. 注意:浮动和定位不会产生边界塌陷;只有块级元素垂直方向才会产生margin合并

  4. margin计算方案

  • margin同为正负:取绝对值大的值
  • 一正一负:求和
  1. 父子元素边界塌陷解决
  • 父元素可以通过调整padding处理;设置overflow hidden,触发BFC

  • 子元素可以设置display inkine-block ;overflow hidden ;也可以设置浮动和定位

css中的bfc

文档流

  1. 分为定位流、浮动流、普通流
    普通流就是bfc中的fc
  2. fc是格式化的上下文,是页面中一块渲染区域,决定了其子元素如何布局
    常见有 bfc ifc gfc ffc

bfc

是格式化上下文,web页面中盒模型布局的css渲染模式,是一个独立的渲染区域或隔离的独立容器

如何产生bfc

  1. 浮动元素 float:left/right
  2. 定位: absolute/fixed
  3. display: inline-block
  4. overflow: hidden/scroll/auto (除了visible之外的其他值)

bfc特性

  1. 内部盒子垂直方向顺次放置
  2. 垂直方向距离由margin决定
  3. bfc区域不会和float区域重叠
  4. 计算bfc高度,浮动元素也参与计算
  5. 容器中子元素不影响外面的元素·

csshack

条件hack

  1. 调整页面的兼容性,用判断的形式调用不同的样式表
  2. 产生兼容性原因:浏览器内核不同,对css解释方式不同
  3. 写法
html 复制代码
<!-- [if IE] -->
代码块
<![endif]  -->

src和href的区别

  1. 请求资源类型不同

    href表示超文本引用,建立当前元素和文档之间关联

    src将指向的资源下载并应用到文档中

  2. 作用结果不同

    href用于文档和资源之间建立联系

    src用于替换当前内容

  3. 浏览器解析方式不同

    href会并行下载,并不停止对当前文档处理

    src会暂停其他资源的下载和处理,直到该资源加载完毕

浏览器内核

浏览器内核也称渲染引擎,解释网页语法并渲染到网页上

内核主要有Trident(IE)、Webkit(Safari Chrome)、Gecko(firefox)、Presto(opera)

兼容性问题

主要存在与IE浏览器与其他浏览器之间

  1. csshack
  2. 边界塌陷问题
  3. 示例
  • ie9以下不支持媒体查询
  • ie9以下不支持flex布局
  • ie8及更早版本不支持:nth-child等选择器

felx和grid优劣对比

  1. flex非常适合处理单轴线布局,grid更适合二维布局
  2. flex对于需要同时处理行和列的复杂布局不够强大
  3. grid布局项目尺寸不灵活,flex更灵活
  4. flex更简单易用
相关推荐
万少5 分钟前
01-万少带你精读鸿蒙 codelabs 一多界面适配和三层架构
前端·harmonyos
凌览12 分钟前
36k Star 的 OCR 前端 SDK 轻松上手图像识别
前端·javascript·github
web组态软件21 分钟前
web组态可视化编辑器
大数据·前端·物联网·低代码·数学建模·编辑器
还是鼠鼠23 分钟前
http 服务器概念详细介绍
前端·javascript·vscode·http·node.js·web
2501_9068007624 分钟前
web组态可视化编辑器
前端·物联网·低代码·数学建模·编辑器·web
Bessie23435 分钟前
无障碍阅读(Web Accessibility)NVDA打开朗读查看器后,enter键不生效的原因
前端·vue.js
钢板兽40 分钟前
力扣hot100——子串、普通数组、矩阵
java·后端·算法·leetcode·面试·矩阵
车轮滚滚__1 小时前
使用Nodejs基于DeepSeek加chromadb实现RAG检索增强生成 本地知识库
前端·javascript·ai·node.js·aigc
Gazer_S1 小时前
【路径查询组件优化记录:数据处理与显示逻辑重构】
前端·javascript·重构
好_快1 小时前
Lodash源码阅读-slice
前端·javascript·源码阅读