盒子模型样式
网页构成布局的元素均为矩形，那么是矩形宽高，边距等特性的表现可以被抽象的理解为一个盒子；
盒子与盒子之间的关系：
1.盒子的大小可能不一样
2.盒子与盒子之间的间隔可能不一样
3.大盒子里面放小盒子，小盒子位置不确定
4.盒子边缘的厚度可能有厚有薄
所以实际上总的来说，网页元素在组成一个结构的时候追主要的就是如下四个区域与样式：
1.center–元素的宽高（width/height）
2.padding–元素的内边距（pading）
3.border–元素的边框(border)
4.margin–元素的外边距(maigin)
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>盒子概述</title>
<meta name="descrption" content="">
<meta name="keywords" content="">
<style type="text/css">
p{
border:1px solid red; /* 设置一个盒子 */
width:50%;
height:50%; /* 设置盒子的宽度和高度 */
}
.one{
border:10px dashed red;
border-radius:50%; /* 设置圆边框时，必须先设置一个其他样式的边框，并且边框的宽和高一定要一致，这样就可以设置百分比为50% */
width:200px;
height:200px;
}
.two{
border:3px dashed black; /* 边框 */
width:400px; /* 调整内容边框宽和高的大小 */
height:200px;
/* 内边距 padding
*/
padding-left:20px; /* 左边距 */
padding-right:20px; /* 右边距 */
padding-top:20px; /* 上边距 */
padding-bottom:20px; /* 下边距 */ /* 只写一个padding默认为四个边距都是这个值 */
}
span{
border:2px solid red;
}
.three{
width:200px;
height:200px;
border:3px solid green;
/* padding:20px; */
margin-bottom:20px; /* 下方外边距 */
}
.four{
width:200px;
height:100px;
border:2px solid red;
padding:20px;
}
</style>
</head>
<body>
<p>盒子概述</p>
<div class="one">
<p>父元素是div</p>
</div>
<!--
盒子模型：元素在网页当中的大小，边距相关的样式
1.宽度和高度
width（宽度）
height（高度）
px(像素值，不是一个长度单位)
%相对于父元素的百分比（可能会有嵌套）（50%）
2.元素与元素之间的距离
3.元素的内容与元素之间的距离
内边距：padding 元素与内容（文字，子元素） 内容大小的高和宽不会改变，高或宽会变大 使用内边距，会使该元素的高和宽变大
padding:20px; 复合样式 四个方向值一致：
padding-left:20px; 左边距
padding-right:20px; 右边距
padding-top:20px; 上边距
padding-bottom:20px; 下边距
padding:20px 10px; 上下内边距为20px，左右内边距为10px
padding:20px 10px 30； 上 左右 下
padding:20px 10px 30 50； 上 左 下 右 顺时针
属性：属性值 属性值 属性值；（属性值中间有空格隔开的，都是复合样式）
边框：broder
复合属性：
border:1px solid red;(复合样式)
单独属性：
边框的粗细（border-width）：像素单位 1px 2px
边框的风格(border-style)：none无边框（默认值）solid实线 dashed虚线dotted点状线 double双实线
边框的颜色(border-color)：red , black , white , yellow , green , blue
按照方向去拆分(一个边一个边写)：
border-top:10px dashed blue;
border-left:10px dotted red;
border-bottom:10px double green;
border-right:10px dashed yellow;
方向和属性一块拆：
border-right-width:20px;
border-right-style:dashed;
border-right-color:red;
外边距：margin 元素与元素之间的距离（兄弟元素，父元素）
margin-bottom:20px; 下外边距
margin-top:20px; 上外边距
margin-right:20px; 右外边距
margin-left:20px; 左外边距
margin:10px 20px 10px 20px;上 左 右 下 （顺时针）
外边距与内边距区别：
-->
<div class="two">
<span>学习内边距</span>
</div>
<div class="three">
<span>学习外边距1</span><br />
<span>学习外边距2</span>
</div>
<div class="four">外边距</div>
</body>
</html>
效果图如下:
盒子上的知识点就是那么点东西，内容，内边距，边框，外边距，多加练习，掌握的会比较快一些。