常见问题3 等高，圣杯，双飞翼 浮动

☆等高布局、圣杯布局、双飞翼布局的实现原理？

圣杯布局和双飞翼布局基本上是一致的，都是两边固定宽度，中间自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染。解决方案大体相同，都是三栏全部float:left浮动，区别在于解决中间栏div的内容不被遮挡上，

圣杯布局是中间栏在添加相对定位，并配合left和right属性，效果上表现为三栏是单独分开的（如果可以看到空隙的话），

而双飞翼布局是在中间栏的div中嵌套一个div，内容写在嵌套的div里，然后对嵌套的div设置margin-left和margin-right，效果上表现为左右两栏在中间栏的上面，中间栏还是100%宽度，只不过中间栏的内容通过margin的值显示在中间。

等高布局：给每一列添加相应的容器，并进行相互嵌套，并在每个容器中设置背景色，通过相对定位移动盒子到相应位置。

1，选择器优先级如何计算？

通配符选择器 0 *{ }

标签选择器 1 div{ }

类选择器 10 .span{ } class 类

id选择器 100 # id名{ }

内联样式 1000

2，margin 外边距常见问题及处理方法？

父元素塌陷
解决方法：
（1）为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合 （可以设置成透明：border：1px solid transparent）。

（2）为父盒子添加overflow：hidden；

（3）为父盒子设定padding值；

（4）为父盒子添加position：fixed；

（5）为父盒子添加 display：table；

外盒模型 ：盒模型宽 = 有效内容width +内边距padding+外边距margin+边框

内盒模型：盒模型的宽 = 有效内容width +内边距+边框

注意： 优先考虑内边距 然后是外边距

内边距设置的是边框和内容之间的距离

外边距调整的是盒子的位置

背景属性：

background:颜色 地址 是否平铺 位置 是否滚动

background:#000 url(’’) no-repeat x,y (px % center center ,top left ,top right ,left bottom,right bottom) scroll/fixed

3