HTML5設置div標簽以及其內容均為居中顯示以及添加陰影實例講解
先看看效果圖片:
我們將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: 水平偏移 垂直偏移 模糊度 陰影擴展 陰影顏色 內外陰影
(默認情況下為外陰影)
- 上一篇：臺積電：絕大多數7nm客戶都會轉向6nm_IT新聞_博客園
- 下一篇：最后一頁
相關文章
圖文推薦
- 文章
- 推薦
- 熱門新聞
