2018年9月30日css第六天課堂筆記

1、愛創(chuàng)課堂前端培訓(xùn)css第 6 天課堂筆記（本課程共 6 天）班級：前端18 期講師：日期：2018 年 9 月 30 日愛創(chuàng)課堂官網(wǎng) ：目錄復(fù)習(xí)3一、 定位31.1 相對定位31.2 絕對定位31.2.1不針對祖先元素定位參考31.2.2針對祖先元素定位參考41.2.3絕對定位參考頂點51.2.4壓蓋效果51.2.5絕對定位元素的水平居中61.2.6應(yīng)用61.3 固定定位71 固定定位的元素不保留原位置，脫離標(biāo)準(zhǔn)文檔流72 固定定位的元素相對于瀏覽器窗口的四個頂點進(jìn)行偏移。71.4 壓蓋順序81.4.1 默認(rèn)壓蓋順序81.4.2 自定義壓蓋順序81.5 呼吸輪播圖91.6 滾動輪播圖10復(fù)習(xí)b

2、ackground:背景background-color: rgba(255,255,0,0.6); (背景渲染區(qū)域是 padding + width)background-image: url() (背景圖渲染在背景色之上)background-repeat: no-repeat(背景圖只出現(xiàn)一次)background-ition:背景圖相對于大背景區(qū)域偏移（背景圖默認(rèn)出現(xiàn)在大背景左上角）水平方向：30px(向右偏移)left,right.center垂直方向：30px(向下偏移)tottom,center通過background-ition 的到任意?。ㄍㄟ^xy 添加負(fù)號）精靈圖使用：限制

3、盒子的大小background-attaent: 大背景是否卷動（fixed）一、定位相對定位，絕對定位，固定定位脫標(biāo)：浮動，絕對定位，固定定位1.1 相對定位相對定位元素原位置保留，不脫離標(biāo)準(zhǔn)文檔流，新位置相對位置進(jìn)行偏移。1.2 絕對定位絕對定位元素原位置不保留，脫離標(biāo)準(zhǔn)文檔流。1.2.1 不針對祖先元素定位參考有 top:參考的是頁面的有 Bottom: 參考的是首屏。練習(xí)：1.2.2 針對祖先元素定位參考祖先有定位的元素適用。絕對定位的元素如果祖先有定位，參考的是距離最近（html 結(jié)構(gòu)）且祖先有定位的元素。1.2.3 絕對定位參考頂點絕對定位的元素參考頂點：無視參考祖先的 paddi

4、ng 是邊框以內(nèi)的四個頂點。1.2.4 壓蓋效果同級元素，想實現(xiàn)壓蓋效果，使用定位實現(xiàn)而不是浮動。1.box .no2 1 /相對定位 /絕對定位（參考：box1）我是絕對定位 /絕對定位（參考：box2）1.2.5 絕對定位元素的水平居中絕對定位的元素 mg： o auto 不能實現(xiàn)水平居中.box width: 300px;height: 300px;border: 10px solid #000;padding: 50px;background: orange;ition: relative;8.box p width: 200px;height: 100px;background-co

5、lor: lightblue;ition: absolute;top: 0px;/*left 表示相對參考元素向右偏移left:百分?jǐn)?shù)表示相對于參考祖先元素寬度(padding+width= 400px)的比值*/*No2 壓蓋住 no1*/width: 200px;height: 100px;background-color: orange;/*祖先有定位參考的是最近的祖先元素*/ition: absolute;left: 50px;top: 100px;10 拉回絕對定位元素自身占有寬度一半。1.2.6 應(yīng)用絕對定位的參考盒子一般是相對定位的祖先元素?！白咏^父相”因為：相對定位的元素結(jié)構(gòu)比

6、較穩(wěn)固（不脫離標(biāo)準(zhǔn)文檔流），作為絕對定位的盒子。.nav ul li /*Li 同級元素并排顯示想大小 浮動*/float: left;width: 120px;height: 50px;ition: relative;7.nav ul li a display: block;width: 120px;height: 50px;font-size: 20px;line-height: 50px;text-align: center;/*拉回自身占有寬度一半*/margin-left: -100px;16left: 50%;17 1.3 固定定位ition: fixed;1 固定定位的元素不保留

