盒子模型

最新推荐文章于 2024-08-09 17:21:38 发布

YTM PYG PL

最新推荐文章于 2024-08-09 17:21:38 发布

阅读量64

点赞数

文章标签： css3 css html

本文链接：https://blog.csdn.net/qasdfghjkl0822/article/details/121076338

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>盒子模型</title>
       <style type="text/css">
           .bigbox{
               width: 600px;
               height: 500px;
               border: 5px solid orangered;
               /* padding:内边距 */
               /* top:上 bottom:下 left:左 right:右 center:中 */
               /* padding-top: 50px */
               /* padding-left:100px */
               /* 复合写法:
               padding: 50px=上 70px=右 80px=下 100px=左 (顺时针走向)；
                   padding： too left/right bottom;
                   padding: 一个代表上下，一个代表左右;
                   padding: 上下左右;
                   */
               padding: 50px 70px 80px 100px;
               /* 加了内边距盒子会被撑大
               横向: width + padding-left + padding-right;
               纵向: height + padding-top + padding-bottom;
               */
           /* 外边距:margin */
           /* margin-top: 200px
               margin-left: 400px
               margin: 上右下左
               margin: top left/right bottom
               margin: 上/下左/右
               margin: 上/下/左/右
               左右外边距为auto的时候，盒子水平剧中
           */

           margin: auto;
           }
           .box{
               width: 300px;
               height: 200px;
               border: 5px dotted gold;
           }
       </style>
   </head>
   <body>
       <div class="bigbox">
           <div class="box"></div>
       </div>

   </body>
</html>

YTM PYG PL

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒子模型

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>盒子模型</title> <style type="text/css"> .bigbox{ width: 600px; height: 500px; ...
复制链接

扫一扫