CSS盒子模型

最新推荐文章于 2025-02-27 20:46:16 发布

Claire_girl

最新推荐文章于 2025-02-27 20:46:16 发布

阅读量169

点赞数

分类专栏： html css 文章标签： css html

本文链接：https://blog.csdn.net/Claire_girl/article/details/119756526

版权

html 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

css

6 篇文章 0 订阅

订阅专栏

1.盒子模型尺寸基准有两种，分别是content-box和border-box （默认是content-box）
2.理论上说，content-box与border-box区别是两者的盒子的宽度是否包含表框和内边距。
3.新建两个不同背景填充的div,(first_box设置为box-sizing：border-box，seond_box为默认的content-box)

代码：

.first_box{
    /* 默认的content-box */
    box-sizing: content-box;
    background-color: antiquewhite;
    width: 100px;
    height: 100px;
    padding: 20px;
    border: 2px;
}
.second_box{
    /* border-box */
    box-sizing: border-box;
    background-color: aquamarine;
    width: 100px;
    height: 100px;
    padding: 20px;
    border: 2px;
}