<html>
<head>
<meta charset="utf-8" />
<title>作业3.10</title>
<style>
.big-box{
width:500px;
height:200px;
border:5px red solid;
border-bottom:10px green solid;
padding:10px;
}
</style>
</head>
<body>
<div class="big-box">作业</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>盒子模型</title>
<style>
.box{
width:1266px;
height:52px;
border:solid 1px red;
/* 当写一个值:上下左右都是同一个内边距 */
/* 写两个值:第一个值写上下,第二个写左右 */
/* 三个值:第一个代表上,第二个代表左右,第三个代表下 */
/* 四个值:上 右 下 左 顺时针 */
/* padding: 20px 10px 30px5pxs; */
/* padding-left:左内边距 */
padding-left:30px;
/* padding-right:30px; */
}
.box2{
width:200px;
height:50px;
border:solid 1px green;
}
</style>
</head>
<body>
<div class="box">
<div class="box2"></div>
</div>
</body>
</html>
盒子：边框border、内容 、padding内边框
版心（大盒子）
盒子的作用：给网页布局
width：宽 height：高
border：边框
solid：实线 虚线：dashed 点线：dotted
padding内边距
left:左 right 右 top:上 bottom：下
CSS的层叠性
HTML第九次
猜你喜欢
转载自blog.csdn.net/weixin_54989803/article/details/114631126
今日推荐
周排行