陰影及定位

隱藏及陰影

標簽隱藏

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 指定的寬高是根據(jù)當前頁面窗口的寬高來進行判定的 80vw 這里的80表示的是百分百 *//* 固定定位 fixed一旦打開定位屬性
　　1.left top right bottom 四個方位都能參與布局
　　2.子級標簽獲取不到父級標簽的寬度，也撐不起父級的高度3.固定定位布局參考的對象是瀏覽器的窗口4.布局依據(jù)：固定定位的盒子四邊的距瀏覽器窗口四邊的距離5.如果布局出現(xiàn)沖突：上下取上， 左右取左6.如果定位顯示重疊通過z-index可以選擇誰顯示在上面(z-index可看后續(xù)詳細介紹) */

絕對定位

/* 絕對定位 absolute 1.子級標簽獲取不到父級標簽的寬度，撐不起父級標簽的高度 2.絕對定位的標簽都是相對于一個參考系進行定位，之間不會相互影響 3.參考系：最近定位的父級標簽(父級標簽沒定位就去找更上一級，都沒定位最后找到html) 4.四個方向都能參與定位 5.上下取上，左右取左自己采用絕對定位，一般都是想?yún)⒄崭讣墭撕炦M行定位 所以父級標簽必須要定位才能作為子級標簽的參考系 父級標簽可以采用fixed absolute 但是這兩種都會影響盒模型 relative(相對定位)不會影響盒模型：也就是父相子絕(經(jīng)常同時出現(xiàn)) */

相對定位

/* 相對定位 relative 1.相對定位不同于固定定位和絕對定位，相對定位可以獲取父級的寬度，也可以撐開父級的高度 2.相對定位的參考系是自身的原有位置 3.相對定位移動的是圖層，盒子還在原地沒動 4.相對定位一般配合絕對定位使用(一般不單獨使用) */

轉(zhuǎn)載于:https://www.cnblogs.com/huikejie/p/11155136.html

總結(jié)

以上是生活随笔為你收集整理的阴影及定位的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。