先看看效果圖片:
我們將div這一塊設置為水平方向居中顯示,以及調整其與上邊框的距離。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>陰影內容相關</title> <style> *{ margin: 0; padding: 0;// } .div{ width: 300px; height: 300px; background-color: red; margin: 0 auto; /*設置div為水平居中顯示*/ text-align: center; /*設置div里面的內容為居中顯示*/ line-height: 200px; /*設置div里面的內容向下200px*/ margin-top:100px ; /*設置div離頂部距離為100px*/ box-shadow: 10px 5px 6px 5px black; } </style> </head> <body> <div class="div"> 我是div里面的內容 </div> </body> </html>
補充的知識點:
1.外邊距:標簽與標簽之間的距離就是外邊距
格式;
margin-top: ;
margin-right: ;
margin-left: ;
margin-bottom: ;
連寫格式: margin: 上 右 下 左;
margin屬性本質上用于控制兄的關系之間的間隙 padding 一般用于控制父子關系(嵌套模型)
margin: 0 auto; //設置里面的盒子本身為水平居中顯示 :注:此方法對垂直方向無效;
//設置為水平和垂直 均為居中顯示: margin: 150px auto; (150px舉例)
margin: 0 auto; //設置盒子本身為水平居中;
2.內邊距: 邊框和內容之間的距離即為內邊距
格式:
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
連寫格式: padding: 上 右 下 左;
省略時的規律:
上 右 下 -> 左邊的取值和右邊的一樣
上 右 -> 左邊的取值與右邊的一樣 下邊的取值與上邊一樣
上 -> 其他三邊取值與上邊一樣
給標簽設置完內邊距之后,標簽占有的寬度以及高度會發生變化
3.部分div相關內容 :
<div>標簽內設置字體、行高、間距等 div 簡寫形式 div.box$*5 即出現5個名稱分別為box1 box2 ....的div tab鍵 <div> height: 100px; background-color: skyblue; margin-top: 100px;//設置此板塊里面內容距離上邊界的距離 text-align: center;//設置div里面的內容為居中顯示 line-height:100px;//設置div里面的內容距離div上邊界的距離 display:inline block; //行內塊元素 </div> margin: 10px 20px; //設置當前所在標簽(自身)的上下間距以及左右間距
4.添加陰影部分:
給盒子添加陰影:
格式: box-shadow: 水平偏移 垂直偏移 模糊度 陰影擴展 陰影顏色 內外陰影
(默認情況下為外陰影)