CSS盒子模型

最新推荐文章于 2024-03-18 20:32:46 发布

从未止步..

最新推荐文章于 2024-03-18 20:32:46 发布

阅读量1k

点赞数 3

分类专栏： Javaweb基础~ 文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_64365419/article/details/128147877

版权

Javaweb基础~ 专栏收录该内容

14 篇文章 10 订阅

订阅专栏

网页布局过程：

1：准备好相关的网页元素，也就是大大小小的盒子

2：利用CSS设置好盒子样式，将对不同的盒子摆放到对应的位置

3：将内容填充到对应的盒子中

盒子模型：

将html页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

CSS盒子模型本质上是一个盒子，封装周围的html元素，它包括：边框，外边距，内边距，和文字内容

如下图所示：

在这里插入图片描述

边框：

border可以设置元素的边框，边框由三部分组成：边框宽度(粗细),边框样式，边框颜色

语法:

border：border-width||border-style||border-color

在这里插入图片描述举例：

    <style>
        div {
            border-width: 5px;
            border-color: blueviolet;
        }
    </style>
</head>

<body>
    <div>今天是2022年12月2日</div>
</body>

注意：类似于上述实例中的这种指定盒子模型的方法是不对的，没有指定盒子的样式，其他指定的颜色和宽度也不会被显示出来。

修改上述，将盒子的边框设置为实线型：

border-style: solid;

显示如下：

在这里插入图片描述 对于边框的样式CSS提供了非常多：

none: 默认无边框

dotted: 定义一个点线边框    常用

dashed: 定义一个虚线边框    常用

solid: 定义实线边框    常用

double: 定义两个边框。 两个边框的宽度和 border-width 的值相同

groove: 定义3D沟槽边框。效果取决于边框的颜色值

ridge: 定义3D脊边框。效果取决于边框的颜色值

inset:定义一个3D的嵌入边框。效果取决于边框的颜色值

outset: 定义一个3D突出边框。 效果取决于边框的颜色值

边框的复合属性：

我们之前学过字体的复合属性写法，这种写法在边框属性设置过程中，同样适用。

边框复合属性写法：

border：边框宽度[单位是px] 边框样式 边框颜色;

这三个的属性值是没有先后顺序的，无论谁在前都不会影响最终的显示效果。

边框单边的设置：

语法：

border-top:设置上边框
border-right:设置右边框
border-left: 设置左边框
border-bottom: 设置下边框

举例：

<head>
    <style>
        div {
           border-top:antiquewhite 10px solid;
           border-right:blueviolet 15px dashed;
           border-left: chartreuse 5px dotted;
           border-bottom: 20px fuchsia inset;
        }
    </style>
</head>

<body>
    <div>今天是2022年12月2日</div>
</body>

显示如下：

在这里插入图片描述

设置其中一条边框：该操作与层叠性有关

举例：

错误写法：

div {
           border-top:antiquewhite 10px solid;
           border:10px forestgreen dotted;
}

显示如下：

样式被覆盖。
在这里插入图片描述

正确写法：

将要设置的边框写在下面，这样才能避免被覆盖掉要设置的样式

div {
           border:10px forestgreen dotted;
           border-top:antiquewhite 10px solid;
}

显示如下：

在这里插入图片描述

设置表格的边框：

举例：

<head>
    <style>
        table{
            width: 500px;
            height: 249px;
        }
        table,td{
            border: 1px  solid greenyellow;
        }
    </style>
</head>
<body>
    <table align="center">
        <tr>
            <td></td>
            <td>周一</td>
            <td>周二</td>
            <td>周三</td>
        </tr>
        <tr>
            <td>早上</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>中午</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>晚上</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>

显示如下：

在这里插入图片描述在外观上，该表格基本达到了我们要设置的要求，但是仔细看，显示出来的单元格之间存在着空隙，那么我们怎么消除这种空隙呢？

这就要使用到border-collapse属性，它是用来控制浏览器绘制表格边框的方式，它控制相邻单元格的边框

语法：

border-collapse：collapse;//可将相邻边框合并在一起，产生1+1=1的效果

修改代码：

table,td{
            border: 1px  solid greenyellow;
            border-collapse: collapse;
}

显示如下：

在这里插入图片描述

边框会影响盒子实际的大小：

边框会额外增加盒子的实际大小：

举例：

下述实例，我们设置div盒子的宽度为500px,高度为180px，对此盒子，我们给予的边框为10px:

div{
            width: 500px;
            height: 180px;
            background-color: coral;
            border: 10px solid slateblue;
        }

通过调试工具测量该盒子的大小如下图所示，盒子的大小在初始设置的基础上还增加了边框的宽度。

在这里插入图片描述 因此，我们在测量盒子大小的时候，不需要去量边框，否则最终值会偏大，或者就是将边框也测量，最终使用width/height减去边框宽度

内边距(padding):

