HTML简单了解（4）

最新推荐文章于 2024-07-25 12:15:00 发布

一只大杯子呀

最新推荐文章于 2024-07-25 12:15:00 发布

阅读量113

点赞数

文章标签： css3 html

本文链接：https://blog.csdn.net/QQTSS/article/details/104980984

版权

1.css盒子模型

content -------物品
padding ------填充物
border --------盒子
margin --------多个盒子之间的间隙

padding不能出现负值，margin是可以出现负值

在这里插入图片描述

    <style>
        #box1{width: 500px;height: 500px;
        border: 1px black solid;
        padding: 30px ;}
		        /* padding : 内填充（内边距）
		        写了一个值 : 30px  ( 上右下左 )
		       写了二个值 : 30px 40px ( 上下 左右 )
		       写了三个值 : 30px 40px 50px( 上 左右 下)
		       写了四个值 : 30px 40px 50px 60px ( 上  右  下  左)
		       padding-left : 30px
		       padding-right : 30px
		       padding-top : 30px
		       padding-bottom : 30px */

        .box2{width: 400px ;height: 400px;  border:1px black solid ; background: cornflowerblue;}
        .box3{  width: 200px ;height: 200px;  
                border:1px black solid ; 
                background: rgb(237, 100, 230); 
                margin: 30px;}
                    /* margin : 外边距 
                    写了一个值 : 30px  ( 上右下左 )
                    写了二个值 : 30px 40px ( 上下 左右 )
                    写了三个值 : 30px 40px 50px( 上 左右 下)
                    写了四个值 : 30px 40px 50px 60px ( 上  右  下  左)
                    margin-left : 30px
                    margin-right : 30px
                    margin-top : 30px
                    margin-bottom : 30px */

    </style>
</head>
<body>
    <div id="box1">
        <div class="box2">
        <div class="box3"></div>
        </div>
    </div>
</html>

这个是 padding ，绿色区域

这个是margin ，黄色区域

1.1

margin叠加的问题：
只会出现在上下margin中，左右是不存在margin叠加问题的。
特点：会取叠加中较大的值。
解决方案：1. BFC规范 2. 想办法只给一个元素添加间距。
margin传递的问题：
margin传递只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其它三个方向是没有传递问题的。
解决方案：
1. BFC规范 (比较推荐)
2. 给父容器加边框。(不太推荐的)
3. margin换成padding。
盒子的应用：
margin : 0 auto; 来实现盒子的左右居中（上下不行）
上下想居中要用到下面这些
1.position
2.transition
3.flex
一段文本
上下 : line-height:height
左右 : text-align:center
当一个盒子不写宽度的时候？
盒子的宽度跟父容器的宽度相同。
并且当设置了margin padding border的时候，盒子的content会自动重新计算。
overflow，也可以解决margin传递的问题
给一个盒子固定大小后，当盒子里的内容比较多的情况下，就可能产生溢出的现象。
溢出隐藏
hidden
scroll
auto