瞭解元素的大小及元素陰影、css背景-學習筆記
阿新 • • 發佈:2018-12-12
一、 記單詞、評講作業、複習。
二、 了調整元素大小(resize)
- resize應該配合overflow這個css屬性進行使用,
然後overflow值一般為下者之一即可:
hidden/auto/scroll - resize應該使用到塊級元素與行內塊元素上。【通過display屬性修改的也算】
- resize主要有三個值
① 允許垂直改變大小:vertical
② 允許水平改變大小:horizontal
③ 允許垂直水平同時改變大小:both
resize屬性在大部分ie系列裡面的瀏覽器中都是無效的。
Resize一般配合overflow使用。只對行內元素和塊級元素有效果。
三、元素的陰影“box-shadow”
描述
該屬效能夠讓元素獲得一個“陰影”效果,根據顏色的不同,有時候也可以叫做“發光”效果。“box-shadow”屬性沒有分支屬性,它的值是以“組合值”的形式設定的,它最多允許6個值的組合,按值的順序分別代表:
基本值
h-skewing(必要)
陰影在水平方向的偏移,負數是向左偏移,正數是向右偏移,單位為“px”。
v-skewing(必要)
陰影在垂直方向的偏移,負數是向上偏移,正數是向下偏移,單位為“px”。
blur(可選)
陰影的“模糊距離”或“模糊程度”,單位為“px”。
color(可選)
陰影的顏色,支援Web技術中的常用顏色模式:“顏色英文單詞”、“HEX”、“RGBa”、“HSLa”。基本例項
和文字陰影的不同(多了兩個值)
inset(可選)
將預設向外的陰影方向改為向內,然後inset一般是放在陰影顏色的後面。
如下:
spread(可選)
陰影的擴充套件範圍,值為數值,其單位可以使用常用單位。rem,em,px.
它應該放在陰影顏色的前面
四、擴充套件
① 給某個元素設定margin-top時,如果他上方元素含有“margin-bottom”,則這兩個值會重疊,並且取較大值作為間距值。
【如果是左右的話,則是正常的相加】
注意
在某些瀏覽器裡面可能
在塊級元素的首個子標籤元素中設定margin-top時,會作用到這個父元素上。在塊級元素的最後一個子標籤元素中設定margin-bottom時,會作用到這個父元素上。若父元素已經設定了“padding-bottom”,則與父元素的該值相加取和作為與頁面底部的
五、CSS背景
1、background-color:背景顏色
2、background-img:背景圖片。
3、background-repeat:背景平鋪
4、background-position:背景圖定位。
5、background-size:背景圖大小(它的值的型別有px rem….特點值有:)
6、background-clip背景顏色裁剪範圍
7、background-origin背景圖片裁剪範圍
8、background-attachment背景圖的固定