CSS 盒子模型第三节

最新推荐文章于 2022-09-26 21:29:51 发布

抹泪的知更鸟

最新推荐文章于 2022-09-26 21:29:51 发布

阅读量409

点赞数 1

分类专栏： HTML+CSS+JavaScript 文章标签： css3 前端 css

本文链接：https://blog.csdn.net/qq_51596354/article/details/121365790

版权

盒子模型

现代 Web 前端的布局设计简单说就是一堆盒子的排列与嵌套，掌握了盒子与它们的摆放控制，会发现再复杂的页面也不过如此。 
盒子是一个概念，也可以说是容器，可以在里面放置网页中需要显示的内容，文档中每一个元素都会产生一个盒子，盒子拥有很多属性，比如 width、height、padding、border 和 margin 等。

案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>盒子模型</title>
<style>
div {
     
    background-color: lightgrey;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}
</style>
</head>
<body>
<h2>盒子模型演示</h2>
<p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>
<div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div>
</body>
</html>

宽和高：width/height

这里讲的宽和高，指的是元素内容区域的宽和高，而不是盒子的实际宽度和高度。
元素的宽度指 width 的属性值，高度指 height 的属性值。属性值单位可以为长度单位或百分比，取值为正值。 
边框：border
任何元素都可以定义边框，并都能够很好地显示出来。边框在网页布局中就是用来分割模块的。可以为边框指定样式、颜色或宽度。宽度属性值可以指定长度值，比如 2px 或 0.l em 或者使用 3 个关键字(thin、 medium (默认值)和 thick)之一”。颜色可以省略，浏览器会根据默认值来解析。 当为元素各边框定义不同颜色时，边角会平分来划分颜色的分布。 
边框有 border、border-style、border-width、border-color、border-top、border-right、border-bottom、border-left 八种常用属性，如下所示：

border            简写属性，用于把针对四个边的属性设置在一个声明中
border-style      用于设置元素所有边框的样式，或者单独地为各边设置边框样式
border-width      简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度
border-color      简写属性，设置元素的所有边框中可见部分的颜色，或为四个边分别设置颜色
border-bottom     简写属性，用于把下边框的所有属性设置到一个声明中
border-left       简写属性，用于把左边框的所有属性设置到一个声明中
border-right      简写属性，用于把右边框的所有属性设置到一个声明中
border-top        简写属性，用于把上边框的所有属性设置到一个声明中

border-style 值：

dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。 效果取决于边框的颜色值

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .p1 {
     
            border: 8px solid #f00;
        }

        .p2 {
     
            border-top: green solid 5px;
            border-bottom: cornflowerblue solid 5px;
            border-left: greenyellow solid 5px;
            border-right: purple solid 5px;
        }

        .p3 {
     
            border-width: 14px;
            border-color: aqua;
            border-top-style: dotted;
            border-right-style: dashed;
            border-bottom-style: solid;
            border-left-style: double;
        }

        .p4 {
     
            border-color: aqua;
            border-width: 14px;
            border-top-style: groove;
            border-right-style: ridge;
            border-bottom-style: inset;
            border-left-style: outset;
        }
    </style>
</head>
<body>
<p class="p1">两个不同的边界样式</p>
<p class="p2">两个不同的边界样式</p>
<p class="p3">两个不同的边界样式</p>
<p class="p4">两个不同的边界样式</p>
</body>
</html>

外边距：margin

外边距相当于文档中的页边距，是元素边框边缘与相邻元素之间的距离，主要用来分割各种元素，设置元素之间的距离。
定义元素外边距使用 margin 属性，属性值单位可以为长度单位或百分比，取值可以为正值或负值。根据实际需要灵活地设置元素的 margin 值可以实现各种复杂的网页布局。同时外边距还有专门设置某一方向上外边距的属性：margin-top、magin-right、margin-bottom、margin-left 四种属性，关于外边距的属性说明如下所示。

margin            在一个声明中设置所有外边距属性
margin-bottom     设置元素的下外边距
margin-left       设置元素的左外边距
margin-right      设置元素的右外边距
margin-top        设置元素的上外边距

下面的声明在 h1 元素的各个边上设置了1/4 英寸宽的空白。

h1{margin:0.25in;}

下面的例子为 h1 元素的四个边分别定义了不同的外边距，所使用的长度单位是像素(px)。这些值的顺序是从上外边距(top) 开始围着元素顺时针旋转计算的。

h1 {margin : 10px 0px 15px 5px;}

另外，还可以为 margin 设置一个百分比数值。百分比数是相对于父元素的 width 计算的。下面这个例子为 p 元素设置的外边距是其父元素的 width 的 10%。

p {margin : 10%;}

简写规则：

在 Web 前端开发中，有时需要输入一些重复的值，如下所示:

p {margin: 0.5em 1em 0.5em 1em;}

这种情况下可以使用值复制，不必重复地键入相同的数字。上面的规则与下面的规则是等价的。

p {margin: 0.5em lem;}

规则如下

如果为外边距指定了 3 个值，则第 4 个值(即左外边距)会从第 2 个值(右外边距)复制得到。

如果给定了 2 个值，第 4 个值会从第 2 个值复制得到，第 3 个值(下外边距)会从第 1 个值(上外边距)复制得到。

