框模型之宽度和高度/ box-sizing属性（css3）

最新推荐文章于 2023-03-06 14:22:36 发布

407指导员

最新推荐文章于 2023-03-06 14:22:36 发布

阅读量589

点赞数

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

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/109537862

版权

CSS3 专栏收录该内容

77 篇文章 0 订阅

订阅专栏

框模型之宽度和高度

1.内容的高度和宽度

就是通过width/height属性设置的宽度和高度

2.元素的高度和宽度

就是你眼睛可以看到的宽度/高度，包括内容、左右/上下内边距、左右/上下边框宽度.

3.元素空间的宽度和高度

宽度=左外边距+左边框宽度+左内边距+width+内右边距+右边框宽度+右外边距

高度=上外边距+上边框宽度+上内边距+height+下内边距+下边框宽度+下外边距

增加padding值时整个元素宽度也会增加，只有减少width/height值才能保持元素高度不变
border-width属性一样.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>box-sizing属性</title>
    <style>
        .content {
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .aside {
            width: 100px;
            height: 200px;
            background-color: green;
            float: left;
        }

        .article {
            width: 200px;
            height: 200px;
            background-color: blue;
            float: right;
            border: 5px solid black;
        }
    </style>

</head>
<body>
<div class="content">
    <div class="aside"></div>
    <div class="article"></div>
</div>
</body>
</html>

在这里插入图片描述

box-sizing属性（css3）

这个属性可以保证我们在盒子内部加入内边距和边框宽度可以不改变盒子元素的高度和宽度。(就是上边的问题，如果想要盒子元素的高度/宽度不变。且又要添加边框宽度/内边距，就必须减去内容的高/宽)

语法格式

box-sizing: content-box|border-box|inherit;

取值

centent-box:在宽度和高度之外绘制元素的内边距和边框。

元素宽/高 = 边框 + 内边距 + 内容宽/高

boder-box:，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

元素宽/高 = width属性（恒等于）

inherit：规定应从父元素继承 box-sizing 属性的值。

加入box-sizing: border-box;代码后效果图：

在这里插入图片描述

学习地址：https://www.w3school.com.cn/cssref/pr_box-sizing.asp

407指导员

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
框模型之宽度和高度/ box-sizing属性（css3）

框模型之宽度和高度1.内容的高度和宽度就是通过width/height属性设置的宽度和高度2.元素的高度和宽度就是你眼睛可以看到的宽度/高度，包括内容、左右/上下内边距、左右/上下边框宽度.3.元素空间的宽度和高度宽度=左外边距+左边框宽度+左内边距+width+内右边距+右边框宽度+右外边距高度=上外边距+上边框宽度+上内边距+height+下内边距+下边框宽度+下外边距增加padding值时整个元素宽度也会增加，只有减少width/height值才能保持元素高度不变border-wi
复制链接

扫一扫