一丶盒模型的属性(重要)

　　1.padding

　　　　padding是标准文档流,父子之间调整位置

\"\"\"\" 
<!DOCTYPE html>
<html>
    <head>
        <  charset="UTF-8">
        < >padding</ >
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                width: 200px;
                height: 200px;
                background-color: red;
                /*上下左右*/
                padding: 10px;
                /*上下  左右*/
                padding: 20px 30px;
                /*上  左右  下*/
                padding: 20px 30px 40px;
                /*顺时针   上右下左*/
                padding: 20px 30px 40px 50px;
            }
        </style>
    </head>
    <body>
        <div class="box">alex</div>
    </body>
</html>
padding

　　2.border

　　　　三要素: 线性的宽度  线性的样式  颜色

　　　　solid 实线　　dotted小圆点　　double双实线　　bottom虚线

\"\"\"\" 
<!DOCTYPE html>
<html>
    <head>
        <  charset="UTF-8">
        < >border</ >
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                width: 200px;
                height: 200px;
                background-color: red;
                /*根据方向来设置*/
                border-left: 5px solid green;
                border-right: 1px dotted yellow;
                border-top: 5px double purple;
                border-bottom: 1px dashed;
            }
        </style>
    </head>
    <body>
        <div class="box">alex</div>
    </body>
</html>
border

　　实例:制作三角形

　　transparent 透明

\"\"\"\" 
<!DOCTYPE html>
<html>
    <head>
        <  charset="UTF-8">
        < >制作三角形</ >
        <style type="text/css">
            div{
                width: 0;
                height: 0;
                border-bottom: 20px solid red;
                border-left: 20px solid transparent;
                border-right: 20px solid transparent;
                
            }
        </style>
        
    </head>
    <body>
        <div>
            
        </div>
    </body>
</html>
制作三角形

　　3.margin

　　　　前提:必须是在标准文档流下

\"\"\"\" 
<!DOCTYPE html>
<html>
    <head>
        <  charset="UTF-8">
        < >margin</ >
        <style>
            .s1{
                background-color: red;
                margin-right: 30px;
            }
            .s2{
                background-color: rgb(0,128,0);
                margin-left: 30px;
            }
        </style>
    </head>
    <body>
        <span class="s1">alex</span><span class="s2">wusir</span>
    </body>
</html>
margin

　　margin垂直方向上的坑:

　　　　margin的水平不会出现任何问题

　　　　垂直方向上 margin会出现'塌陷问题'

\"\"\"\" 
<!DOCTYPE html>
<html>
    <head>
        <  charset="UTF-8">
        < >margin坑</ >
        <style>
            .s1{
                width: 200px;
                height: 200px;
                background-color: red;
                margin-bottom: 40px;
            }
            .s2{
                width: 200px;
                height: 200px;
                background-color: green;
                margin-top: 100px;
            }
        </style>
    </head>
    <body>
        <div class="s1"></div>
        <div class="s2"></div>
    </body>
</html>
margin(坑)
\"\"\"\" 
<!DOCTYPE html>
<html>
    <head>
        <  charset="UTF-8">
        < >margin父子盒子的坑</ >
        <style type="text/css">
            .box{
            width: 300px;
            height: 300px;
            background-color: red;
            /*float: left;*/
        }
            .child{
                width: 100px;
                height: 100px;
                background-color: green;
                margin-left: 50px;
                margin-top: 50px;
        }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="child">
            </div>
        </div>
    </body>
</html>
margin父子盒子的坑

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月18日 星期一

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章