1.盒子模型

在"CSS盒子模型"理论中，页面中的所有元素都可以看成一个盒子，并且占据着一定的页面空间。 每个元素都看成一个盒子，盒子模型是由四个属性组成的：content（内容）、padding（内边距）、margin（外边距）和border（边框）。此外，在盒子模型中，还有宽度width和高度height两大辅助性属性

1.1盒子组成部分1.1盒子组成部分

content  ==  内容，可以是文本或图片
padding  ==  内边距，用于定义内容与边框之间的距离
margin  ==  外边距，用于定义当前元素与其他元素之间的距离
border  ==  边框，用于定义元素的边框

1.2边框样式

在浏览网页过程中，边框样式随处可见。几乎所有的元素都可以定义边框。例如，div元素可以定义边框，img元素可以定义边框，table元素可以定义边框，span元素同样也可以定义边框

边框样式属性

border-width  ==  border-width
border-style  ==  边框的外观    （none（无样式）、dashed(虚线)、solid(实线)、double(双线)）
border-color  ==  边框的颜色  
border-radius  ==  圆角效果
box-shadow  ==  边框阴影 
border-colors  ==  多色边框
border-image  ==  边框背景

简写形式：border: 1px solid red;

说明：只有块元素才可以设置width和height，行内元素是无法设置width和height的。 要是没有给块元素设置width，那么块元素就会延伸到整一行

1.2.1圆角效果：border-radius

使用border-radius属性为元素添加圆角效果

语法：

设置一个值：表示4个角半径都是值1 设置两个值：表示左上角和右下角的圆角半径是值1，右上角和左下角的圆角半径都是值2 设置三个值：表示左上角的圆角半径是值1，左下角和右上角的圆角半径都是值2，右下角圆角半径是值3 设置四个值：表示左上角、右上角、右下角和左下角的圆角半径，依次是值1、值2、值3、值4 说明：border-radius属性取值是一个长度值，单位可以是px、em和百分比

1.2.2内边距:padding

内边距padding，又常常被称为"补白"，它指的是内容区到边框之间的那一部分，内边距都是在边框内部的 padding的局部样式

内边距分为4个方向：padding-top、padding-right、padding-bottom、padding-left 语法：

padding-top: 像素值;
padding-right: 像素值;
padding-bottom: 像素值;
padding-left: 像素值;

1.2.3外边距:margin

外边距margin，指的是边框到"父元素"或"兄弟元素"之间的那一部分。外边距是在元素边框的外部的 外边距分为4个方向：margin-top、margin-right、margin-bottom、margin-left

语法：

margin-top: 像素值;
margin-right: 像素值;
margin-bottom: 像素值;
margin-left: 像素值;

2.溢出:overflow

verflow属性来定义内容超出元素大小时应该如何处理

属性值：

visible  ==  可见，内容超出时，不剪切内容，也不添加滚动条
hidden   ==  隐藏，内容超出时，剪切内容，但只显示y轴滚动条而不显示x轴滚动条
scroll  ==  滚动条，内容超出时，显示所有滚动条
auto   ==  自动，根据内容自动显示滚动条（超出显示)

外边距的应用：网页居中对齐 语法：

margin: 0px auto;

auto的意思是自适应