padding属性用于设置内边距，即边框与内容之间的距离：

在这里插入图片描述举例：

还是上述实例，我们给div增加两个属性的设置：

 div{
            width: 500px;
            height: 180px;
            background-color: coral;
            border: 10px solid slateblue;
            padding-left:10px ;
            padding-top: 10px;
 }

显示如下：

文字举例盒子的左边和上边的距离都是10px

在这里插入图片描述
为了简化代码的量，padding也可以进行简写模式，不过和前面所讲的关于border以及font的复合属性值写法略有不同。

padding属性（简写属性）可以有1到4个值：

在这里插入图片描述

padding也会影响盒子的实际大小：

前面我么说到边框会影响盒子的实际大小，同样的，内边距也会影响盒子的实际大小

上述实例中，设置了内边距为上下是5px，而左右边距是10px：

div{
            width: 500px;
            height: 180px;
            background-color: coral;
            border: solid slateblue;
           	padding:5px 10px;
        }

此时我们通过调试工具去查看盒子实际的大小会发现，它在设置的width和height的基础上，还增加了padding的大小。

在这里插入图片描述 注意:左右被设置为10px,盒子在增加的时候，增加的是2*10，因为既包含左内边距也包含右内边距，上下同样也是

那么盒子被加大的这种现象，我们需要解决吗？

当然需要，目前是少数的盒子显示在同一个页面上，好像看不出来有什么缺点，但是，当页面涉及的盒子多了，如果多个盒子被无限的放大，那么就很有可能导致盒子放不下等现象，但是为了美观，我们想保留盒子的内边距，那么解决方案只有调整盒子的width和height，使用设置了的值减去内边距，这样就可以保证效果的完美展示，注意在减的时候，不要只顾左不顾右，顾上不顾下，四个内边距都应该被考虑进去。

设置padding的优点：

虽然padding会影响盒子的大小，但这并不是一件绝对的坏事，例如：

在这里插入图片描述

在网页的导航栏位置，不同的导航条中的文字个数并不是相同的，如果设置相同的宽度就会因为盒子中文字数量的不同导致显示出来的效果将会有所差异，如何保证不同文字个数的盒子内容也能居中显示在盒子中呢？此时，我们就需要用到padding属性。

方法就是不需要设置盒子宽度，直接设置padding的大小即可

padding在某些情况下并不会影响盒子的大小：

如果盒子本身没有指定width/height属性，则此时padding不会影响盒子的大小

未指定宽度：

举例：

 div{
       height:300px;
       background-color: blueviolet;
      	padding: 10px;
      }

显示如下：
在这里插入图片描述
padding影响height属性的值，并未影响width的值，简单的说即为padding只影响设置了值的属性。

子元素并不会继承父元素的height属性：

举例：

<head>
    <style>
      div{
        width:300px;
        height:300px;
        background-color: blueviolet;
        padding: 10px;
      }
      div p{
        padding: 10px;
        background-color: bisque;
      }
      
    </style>
</head>
<body>
    <div><p></p></div>
</body>

显示如下：

在这里插入图片描述
我们并未给div的子元素p标签设置width和height，但是通过显示效果发现，它继承了父元素的width,但并未继承父元素的height。

外边距：margin

margin属性设置外边框，即控制盒子和盒子之间的距离。
在这里插入图片描述
举例：

<head>
    <style>
      div{
        width:200px;
        height:200px;
        background-color: aqua;
      }
      .one{
        margin-bottom: 20px;
        margin-left: 20px;
        margin-top: 20px;
        margin-right:20px;
      }
      
    </style>
</head>
<body>
    <div class="one">1</div>
    <div>2</div>
</body>

显示如下：

在这里插入图片描述
同样的margin也可以有简写方式，方法和padding相同，这里就不进行赘述了。

实现让块级盒子水平居中：

我们可通过设置外边距让块级盒子水平居中，但是必须满足两个条件：

1：盒子必须指定宽度(width)

2:盒子左右的外边距都设置为auto

常见的写法有以下三种：

第一种：最推荐！！！

 margin: 0 auto;//上下外边距为0，左右auto

第二种：

 margin: auto;//上下左右均为auto

第三种：

margin-left: auto;
margin-right: auto;

举例：

将该盒子设置为举例页面上下100px,左右居中对齐

<head>
    <style>
      div{
        width:300px;
        margin: 100px auto;
        background-color: aquamarine;
      }
      
    </style>
</head>
<body>
    <div class="one">1</div>
</body>

显示如下：

在这里插入图片描述 注：上述方法是实现让块级元素水平居中，行内元素或者行内块元素如果想实现水平居中，那么只需要给它的父元素添加" text-align:"center" "即可

举例：

<head>
    <style>
      div{
        width:300px;
        margin: 100px auto;
        background-color: aquamarine;
      }
      span{
        width: 100px;
        background-color:blue;
      }
    </style>
