盒子容器（block）

最新推荐文章于 2022-04-30 22:10:50 发布

打马御街前

最新推荐文章于 2022-04-30 22:10:50 发布

阅读量557

点赞数 1

本文链接：https://blog.youkuaiyun.com/Meatball_MMY/article/details/89363525

版权

做两个盒子容器，body部分代码如下：

<body>
 <div class="block_left">
    我是盒子
 </div>
 <div class="block_right">
 </div>
</body>

现在来设置通用样式：

 *{
            margin: 0;
            padding: 0;
  }
  html,body{
            width: 100%;
            height: 100%;
            border: 1px solid silver;/*边框1像素，实线，透明*/
            box-sizing: border-box;/*边框内置样式*/
           }

1.左边盒子样式

.block_left{
            width: 300px;
            height: 300px;
            border: 5px solid black;/*设置外间距*/
            margin:100px;
            float: left;
            padding: 100px; /*上  右  下  左*/
            box-sizing: border-box;
        }

2.右边盒子样式

.block_right{
            width: 300px;
            height: 300px;
            border: 5px solid black;
            box-sizing: border-box;/*设置外间距*/
            margin:100px;
            float: left;
        }

效果如下图：