盒子模型:
把HTML頁面中的布局元素看作是一個矩形盒子,即b一個盛裝內容的容器,它包括:邊框border、外邊距margin、內邊距padding和內容content,
padding:內邊距
padding:20px 10px 40px 10px;
四個值:上 右 下 左:順時針
padding:20px 10px 40px;
三個值:上 左/右 下
padding:20px 10px;
兩個值:上/下 左/右
padding:20px;
一個值:上/下/左/右
border:邊框:邊框的粗細邊框的顏色邊框的樣式;
solind:實線 dashed:虛線 dotted:點線
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>盒子模型</title>
<style>
.box{
width:100px;
height:100px;
background:green;
/*邊框:border:邊框的粗細 邊框的顏色 邊框的樣式;
solind:實線
dashed:虛線
dotted:點線*/
border:10px pink solid;
}
.box1{width:100px;
height:100px;
background:green;
border:10px greenyellow dashed;
}
.box2{width:100px;
height:100px;
background:green;
border:10px palevioletred dotted;}
.ys{
width:200px;
height:200px;
background:red;
border:20px solid green;
color:white;
/*padding-left:10px;
padding-top:20px;
padding-right;10px;
padding-bottom:40px;*/
/*padding內邊距:四個值:上/右/下/左:順時針*/
/*padding:20px 10px 40px 10px;*/
/*三個值:上 左/右 下*/
padding:20px 10px 40px ;*/
/*兩個值:上/下 右/下*/
/*padding:20px 10px ;*/
/*一個值:上/下/左/右 */
/*padding:20px ;*/
}
</style>
</head>
<body>
<div class="box"></div><br>
<div class="box1"></div><br>
<div class="box2"></div><br>
<div class="ys">學無止境</div>
</body>
</html>
遠行結果
轉載請註明出處,本文鏈接:https://www.uj5u.com/qukuanlian/226929.html
標籤:區塊鏈
上一篇:成功解決docker build failed: Error returned from build: 1 “go: github.com/golang/pr...connection refused