如果只给定一个值，那么其他 3 个外边距都由这个值(上外边距)复制得到。

案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>margin测试</title> 
<style>
p {
     
    background-color:yellow;
}
p.margin {
     
    margin:100px 50px;
}
</style>
</head>
<body>
<p>这是一个没有指定边距大小的段落。</p>
<p class="margin">这是一个指定边距大小的段落。</p>
</body>
</html>

外边距合并：

外边距合并（叠加）是一个相对简单的概念。但是在对网页进行布局时，会造成许多混淆。

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并，如图所示。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KL4WctdL-1637069005808)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20211113183214528.png)]

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和下外边距，或者上边距，或者下边距也会发生合并，如图所示。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ARGeVLfq-1637069005822)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20211113183231462.png)]

尽管看上去有些奇怪，但是外边距甚至可以与自身发生合并。

假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并，如图所示。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5fV4xdPZ-1637069005825)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20211113183301806.png)]

如果空元素外边距遇到另一个元素的外边距，也会发生合并，如图所示。这就是一系列的。段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。

解决上面描述的外边距合并问题行之有效的办法是合理的利用内边距与外边距组合使用，因为外边距和内边距不会合并。

注意：

1、只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

2、当为行内元素（节元素 span、a）定义外边距时，只能看到左右外边距对布局的影响，但是上下外边距犹如不存在一般，不会对周围元素产生影响。对于块级元素来说，外边距都能够很好地被解析，如 div 。

练习：按照设计图完成编码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8HQYxwBf-1637069005828)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20211113183357838.png)]

参考代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>盒子模型</title>
    <style>
        #box1 {
     
            width: 500px;
            height: 300px;
            background: pink;
            margin: 40px auto;
        }

        #box2 {
     
            width: 450px;
            height: 270px;
            background: turquoise;
            margin: 0 auto;
        }

        #box3 {
     
            width: 400px;
            height: 240px;
            background: burlywood;
            margin: 0 auto;
        }

        #box4 {
     
            width: 350px;
            height: 210px;
            margin: 0 auto;
            background: chartreuse;
        }

        #box5 {
     
            width: 300px;
            height: 180px;
            margin: 0 auto;
            background: cyan;
        }

        #box6 {
     
            width: 250px;
            height: 150px;
            margin: 0 auto;
            background: cornflowerblue;
            text-align: center;
            line-height: 150px;
            color: white;
            font-size: 40px;
        }
    </style>
</head>
<body>
<div id="box1">
    <div id="box2">
        <div id="box3">
            <div id="box4">
                <div id="box5">
                    <div id="box6">爱我中华</div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

内边距：padding

内边距就是元素包含的内容与元素边框内边沿之间的距离。定义内边距使用 padding 属性，属性值单位可以为长度单位或百分比，取值可以为正值，但不允许使用负数值。内边距有 padding、padding-top、padding-right、padding-bottom、padding-left 五种属性，如下所示：

padding                在一个声明中设置所有内边距属性
padding-bottom         设置元素的下内边距
padding-left           设置元素的左内边距
padding-right          设置元素的右内边距
padding-top            设置元素的上内边距

如果希望所有 h1 元素的各边都有 10 像素的内边距，代码如下所示:

h1 {padding; 10px;}

还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值。

h1 {padding: 10px 0.25em 2px 20%;}

也可通过使用单边内边距属性，分别设置上、右、下、左内边距，实现的效果与上面的简写规则是完全相同的。

h1 { 
    padding-top: 10px; 
    padding-right: 0.25em; 
    padding-bottom: 2px; 
    padding-left: 20%; 
}

注意：

1.百分数值是相对于其父元素的 width 计算的，这一点与外边距一样。所以，如果父元素的 width 改变，它们也会改变。

2.上下内边距与左右内边距参照一致，即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。

内边距与外边距差异

	当元素没有定义边框时，可以把内边距当作外边距来使用，用来调节元素与其他元素之间的距离。由于外边距相邻时会出现重叠现象，而且比较复杂，使用内边距来调节元素之间的距离往往不用考虑边距重叠的问题。
    当为元素定义背景时，对于外边距区域来说，背景图像是不显示的，它永远表现为透明状态：而内边距区域却可以显示背景。 
    行内元素的内边距能够影响元素的高度，而外边距不存在这样的问题。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {
     
            margin: 0;
            padding: 0;
        }

        h1 {
     
            margin-top: 20px;
            padding: 10px;
            width: 500px;
            height: 200px;
            background: aqua;
        }

        span {
     
            padding: 20px;
            background: gray;
        }
    </style>
</head>
<body>
<h1>H1</h1>
<span>span

最低0.47元/天解锁文章

抹泪的知更鸟

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS 盒子模型第三节

盒子模型盒子模型现代 Web 前端的布局设计简单说就是一堆盒子的排列与嵌套，掌握了盒子与它们的摆放控制，会发现再复杂的页面也不过如此。盒子是一个概念，也可以说是容器，可以在里面放置网页中需要显示的内容，文档中每一个元素都会产生一个盒子，盒子拥有很多属性，比如 width、height、padding、border 和 margin 等。案例：<!DOCTYPE html><html><head><meta charset="utf-8">
复制链接

扫一扫