盒子模型.HTML

最新推荐文章于 2024-08-20 19:23:57 发布

@阿黎

最新推荐文章于 2024-08-20 19:23:57 发布

阅读量249

点赞数 3

文章标签： html 前端前端框架

本文链接：https://blog.csdn.net/2302_79957586/article/details/138511275

版权

例：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>盒子模型</title>
       
       <style type="text/css">
           *{   /* *:通配符,指所有的标签.初始化所有标签的内边距和外边距 */
               margin: 0;
               padding: 0;
           }
           .box{
               width:300px;   /* 盒子的宽 */
               height:450px;   /* 盒子的高 */
               /* border-width:10px;
               border-color:#008000;
               border-style:solid */
               /* 复合写法border:大小样式颜色;(顺序不论) */
               /* solid实线,dotted点线,dashed虚线*/
               border:1px solid red;
               /* border-top,bottom,left,right */
               /* padding:50px 40px 30px 20px; */ /* 分别对应:上右下左顺时针方向 */
               padding:50px 30px 10px;   /* 分别对应:上左右下 */
               /* padding:50px 20px;分别对应: 上下左右*/
               /* padding:50px;       四个方位都是50px */
               /* margin-top: 50px;
               margin-bottom:50px ;
               margin-left: 100px; */
               margin: 50px;
           }
           .box2{
               width: 200px;
               height: 200px;
               border: 1px solid green;
               margin: 10px auto;       /* 盒子水平居中 */
               }
           </style>
       
   </head>
   <body>
       
       
       
       
       
       <div class="box">hello box！</div>
       <div class="box2">hello box!</div>
   </body>
</html>

@阿黎

关注

3
点赞
踩
6

收藏

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

/ /* 分别对应:上右下左顺时针方向 *//* 分别对应:上左右下 */-- 盒子模型：内容content,内边距padding,边框border,外边距margin-->*{ /* *:通配符,指所有的标签.初始化所有标签的内边距和外边距 *//* 盒子水平居中 *//* 盒子的高 *//* 盒子的宽 */-- 外边距margin：盒子与盒子之间的距离 -->-- 内边距padding：会把盒子撑大 -->
复制链接

扫一扫