盒子模型

最新推荐文章于 2024-07-27 09:56:28 发布

qzc_root

最新推荐文章于 2024-07-27 09:56:28 发布

阅读量140

点赞数

本文链接：https://blog.csdn.net/qzc_root/article/details/112001371

版权

盒子模型的概念

css盒子模型又称框模型 (Box Model)，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素如图：
在这里插入图片描述
盒子模型的尺寸
元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度
元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值＋ border的上下宽度
代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				background-color: lightcyan;
				width: 300px;
				border: 25px solid green;
				padding: 25px;
				margin: 25px;
			}
		</style>
	</head>
	<body>
		<div>
			这是盒子内的实际内容。有25px内间距，25px外间距和25px绿色边框。
		</div>
	</body>
</html>

页面展示：
在这里插入图片描述
网页居中对齐：margin:0px auto;
网页居中对齐的条件：1、必须是块元素。2、拥有固定宽度。
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				margin: 0px auto;
				width: 300px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div>
			这是一个盒子
		</div>
	</body>
</html>

页面展示：
在这里插入图片描述

样式分类

字体样式

颜色color、大小size、粗细weight、字体family(宋体等)、风格styl(斜体、倾斜、正常等)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			span{
				font-family: "arial narrow";
				color: red;
				font-size: 16px;
				font-weight: bold;
				font-style: initial;
			}
		</style>
	</head>
	<body>
		<span>
			字体样式
		</span>
	</body>
</html>

页面展示：
在这里插入图片描述

背景样式

颜色、大小、透明度
css3的opacity:x，x 的取值从 0 到 1，如opacity: 0.8
css3的rgba(red, green, blue, alpha)，alpha的取值从 0 到 1，如rgba(255,255,255,0.8)

背景图片样式

大小、透明度、位置、重复次数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				opacity: 0.1;
				/* 5px 距昨  8px距上 */
				background: url(title_icon.gif) 5px 8px no-repeat;
				background-size: 100px;
			}
		</style>
	</head>
	<body>
	</body>
</html>

页面展示：
在这里插入图片描述

边框样式

风格、粗细、颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 300px;
				height: 300px;
				/* 颜色 风格 粗细 */
				border: #008000 dashed 1px;
			}
		</style>
	</head>
	<body>
		<div>
			
		</div>
	</body>
</html>

页面展示；
在这里插入图片描述

内外边距样式

大小、位置
外边距margin与内边距padding都有四个值，连写方式如margin：5px 10px 15px 20px；分别对应上右下左四边，内边距也是一样的写法。也可以分开来写如：margin-top、margin-right、margin-bottom、margin-left，内边距也是一样。

box-sizing

content-box:默认值，盒子的总尺度
border-box:盒子的宽度或高度等于元素内容的宽度或高度
inherit:元素继承父元素的盒子模型模式
主要看一下content-box和border-box的区别：
box-sizing: border-box;
在这里插入图片描述

border-radius

border-radius: 20px 10px 50px 30px; 四个属性值按顺时针排列
在这里插入图片描述

1、制作圆
制作圆形的两个要点：
元素的宽度和高度必须相同
圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 300px;
				height: 300px;
				border-radius: 50%;
				border: #008000 solid 1px;
			}
		</style>
	</head>
	<body>
		<div>
			
		</div>
	</body>
</html>

在这里插入图片描述
制作半圆
半圆形的两个要点：
制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值
制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 300px;
				height: 150px;
				border-radius: 150px 150px 0 0;
				border: #008000 solid 1px;
			}
		</style>
	</head>
	<body>
		<div>
		</div>
	</body>
</html>

在这里插入图片描述
制作特殊图形
利用border-radius属性制作扇形遵循“三同，一不同”原则
“三同”是元素宽度、高度、圆角半径相同
“一不同”是圆角取值位置不同

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 300px;
				height: 300px;
				border-radius: 300px 0 0 0;
				border: #008000 solid 1px;
			}
		</style>
	</head>
	<body>
		<div>
		</div>
	</body>
</html>

在这里插入图片描述

阴影 box-shadow

inset :阴影类型内阴影
x-offset:X轴位移，指定阴影水平位移量
y-offset:Y轴位移，用来指定阴影垂直位移量
blur-radius:阴影模糊半径阴影向外模糊的模糊范围
color:阴影颜色，定义绘制阴影时所使用的颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 300px;
				height: 300px;
				border: #000000;
				box-shadow: 0 5px 5px red, 0 0 10px 0 green;
			}
		</style>
	</head>
	<body>
		<div>
		</div>
	</body>
</html>