CSS盒子模型-CSDN博客

在前段时间身边的一个UI朋友问了我一个问题：一个div高度是100px,padding-top:20%之后div的高度是多少？各位小伙伴的第一时间想到的是多少呢？第一时间以为是相对自身，可是实践之后发现是相对于父元素

下面我详细说说盒子模型：

一、原理：

内容(content)、边框(border)、外边距(margin)、内边距(padding)，这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上
来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。
复制代码

二、特点：

  让我们俯视这个盒子，它有上下左右四条边，所以每个属性除了内容（content），都包括四个部分：上下左右；这四部分可同时设置，
  也可分别设置；内边距可以理解为盒子里装的东西和边框的距离，而边框有厚薄和颜色之分，内容就是盒子中间装的东西，外边距就是
  边框外面自动留出的一段空白。
复制代码

三、结构

  内容（content）就是盒子里装的东西。
  
  而填充(padding)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料。
  
  边框(border)就是盒子本身了；至于边界(border)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便
  取出。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西
  一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度
  属性，每个HTML标记都可看作一个盒子；

1、内容(content):
    上面已经说得content其实就是盒子里面得东西。那么我们在写页面得编程中经常会遇到这么个问题：
    就是当内容超出盒子的本身之后。假设一个div的也是100px.但是内容超出文本之后div的高度是多少呢？答案不言而喻==》还是100px.
    比喻：现在有一个箱子高度是1米，但是装的的物品高度是2米。那么箱子的高度变了吗？是的，没有。只会让多处的部分溢出。常见的
    处理方式就是：overflow:hidden(隐藏溢出);
    但是当div高度没有设置高度时。那么div的高度就是根据内容来决定了。
    
2、边框(border)
     border一般用于分离元素，border的外围一般是指元素的最外围 border的属性只要有三个color(颜色) width(粗细) style(样式)
    boder也是盒子模型中最容易理解的一种。
    列：div{
	   width:200px;
	   height: 200px;
	   border: #000000 1px solid;
	   }
    div初始宽高都是200px,那么加上边框后就是202px
    .width = 内容宽 + 左边框 + 右边框 
    height = 内容高 + 上边框 + 下边框
    
3、外边距(margin)
   块(盒子)和块(盒子)之间的距离。这个距离可以是负的，因为可以相互叠加外边距合并（叠加）是一个相当简单的概念。
   但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边
   距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。当一个元素出现在另一个元素上面时，第一个元素的下外边距
   与第二个元素的上外边距
   会需要注意的就是当padding为百分比的时候，元素自身的位置跟大小设置的百分比都是相对于父元素。发生合并。，元素自身的位置
   跟大小设置的百分比都是相对于父元素。同外边距(padding)
    
4、内边距(padding)
    padding 用于控制content 与 border之间的距离。padding
    padding 属性接受长度值或百分比值，但不允许使用负值。需要注意的就是当padding为百分比的时候，元素自身的位置跟
    大小设置的百分比都是相对于父元素。
   注意：上下内边距与左右内边距一致；上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。
   假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为
   70 像素。
复制代码