lovecoding
/
W250511


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 标准盒模型  box-sizing: content-box*/
        /* 元素大小 = 内容大小（width,height） + 内边距(padding) + 边框(border) */
        /* 怪异盒模型  box-sizing: border-box*/
        /* 元素大小 = width,height */
        .box{
            background-color: red;
            width: 200px;
            height: 200px;
            border:5px solid black;
            padding: 10px;
            margin: 50px;
            /* 盒子模型 */
            box-sizing: border-box;
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: red;
            /* margin 两个值 第一个上下 第二个左右 */
            /* margin 三个值 第一个上 第二个左右 第三个下 */
            /* margin 4个值 第一个上 第二个右 第三个下 第四个左 */
            /* margin:0 auto 0 auto; */
            margin-left:auto;
            margin-right: auto;
            margin-top: 0;
            margin-bottom: 0;

            /* border:5px solid black; */
            /* border-top: 5px solid black;
            border-bottom: 5px solid red;
            border-left: 5px solid green;
            border-right: 5px solid yellow; */

            border-width: 5px;
            border-style: solid;
            /* border-color: black; */
            border-color: green red blue yellow;
            /* 圆角 */
            border-radius: 50px;
        }
    </style>
</head>
<body>
    <!-- <div class="box">hello</div> -->


    <div class="box2"></div>
</body>
</html>