前端学习笔记（HTML&CSS）（06）CSS盒子模型

最新推荐文章于 2024-08-02 22:01:24 发布

十安

最新推荐文章于 2024-08-02 22:01:24 发布

阅读量133

点赞数

分类专栏： HTML&CSS

本文链接：https://blog.csdn.net/weixin_44263871/article/details/105987292

版权

HTML&CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

前端学习笔记（HTML&CSS）（06）

CSS盒子模型（Box Model）

盒子模型（Box Model）简介

CSS将页面中的所有元素都设置为了一个矩形的盒子
将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置
每一个盒子都由一下几个部分组成：
内容区（content）
内边距（padding）
边框（border）
外边距（margin）

<head>
	<style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }
    </style>
</head>
<body>
   <div class="box1"></div>
</body>

盒子模型_边框

边框

边框的宽度 border-width
边框的颜色 border-color
边框的样式 border-style

border-width可以用来指定四个方向的边框的宽度
值的情况

四个值：上右下左
三个值：上左右下
两个值：上下左右
一个值：上下左右

border-style 指定边框的样式

solid 表示实线
dotted 点状虚线
dashed 虚线
double 双线

本例演示如何设置四边框样式。

<html>
<head>
<style type="text/css">
p.dotted {border-style: dotted}
p.dashed {border-style: dashed}
p.solid {border-style: solid}
p.double {border-style: double}
p.groove {border-style: groove}
p.ridge {border-style: ridge}
p.inset {border-style: inset}
p.outset {border-style: outset}
</style>
</head>

<body>
<p class="dotted">A dotted border</p>
<p class="dashed">A dashed border</p>
<p class="solid">A solid border</p>
<p class="double">A double border</p>
<p class="groove">A groove border</p>
<p class="ridge">A ridge border</p>
<p class="inset">An inset border</p>
<p class="outset">An outset border</p>
</body>

</html>

在这里插入图片描述
本例演示如何在元素的各边设置不同的边框。

<html>
<head>
<style type="text/css">
p.soliddouble {border-style: solid double}
p.doublesolid {border-style: double solid}
p.groovedouble {border-style: groove double}
p.three {border-style: solid double groove}
</style>
</head>

<body>
<p class="soliddouble">Some text</p>
<p class="doublesolid">Some text</p>
<p class="groovedouble">Some text</p>
<p class="three">Some text</p>
</body>

</html>

在这里插入图片描述

盒子模型_内边距

内边距（padding）
内容区和边框之间的距离是内边距,一共有四个方向的内边距：

padding-top
padding-right
padding-bottom
padding-left

本例演示使用简写属性将所有的内边距属性设置于一个声明中，可以有一到四个值。

<html>
	<head>
		<style type="text/css">
			td.test1 {padding: 1.5cm}
			td.test2 {padding: 0.5cm 2.5cm}
		</style>
	</head>

	<body>
		<table border="1">
		<tr>
			<td class="test1">
				这个表格单元的每个边拥有相等的内边距。
			</td>
		</tr>
		</table>
	<br />
		<table border="1">
			<tr>
				<td class="test2">
				这个表格单元的上和下内边距是 0.5cm，左和右内边距是 2.5cm。
				</td>
			</tr>
		</table>
	</body>
</html>

在这里插入图片描述

盒子模型_外边距

外边距（margin）

外边距不会影响盒子可见框的大小
但是外边距会影响盒子的位置
一共有四个方向的外边距：

margin-top - 上外边距，设置一个正值，元素会向下移动
margin-right - 默认情况下设置margin-right不会产生任何效果
margin-bottom - 下外边距，设置一个正值，其下边的元素会向下移动
margin-left - 左外边距，设置一个正值，元素会向右移动

本例演示如何将所有的外边距属性设置于一个声明中。

<html>
	<head>
		<style type="text/css">
			p.margin {margin: 2cm 4cm 3cm 4cm}
		</style>
	</head>
	<body>
		<p>这个段落没有指定外边距。</p>
		<p class="margin">这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。</p>
		<p>这个段落没有指定外边距。</p>
	</body>
</html>

在这里插入图片描述

盒子模型_外边距合并(摘自W3school)

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

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

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。

尽管看上去有些奇怪，但是外边距甚至可以与自身发生合并。
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：

如果这个外边距遇到另一个元素的外边距，它还会发生合并：

这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。

外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。
在这里插入图片描述