（3）HTML&&CSS笔记（盒子模型）_html的盒子单词-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaoma_666/article/details/97180233

1、盒子模型（Box Model）
所有的HTML元素可以看做盒子，在css中，“box model”这一术语是用来设计和布局时使用。
css盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充和实际内容。
盒模型允许我们在其他元素和周围元素边框之间的空间放置元素。
如下图：
在这里插入图片描述
不同部分说明：
Margin（外边距）- 清除边框外的区域，外边距是透明的。
Border（边框）- 围绕在内边距和内容外的边框。
Padding（内边框）- 清除内容周围的区域，内边距是透明的。
Content（内容）- 盒子的内容，显示文本和图像。

border-style：
solid 实线
dotted 点线
dashed 虚线
double 双实线
border-width：边框大小
border-color：边框颜色

<!doctype html>
<html>
	<head>
		<meta charset='utf-8'/>
		<title> Document </title>
		<meta name='keywords' content=''/>
		<meta name='description' content=''/>
		<style type="text/css">
			div{
				width:100px;
				height:100px;
				background-color:pink;
				margin-bottom:5px;
			}
			.mydiv1{
				border:5px solid red;/* 边框的大小 边框的样式 边框的颜色 */
				border-top:10px solid green;/* 上边框 */
				border-top-width:20px;
				border-top-color:#f0f;
				border-top-style:double;
			}
			.mydiv2{
				border:5px dotted red;
				border-right:10px solid deeppink;/* 右边框线 */
			}
			.mydiv3{
				border:5px dashed red;
				border-bottom:15px solid gray;/* 下边框线 */
			}
			.mydiv4{
				border:5px double red;
				border-left:20px double #ff0;/* 左边框线 */
			}
		</style>
	</head>
	<body>
		<div class="mydiv1"></div>
		<div class="mydiv2"></div>
		<div class="mydiv3"></div>
		<div class="mydiv4"></div>
	</body>
</html>

2、制作一个小三角形

<!doctype html><!-- 声明文档类型 html5版本 具有向下兼容低版本的功能  -->
<html>
	<head><!--头部 : 不可视区域：看不到的内容 -->
		<meta charset='utf-8'/>
		<!-- 网页的三要素：标题 ，关键词 ，描述-->
		<title> Document </title>
		<meta name='keywords' content=''/><!-- 元标签 -->
		<meta name='description' content=''/>
		<style type="text/css">
		#mydiv{
			width:0px;
			height:0px;
			border:50px solid red;
			border-top-color:red;
			border-right-color:pink;
			border-bottom-color:purple;
			border-left-color:#0f0;
			/* background-color:#f0f; */
			margin-bottom:5px;
			/*
			border-bottom-width:0;
			border-left-width:0;
			border-right-width:0;
			*/
			border-right-color:transparent;
			border-bottom-color:transparent;
			border-left-color:transparent;
			transition-duration:2s;/* 过度时间 */
			border-bottom-width:0;
		}
		div:hover{
			transform:rotate(180deg);/* 旋转180deg */
		}
		</style>
	</head>
	<body>
		<div id="mydiv"></div>
	</body>
</html>

3、颜色
（1）英文单词：yellow，red，pink，black，deepink
（2）十六进制：1234567890abcdef
（3）rgb:
r:red 红色
g:green 绿色
b:blue 蓝色
取值情况：0-255
（4）rgba:
rgb
a:Alpha 透明度
取值在 0-1
0 是完全透明
1 是完全不透明

4、外边距
margin：外边距（盒子以外的距离）

margin-top:25px;  /* 上外边距 */
margin-right:0px;  /* 右外边距 */
margin-bottom:75px;  /* 下外边距 */
margin-left:100px;  /* 左外边距 */

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

5、内边距
padding：内边距（盒子以内与content内容之间的距离为内边距）
padding属性写法与margin写法一样！

6、盒子居中

<!doctype html>
<html>
	<head>
		<meta charset='utf-8'/>
		<title> Document </title>
		<meta name='keywords' content=''/>
		<meta name='description' content=''/>
		<style type="text/css">
			#mydiv{
				width:100px;
				height:100px;
				border:5px solid #00f;
				background-color:#f00;
				margin:100px auto 0;  /* 上  左右  下 */
				margin:auto auto;  /* 自动居中 */
			}
		</style>
	</head>
	<body>
		<div class="mydiv"></div>
	</body>
</html>

7、盒子组成部分
标准盒模型（content-box）：
盒子的组成部分：width + height + padding + border
盒子的总宽度：width(盒子本身的宽度) + padding-left + padding-right + border-left + border-right
盒子的总高度：height(盒子本身的高度) + padding-top + padding-bottom + border-top + border-bottom

怪异盒子模型（border-box）：
规定的宽度与高度是总宽度与总高度
content：指盒子的宽度与高度（待求）
width（总）= 300
300 = width(content待求) + padding-left + padding-right + border-left + border-right

如下例子所示：
按照标准来测盒子的总宽度为：420 content=300
而怪异盒模型测出盒子的总宽度为：300 content=300 - 100 - 20 = 180

<!doctype html>
<html>
	<head>
		<meta charset='utf-8'/>
		<title> Document</title>
		<meta name='keywords' content=''/>
		<meta name='description' content=''/>
		<style type="text/css">
			#mydiv{
				width:300px;
				height:300px;
				border:10px solid #0f0;
				background-color:#0f0;
				margin:50px;
				padding:50px;
				box-sizing:content-box;  /* 盒子模型的解析模式 */
			}
			#mydiv1{
				width:300px;
				height:300px;
				border:10px solid #0f0;
				background-color:#0f0;
				margin:50px;
				box-sizing:border-box;  /* 盒子模型的解析模式 */
			}
		</style>
	</head>
	<body>
		<div id="mydiv"></div>
		<div id="mydiv1"></div>
	</body>
</html>