</head>
<body>
    <div class="one">div
        <span>
            span
        </span>
    </div>
</body>

显示如下：

行内元素和行内块元素并未水平居中显示！
在这里插入图片描述
给父级元素添加text-align:“center”：

div{
        width:300px;
        margin: 100px auto;
        background-color: aquamarine;
        text-align: center;
      }

显示如下：
在这里插入图片描述

外边距合并：

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

相邻块元素垂直外边距的合并：

当上下相邻的两个块元素(兄弟关系)相遇时，如果上面的元素有下边距margin-bottom，下面的元素有上边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，取两个值中较大者这种现象被称为相邻块元素垂直外边距的合并。

杜绝这种现象的方法即为：尽量只给一个盒子添加margin值

在这里插入图片描述
举例：

准备两个颜色大小均不相同的盒子：

<head>
    <style>
        body {
            margin: 0;
        }

        .box1 {
            width: 200px;
            height: 200px;
            background-color:aqua;


        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color:blueviolet;


        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

两个盒子均为设置外边距的值，显示效果如下：

在这里插入图片描述
上下盒子都设置外边距，且下盒子的外边距值大于上盒子的，显示如下：

最终两盒子的距离为两者中的外边距较大值!

在这里插入图片描述 上盒子设有外边距，而下盒子未设置外边距：

在这里插入图片描述

嵌套块元素垂直外边距的塌陷：

对于两个嵌套关系(父子关系)的块元素，父元素有上外边距，同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
在这里插入图片描述

举例：

准备两个具有嵌套关系的盒子：

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        body {
            margin: 0;
        }

        .box1{
            width: 300px;
            height: 300px;
            background-color:aqua;


        }

        .span1 {
            width: 100px;
            height: 100px;
            background-color:blueviolet;


        }
    </style>
</head>

<body>
    <div class="box1"><div class="span1"></div></div>
    
</body>

</html>

父盒子和子盒子都未设置边距，显示如下：

我们可以看到这两个盒子都与网页的顶部紧紧相连。

在这里插入图片描述将父盒子的margin-top设置为：30px,此时父盒子带着它的子盒子整体相对于页面向下移动了30px，显示效果如下：

但此时子盒子的上部还是紧贴父盒子

在这里插入图片描述尝试通过设置子盒子的margin-top且设置子盒子的margin-top大于父盒子的margin-top，显示效果如下：

子盒子并未向下移动，而是父盒子和子盒子一起向下移动了些许距离，而这个距离即为父盒子和子盒子中margin-top中的较大值。

而这就被称为嵌套块元素垂直外边距的塌陷。

在这里插入图片描述

实现“”父子分离”：

为了解决上面这种“塌陷”的现象，有以下三种解决方案：

1：为父元素定义上边框：

注意：为了美观，这里我们将边框设置为transparent

.box1{
            width: 300px;
            height: 300px;
            border-top: 40px transparent solid;
            background-color:aqua;
 }

显示如下：

在这里插入图片描述 2：为父元素定义上内边距：

.box1{
            width: 300px;
            height: 300px;
           	padding-top: 20px;
            background-color:aqua;
}

显示如下：

在这里插入图片描述 3：为父元素添加overflow：hidden

 .box1{
        width: 300px;
        height: 300px;
        overflow: hidden;
        background-color:aqua;
    }

    .span1 {
        width: 100px;
        height: 100px;
        margin-top: 20px;
        background-color:blueviolet;


    }

显示如下：

在这里插入图片描述
小tips：虽然以上三种方法都能够解决“塌陷问题”，但是我们还是最推荐最后一种，因为前两种方法都会改变块级元素的大小，不建议使用，而最后一种方法并没有改变，因此是最推荐，也是最常用的。

清除内外边距：

网页元素有很多都带有默认的内外边距，而且不同的浏览器默认的值也不相同。

举例：
在这里插入图片描述

因此在进行网页布局之前，我们首先要清除网页元素的内外边距，语法：

*表示选择页面中的所有网页元素

<style>
        *{
            padding: 0;
            margin: 0;
        }
    </style>

显示如下：

在这里插入图片描述
行内元素为了顾忌兼容性，尽量只设置左右外边距，不要设置上下内外边距，但是转换为块级和行内块元素就可以进行设置了。

从未止步..

关注

3
点赞
踩
13

收藏

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

盒子模型：将html页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。CSS盒子模型本质上是一个盒子，封装周围的html元素，它包括：边框，外边距，内边距，和文字内容如下图所示：border可以设置元素的边框，边框由三部分组成：语法:举例：注意：类似于上述实例中的这种指定盒子模型的方法是不对的，没有指定盒子的样式，其他指定的颜色和宽度也不会被显示出来。修改上述，将盒子的边框设置为实线型：显示如下：对于边框的样式CSS提供了非常多：边框的复合属性：我们之前学过字体的复合属性写法，这种
复制链接

扫一扫