CSS盒模型

最新推荐文章于 2024-09-10 17:10:14 发布

403_ss

最新推荐文章于 2024-09-10 17:10:14 发布

阅读量102

点赞数

分类专栏： html

html 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

盒模型

单地说每个html标签都是一个方块，然后这个方块又包着几个小方块。盒模型分为IE盒模型和W3C标准盒模型两种。

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像

CSS3盒模型新内容：

在 CSS 盒子模型的默认定义里，对一个元素所设置的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ，盒子会被撑大。而box-sizing 就是规定盒子大小，把border padding content 包含在里面。

box- sizing ：content-box 默认。盒子大小= width + padding + border

box - sizing ：border- box 盒子大小等于 width ；padding 与border包含在设置的宽度里面。content自动调整

例子（ box- sizing）：鼠标点击盒子显示透明边框。（盒子大小不改变）

<style>
img{
    width: 500px;
    height: 350px;
}

div{
    width: 500px;
    position: relative;
    height: 350px;
    overflow: hidden;
    border-radius: 10px;
}

div:hover::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width:500px;
    height: 350px;
    border: 10px solid pink;
    margin: 0;
    box-sizing: border-box;
}
</style>
<!-- 1.直接用div：hover 肯定是不行的，因为border把盒子撑大；高度会掉下-->
<!--  2.所以考虑用伪元素做把border加在盒子里面，border是盒子里面的内容就不会下陷。position调整位置-->
<!--    3 .box-sizing 负责调整内容盒子大小保持不变-->
<body>
    <div >
        <img src="images/moss.jpg" alt="">
    </div>
</body>

效果：