Important Concepts for Html

盒子模型与定位技术

盒子模型是HTML语言中一个重要的概念，如果说编程语言中一切皆对象，那么HTML中则是一切皆盒子。定位技术在HTML中也是非常重要的，虽然通过盒子模型可以解决所有的定位问题，但是这样的方法只适合于简单的网页。当网页结构异常复杂时，使用这种定位方法需要计算大量的参数，是不可行的。因此我们需要使用框架封装好的定位技术。

盒子模型

所谓的盒子模型即HTML中的每个元素都有position、margin、border、padding这四个属性，在谷歌浏览器中我们可以看到盒子模型的直观图，如下

• position——元素的位置
• margin——元素的外边距
• border——元素的边框（轮廓）
• padding——元素的内边距
• content——元素实际包含的信息（盒子最里面）

要点

1. margin部分不算入盒子的大小，只是用来与其他元素隔开一定距离；在默认情况下HTML的body自带有margin为8px。
2. padding用来使内容和border隔出一定距离，可用来调整文本的格式

盒子模型的简单应用

1. margin和padding可以用来定位

   被包裹的盒子相对于包裹它的盒子的坐标定位即为margin-top和margin-left的值。如想要把一个body标签中的div标签定位到（100px,100px）的位置，只需要把div的这两个属性都设为100px即可；同理可知padding也可以实现定位

2. padding可用于限定盒子中文本的行数

   如果不就行恰当的设置，很有可能出现文本展示不全的情况出现，会极大地影响用户体验。当我们想限定容器中显示N行文本时，我们只需要让盒子高度扣除padding后是字体行高的N倍即可；特别的，当N等于1时所展现的效果就是垂直居中

定位技术

需求

在网页制作排版中，需要准确的定位元素，使用盒子模型进行定位一方面十分繁琐复杂另一方面无法层次化，即元素之间无法交叉（实际中我们有这种需要）。

实现方式

在css中通过设置position的值来选择定位方式，通过top、left等设置坐标。其中position有三个参数可选——absolute、relative、fixed。设置position后元素变为层级元素，即每个元素处于不同层级，可以层叠。

三种定位方式详解

1. absolute模式

   • 绝对定位（脱离原来位置进行定位），对于两个块级元素来说在没有设置absolute定位时，前一个元素会把后一个元素挤开，当设置absolute定位后，后一个元素会脱离原来位置定位到默认（0，0）的位置与前一个元素发生层叠。

   • absolute定位会选取最近的可定位元素作为定位的参照。在复杂的父子结构中，例如下图

     

 我们想对content进行定位，如果两个父级元素都没有设置定位，则会根据父级body进行定位；如果box设置了定位，content就会以box为参照进行定位。

1. relative模式

   • 相对定位（保留原来位置（出生的位置）进行定位），同样两个块级元素，如果后一个元素设置了相对定位，则元素会变成层级元素但是保留原来的位置。
   • 由于relative保留原来位置的特性，它常被用来当做定位的参照——我们把定位元素设置成absolute，把参照物设成relative，这样既不会影响其他的元素，又可以进行定位。若将参照物设成absolute则其后面的元素可能会脱离原来的位置，这是我们不希望看到的。

2. fixed模式

   固定定位（不管页面怎么变化，始终固定在一个位置）。这种定位方式也是十分常见的，基本上所有的广告、目录等都是fixed定位的。

盒子模型中的bug

1. margin塌陷

   现象：在父子结构中，子元素设置margin-top时出现异常——当设置的margin-top小于父元素的margin-top 时无法发挥作用，大于父元素时子元素会带动父元素，即父子元素的margin-top联动。此bug相当于父元素上方的border没有了，故此得名。

   解决方法：

   1. 暴力法

      手动在父元素上加一个border-top即可，但是此方法会破坏原有HTML的结构，因此不可取。

   2. 通过bfc（block format context）来解决。一般每个元素（盒子）都有一样的渲染规则，但是通过触发bfc可以改变盒子的渲染规则从而解决margin塌陷的问题。

      触发bfc的三种方法：

      • position：absolute/relative/fixed；
      • display：inline-block；
      • float：left/right;
      • overflow：hidden;

      通过bfc的方法解决margin塌陷问题也只能起到缓解作用，因为四种触发bfc的方法都会引起新的问题，比如设置position可能会对定位产生影响，所以我们可以选择一种不影响原有结构的方法来解决margin塌陷问题。

2. margin合并

   现象：在并列结构中，A元素和B元素分别设置margin-bottom和margin-top时不会正常的叠加而会取二者的最大值最为两者的间距，就像是两者何用了一个margin。

   解决方法：margin合并也可以通过触发bfc来解决。但是在实际中我们也可以选择不解决margin合并问题，因为我们只要对其中一个元素设置和间距等同的margin即可。