毛片免费视频,一区二区三区高清在线观看,日日爽夜夜

BFC

block formatting context
塊級(jí)元素在渲染的時(shí)候是怎么樣的規(guī)則進(jìn)行布局的

BFC的產(chǎn)生

根元素（htnl元素）
float不為none
position為absolute或者fixed
display為inline-block,flex或者inline-flex;
overflow不為visible

特性

BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。
計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算。
外邊距合并
浮動(dòng)元素對(duì)塊級(jí)元素的影響

BFC

阻止外邊距合并
margin

邊距合并問題

相鄰元素合并

-父子合并
子元素的margin會(huì)合并到祖先元素中

自己合并
p標(biāo)簽的自己的內(nèi)容產(chǎn)生了合并
空的margin上下合并產(chǎn)生了合并

如何解決外邊距合并

對(duì)于父子來說
1.加一個(gè)border 或者 padding 2.overflow:hidden
BFC
對(duì)于兄弟元素來說可以直接加一個(gè)margin-top：50px；

瀏覽器兼容

CSS hack寫法

BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明。

BFC是塊級(jí)元素格式化塊格式化上下文（Block Formatting Context，BFC）是Web頁面的可視化CSS渲染的一部分，是塊盒子的布局過程發(fā)生的區(qū)域，也是浮動(dòng)元素與其他元素交互的區(qū)域。

根元素
float不為0
position為absolute或者fixed
display為inline-block或者inline-flex
overflow不為visable

BFC可以處理邊距合并還有contain float的問題

實(shí)現(xiàn)下方鏈接中的效果，附上預(yù)覽鏈接。

(demo)

在什么場景下會(huì)出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例

相鄰元素合并時(shí)的邊距取兩個(gè)元素連接處的外邊距較大一方為真實(shí)的邊距。
父子元素合并不僅僅是父子元素，可能會(huì)和更上階的父元素合并，邊距取父子元素中的最大值。
元素里沒有內(nèi)容時(shí)上下margin會(huì)產(chǎn)生合并。
合并的兩部分，外邊距中取最大值的部分
在父子元素中給父元素設(shè)置Padding或者bording
對(duì)兄弟元素添加一個(gè)BFC
demo

什么是 CSS hack？在哪個(gè)網(wǎng)站查看標(biāo)簽(屬性)的瀏覽器兼容情況。

CSS hack是一種編碼技術(shù)，用于隱藏或顯示CSS標(biāo)記，具體取決于瀏覽器，版本號(hào)或功能。瀏覽器對(duì)CSS行為有不同的解釋，對(duì)W3C標(biāo)準(zhǔn)有不同程度的支持。
地址

ie6、7的 hack 寫法是？

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

如下屬性，兼容哪些瀏覽器？

inline-block >=ie8
min-width/min-height >=ie8;
:before,:after: >=ie8
div:hover >=ie7
inline-block >=ie8
background-size >=ie9
圓角 >=ie9
陰影 >= ie9
動(dòng)畫/漸變 >=ie10

漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)分別是什么意思？

漸進(jìn)增強(qiáng)(progressive enhancement): 針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁面，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)
優(yōu)雅降級(jí) (graceful degradation): 一開始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。

以下工具/名詞是做什么的?

條件注釋
條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼。
IE Hack
ie hacks 和 css hacks 幾乎一致
js 能力檢測
能力檢測，它的目標(biāo)不是識(shí)別特定的瀏覽器，而是識(shí)別瀏覽器的能力！
html5shiv.js
利用createElement() 實(shí)現(xiàn)自定義標(biāo)簽
respond.js
媒體查詢
css reset
就是一個(gè)css，把默認(rèn)樣式都去掉了
normalize.css
reset太暴力了，改變其它的樣式，使得
Modernizr
以前處理兼容針對(duì)的是瀏覽器，把支持的屬性放到class上面在css可以這樣寫了
postCSS
PostCSS是一個(gè)軟件開發(fā)工具，它使用基于JavaScript的插件來自動(dòng)執(zhí)行常規(guī)CSS操作。

##盡可能多的列舉瀏覽器兼容的處理范例

.clearfix:after{  content: '';  display: block;  clear: both;}.clearfix{  *zoom: 1; /* 僅對(duì)ie67有效 */}

.target{  display: inline-block;  *display: inline;  *zoom: 1;}

<!--[if lt IE 9]>    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>  <![endif]--><!DOCTYPE html><!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]--><!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]--><!--[if IE 7 ]>    <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]--><!--[if IE 8 ]>    <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]--><!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->

來源：http://www.icode9.com/content-4-160851.html

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。

免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

BFC

BFC的產(chǎn)生

特性

BFC

邊距合并問題

如何解決外邊距合并

瀏覽器兼容

CSS hack寫法

BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明。

實(shí)現(xiàn)下方鏈接中的效果，附上預(yù)覽鏈接。

在什么場景下會(huì)出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例

什么是 CSS hack？在哪個(gè)網(wǎng)站查看標(biāo)簽(屬性)的瀏覽器兼容情況。

ie6、7的 hack 寫法是？

如下屬性，兼容哪些瀏覽器？

漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)分別是什么意思？