盒子模型：
把HTML页面中的布局元素看作是一个矩形盒子，即一个盛装内容的容器。它包括:边框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>
2822
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
