HTML基础学习-18- div css容器盒子模型学习1

最新推荐文章于 2022-10-29 19:58:35 发布

豆皮青椒

最新推荐文章于 2022-10-29 19:58:35 发布

阅读量368

点赞数

文章标签： html div-css

本文链接：https://blog.csdn.net/u011523180/article/details/73065462

版权

HTML基础学习-18- div css容器盒子模型学习1

<!DOCTYPE html>

<!--
div  和 span
一个是块级元素  I个  是内联


div 和 span可以相互转换

容器边距空白问题 

margin外围增加，不撑大盒子本身

 border 会将当前区域一起算到盒子中，增大容器和padding一样
 padding向外扩展增大容器 

 容器

 但三者都会在  外部容器宽高一定的情况下
当 额外设置 margin border  和  padding那么久应该将 容器本身的宽高减去 相应的 margin  border  padding 所占内容


-->
<head>
    <title>
    div 加 css 1
    </title>
    <meta charset="utf-8">
    <style type="text/css">
    /*
        div{
        background-color:green;

    }
    span{
        background-color:green;
    }
    body{
      margin:0;
    }
    */
    .parenta{
        margin:0 auto;
        background-color:red;
        width:600px;
        height:600px;
    }
    .childa{
        float:left;
        background-color:blue;
        width:240px;
        height:240px;
    }
    .childb{
        float:left;
        background-color:green;
        width:240px;
        height:240px;
    }
    .parenta div{
        margin:10px;
        border:solid 10px;
        padding:10px;
    }
    </style>



</head>
<body>
        <div class="parenta">
            <div class="childa">

            </div>
            <div class="childb">

            </div>
        </div>


</body>



</html>