针对于盒子模型的一些知识点

最新推荐文章于 2024-04-18 14:26:55 发布

叫我邱球球

最新推荐文章于 2024-04-18 14:26:55 发布

阅读量542

点赞数

分类专栏：有关CSS 文章标签：心得 css 前端属性博客

本文链接：https://blog.csdn.net/CallMeQiuqiuqiu/article/details/60873735

版权

有关CSS 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

我们学习了盒子模型之后，或许还有一些人对盒子模型里面的一些小知识点有一些忽略。

今天就带着大家一起回顾一下盒子模型中容易被混淆的知识点：

-------------------------------------分割线----------------------------------------

①在盒子模型中，内容的宽度和高度：

通过我们标签的width 和 height 设置的，就是内容的宽度和高度。

②在盒子模型中，元素的宽度和高度：

（就是能看到标签的宽度和高度）

宽度 = 左边框 + 左边的内边距 + 内容的宽度 + 右边的内边距 + 右边框。

高度 = 上边框 + 上边的内边距 + 内容的高度 + 下边的内边距 + 下边框。

③在盒子模型中，元素空间的宽度和高度：

就是元素的宽度和高度 + 左右的外边距。

-------------------------------------分割线-----------------------------------------

当我们设置一个div元素的时，增加背景色之后，显示出的大小是这个元素的大小，即上述所说的：

宽度 = 左边框 + 左边的内边距 + 内容的宽度 + 右边的内边距 + 右边框。

高度 = 上边框 + 上边的内边距 + 内容的高度 + 下边的内边距 + 下边框。

因此，当我们有时候改变border或者是padding，很有可能会导致我们整个布局会发生变形。

举个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta chars et="UTF-8">
    <title>盒子box-sizing属性</title>
    <style type="text/css">
.content{
    width: 300px;
    height: 300px;
    background-color: red;
}
        .aside{
            float: left;
            width: 100px;
            height: 200px;
            background-color: green;
        }
        .article{
            float: right;
            width: 200px;
            height: 200px;
            background-color: blue;
            /*border: 20px solid #000;*/
            /*padding:20px;*/
        }
    </style>
</head>
<body>
<div class="content">
    <div class="aside"></div>
    <div class="article"></div>
</div>
</body>
</html>

此时是不发生变形的。

但是如果我们修改一下padding或者是border的值，这个盒子元素的宽高就会发生变化。

比如我们增加20px的padding的值，结果如图：

那么问题来了：我们如何才能保证增加border或者增加padding后，整个元素的宽高不发生变化呢？

在CSS-3中增加了一个box-sizing的属性。这个属性就可以保证增加border或者padding之后，盒子元素的宽高不变。

box-sizing有两个取值：1.默认取值是content-box 2.border-box.

border-box就可以保证我们这个元素的宽高不会发生变化。

------------------------------------------------分割线----------------------------------------------------

注意点：

①如果两个盒子是嵌套关系，设置了里面盒子的顶部的外边距即margin-top，外面盒子也会被顶下来。

②如果外面的盒子不想被一起顶下来，可以给外面的盒子添加一个边框属性border。

③在企业开发中，一般情况下，如果要控制嵌套盒子之间的距离，应该首先要考虑padding，其次再考虑 margin，因为margin本质上是控制兄弟关系之间的间隙的。

④margin:0 auto; 可以让嵌套关系的盒子中里面的盒子水平居中于外面的盒子。只对水平方向有效，对垂直方向无效。这是固定写法，不能修改。垂直方向上只能通过像素来进行调整。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta chars et="UTF-8">
    <title>测试</title>
    <style type="text/css">
.content{
    width: 300px;
    height: 300px;
    background-color: red;
}
        .aside{
            width: 100px;
            height: 100px;
            background-color: green;
            margin:0 auto;
        }
    </style>
</head>
<body>
<div class="content">
    <div class="aside"></div>
</div>
</body>
</html>

-------------------------------------------------分割线-----------------------------------------------

盒子居中和内容居中：

我们之前学过让内容进行居中的一个属性：text-align:center; ，但是在上述中，我们又学到了margin:0 auto;

那么这两个的区别在哪里呢？

margin:0 auto;的目的是让盒子自己水平居中。

text-align:center是让盒子中的内容水平居中。

其实搞清楚两个的含义也就不会混淆了。

-----------------------------------------------分割线----------------------------------------------

叫我邱球球

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
针对于盒子模型的一些知识点

我们学习了盒子模型之后，或许还有一些人对盒子模型里面的一些小知识点有一些忽略。今天就带着大家一起回顾一下盒子模型中容易被混淆的知识点：-------------------------------------分割线----------------------------------------①在盒子模型中，内容的宽度和高度：通过我们标签的width 和 heigh
复制链接

扫一扫