CSS盒模型-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_64776610/article/details/131728104
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒模型</title>
    <style>
        ul{
            /* list_style:none */
            /* background-color:brown; */
        }
        li{
            width: 400px;
            height: 100px;
            background-color: pink;
        }
        .li1{
            /* 内边距
            padding：10px；
            padding-top：20px；
            padding-bottom：40px；
            padding-left：50px；
            padding-right：30px；
            */
            /* 简写 */
            /* 第一个值式上下  第二个值式左右 */
            /* padding:10px 20px */
            /*  上 左右 下 */
            /* padding:10px 20px 30px;
             /*上 右 下 左  */
            /* padding: 10px 20px 30px 40px */
            padding: 10px 20px 30px 40px;
        }
        .li2{
            /* 外间距 */
            /* margin:10px */
            margin-top: 10px;
            margin-bottom: 20px;
            margin-left: 30px;
            margin-right: 40px;
            /* 简写 */
            /*  /* 第一个值式上下  第二个值式左右 */
            /* margin:10px 20px */
            /*  上 左右 下 */
            /* margin:10px 20px 30px;
             /*上 右 下 左  */
            /* margin: 10px 20px 30px 40px */
            margin: 10px 20px 30px 40px;
            
            /* maring 塌陷问题 
                同级之间上下margin 取最大值
                嵌套盒子.子盒子加margin-top不生效,需要给父盒子加padding或border

            */

        }
        .li3{
            /* width:0
            height:0
            宽度 样式  颜色
            */

            /* 样式 :
            solid 实线
            dashed 虚线
            */
            /*颜色: 
            transparent:透明色
            */
        /* 设置四边边框 */
        border: 10px solid red;
        /* 单独设置下边颜色 */
        border-bottom-color: aqua;
        background-color: aqua; 
        margin-bottom: 40px;

        }
        .li14{
            margin-top: 60px;
            /* 设置圆角 */
            width: 200px;
            height: 400px;
            /* px固定值 设置小圆角
                50% 设置园 
            */
            /* border-radius：50%； */
            /* border-radius：50px； */
            border: 1px solid #efefef;
        }
        .div{
            width: 50px;
            height: 50px;
            background-color: green;
            margin: 50px;

        }
    </style>
</head>
<body>
    <ul>
        <li class="li1"></li>
        <li class="li2"></li>
        <li class="li3"></li>
        <li class="li4">
            <div class="div1">

            </div>
        </li>
    </ul>
</body>
</html>