前端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更简单易用
相关推荐
墨菲安全22 分钟前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing23 分钟前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆23 分钟前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding1 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机2 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人2 小时前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
翻滚吧键盘3 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
秃了也弱了。3 小时前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)3 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~4 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel