h5和css的一些問題整理

css引入方法：link與import方法差別

差别1：本質的差别：link屬于XHTML标簽，而@import完全是CSS提供的一種方式。
差别2：加載順序的差别：當一個頁面被加載的時候（就是被浏覽者浏覽的時候），link引用的CSS會同時被加載，而@import引用的CSS會等到頁面全部被下載下傳完再被加載。是以有時候浏覽@import加載CSS的頁面時開始會沒有樣式（就是閃爍），網速慢的時候還挺明顯。
差别3：相容性的差别：@import是CSS2.1提出的，是以老的浏覽器不支援，@import隻有在IE5以上的才能識别，而link标簽無此問題。
差别4：使用dom(document object model文檔對象模型 )控制樣式時的差别：當使用javascript控制dom去改變樣式的時候，隻能使用link标簽，因為@import不是dom可以控制的
           

img屬性alt和title的差別

alt=""圖檔加載失敗時顯示的文本
title=""滑鼠移入時顯示的文本
           

字型大小機關em和rem的差別

em是父元素字型大小的倍數
rem是根元素html字型大小的倍數
           

可以取負值的屬性

top
bottom
left
right
margin
text-indent
background-position
z-index
           

body設定min-width屬性

body{
	min-width: 1240px;防止左右拖拽滾動條右側無闆塊顔色問題
}
           

BFC塊級格式化上下文,是一個獨特的渲染區域

BFC布局規則
	一、内部的Box會在垂直方向，一個接一個地放置。
	二、Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊（按照最大margin值設定）
	三、每個元素的margin box的左邊， 與包含塊border box的左邊相接觸
	四、BFC的區域不會與float box重疊。
	五、BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。
	六、計算BFC的高度時，浮動元素也參與計算
觸發BFC的條件
	html本身就是BFC
	float不為none
	position為absolute和fixed
	overflow不為visible
	display:inline-block/flex/inline-flex/table-cell/table-caption
           

css3新增的屬性

邊框倒角border-radius、
禁止使用者更改元素尺寸resize:none;、
多背景圖background:url(),url(),url();
及其他以後在加上..
           

***浏覽器字首

-webkit-:谷歌google chrome和Safari浏覽器
-moz-:火狐mozilla firefox
-o-:歐朋Opera
-ms-：IE浏覽器
例如：
	-webkit-transition:
	background:-webkit-linear-gradient();