如何写盒子-优快云博客

本文链接：https://blog.youkuaiyun.com/HYYY77/article/details/139467286

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>盒子模型</title>
       <style type="test/css">
           .box1{
               /*
               border:边框
               none：默认 solid：实线 dotted：点线 dashed：虚线
               top:上 bottom:下 left:左 right:右
               margin:外边距
               padding:内边距
               width:宽 height:高
               单位：px像素
               颜色的三种表示：颜色英语单词，rgb(0~255,0~255,0~255),#000000
               */
               /* border-color: 10px solid red;
               border-bottom: 5px blue solid;
               border-left: 5px solid black;
               border-right: 5px solid yellow; */
               /* 边框的复合写法： */
               /* 边框：大小5px 实线边框颜色红色 */
               border: 5px solid red;
               width: 200px; /*宽 */
               height: 200px; /* 高 */
               font-size: 36px; /*font:字体，size：大小 */
           /* padding-top: 30px;
           padding-left:30px;
               padding-bottom: 30px;
               padding-right: 30px;*/
               /* 复合写法：顺时针方向
               四个值：上右下左
                   三个值：上（左/右）下
                   一个值：（上/下/左/右）
               */
               padding: 10px 20px 30px;
           }
           .box2{
               border:1px solid green;
               width: 200px;
               height: 200px;
           }
       </style>
   </head>
   <body>
       <div class="box1">hello world!</div>
       <div class="box2">hello box!</div>
   </body>
</html>