盒模型和布局

盒模型的拓展

前两天复习过了一些HTML的基本元素，在这其中包括一些基本的盒模型和他们本身的属性，今天我进行进一步的拓展。

1、盒模型包括哪几部分（有图）

• content 内容主要区域
• padding 内填充（边框内部到内容这部分）
• border 边框
• margin 元素与元素之间的距离
  
  有了这些之后，就是计算盒的大小，这部分是我以前经常犯错误的一部分，容易忽略的点有：以为margin在盒的内部，忘了考虑border的占位（换句话说border是有宽度的。）

2、两种盒模型

• 标准盒模型： box-sizing：content-box；
• ie盒模型： box-sizing： border-box;
  下面是图:
  
  
  注意区分这两种盒模型大小计算方式：标准盒模型的大小是content部分加上padding部分的大小，而ie盒模型则将盒子的大小定义为仅仅只包括content部分，所以在给一个标准的盒子和一个ie模型的盒子设置相同的content与padding时，标准盒看起开会比ie盒大一些。下面是一个例子：
  
  

padding和margin的顺序

这里以padding为例子

<style>
      span{
          /*  上、右、下、左 顺时针方向 */
          padding:10px 50px 100px 200px;
          /* 上、左右、下 */
          padding:10px 50px 100px;
          /* 上下、左右 */
          padding:10px 50px;
          /* 四个方向 */
          padding:50px;
      }
</style>

两个比较重要的问题

1. margin值的穿透问题
   当我们在一个大盒子内部嵌套一个小盒子时，如果我们在没有给大盒子加上padding-top或者是border-top属性的时候给小盒子加上了属性margin-top，那么这个时候我们会发现大盒子和小盒子一并向下移动了，而当我们打开f12查看这个移动距离属于谁的时候，发现大盒子的margin还是0，只是被强行加上了一个和小盒子一样的margin-top属性。下面是实例：
   还没加小盒子的margin时：
   
   加上margin后
   
   这就是margin值的穿透问题，那么这个问题为什么会出现呢？？？？，这个我们还是需要看CSS2.1中的规定内容：

   In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin. 所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌 套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。

   这个规定导致了当我们在为小盒子设置margin值的时候大盒子会自动被认为是与小盒子毗邻的盒子，所以才导致了margin值的穿透。
   那么怎么解决呢？？？

   • 给大盒子加border-top:1px solid transparent ;
     • 既然margin-top有这样的问题，我们可以给大盒子增加padding-top，来 规避这个问题。
     • 给大盒子增加overflow:hidden（即触发bfc)
       BFC: block format context - 块级格式化上下文，每一个盒子当中都有一套正常的渲染规则，可以 但是这些渲染规则可以进行改变。

2. margin值的合并问题
   有两个兄弟盒子，box1和box2，当我们分别为两个盒子设置margin-bottom="10px"和margin-top="100px"时，我们会发现他们两个之间的距离并不是我们想要的110px，而是两者之间的最大值。并且这个问题只存在于margin-top和margin-bottom之间，左右不存在这种情况，解决办法也很简单，设置的时候给其中一个盒子多设置一些margin就可以了。

3. 浮动——overfloat

   • float:“left” --左浮动
   • float:“right” --右浮动
   • float:“none” --没有浮动（默认）

   浮动中会出现的问题

   可能会导致父级元素塌陷

   • 解决方法：
     • 给父级元素加上height属性，让父级元素变高。
     • 给父级元素增加overflow:hidden
     • 给浮动元素父级的末尾增加一个元素，给这个元素设置clear：both;样式
     • 在项目中，直接把下面的clearfix样式粘贴到你的css中，哪个元素浮动，就给赶紧给父级增加clearfix这个类名。（它的本质和第三种方法是一样的）

   制作一个三角形（不使用图片的情况下）

   不使用图片的话，可以考虑使用border属性来制作，因为html里的border变粗了以后是这样的
   
   其实和显示中的边框差不多，所以你中间的元素只要给他的宽高都调成0，边框自然而然就会变成：
   
   这个样子，是三角形哒！然后如果你想只要一个三角形，那么就把其他三条边的颜色全部调成透明就可以了！结果如下：
   

   背景图片的几个属性

   我在一开始为网页设置背景图片的时候经常会遇到图片过大或者过小的状况，于是就导致了图片因为展示不全儿把网页撑大的现象或者是图片过小在网页中重复展开造成精神污染。
   在backgroud中有一个background-size的属性，这个属性控制着你的背景图片的大小，控制这个图片是否重复，是否在网页中展开，是否会占满整个屏幕等。

   • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。有可能造成背景图像的某些部分也许无法显示在背景定位区域中。
   • contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。（背景图片放大的时候，只要宽度或者高度，一边铺满了容器，就停止放大。）
     他可以是上面的这两种属性，也可以是x与y，来精确设置你的背景图片大小，防止它重复展开。

   定位

   1. static 静态定位（就是默认的定位方式，通过margin进行定位）
   2. relative 相对定位 在static的基础上，如果我想让一个元素在它本来的位置做一些调整(位移)，我们可以将该元素定位设置为relative，同时指定相对位移(利用top,bottom,left,right)有一点需要注意的是，相对定位的元素仍然在文档流中，仍然占据着它本来占据的位置空间——虽然它现在已经不在本来的位置了。
   3. absolute 绝对定位 如果你想在一个文档(Document)中将一个元素放至指定位置，你可以使用absolute来定位，将该元素的position设置为absolute，同时使用top,bottom,left,right来定位。如果没有父元素，位置是相对于body来进行的。绝对定位会使元素从文档流中被删除，结果就是该元素原本占据的空间被其它元素所填充。
   4. fixed 固定定位 固定定位是相对于整个窗口的。