一、基本结构
一个盒子由内容、内边距、边框、外边距组成。
二、具体显示
1、内容
width height
2、内边距
padding:内容到边框的距离
padding:10px;//四个内边距都是10px
padding:10px 20px;//上下内边距是10px 左右内边距是20px
padding:10px 20px 30px;//上内边距是10px 左右内边距是20px 下内边距是30px
padding: 10px 20px 30px 40px;//上内边距是10px 右内边距是20px 下内边距是30px 左内边距是40px
------------------------------------------------------------------------------------------------------------------------------------------------------------
padding-left padding-top padding-right padding-bottom
3、边框
border: 1px solid red;//边框宽度时1px 边框的形状是实线 边框的颜色是红色
border-1px;//边框宽度
border-style:solid;//边框的样式：实线（solid）虚线（dashed）圆点（dotted）双线（double）
border-color:red;//边框的颜色
----------------------------------------------------------------------------------
border-top:1px dashed red;//上边框
border-left:1px dotted red;//做边框
border-right:1px double red;//右边框
border-bottom:1px solid red;//下边框
------------------------------------------------------------------------------------
border-top-color:red;//上边框的颜色
------------------------------------------------------------------------------------
表格的边框
table{
border-collapse:collapse;//合并相邻边框
}
cellspacing:0;.//单元格间的距离
-----------------------------------------------------------------------------------------
css3新增属性
border-radius圆角弧度
10px;//四个角都是相同的弧度
50%；//百分数以width和hehight为参考的值
还有一个值、两个值、三个值、四个值的情况
border:0;//没有边框
4、外边距
margin:10px;//上下左右四个边框都是10px
margin-left margin-right margin-top margin-bottom
注意：margin:xxxpx auto;//可以让带有宽度的块级元素左右居中
---------------------------------------------------------------------------------------------------------------
三、有关边距的一些特性
1、居中
1》文字水平居中：text-align:center;(父元素的样式)
2》盒子水平居中：margin:10px auto;(盒子本身的样式)
3》图片居中（一般作为内容展示用图片，作为辅助作用的用作背景图）
img{margin:父盒子宽度的一半减去自身宽度的一半 父盒子高度的一半减去自身高度的一半}
或者
img{padding:同上}
背景图则是 父盒子{background-position:center center}
2、外边距合并问题
1》垂直分布的盒子，两个盒子的外边距以最大盒子的外边距为准，不会叠加
避免方法：以一个为准，不设置两个外边距
2》父元素无边框、上下内边距的情况下，父子元素的上外边距会合并(父元素的外边距塌陷问题)
避免方案：1、overflow:hidden;2、border:1px solid red; 2、padding:1px;
3、盒子尺寸计算
1》空间尺寸：width+padding+border+margin
内含实际尺寸:width+padding+border
注意：当盒子未设置宽度时，width为父元素的宽度减去自身的左右内边距
2》css3中的盒子模型
box-sizing:content-box;//以前的标准盒模型（width+padding+border）宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
box-sizing:border-box;//为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
4、内外边距的使用顺序
width padding margin