7、原位置，脫離標(biāo)準(zhǔn)文檔流2 固定定位的元素相對于瀏覽器窗口的四個頂點進(jìn)行偏移。.teshu width: 200px;height: 200px;background-color: orange;ition: fixed;6/*向右移動 100px*/7/*left: 100px;*/8right: 100px;9/*向下移動 100px*/10/*top: 100px;*/11bottom: 100px;12 background-color: green;color: #;17 .nav ul li a:hover /*a的所有樣式都會渲染在 hover 特殊樣式單獨設(shè)置*/border-t

8、op: 5px solid orange;/*只有鼠標(biāo)懸停邊框出現(xiàn)在上面*/*元素只要添加絕對定位不在區(qū)分塊和行內(nèi)如果不設(shè)置寬度那么就是內(nèi)容撐開*/ition: absolute;left: 0px;top: -5px;26 壓蓋順序默認(rèn)壓蓋順序有定位的元素壓蓋住沒有定位的元素。都有定位的元素，html 結(jié)構(gòu)后面的壓蓋住前面的。1.4.2 自定義壓蓋順序z-index:只能有定位的元素使用。1 /標(biāo)準(zhǔn)流 32 /相對 43 /絕對 5z-index:屬性值是數(shù)字，數(shù)字越大壓蓋順序越靠上。整數(shù)z-index 數(shù)值相同，html 結(jié)構(gòu)后面的壓蓋住前面的。父子嵌套盒模型中，父盒子設(shè)置 z-index

9、 小，兒子 z-index 再大也沒用。（大盒子帶著整體一起移動壓蓋）1.5 呼吸輪播圖京東：所有需要摞在一起，想出現(xiàn)哪一個需要利用 z-index 調(diào)整壓蓋順序結(jié)構(gòu)：3/z-index:2big /z-index:1000/z-index:5/z-index:101891011121314151617181920212223242526樣式：2728.carousel 29width: 880px;height:550px;3031border:1px solid #000;32margin:50px auto;/*子絕父（祖先）相*/3334ition: relative;35.carou

10、sel .pics ul li 36/*所有摞在一起 壓蓋效果一定絕對定位*/37ition: absolute;3839width: 880px;40height: 550px;left: 0px;4142top: 0px;/*都有絕對定位 后面的壓蓋住前面*/434445.carousel .pics ul li.cur /*誰讓誰出現(xiàn)添加特殊類名*/4647z-index: 10;48.carousel .btns a 49/*a 壓蓋住一定是絕對定位*/50ition: absolute;51width: 30px;5253height: 35px;54background: url(

11、images/icon_v9.png)no-repeat;z-index: 10;/*絕對定位垂直居中*/ top: 50%;555657/*拉回自身高度的一半*/margop: -17.5px;58596061.carousel .btnsa.left left: 10px;626364.carousel .btnsa.right 65background-ition: 0px-44px;right: 10px;666768.carousel .circles width: 110px;height: 20px;697071ition: absolute;/*絕對定位元素的水平居中*/727

12、3left: 50%;/*拉回自身寬度的一半*/7475margin-left: -55px;76bottom: 10px;z-index: 10;771.6 滾動輪播圖滾動輪播圖：以淘寶為例。布局：有一個大盒子的概念，大盒子拉著全部的移動?；疖囋O(shè)置絕對定位。.carousel .pics /*將所有并排顯示的盛放，移動的大盒子，帶著所有的一起移動 移動使用絕對*/ition: absolute;left: 0px;top: 0px;/*移動大盒子寬度一定要非常大*/width: 9999px;height: 550px;910 .carousel .pics ul li 78overflow: hidden;79 .carousel .circles ol width: 20000px;82 .carousel .circles ol li /*并排顯示有寬高 一定浮動*/float: left;width: 20px;height: 20px;margin-right: 10