HTML+CSS面试题-BFC 是什么?IE 的双边距 BUG如何解决？

最新推荐文章于 2022-10-07 19:03:02 发布
最新推荐文章于 2022-10-07 19:03:02 发布
阅读量198 收藏
点赞数
分类专栏： 面试题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44486539/article/details/103155387
版权

BFC 是什么?

BFC（块级格式化上下文），一个创建了新的 BFC 的盒子是独立布局的，这个区域与外部毫不相干，盒子内元素的布局不会影响盒子外面的元素。在同一个 BFC 中的两个相邻的盒子在垂直方向会发生 margin 重叠的问题

触发条件：

  • 根元素（例如：html）
  • 元素浮动了（float 不为 none）
  • position 为 absolute 或 fixed
  • display 为 inline-block、table-sell、flex…
  • overflow 不为 visible

IE 的双边距 BUG

块级元素 float 后设置横向 margin，ie6 显示的 margin 比设置的较大。

解决办法：在浮动元素的样式中添加 _display：inline

蓬莱老仙
关注
专栏目录
关于HTML+css的面试题及答案（2）
SSSS__AS的博客
07-08 471
本片文章，是本人所了解到的其他的关于HTML+css的面试题，如我之后还有了解到的，还会进行后续更新。
前端 html,css 经典面试题 16道 （20220322）
weixin_59519449的博客
03-22 3981
1.html5有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？HTML5是构建web内容的一种语言描述方式，在08年正式发布，12年已形成了稳定的版本。 H5新特性有： 语义标签、增强型表单、Canvas绘图、地理定位、SVG绘图、拖放API、WebWorker、WebStorage、WebSocket 移除了： 1、显现层元素：basefont 、big、center、font、s、strike、tt、u 2、性能较差元素：fr...
IE6双边距BUG演示及解决方法
ZH2357710792的博客
04-07 199
IE6双边距bug演示 　　当为一个块级元素同时设置float和margin属性时，在IE6下元素的margin显示效果为原来的2倍。 　　简单的例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D...
兼容性—IE6下当元素浮动设置margin时会有双边距
weixin_34223655的博客
05-14 92
代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ margin: 0...
浏览器兼容性经典问题（一） IE6 下双边距问题
speed_feng的专栏
11-15 7999
问题描述：         一个div盒子如果设置了margin，并且该div设置了float浮动，那么在IE6下便会产生双边距问题：如果设置 float:left 那么左边距会是原来margin的两倍；如果是float:right，那么右边距会是原来margin的两倍。         代码如下：
IE6下的双边距BUG
似水流年
03-31 405
body{margin:0;} .wrap{float:left;border:2px solid #000;} .box{width:100px;height:100px;background:red;margin:0 100px;float:left; } /* IE6下的双边距BUG 在IE6下，块元素有浮动和横向margin的时候，横向的margin值会被放大成两倍; 解决办法
IE6的双边距Bug以及解决办法
happyqyt的专栏
03-18 383
bug描述：就是你明明设置margin-left为10px，但是在IE6下显示的左边距却是20px。 bug出现的条件：当浮动元素的浮动方向和外边距的设置方向一致且浮动元素靠近浮动边界时才会出现。比如元素向左浮动时设置左边距，并且为一行中的第一个浮动元素时会出现这个bug，同样，向右浮动时设置右边距，且为一行中的最后一个浮动元素时也会出现这个bug。 bug的解决办法：给浮动元素块加上disp...
前端面试题---html/css
最新发布
weixin_44501366的博客
10-07 1223
!DOCTYPE 标签：head：body:base:可以用来统一设置当前页面上的超链接的跳转方式< base >标签为页面上的所有链接规定默认地址或默认目标使用了 < base > 标签，则必须具备 href 属性或者 target 属性或者两个属性都具备通常情况下，浏览器会从当前文档的URL中提取相应的元素来填写相对URL中的空白。 使用< base >标签可以改变这一点。浏览器随后将不再使用当前文档的URL，而使用指定的基本URL来解析所有的相对URL。这其中包括 < a >、< img >、< li
前端面试题----HTML与CSS(随机排序)
m0_64337756的博客
04-27 416
1 Doctype 作用？ 严格模式与混杂模式如何区分？它们有何意义？ （1）、 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。 （2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。 （3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。 （4）、DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。 2 五大浏览器以及内核？ Chrome 内核 Blink Safari 内核
html+css+js基础问答
qq_43751465的博客
08-26 5216
css3 1.标签语义化 顾名思义，合理的标签干合适的事情 块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot 行级（display：inline）：a、span、small、strong、em、i、code、 行内块（display：inline-block）：img、input 区别： 1.
BFC / 外边距折叠
飞驰的地铁
06-17 288
BFC 块格式化上下文 (Block Formatting Context) 块格式化上下文（Block Formatting Context)，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用 当涉及到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。 一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元...
常见浏览器兼容问题
YoungRoc--FLY
08-06 1001
浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同 问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。 碰到频率:100% 解决方案：CSS里    *{margin:0;padding:0;} 备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。
前端开发必知：浏览器兼容(一)——IE双边距
mmcrsx_blog的博客
07-03 922
一、  不同浏览器的标签默认的padding，margin不同解决：css里 *{margin:0;padding:0;}备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的css文件开头都会用通配符*来设置各个标签的内外边距是0二、IE6 双边距 bug   块属性标签 float 后，又有横行的 margin 情况下，在 ie6 显示margin 比设置的大&lt;!DOCTYP...
前端基础巩固知识点三
小钿钿不忘初心的博客
04-23 238
40、IE的双边距BUG：块级元素float后设置横向margin，ie6显示的margin比设置的较大。 解决：加入_display：inline‘ 41、HTML与XHTML——二者有什么区别？ 所有的标记都必须要有一个相应的结束标记 所有标签的元素和属性的名字都必须使用小写 所有的 XML 标记都必须合理嵌套 所有的属性必须用引号 “” 括起来 把所有 < 和 & 特殊符号用...
常见兼容性问题
mshkkhhgy的博客
03-05 340
* png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理.* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。* IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。* 浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元...
前端面试题总结之HTML与CSS (三)
前端小白菜
07-24 1463
请用Css 写一个简单的幻灯片效果页面 /**css**/ .ani{ width:480px; height:320px; margin:50px auto; overflow: hidden; box-shadow:0 0 5px rgba(0,0,0,1); background-size: cover; background-position: center; -webkit-ani...
前端题
LLLLLLLLLLe的博客
03-17 266
首屏加载和白屏加载时间的计算 白屏时间： 概念：是指浏览器开始显示内容的时间。一般认为浏览器开始渲染< body>标签或者解析完head标签的时刻就是页面白屏结束的时间点。 原因： 弱网络下，网络延迟，js加载延迟会阻塞页面 客户端存在bug，缓存模块错乱，不缓存js等 优化方法： 加快js执行速度，可以使用js先渲染一个屏幕范围内的东西 减少文件加载体积，如html压缩，js压缩 在首屏直接同步渲染html，后续的滚屏等再采用异步请求数据和渲染html 统计白屏数量 监听某.
一些浏览器的兼容性问题
iconhot的博客
08-14 147
1、IE 的双边距 BUG：块级元素 float 后设置横向 margin，ie6 显示的 margin 比设置的较大。解决：加入_display：inline 2、3 像素问题 使用 float 引起的 使用 dislpay:inline -3px 3、超链接 hover 点击后失效 使用正确的书写顺序 link visited hover active 4、Ie z-index 问...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值