CSS盒子模型

最新推荐文章于 2024-05-18 06:08:21 发布

Asunny5

最新推荐文章于 2024-05-18 06:08:21 发布

阅读量343

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_60979337/article/details/127527478

版权

盒子模型：盒子真实尺寸=内容尺寸+padding+border

1.盒子内边距 padding
1)四个值：简写模式（顺时针）上右下左
padding：top right bottom left
2)两个值：简写模式上下左右
padding：top/bottom left/right
3)四个值都一样：简写模式
padding：px

2.盒子外边距 margin 可以给负值，往相反方向移动
       1) 四个值：简写模式（顺时针）上右下左
          margin:top right bottom left
        2)两个值：简写模式上下左右
      margin: top/bottom left/right|
        3)四个值都一样：简写模式
margin:px
4)K块级元素水平居中
                margin: 0 auto ;

边距合并：
1. 兄弟关系：
垂直外边距相遇，会合并外边距，真实外间距，取值大的间距。
//如果值是一正一负则不会合并

解决方案：尽量只给一个盒子外边距

2.父子关系：垂直间距会发生外边距塌陷

<style>
      
        .box2{
            width: 400px;
            height: 400px;
           background-color:skyblue;
           margin-top: 50px;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: lemonchiffon;
            margin-top: 80px;
        }
</style>

<body>
   
    <div class=" box2">
        <div class="box3"></div>
    </div>
 </body>

解决方法：

给父级元素加上border：1px soild #fff 或者padding：1px
给父级元素加overflow：hidden
给父级或子级加上浮动：float
给父级或子级加上绝对定位属性 positon:absolute
给父级或子级加上display:inline-block

3.边框 border 默认没有边框
border：px style color
1) solid 实线
2) dotted 短虚线
3) dashed 长虚线
4.外轮廓 outline 只能设置四边
outline：px style color
outline-offset：px //是外轮廓与边框的距离

5.边框-圆角 border-radius
1)一个值：border-radius :30px;
2)两个值 (对角）：border-radius :左上/右下右上/左下
3)三个值：border-radius ：左上右上/左下右下
4)四个值：border-radius : 左上右上右下左下（顺时针方向）