常见问题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，块级标签和行内标签的区别？

块级独占一行，可以设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

行内标签不占独立区域，仅靠自身字体大小和图像尺寸支撑结构，一般不可设置宽高对齐等属性常用于控制页面中文本的样式

行内块img 、input、td，可以对它们设置宽高对齐属性。

4：行内元素和块级元素的区别和他们的特点是什么？总结如下：

块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度.

行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化.　另外

1. 块级元素可以设置width,height属性.
2. 行内元素设置width,height属性无效，它的长度高度主要根据内容决定.
3. 块级元素即使设置了宽度,仍然是独占一行.
4. 块级元素可以设置margin和padding属性.
5. 行 内元素的margin和padding属性,水平方向的padding-left,padding-right,margin-left,margin- right都产生边距效果,但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom却不 会产生边距效果.
6. 块级元素对应于display:block.
7. 行内元素对应于display:inline.

5，浮动产生的问题？清除浮动的方案？

问题：脱离正常的文档流，导致父标签无法被撑开，影响后续正常布局。

解决：

1，父标签固定高度， （不灵活）

2，浮动标签的最后加一个空div标签，标签本身不浮动，且添加样式 clean：both；（代码冗余）

3，给父标签加overflow属性，为visible以外的其他值时可以帮助实现，触发BFC规则 (私人区域)

4，css属性中空标签清除浮动影响

div style=“clear:both”> 块级元素 可以清除

span style=“clear:both”> 行内元素 试了 不可以

5，给浮动标签的父标签添加 .clearfix （不会在结构上产生冗余代码，可多次重复使用）

.clearfix{
    content:"";
    clear:both;
    display:block;
    line-height: 0;
    height: 0;
    font-size:0;
}

6，如何让盒子水平垂直居中？

将盒子定位到宽高50%处，向上，向左移动盒子高宽的一半

7，简述BFC规则，及解决的问题？

BFC：使他成为独立的块级渲染区域，使该区域拥有一套渲染规则来约束块级盒子的布局，且与外部区域无关。

解决的问题：

1，外边距折叠；
2，自适应两栏或三栏布局；
3，防止字体环绕；
4，清除浮动。

8，图片间隙问题，如何解决？

1：display：block；

2：不让它以基线对齐 ----》底线 顶线 中线 随意一个就可以解决；
vertical-align：middle；

3：设置父级标签
font-size：0；
line-height：0；

9，说说常见的浏览器兼容问题?

1，IE中图片放在a标签显示边框；

2，IE8以下浏览器中背景复合写法问题

3，在IE6及更早浏览器中定义小高度的容器；

4，IE6及更早浏览器浮动时产生双倍边距的bug。

10，简述精灵图的原理及优缺点？

把网页中的一些背景图片整合到一张图片文件中，利用css"background-image",“background-repeat”,"background-positio"的组合进行背景定位，定位出背景图的位置。

优：

1，减少网页的http请求，从而大大的提高页面的性能；

2，减少图片命名困扰；

3，更换风格方便；

缺：

必须限定容器大小符合背景图元素位置，需要计算。

11，简述网页中常见图片的格式及特点？

|格式|优点|缺点|使用场景|

格式	优点	缺点	使用场景
jpg	色彩丰富，文件小	有损压缩，反复保存图片质量下降明显	色彩丰富的图片/渐变图像
gif	文件小，支持动画、透明、无兼容性问题	只支持256种颜色	色彩简单的logo/icon/动图
png	无损压缩，支持透明，简单图片尺寸小	不支持动画，色彩丰富的图片尺寸大	logo/icon/透明图
webp	文件小，支持有损无损压缩，支持动画、透明	浏览器兼容性不好	支持webp格式的app和webview

12， display：none和visiity：hidden的区别？

display:none：隐藏该元素并且该元素所占的空间也不存在了

visibility:hidden ：隐藏该元素但是该元素所占的内存空间还存在，即“隐身”效果

另外，display:none会产生回流和重绘，影响前端性能，并且会对子代元素样式有影响（株连性），而visibility：hidden则不会。

13，你能想出几种方法让元素在页面中消失？

1，display:none，更改元素显示方式为不显示元素；
2，visibility:hidden，元素不可见；它可以很好的隐藏，不会影响用户的交互，在读屏软件中不会被识别。
3，overflow:hidden，溢出包含框隐藏；
4，opacity:0, opacity 属性的意思是设置一个元素的透明度。它不是为改变元素的边界框（bounding box）而设计的。这意味着将 opacity 设为 0 只能从视觉上隐藏元素。而元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互。 5，background:transparent,背景透明显示； 6，position：元素的定位。把position：absolutely；top：-4555px；left：-45545px；top和left设置成足够大的负数，相当于把元素放到可视区域外，它不会影响布局，能够让元素保持可操作性，在读屏软件上可以被识别。

14，Query,hide()方法，隐藏，fadeOut()淡出隐藏；

属性	意义
visible	默认值。元素是可见的。
hidden	元素是不可见的。
collapse	当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。
inherit	规定应该从父元素继承 visibility 属性的值。

15，标签应该如何合理嵌套？

1. 块级元素与块级元素平级、内嵌元素与内嵌元素平级

   <div><span></span><p></p></div>  //span是行内元素，p是块级元素，所以这个是错误的嵌套
   
   <div><span></span><a></a></div>  //对的
   

2. 块元素可以包含内联元素或某些块元素，但内联元素不能包含块元素，它只能包含其它的内联元素

   <div><span></span></div>
   
   <span><span></span></span>
   

3. 有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素

   h1、h2、h3、h4、h5、h6、p、dt
   

4. 块级元素不能放在标签p里面

5. li 标签可以包含 div 标签，因为li 和 div 标签都是装载内容的容器