不同瀏覽器和浮動及定位
background:lineer-gradient(to right/90deg,red,yellow) 漸變/橫向
border-radius:50% *** 圓角
box-shadow:x y 模糊值 外延線 顏色;
BEM
塊-元素-修飾符
margin,占用
不加margin 實際面積
W3C標準盒模型算法
box-sizing:content-box/boder-box 控制計算方式/標準/IE計算方式
過渡 ***
transi/tion:all linear 2s; all值可變,目前表示全部
瀏覽器廠商前綴
-webkit- chrome
-moz- firefox
-ms- 微軟
-o- 歐朋
漸收漸合 ,放在元素選擇器裏
旋轉:transform:rotnte(45deg)
放大縮小 =1不變 > 1 放大 &it 1縮小 不占像素
transform:scale(1/2/.5/0.5);
anima/tion:F45_run linear 2s; /*寫在要控制的元素選擇器裏*/
no1 @keyframes F45_run{ /*單獨作為一個選擇器*/
from {
background-color:red;
}
to {
background-color:yellow;
}
}
no1 @keyframes F45_run{ /*單獨作為一個選擇器*/
0% {
background-color:...
}
20% {
background-color:...
}
50% {
background-color:...
}
80% {
background-color:...
}
}
html的包含塊:初始化包含塊
包含塊的尺寸:盒模型,定位體系的影響。
三種定位體系:常規流,浮動,絕對定位
float /浮動
1、行內元素設置浮動後可設置高寬。
2、文本類型浮動後會折疊刀最小寬度。
3、元素的浮動始終停留在wrap的content裏,不會穿越到padding。
4、子級浮動導致父級高度塌陷。 所以最好設置高度,或者用BFC塊級格式化 overflow:hidden
5、浮動會影響別的元素
容器/包含塊
頭部和尾部通欄 設置寬度100%
顯示屏寬度1366px 1425px 1920px
為了自適應設置寬度為100%
not(s) 不選擇括號裏某項
清浮動/clear
值:left/both/right
用在被浮動影響的元素上
提行清浮動
placeholder input屬性值,輸出文本框默認內容
定位/position
值:static/relative/absolute/fixed
static:為position的默認值,非靜態定位
relative:相對於本身定位,瀏覽器(00) 點
absolute:以離它最近的,包含它的非靜態定位的元素定位,一般和relative配合使用,脫離文檔流。
fixed:固定定位,用於返回頂部或廣告,以視口為準。脫離文檔流
不同瀏覽器和浮動及定位