h5盒子模型

最新推荐文章于 2024-04-11 19:34:58 发布

一只头秃的死肥宅

最新推荐文章于 2024-04-11 19:34:58 发布

阅读量1.1k

点赞数

分类专栏： HTML5 文章标签： HTML5 新手样式盒子模型盒子

本文链接：https://blog.csdn.net/xuemoKingDeath/article/details/70197319

版权

HTML5 专栏收录该内容

54 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{
            padding: 0;
            margin: 0;

        }
        /*margin 外框间距 符合属性：
                四个值：上右下左
                俩个值：分别代表上下和左右
                一个值：四个方向一样
                三个值：上 “左右 ”下
                margin:0 auto 布局居中*/
        /*border属性
              border-color border-style border-width
              border-left border-right border-bottom border-top*/
        /*border 外框间距 符合属性：
               四个值：上右下左
               俩个值：分别代表上下和左右
               一个值：四个方向一样
               三个值：上 “左右 ”下
               margin:0 auto 布局居中*/
        .div{
            height: 300px;
            width: 500px;
            background-color: red;
            margin: 0 auto;
            text-align: justify;
            border-bottom: magenta inset 10px;
            border-top: blue inset 10px;
            border-right: yellow inset 10px;
            border-left: green dashed 10px;
            padding: 20px 50px 30px;
        }
        /*边框样式border—style
           none 默认无边框
           dotted 点线框
           dashed虚线框
           solid 实线框
           double 俩个边界
           groove 定义3D沟槽边界
           ridge 定义3D脊边界
           inset  定义3D 嵌入边框
           outset 定义3D突出边框
           */
        /*边框颜色属性border-color要和border-style配合使用*/
        p{
            background-color: rebeccapurple;
            height: 200px;
        }

    </style>
    <title>盒子模型</title>
</head>
<body>
<header>

</header>
<!--外边距margin-->
<div class="div">
     联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV
     联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV
     联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV
     联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV
     联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV
     联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV
     联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV
     联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV
     联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV
     联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV
     联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTA
     联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTAV联盟 GTA
</div>
<p>
    战争框架
</p>
</body>
</html>