Web全栈~07.标准盒子模型

最新推荐文章于 2023-10-02 10:05:05 发布

算法爱好者丶

最新推荐文章于 2023-10-02 10:05:05 发布

阅读量8.7k

点赞数 16

分类专栏： web 文章标签： css3 css html5

本文链接：https://blog.csdn.net/qq_41424688/article/details/112498700

版权

web 专栏收录该内容

39 篇文章 9 订阅

订阅专栏

Web基本教程~07.盒子模型

上一期

前言

所有 HTML 元素可以看作盒子，在 CSS 中，"box model"这一术语是用来设计和布局时使用。CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距（margin），边框（border），填充（padding），和实际内容（content）。

在这里插入图片描述

Margin(外边距) - 清除边框外的区域，外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

Content(内容) - 盒子的内容，显示文本和图像。

代码示例

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				width: 200px;
				height: 200px;
				background-color: #20C997;
				border: 15px solid #80BDFF;
				padding: 20px;
				margin: 30px;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

标准盒模型

根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的；即在标准模式下的盒模型，盒子实际内容（content）的width/height=我们设置的width/height;盒子总宽度/高度=width/height+padding+ border+margin。

内容区域（content）

Content 内容区域包含宽度（width）和高度（height）两个属性。块级元素默认宽度为 100%，行内元素默认宽度是由内容撑开，不管块级元素还是行内元素，默认高度都是由内容撑开。块级元素可以设置宽高属性，行内元素设置宽高属性不生效。宽度（width）和高度（height）可以取值为像素（px）和百分比（%）。

内边距（Padding）

CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。

单边内边距属性

在 CSS 中，它可以指定不同的侧面不同的填充

padding-top:25px; 
padding-bottom:25px; 
padding-right:50px;
padding-left:50px;

分别代表上内边距是 25px,右内边距是 50px,下内边距是 25px,左内边距是 50px

简写属性

为了缩短代码，它可以在一个属性中指定的所有填充属性。这就是所谓的简写属性。所有的填充属性的简写属性是 padding : Padding 属性，可以有一到四个值。

/*上填充为 25px 右填充为 50px 下填充为 75px 左填充为 100px*/
padding:25px 50px 75px 100px;

/*上填充为 25px 左右填充为 50px 下填充为 75px*/
padding:25px 50px 75px;

/*上下填充为 25px 左右填充为 50px*/
padding:25px 50px;

/*所有的填充都是 25px*/
padding:25px;

padding 实现导航条案例

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.nav>li{
				float: left;
				padding: 25px 35px; background-color: #1D1E22;
			}
			.nav a{
				color: #fff;
				font-size: 14px;
			}
		</style>
	</head>
	<body>
		<ul class="nav">
			<li><a href="#">推荐</a></li>
			<li><a href="#">热榜</a></li>
			<li><a href="#">要闻</a></li>
			<li><a href="#">小说</a></li>
			<li><a href="#">历史</a></li>
			<li><a href="#">科技</a></li>
			<li><a href="#">直播</a></li>
		</ul>
	</body>
</html>

边框（Border）

CSS 边框属性允许你指定一个元素边框的样式和颜色,边框样式属性指定要显示什么样的边界。

border-style 属性用来定义边框的样式,border-style 值,none: 默认无边框。

dotted: 定义一个点线边框,dashed: 定义一个虚线边框,solid: 定义实线边框,double: 定义两个边框。两个边框的宽度和 border-width 的值相同。

边框宽度

您可以通过 border-width 属性为边框指定宽度

.my{
	border-style:solid; 
	border-width:5px;
}

边框颜色

border-color 属性用于设置边框的颜色,border-color 单独使用是不起作用的，必须得先使用 border-style 来设置边框样式。

.my{
	border-style:solid; 
	border-color: red;
}

边框单独设置各边

在 CSS 中，可以指定不同的侧面不同的边框

p{
	border-style:dotted solid;
}

border-style 属性可以有 1-4 个值

/*上边框是 dotted 右边框是solid 底边框是double 左边框是 dashed*/
border-style:dotted solid double dashed;

/*上边框是 dotted 左、右边框是 solid 底边框是 double*/
border-style:dotted solid double;

/*上、底边框是 dotted 右、左边框是 solid*/
border-style:dotted solid;

/*（4）四面边框是 dotted*/
border-style:dotted;

边框简写属性

	border-width
	border-style (required)
	border-color

外边距（Margin）

CSS margin(外边距)属性定义元素周围的空间。

单边外边距属性代码示例

div{
	margin-top:100px; 
	margin-bottom:100px; 
	margin-right:50px; 
	margin-left:50px;
}

简写属性

/*上边距为 25px 右边距为 50px 下边距为 75px 左边距为 100px*/
margin:25px 50px 75px 100px;

/*上边距为 25px 左右边距为 50px 下边距为 75px*/
margin:25px 50px 75px;

/*上下边距为 25px 左右边距为 50px*/
margin:25px 50px;

/*所有的 4 个边距都是 25px*/
margin:25px;

margin 练习案例

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<style>
		.box{
			width: 1240px; 
			margin: 0 auto;
		}
		.box>div{ 
			width: 303px; 
			height: 375px;
			background-color: #20C997; 
			float: left;
			margin-bottom: 10px; 
			margin-right: 9px;
		}
		.box>div:nth-child(4n){ 
			margin-right: 0;
		}
	</style>
	</head>
	<body>
		<div class="box">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</body>
</html>

算法爱好者丶

关注

16
点赞
踩
0

收藏

觉得还不错? 一键收藏
33
评论
Web全栈~07.标准盒子模型

Web基本教程~07.盒子模型上一期前言       所有 HTML 元素可以看作盒子，在 CSS 中，"box model"这一术语是用来设计和布局时使用。CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距（margin），边框（border），填充（padding），和实际内容（content）。...
复制链接

扫一扫