BFC与浏览器兼容

BFC


一、BFC是什么

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。

二、如何形成BFC

  • float属性不设为none
  • position属性设为absolute或fixed
  • display设为inline-block、table-cell、table-caption、flex或inline-flex
  • overflow不设为visible

三、BFC有什么作用

  • 避免外边距合并
  • 防止正常文档流中元素占据浮动元素位置
  • 消除浮动
  • 实现自适应布局

外边距合并


一、外边距合会出现在什么场景下

只有在普通文档流中会出现外边距合并,脱离了文档流的不会出现外边距合并。

二、外边距如何合并

  • 值均为正或负时,合并绝对值最大的值
  • 一正一负时,两值带符号相加

三、如何不让相邻元素外边距合并

  • 不同BFC的元素不会发生外边距合并
  • 如果是父子关系,父元素设置paddingborder可以阻止外边距合并
    消除合并前

    消除合并后

CSS hack


一、什么是CSS hack

由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能在不同的浏览器中也能得到我们想要的页面效果。
参考网站:饥人谷CSS hack

二、ie6、7的hack怎么写

常见的ie hack写法如下

.box{
  color: red;
  _color: blue; /* ie6 */
  *color: pink; /* ie67 */
  color: yellow\9; /* ie/edge 6-8 */
}

<!--[if ie]>
<link rel="stylesheet" href="ie7.css" type="text/css">
<![endif]-->

三、浏览器兼容属性

查询浏览器兼容

  1. inline-block:>=ie8
  2. min-width/min-height:>=ie8
  3. :before/:after: >=ie8
  4. div:hover: >=ie7
  5. background-size: >=ie9
  6. 圆角: >=ie9


  7. 阴影: >=ie9



  8. 动画/渐变: >=ie10



四、渐进增强与优雅降级

  1. 渐进增强:一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
  2. 优雅降级:一开始就构建站点的完整功能,然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用,然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

五、名词解释

  • 条件注释
    IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法,只能用于IE5以上。如果你安装了多个IE,条件注释将会以最高版本的IE为标准。
    条件注释的基本结构和HTML的注释()是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。
<!--[if ie]>
<link rel="stylesheet" href="ie7.css" type="text/css">
<![endif]-->
  • IE Hack
    CSS Hack大致有3种表现形式, CSS属性前缀法选择器前缀法以及IE条件注释法(即HTML头部引用if IE)Hack,实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
  • js能力检测
    浏览器的能力检测目标不是检测特定的浏览器,而是检测浏览器的能力。这样,只需要检测浏览器是否支持特定的能力,就可以给出特定的解决方案。这一部分检测是解决浏览器兼容问题的主要检测。
  • html5shiv.js
    用于解决IE9以下版本浏览器对HTML5新增标签不识别,并导致CSS不起作用的问题。由于IE6-8还有很大一部分用户,为了让网站浏览者都能正常的访问HTML5网站,解决方案就有使用Javascript来使不支持HTML5的浏览器支持HTML标签。目前大多网站采用的这种方式(Bootcss官方例子也是如此)。
    原理:利用脚本document.createElement(“”)创建对应的脚本,CSS选择器便可正确应用到该标签。
    使用:考虑到IE9是支持html5的,所以直接在HTML页面的head标签中添加脚本引用即可
  • respond.js
    让不支持CSS3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
  • css reset
    将浏览器的默认样式全部去掉,就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。
  • normalize.css
    normalize.css 是一个可定制的CSS文件,使浏览器呈现的所有元素,更一致和符合现代标准。它正是针对只需要统一的元素样式。该项目依赖于研究浏览器默认元素风格之间的差异,精确定位需要重置的样式。这是一个现代的,HTML5-ready 的CSS重置样式集。
  • Modernizr
    Modernizr 是一个 JavaScript 库,用于检测用户浏览器的 HTML5 与 CSS3 特性。它可以方便地为各种情况编写 JavaScript 和 CSS,无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。
    原理:Modernizr 会在页面加载后立即检测特性;然后创建一个包含检测结果的 JavaScript 对象,同时在 html 元素加入方便你调整 CSS 的 class 名。
  • postCSS
    postCSS 是使用 JS 插件来转换 CSS 的工具,支持变量,混入,未来 CSS 语法,内联图像等等。它包括 CSS 解析器,CSS 节点树 API,一个源映射生成器和一个节点树 stringifier。
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,402评论 6 499
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,377评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,483评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,165评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,176评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,146评论 1 297
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,032评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,896评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,311评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,536评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,696评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,413评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,008评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,659评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,815评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,698评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,592评论 2 353

推荐阅读更多精彩内容