<!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>
#盒子模型
最新推荐文章于 2024-09-02 11:46:47 发布