整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
标
CSS中有一个极其重要的理论，那就是“CSS盒子模型”的理论。网页就是由许多一个一个小盒子组成的，这些盒子之间会互相影响，从而影响整个网页的排版。
CSS里有一个极其重要的理论，那就是"CSS盒子模型"理论。一个页面排版好不好看，灵活不灵活修改，跟css盒子模型有直接的关系。
页面上所有的东西，包括一段话、一张图片都可以看成是一个盒子，无数个小盒子，就组成了个大盒子，也就是最终得到了一个页面。
到处都是小盒子
可以看得出个页面由很多这样的盒子组成，并且这些盒子还会互相影响。
所以从两个方面来理解：一是理解单独一个盒子的内部结构，二是理解多个盒子之间的相互关系。
盒子模型其实很容易理解，不必被网上那些看似很专业的图给唬住，其实非常简单，用一个鸡蛋来举例。
3层结构的鸡蛋
这是一个香喷喷的鸡蛋，可以看到有3层结构，分别是最里面的蛋黄、中间的蛋白和最外面的蛋壳。
Css盒子模型也是一样，我们设置的一段话、一张图片等等，这是实实在在的存在，就等同于鸡蛋的蛋黄。
鸡蛋的蛋壳等同于元素的边框，大部分的元素都是可以设置边框。
蛋白的这部分，就等同于填充物，将蛋黄和蛋壳隔得更远，同时让鸡蛋变得更大，这对应了css模型中内边距。
鸡蛋的蛋黄、蛋白、蛋壳对应上了盒子模型中的内容（content）、内边距（padding）、边框（border）
这三种元素就足以组成一个盒子，就如同一个鸡蛋。但这还不够，如果一堆鸡蛋堆在一起，就很容易碰坏，就需要将他们的距离拉开一点。
在鸡蛋自身以外，通过安放海绵，来拉开距离，这对应盒子模型中的外边框（margin）。
自此一个完整的盒子模型就出现了，控制自身的属性（内容、内边距、边框）+控制身外的属性（外边距），就这么简单。
无论网上的图看似有多么专业，实际上用鸡蛋就容易理解。
盒子模型
内边距padding，又常常称为"填充、补白"，它指的是内容区到边框之间的那一部分。
内边距padding分为四个方向的内边距：padding-top、padding-right、padding-bottom、padding-left。
他常常用来增加空白的部分，起到美化的作用。左边就是做了留白处理，不会像右边那么紧凑。
对比图
语法：padding-top:像素值;
padding-right:像素值;
padding-bottom:像素值;
padding-left:像素值;
padding-top：50px的意思是内容与上边框之间填充的大小是50px
效果
外边距margin用于设置外边距。是指盒子与盒子之间的距离。
内边距分为四个方向的内边距：margin-top、margin -right、margin -bottom、margin -left。
他的作用就是拉开两个盒子之间的距离。如果设置过小，那么盒子之间就会显得很拥挤，就会导致网页很拥挤。
对比图
语法：margin-top:像素值;
margin-right:像素值;
margin-bottom:像素值;
margin-left:像素值;
margin-top：50px 意思是上边框与上边框邻居的盒子的距离是50px
效果
子模型的简介：
网页设计中常用的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。
这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。
CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
下面有一个图片来解释一些盒子模型（如下图）：
不同部分的说明：
width(宽度)
height（高度）
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
总宽度 = 宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距。
总高度 = 高度 + 顶部填充 + 底部填充 + 上边框 + 下边框 + 上边距 + 下边距。
代码与效果演示：
代码部分如下：
<head><meta charset="utf-8"><title>盒子模型</title><style type="text/css">
演示效果如下：
不作声明时，网页默认的有margin和padding，可以通过以下代码去除掉网页中默认的margin和padding。
代码演示如下：
<style>
直接写上 padding:20px; 的话默认的是上下左右都是 20px ；
当padding:10px 20px ;设为两个值的时候，第一个表示上下，第二值表示左右；
当padding:10px 20px 30px 设置为三个值的时候，第一个值表示上 第二个值表示左右，第三个值表示下；
四个值的时候，采用上右下左。
网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物盒子作一个比喻来理解，所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
语法：
border : border-width border-style border-color<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ border: 5px solid red; width: 80px; }</style></head><body> <div>码海无际</div></body></html>边框属性—设置边框样式（border-style），边框样式用于定义页面中边框的风格，常用属性值如下：
CSS 边框属性：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div { border-width: 5px; border-style: solid; border-color: red; width: 80px; } .d2 { border-bottom: 5px solid blue; width: 80px; }</style></head><body> <div>码海无际</div> <br> <div class="d2">码海无际</div></body></html>padding属性用于设置内边距。 是指 边框与内容之间的距离。
注意： 后面跟几个数值表示的意思是不一样的：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .dv1 { border: 1px solid red; width: 80px; padding: 15px 30px; }
.dv2 { border: 1px solid red; width: 80px; padding-top: 15px; padding-bottom: 15px; padding-left: 30px; padding-right: 30px; }</style></head><body> <div class="dv1">码海无际</div> <br> <div class="dv2">码海无际</div></body></html>margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。
取值顺序跟内边距相同。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .dv1{ width: 80px; border: 1px solid red; margin: 15px; } .dv2{ width: 80px; border: 1px solid red; }</style></head><body> <div class="dv1">码海无际</div> <div class="dv2">码海无际</div></body></html>可以让一个盒子实现水平居中，需要满足一下两个条件：
然后就给左右的外边距都设置为auto，就可使块级元素水平居中。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .dv1 { width: 120px; border: 1px solid red; margin: 50px auto; /*只是让盒子居中，盒子里面的内容不会居中*/ text-align: center; }</style></head><body> <div class="dv1">码海无际</div></body></html>为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; /* 清除内边距 */ margin: 0; /* 清除外边距 */ } .dv1 { width: 120px; border: 1px solid red; }</style></head><body> <div class="dv1">码海无际</div></body></html>当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .dv1 { width: 80px; height: 50px; background-color: red; margin-bottom: 20px; } .dv2 { margin-top: 30px; width: 80px; height: 50px; background-color: blue; }</style></head><body> <div class="dv1">码海无际</div> <div class="dv2">码海无际</div></body></html>对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
解决方案：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .dv1 { width: 100px; height: 100px; background-color: red; /*border-top: 1px solid darkmagenta;*/ /*padding-top: 1px;*/ overflow: hidden; } .dv2 { width: 80px; height: 50px; background-color: blue; margin-top: 20px; }</style></head><body> <div class="dv1"> <div class="dv2"></div> </div></body></html>*请认真填写需求信息，我们会在24小时内与您取得联系。
