盒子模型的属性：内容（content）、填充（padding）、边框（border）、边界（margin）
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现元素的背景，边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡后面的任何元素。
提示：背景应用于由内容和内边距、边框组成的区域。
内边距、边框和外边距都是可选的，默认值为零。但是，元素样式默认的设置了外边距和内边距。可以通过将元素的margin和padding设置为零来覆盖这些浏览器样式。这可以分别进行，也可以通过使用通用选择器对所有元素进行设置：
*{ margin: 0; padding: 0; }-----清除了浏览器所有元素的默认设置的边距 提示：在CSS中，width和height指的是内容区域的宽度和和高度。增加内边距、边框和外边距不会影响 内容区域的尺寸，但是会增加元素框的总尺寸。 1.margin----边界，最外的空白边。默认值为0。 margin为复合属性，可以使用下列任何一个属性来只设置相应的外边距，而不会直接影响所有其他外边 距：margin-top、margin-right、margin-bottom、margin-left 也可以通过使用复合属性margin来设置, p{margin：10px 20px 30px 40px；} 当有四个值时，顺序为上 右 下 左 当有三个值时，顺序为上值 左右值 下值 当有两个值时，顺序为上下值 左右值当有一个值时，顺序为上下左右都为一个值margin也可以设置为auto（自动）p{margin：0 auto} 表示为居中显示2.border------边框，规定元素边框的样式 宽度 颜色 复合元素，可以使用下列任何一个属性来只设置相应的外边距，而不会直接影响所有其他外边距：border-top、border-right、border-bottom、border-left也可以通过border-top-width设置上边框的宽度等。div{border：1px solid red}表示边框宽度为1px，样式为实心，颜色为颜色例：div{ width: 100px; height: 100px; background-color: #ff6600; /*宽度 样式 颜色*/ border: 1px solid red; border-top: 10px groove yellow; } 3.padding-----填充，元素边框与元素内容之间的空白区域。 内边距。padding属性接受长度值或百分比值，但不允许使用负值。 且与margin一样为复合属性，可以使用下列任何一个属性来只设置相应的外边距，而不会直接影响所有其他外边距：padding-top、padding-right、padding-bottom、padding-left也可以通过使用复合属性padding来设置,p{padding：10px 20px 30px 40px；}当有四个值时，顺序为上 右 下 左当有三个值时，顺序为上值 左右值 下值 当有两个值时，顺序为上下值 左右值当有一个值时，顺序为上下左右都为一个值 4.盒子弧度----border-radius通过设置值来实现圆角边框。与margin一样为复合属性，设置四个值顺序为上右下左。以下例子为设置值来实现的圆形。<style> .a1{ width: 200px; height: 200px; background-color: #4d2e83; border-radius:100px; } .a2{ width: 400px; height: 400px; background-color: yellow; /*overflow hidden与margin配合，居中*/ overflow: hidden; border-radius: 200px; } .a3{ width: 200px; height: 200px; background-color: red; margin: 0 auto; margin-top: 100px; border-radius: 100px; } </style><body> <div class="a1"></div> <div class="a2"> <div class="a3"></div> </div> </body>5.盒子阴影-----box-shadow复合属性，1：x方向的偏移 2：y方向的偏移 3：阴影模糊程度 4：阴影模糊半径 5：阴影颜色实例 <style> div{ width: 200px; height: 200px; background-color: #FF6500; /*阴影 1：x方向的偏移 2：y方向的偏移 3：阴影模糊程度 4：阴影模糊半径 5：阴影颜色*/ box-shadow: 10px 20px 10px 5px red; } </style><body> <div></div> </body>
