1. 程式人生 > >瞭解元素的大小及元素陰影、css背景-學習筆記

瞭解元素的大小及元素陰影、css背景-學習筆記

一、 記單詞、評講作業、複習。
二、 了調整元素大小(resize)

  1. resize應該配合overflow這個css屬性進行使用,
    然後overflow值一般為下者之一即可:
    hidden/auto/scroll
  2. resize應該使用到塊級元素與行內塊元素上。【通過display屬性修改的也算】
  3. 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背景圖的固定