CSS盒子模型

最新推荐文章于 2020-12-29 08:42:00 发布

秃头的毛睿

最新推荐文章于 2020-12-29 08:42:00 发布

阅读量160

点赞数

本文链接：https://blog.csdn.net/weixin_45927758/article/details/108761742

版权

1.CSS盒子模型

2.盒子边框

width用来设置盒子的内容区宽度，height用来设置盒子内容区的高度

为盒子设置边框必须指定三个样式border-width是边框的宽度，border-color是边框的颜色，border-style是边框的样式

盒子的可见框大小由内容区，内边距和边框共同决定，border-width如果有4个数值，那么分别设置给上右下左，三个数值分别设置给上左右下，两个值分别设置给上下左右，一个值就是所有方向的值，其他两个属性类似，并且可以单独方向的设定。

我们还可以使用border属性把四个边框的样式设置完毕，没有顺序要求，但是这样只能指定四个边框的样式，但是我们可以通过border-xxx来分别指定每一个边框样式。

3.内边距

由padding属性来设置，内边距会影响盒子的可见框大小，元素的背景会延申到内边距，盒子的可见框宽度=border-left-width+padding-left-width+width+padding-left-width+border-left-width,盒子的可见高度类似计算。只能是正值。

4.外边距

外边距指的是当前盒子于其他盒子之间的距离，他不会影响盒子可见框的大小，而会影响到盒子的位置。通过margin属性来设置。margin值可以设置为一个负值，那么则会导致指定位置的边距向相反方向移动，比如左边为负值会导致盒子没入左侧等，值还可以设置为auto，如果只指定左外边距或右外边距为auto则会将此外边距设置为最大值，如果是垂直方向设置为auto，那么垂直外边距默认为0.如果将左外边距和右外边距同时设置为auto，那么会将两侧的外边距设置为相同的值，就可以使得元素自动的在父元素中水平居中，所以可以使用 margin:0 auto 来使得元素在父元素中水平居中

5.外边距的重叠

垂直外边距的重叠，在网页中垂直方向的相邻外边距会发生外边距的重叠，这种情况是指兄弟元素之间的相邻外边距会取最大值而不是取和，注意是相邻外边距，如果有其他元素使得两个元素分开，则不会重叠。而如果父子元素的外边距相邻了，那么子元素的外边距将会设置给父元素。

6.内联元素

不能设置width和height,但是可以设置水平竖直方向的内边距和边框，水平方向的内边距以及边框会影响布局，而竖直方向的则不会影响，会产生覆盖的效果。内联元素支持水平方向的外边距，但是不支持垂直方向的外边距，并且水平方向的外边距不会重叠，而是求和。

7.子父元素

子元素默认存在于父元素的内容区中，理论上讲子元素的最大可以等于父元素内容区大小，但是如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示。

overflow属性可以设置父元素如何处理溢出内容，visible是默认值，不会对溢出内容做处理，hidden是可以把隐藏内容给裁剪，不会显示，scroll会为父元素添加滚动条，通过滚动条来查看完整内容，但是这个值会使得无论元素是否溢出都会添加水平竖直滚动条，而auto这个值则会根据是否溢出来添加滚动条。

8.元素在文档流中的特点

块元素：

（1）块元素在文档流中会独占一行，块元素会自上向下排列

（2）块元素在文档流中默认宽度是父元素的100%

（3）当元素的宽度的值为auto时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度，以适应内边距

（4）块元素在文档流的高度默认被内容撑开

内联元素：

（1）内联元素在文档流中只占自身的大小，会默认从左到右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右

（2）在文档流中内联元素的高度和宽度默认都被内容撑开

9.盒模型的浮动

由于块元素在文档流中默认垂直排列，所以这三个div自上而下依次排开，我们可以使用float来使得盒子脱离文档流，none是默认值，元素默认在文档流中排列，left是使得元素立即脱离文档流，向页面的左侧浮动，right使得元素立即脱离文档流，向页面的右侧浮动。

当我们设置一个元素脱离文档流之后，它下边的元素会立即向上移动，而浮动的元素会尽量的向页面的左上或者右上漂浮，直到遇到父元素的边框或者其他的浮动元素。


<!DOCTYPE html>

<html lang="en">
<head>
    <!--meta标签还可以设置网页页面的元数据-->
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            float: right;
            background-color: blue;
        }
        .box2{
            width: 200px;
            height: 200px;
            float: right;
            background-color: blueviolet;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
    <script>
    </script>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

如下图，第二个盒子就遇到了第一个盒子而停了下来

如果浮动元素上边是一个没有浮动的元素，则浮动元素不会超过块元素。

<!DOCTYPE html>

<html lang="en">
<head>
    <!--meta标签还可以设置网页页面的元数据-->
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            /*float: right;*/
            background-color: blue;
        }
        .box2{
            width: 200px;
            height: 200px;
            float: right;
            background-color: blueviolet;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
    <script>
    </script>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

浮动的元素不会超过他上边的兄弟元素，最多一边齐

而且浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以通过浮动来设置文字环绕图片的效果


<!DOCTYPE html>

<html lang="en">
<head>
    <!--meta标签还可以设置网页页面的元数据-->
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 100px;
            /*float: right;*/
            float: left;
            background-color: blue;
        }
        .box2{
            height: 200px;
            /*float: left;*/
            background-color: blueviolet;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
    <script>
    </script>
</head>
<body>
    <div class="box1"></div>
    <p class="box2">在此前的人生途中，我总觉得自己将成为别的什么人，似乎总想去某个新的地方、开始新的生活、在那里获取新的人格。迄今为止不知重复了多少次。这在某种意义上是成长，在某种意义上类似改头换面。但不管怎样，我是想通过成为另一个自己来将自己从过去的自己所怀有的什么当中解放出来。我一心一意认认真真地这样求索不已，并且相信只要努力迟早会实现的。然而最终我想我哪里也未能抵达，无论如何我只能是我。我怀有的缺憾无论如何都依然如故。无论周围景物怎样变化，无论人们搭话的声音怎样不同，我也只能是一个不完整的人。我身上存在着永远一成不变的致命的缺憾，那缺憾带给我强烈的饥饿和干渴。这饥饿和干渴以前一直让我焦头烂额，以后恐怕也同样使我烦躁不安。因为在某种意义上缺憾本身即是我自身，这我心里明白。如果可能，现在我想为你而成为新的自己，这我应该是做得到的。可能并不容易，但努力下去，总还是可以获得新的自己的。不过老实说来，事情一旦发生一次，可能还要重蹈覆辙，可能还要同样伤害你，对你我无法做出任何保证。</p>
</body>
</html>

在文档流中，子元素的宽度默认占据父元素的全部，但是当元素设置浮动之后，会完全的脱离文档流，高度和宽度都是被内容撑开的。而且在内联元素开启浮动以后就会变成块元素，就可以随便设置宽度和高度了。

秃头的毛睿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS盒子模型

1.CSS盒子模型2.盒子边框width用来设置盒子的内容区宽度，height用来设置盒子内容区的高度为盒子设置边框必须指定三个样式border-width是边框的宽度，border-color是边框的颜色，border-style是边框的样式盒子的可见框大小由内容区，内边距和边框共同决定，border-width如果有4个数值，那么分别设置给上右下左，三个数值分别设置给上左右下，两个值分别设置给上下左右，一个值就是所有方向的值，其他两个属性类似，并且可以单独方向的设定。
复制链接

扫一扫