day07.10.HTML-CSS盒模型

追梦女孩ii

已于 2024-07-18 21:08:22 修改

阅读量268

点赞数 8

分类专栏： HTML 一阶段day07 一阶段文章标签： css css3 前端 python 数据分析 html

于 2024-06-28 13:55:18 首次发布

本文链接：https://blog.csdn.net/m0_61566562/article/details/140041610

版权

一阶段同时被 3 个专栏收录

43 篇文章 0 订阅

订阅专栏

HTML

23 篇文章 0 订阅

订阅专栏

一阶段day07

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        #box {
            width: 100px;
            height: 100px;
            background:orange;

            /* 边框 border      边框的宽度  */
            /*     border: 10px solid red;*/
            border-width: 10px;
            border-style:double;
            /*     solid 实线， dashed 虚线， dotted 点线， double 双线       */
            border-color:red;

            border-left: 20px solid green;
            /*     border-top 上, border-bottom 底, border-left 左, border-right 右       */

            /* 内边距 padding    文字跟边框之间的距离 */
            padding: 50px;
            /*     padding-left: 30px;*/

            /* 外边距 margin     边框跟盒子之间的间距   */
            margin: 10px;
            /*     水平居中 */
            margin: 0 auto;
        }

        /*
            盒子大小： width + padding + border + margin
            */


    </style>
</head>
<body>
    <div id = "box">你好你好</div>
    <div style="width: 600px; height: 100px; background: red"></div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        #box {
            width: 100px;
            height: 100px;
            background:orange;

            /* 边框 border      边框的宽度  */
            /*     border: 10px solid red;*/
            border-width: 10px;
            border-style:double;
            /*     solid 实线， dashed 虚线， dotted 点线， double 双线       */
            border-color:red;

            border-left: 20px solid green;
            /*     border-top 上, border-bottom 底, border-left 左, border-right 右       */

            /* 内边距 padding    文字跟边框之间的距离 */
            padding: 50px;
            /*     padding-left: 30px;*/

            /* 外边距 margin     边框跟盒子之间的间距   */
            margin: 10px;
            /*     水平居中 */
            margin: 0 auto;
        }

        /*
            盒子大小： width + padding + border + margin
            */


    </style>
</head>
<body>
    <div id = "box">你好你好</div>
    <div style="width: 600px; height: 100px; background: red"></div>

</body>
</html>