css —— 框模型（w3school学习笔记）

最新推荐文章于 2023-10-10 22:21:06 发布

晚点喝可乐z

最新推荐文章于 2023-10-10 22:21:06 发布

阅读量253

点赞数

分类专栏： css 文章标签：框模型

本文链接：https://blog.csdn.net/qq_41949320/article/details/89314985

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS 框模型 (Box Model)

css框模型是针对块标签而言的
在这里插入图片描述
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
提示：背景应用于由内容和内边距、边框组成的区域。

1、内边距（padding）

padding 属性定义元素的内边距。padding 属性接受长度值或百分比值（百分数值是相对于其父元素的 width 计算的），但不允许使用负值。

设置内边距的方式：
1，h1 {padding: 10px;}
2、h1 {padding: 10px 0.25em 2ex 20%;}
3、h1{padding: 0.5cm 2.5cm}
4、h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
示例：

<html>
<head>
	<style type="text/css">
		td.test1 {padding: 1.5cm}
		td.test2 {padding: 0.5cm 2.5cm}
		td.text3 {padding-bottom: 2cm}
	</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>
<br/>

<table border="1">
	<tr>
		<td class="text3">
			这个表格单元拥有下内边距。
		</td>
	</tr>
</table>


</body>

</html>

在这里插入图片描述

2、外边距(margin)

外边距可以参考内边距

*值复制（顺时针方向）

如果缺少左外边距的值，则使用右外边距的值。
如果缺少下外边距的值，则使用上外边距的值。
如果缺少右外边距的值，则使用上外边距的值。
下图提供了更直观的方法来了解这一点：
在这里插入图片描述

<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>

在这里插入图片描述

3，边框（border）

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。
CSS border 属性允许你规定元素边框的样式、宽度和颜色。

<html>
<head>
	<style type="text/css">
		p.h1{
			border: medium double rgb(250,0,255)
		}
		
		/*thin,medium,thick 细、中等、粗*/
		p.h2{
			border-style: dotted
		}
		
		p.h3{
			border-style: solid;
			border-width: 5px 10px 1px medium
		}
		
		p.h4{
			border-style:solid;
			border-left:thick double #ff0000;
		}
		
		p.h5{
			border-style: solid;
			border-left-color: #ff0000
		}

	</style>
</head>

<body>

	<p class="h1">Some text</p>
	<p class="h2">Some text</p>
	<p class="h3">Some text</p>

	<p><b>注释：</b>"border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p>

	<p class="h4">Some text</p>
	<p class="h5">Some text</p>

</body>

</html>

none : 无边框。与任何指定的border-width值无关
hidden : 隐藏边框。IE不支持
dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
solid : 实线边框
double :双线边框。两条单线与其间隔的和等于指定的border-width值
groove : 根据border-color的值画3D凹槽
ridge: 根据border-color的值画菱形边框
inset : 根据border-color的值画3D凹边
outset :根据border-color的值画3D凸边

在这里插入图片描述