前端CSS面试常见题

边界塌陷

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

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

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

4. margin计算方案

• margin同为正负：取绝对值大的值
• 一正一负：求和

5. 父子元素边界塌陷解决

• 父元素可以通过调整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. 写法

<!-- [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更简单易用