陰影及定位

2022-08-11 04:24:14 字數 2725 閱讀 9142

標籤隱藏

1、顯示方式 display

display: none;

/*表示在頁面中隱藏,並且不佔位,但是重新顯示出來又會佔位*/

2、透明度 opacity

opacity: 0;

/* 0 代表完全透明 1 代表完全顯示 但是即使是透明了也會在頁面中佔位*/

/*顯示方式透明沒辦法找到中間值,所以不可以做漸變操作

透明度可以找到中間值,可以做出漸變的效果

*/

陰影

/*陰影box-shadow: x軸移動 y軸移動 虛化程度 陰影寬度 顏色*/

box-shadow: 10px 0 10px 1px red;

/*並且乙個標籤的box-shadow後面可以跟多個陰影,用逗號隔開*/

box-shadow: 10px 0 10px 1px red,0 10px 10px 1px green;

固定定位

/*

vw vh 指定的寬高是根據當前頁面視窗的寬高來進行判定的

80vw 這裡的80表示的是百分百

*//*

固定定位 fixed

一旦開啟定位屬性

1.left top right bottom 四個方位都能參與布局

2.子級標籤獲取不到父級標籤的寬度,也撐不起父級的高度

3.固定定位布局參考的物件是瀏覽器的視窗

4.布局依據:固定定位的盒子四邊的距瀏覽器視窗四邊的距離

5.如果布局出現衝突:上下取上, 左右取左

6.如果定位顯示重疊通過z-index可以選擇誰顯示在上面(z-index可看後續詳細介紹)

*/

絕對定位

/*

絕對定位 absolute

1.子級標籤獲取不到父級標籤的寬度,撐不起父級標籤的高度

2.絕對定位的標籤都是相對於乙個參考係進行定位,之間不會相互影響

4.四個方向都能參與定位

5.上下取上,左右取左

自己採用絕對定位,一般都是想參照父級標籤進行定位

所以父級標籤必須要定位才能作為子級標籤的參考係

父級標籤可以採用fixed absolute 但是這兩種都會影響盒模型

relative(相對定位)不會影響盒模型:也就是父相子絕(經常同時出現)

*/

相對定位

/*

相對定位 relative

1.相對定位不同於固定定位和絕對定位,相對定位可以獲取父級的寬度,也可以撐開父級的高度

2.相對定位的參考係是自身的原有位置

3.相對定位移動的是圖層,盒子還在原地沒動

4.相對定位一般配合絕對定位使用(一般不單獨使用)

*/

標籤隱藏

1、顯示方式 display

display: none;

/*表示在頁面中隱藏,並且不佔位,但是重新顯示出來又會佔位*/

2、透明度 opacity

opacity: 0;

/* 0 代表完全透明 1 代表完全顯示 但是即使是透明了也會在頁面中佔位*/

/*顯示方式透明沒辦法找到中間值,所以不可以做漸變操作

透明度可以找到中間值,可以做出漸變的效果

*/

陰影

/*陰影box-shadow: x軸移動 y軸移動 虛化程度 陰影寬度 顏色*/

box-shadow: 10px 0 10px 1px red;

/*並且乙個標籤的box-shadow後面可以跟多個陰影,用逗號隔開*/

box-shadow: 10px 0 10px 1px red,0 10px 10px 1px green;

固定定位

/*

vw vh 指定的寬高是根據當前頁面視窗的寬高來進行判定的

80vw 這裡的80表示的是百分百

*//*

固定定位 fixed

一旦開啟定位屬性

1.left top right bottom 四個方位都能參與布局

2.子級標籤獲取不到父級標籤的寬度,也撐不起父級的高度

3.固定定位布局參考的物件是瀏覽器的視窗

4.布局依據:固定定位的盒子四邊的距瀏覽器視窗四邊的距離

5.如果布局出現衝突:上下取上, 左右取左

6.如果定位顯示重疊通過z-index可以選擇誰顯示在上面(z-index可看後續詳細介紹)

*/

絕對定位

/*

絕對定位 absolute

1.子級標籤獲取不到父級標籤的寬度,撐不起父級標籤的高度

2.絕對定位的標籤都是相對於乙個參考係進行定位,之間不會相互影響

4.四個方向都能參與定位

5.上下取上,左右取左

自己採用絕對定位,一般都是想參照父級標籤進行定位

所以父級標籤必須要定位才能作為子級標籤的參考係

父級標籤可以採用fixed absolute 但是這兩種都會影響盒模型

relative(相對定位)不會影響盒模型:也就是父相子絕(經常同時出現)

*/

相對定位

/*

相對定位 relative

1.相對定位不同於固定定位和絕對定位,相對定位可以獲取父級的寬度,也可以撐開父級的高度

2.相對定位的參考係是自身的原有位置

3.相對定位移動的是圖層,盒子還在原地沒動

4.相對定位一般配合絕對定位使用(一般不單獨使用)

*/

相對定位實現簡單陰影效果

隨著html和css的迅速發展,網頁元素實現陰影效果的方法已經非常靈活多樣,不過今天還是針對新手介紹一種簡單易懂的方法。相對定位 相信大家都不陌生了,沒錯,我們就是利用元素位移,再加上其父級元素的背景色來實現陰影效果的。看 html css container,content,content img...

Python ccs動畫及陰影

動畫及陰影 0.什麼時候該用什麼布局 一.拼接網頁 將區域整體劃分起名 對其他區域布局不產生影響 提出公共css reset操作 當有區域傳送顯示重疊 脫離文件流導致的 需要通過z index調整層級 一定需要最外層,且最外層做自身布局時,不要做過多布局操作 二.過渡 動畫 transition屬性...

css圓角邊框及陰影

css3可以簡單理解成是css的增強版,它的優點在於不僅有利於開發與維護,還能提高 的效能。圓角在實際開放過程中,還是蠻常見的。以前基本是通過背景做的,有了css3後可以使用簡單的屬性搞定,可以通過border radius設定元素的圓角半徑。1 圓角邊框語法 圓角邊框屬性 border radiu...