html/css——盒模型

一、盒模型
把html网页中的所有标签都当作一个盒子，通过盒子的内容（width宽、height高）、内边距（padding）、边框（border）、外边距（margin），来给每个盒子设置特定的样式属性。

1、盒模型的描述：
width和height：内容的宽度、高度 ( 指的是盒子的空间 )。
padding：内边距。
border：边框。
margin：外边距。
2、盒子的内容：
指盒子不算边框 边距的 空间 就是盒子的内容，用width、height来表示。
3、内边距 padding
a、使用方法一：
内边距padding 可以设置一个或者多个值 这种属性我们成为是复合属性

b、使用方法二：
四个方向的内边距可以单独设置
padding-left: 左边距
padding-right: 右边距
padding-top: 上边距
padding-bottom: 下边距
4、边框 border：
a、边框 border 为复合属性
border: red solid 20px;代表四个方向的边框都相同。
b、可以使用以下复合属性对边框进行设置：
border-left:red solid 20px; 左边框
border-right:red solid 20px; 右边框
border-top:red solid 20px; 上边框
border-bottom:red solid 20px; 下边框
c、边框border 以及四个方向的border-left border-top border-right border-bottom 都需要设置三个值 顺序 代表边框的 宽度 样式 颜色
每个方向单独可以设置
border-width:20px; 一个值 四个边的宽度
border-style:solid; 一个值 四个边的样式 实线 、虚线
border-color:#333; 一个值 四个边的颜色

可以设置不同方向的不同 样式 宽度 颜色

e、border-sytle属性常用取值：
none：定义无边框。
solid：定义实线。
dotted：定义点状边框。在大多数浏览器中呈现为实线。
dashed：定义虚线。在大多数浏览器中呈现为实线。
inherit：规定应该从父元素继承边框样式。
5、外边距 margin

与内边距padding类似，可参照。
二、盒模型的使用总结
A、标签自带的盒子模型：
1、 浏览器默认的margin值为8px！
2、 h1~h6标签 自带外边距
3、 p段落标签 自带一个 字体的 外边距
4、 button input 自带边框 内边距
5、 ul,ol,li dl,dt,dd,自带 内边距 外边距
B、盒子的大小
盒子的大小指的是盒子的宽度和高度。大多数容易将宽度和高度 误解为width和height属性，然而默认情况下width和height属性只是设置content（内容）部分的宽和高。盒子真正的宽和高按下面公式计算：
盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
盒子的宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距
盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
三、盒模型练习
1、编写一个三角形：

<div class="box"></div>

.box{
	width:0px;
	height:0px;
	border:50px solid green;
	border-top-color:transparent;
	border-left-color:transparent;
	border-right-color:transparent;
}

2、六边形相框

		<div class="box">
			<div class="box-1"></div>
			<div class="box-2"></div>
			<div class="box-3"></div>
		</div>

			.box-1,.box-3{
				margin:0 auto;
				width:0;
				height:0;
				border:100px solid white;
				border-top:50px solid yellow;
				border-bottom:50px solid yellow;

			}
			.box-1{
				border-top-color:white;
				border-bottom-color:transparent;
			}
			.box-3{
				border-bottom-color:white;
				border-top-color:transparent;
			}
			.box-2{
				width:200px;
				height:130px;
				background-color:transparent;
				margin:0 auto;
			}
			.box{
				width:200px;
				height:300px;
				background-image:url('img/h.jpg')
			
			}

3、心形

		<div class="box">
			<div class="box1"></div>
			<div class="box2"></div>
			<div class="box3"></div>
			<div class="box4"></div>
		</div>

			.box{
				width:400px;
				height:800px;
				margin:0 auto;
			}
			.box1,.box2,.box4 {
				width:0;
				height:0;
			}
			.box1,.box2{
				border:100px solid white;
				border-top:50px solid white;
				border-bottom:50px solid red;
				float:left;
			}
			.box3{
				width:400px;
				height:100px;
				background-color:red;
				float:left;
			}
			.box4{
				border:200px solid white;
				float:left;
				border-top:200px solid red;
			}