CSS盒子模型

最新推荐文章于 2025-06-03 16:49:51 发布

Gyhm

最新推荐文章于 2025-06-03 16:49:51 发布

阅读量56

点赞数

文章标签： css html5

本文链接：https://blog.youkuaiyun.com/weixin_47306019/article/details/118766158

版权

  1、padding的使用方法（内间距）： 当分析一个缝隙相对于当前容器来说是里面的时候，就用padding。
    填充：padding,在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。 也称补白。
    用法：
        1）用来调整内容在容器中的位置关系
        2）padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值
            属性值的4种方式：
                        四个值：上 右 下 左 {padding:0px 0px 0px 40px;}
                        三个值：上 左右 下 {padding:10px 20px 30px ;}
                        二个值：上下 左右 {padding:10px 20px ;}
                        一个值：四个方向 padding:2px;           
    2、margin的使用方法 ：在元素外边的空白区域，被称为边距。
            属性值的4种方式：同上
            margin可以给负数
            margin:0 auto;/*一个有宽度的元素在浏览器中横向居中。*/

        margin-top的解析
        	现象：默认情况下给子元素添加了margin-top之后，父元素会跟着一起下来。
        	解决方法：A、给最近的父元素添加border-top
                    B、给父元素添加overflow:hidden;（溢出隐藏)
       <style>
        .box{
            height: 300px;
            background-color: yellow;
            /* 方法一：border: 1px solid red; */
           /*方法二*/ overflow: hidden;
        }
        .wrap{
            height: 100px;
            background-color: grey;
            margin-top: 100px;
        }
      </style>
        <body>
            <div class="box">
                <div class="wrap"></div>
            </div>
        </body>    
        
    3、 边框宽度：border-width:
        边框颜色：border-color:
        边框样式：border-style:solid(实线)/dashed(虚线)/dotted(点划线)/double(双线)
        简写：border：30px solid blue; 参数的顺序可以随意调换