前端学习：盒子模型

real_laugh

已于 2022-02-17 17:16:21 修改

阅读量3k

点赞数

文章标签：前端学习 css

于 2022-02-17 16:57:15 首次发布

本文链接：https://blog.csdn.net/real_laugh/article/details/122986470

版权

盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容。

盒子的组成：border边框，content内容、padding内边距、margin外边距。

一、border可以设置元素的边框。边框由三部分组成：边框宽度(粗细)、边框样式、边框颜色。
注：边框会影响盒子实际大小，会额外增加盒子的实际大小。因此在测量盒子大小的时候，不量边框；或者测量时包含边框，再减去边框宽度。

border(-top/bottom/left/right)-width: 属性值; 定义边框粗细，单位是px
border(-top/bottom/left/right)-style: 属性值; 定义边框样式
border(-top/bottom/left/right)-color: 属性值; 定义边框颜色

border-style: 属性值;
属性值有：

属性值	描述
none	无轮廓。border-color将被忽略，border-width计算值为0，除非边框轮廓为图像，即border-image。
hidden	隐藏边框。IE7及以下尚不支持。
dotted	点状轮廓。IE6下显示为dashed效果。
dashed	虚线轮廓。
solid	实线轮廓。
double	双线轮廓。两条单线与其间隔的和等于指定的border-width值。
groove	3D凹槽轮廓。
ridge	3D凸槽轮廓。
inset	3D凹边轮廓。
outset	3D凸边轮廓。

边框的复合写法：border(-top/bottom/left/right): border-width属性值 border-style属性值 border-color属性值; (没有顺序，各属性值间用空格隔开)

border-collapse属性(表格细边框)控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
语法：
border-collapse: collapse;
在设置表格中各个单元格的边框时，由于两个单元格会紧挨着，导致边框粗细叠加，因此需要用该属性解决此类问题。

二、padding可以设置内边距，即边框与内容之间的距离。
注：padding影响盒子实际大小。但当盒子本身没有指定宽度和高度，则padding不会撑开盒子大小。
padding(-top/left/bottom/right): 属性值;
内边距的复合写法：
padding: 数值1; 代表上下左右都有数值1大小的内边距。
padding: 数值1 数值2; 代表上下内边距大小是数值1，左右内边距大小是数值2。
padding: 数值1 数值2 数值3; 代表上内边距大小是数值1，左右内边距大小是数值2，下内边距大小是数值3。
padding: 数值1 数值2 数值3 数值4; 代表上是数值1，右是数值2，下是数值3，左是数值4。

三、margin可以设置外边距，即控制盒子和盒子之间的距离。

margin(-top/left/bottom/right): 属性值;
外边距的复合写法与内边距的一样。
外边距的典型应用：
实现块级盒子水平居中。必须满足两个条件，盒子必须指定了宽度；盒子左右外边距必须都设置为auto。
行内元素和行内块元素水平居中：在父类元素中添加text-align: center即可。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块级盒子水平居中对齐</title>
    <style>
        .header {
            width: 900px;
            height: 200px;
            background-color: pink;
            /* 左右外边距设置为auto实现块级盒子水平居中 */
            margin: 100px auto;
            /* 实现行内元素以及行内块元素水平居中 */
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="header">
        <span>行内元素如何居中？</span>
    </div>
    <div class="header">
        <img src="8.image/2.png" alt="">
    </div>
</body>

</html>

相邻块元素外边距会出现垂直外边距合并现象：就是上面的块元素有下边距，下面的块元素有上边距，则他们之间的垂直间距不是两者之和，而是取两个值中的较大者。
解决方案：尽量只给一个盒子添加外边距。
对于两个嵌套关系(父子关系)的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方案：可以为父元素定义上边框；可以为父元素定义上内边距；可以为父元素添加overflow: hidden。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外边距合并</title>
    <style>
        .num1 div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .one {
            margin-bottom: 20px;
        }

        /* one的下边距为20px，two的上边距为10px，最终两个块级之间不是两者之和，而是取较大的20px */
        .two {
            margin-top: 10px;
            margin-bottom: 20px;
        }

        .father {
            width: 400px;
            height: 400px;
            background-color: purple;
            margin-top: 50px;
            /* 为父元素定义上边框 */
            /* border: 1px solid transparent; */
            /* 为父元素定义内边距 */
            /* padding: 1px; */
            /* 为父元素添加overflow: hidden; */
            overflow: hidden;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 父元素上外边距为50px，子元素上外边距为100px，此时会发生塌陷，父元素的上外边距也为100px */
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div class="num1">
        <div class="one"></div>
        <div class="two"></div>
    </div>

    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此在布局前，首先要清除网页元素的内外边距。
* {
padding: 0;
margin: 0;
}

CSS3盒子模型：CSS3种可以通过box-sizing来指定盒子模型，有两个值：即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。分为两种情况：
1. box-sizing: content-box 盒子大小为width+padding+border(默认)。
2. box-sizing: border-box 盒子大小为width。

real_laugh

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
前端学习：盒子模型

盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容。盒子的组成：border边框，content内容、padding内边距、margin外边距。一、border可以设置元素的边框。边框由三部分组成：边框宽度(粗细)、边框样式、边框颜色。注：边框会影响盒子实际大小，会额外增加盒子的实际大小。因此在测量盒子大小的时候，不量边框；或者测量时包含边框，再减去边...
复制链接

扫一扫