<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>盒子模型</title>
<style type="text/css">
/*
border:边框
solid:实线 dashed:虚线 dotted:点线
top:上 bottom:下 left:左 right:右
margin:外边距 padding:内边距
width:宽 height:高
单位：px像素
颜色的三种表示：
1.颜色的单词
2.rgb（0~255,0~255,0~255）
3.#0000000
*/
.box1{
/* 单独写边框
border-top:;
border-bottom: ;
border-left: ;
border-right: ;
*/
/* 边框:大小1px 实线 边框颜色 红色 */
border: 1px solid red; /* 边框复合写法 */
width: 200px; /* 宽 */
height: 200px; /* 高 */
font-size: 36px; /* 字体大小 */
/* 单独写法
padding-top: 30px;
padding-left: 30px;
padding-bottom: 30px;
padding-right: 30px;
*/
/* 复合写法：
四个值顺序: 顺时针方向（上右下左）
三个值：上，（左/右），下
两个值：（上/下），（左/右）
一个值：（上/下/左/右）
*/
padding:10px 20px ;
}
.box2{
border: 1px solid green;
width: 200px; /* 宽 */
height: 200px; /* 高 */
}
</style>
</head>
<body>
<div class="box1"> hello word！</div>
<div class="box2">hello box</div>
</body>
</html>
扫一扫
3072
评论 1
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
