初级前端面试题——CSS问题（2）一个满屏品字布局如何设计? 简单的方式：上面的 div 宽 100%，下面的两个

一个满屏品字布局如何设计?

简单的方式：

上面的 div 宽 100%，
下面的两个 div 分别宽 50%，
然后用 float 或者 inline 使其不换行即可

经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用 hack 的技巧？

png24 位的图片在 iE6 浏览器上出现背景，解决方案是做成 PNG8.
浏览器默认的 margin 和 padding 不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一
IE 下,可以使用获取常规属性的方法来获取自定义属性,也可以使用 getAttribute()获取自定义属性;
Firefox 下,只能使用 getAttribute()获取自定义属性。解决方法:统一通过 getAttribute()获取自定义属性
IE 下,even 对象有 x,y 属性,但是没有 pageX,pageY 属性
Firefox 下,event 对象有 pageX,pageY 属性,但是没有 x,y 属性

li 与 li 之间有看不见的空白间隔是什么原因引起的？有什么解决办法？(也称幽灵字符)

行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为 0，就没有空格了

display:inline-block 间隙问题怎么解决？(携程)

移除空格、使用 margin 负值、使用 font-size:0、letter-spacing、word-spacing

display:inline-block 什么时候会显示间隙？

相邻的 inline-block 元素之间有换行或空格分隔的情况下会产生间距
非 inline-block 水平元素设置为 inline-block 也会有水平间距
可以借助 vertical-align:top; 消除垂直间隙
可以在父级加 font-size：0; 在子元素里设置需要的字体大小，消除垂直间隙
把 li 标签写到同一行可以消除垂直间隙，但代码可读性差

css 定义的权重

网上有声称诸如id权重100，class权重10等计算方法，这是不正确的。实际上应该如下：

如果一个声明来自style属性而不是选择器，计作1或者a=1（在一个html文档中，元素“style”的值是样式表规则，这个规则中没有选择器，所以a=1, b=0, c=0, and d=0）
选择器中id属性的个数,计作b
选择器中其他属性以及伪类的个数，计作c
选择器中元素及伪元素的个数，计作d

一些例子：

* {}     /* a=0 b=0 c=0 d=0 -> 优先级= 0,0,0,0 */
li {}     /* a=0 b=0 c=0 d=1 -> 优先级 = 0,0,0,1 */
li:first-line {}     /* a=0 b=0 c=0 d=2 -> 优先级 = 0,0,0,2 */
ul li {}     /* a=0 b=0 c=0 d=2 -> 优先级 = 0,0,0,2 */
ul ol+li {}     /* a=0 b=0 c=0 d=3 -> 优先级 = 0,0,0,3 */
h1 + *[rel=up]{}     /* a=0 b=0 c=1 d=1 -> 优先级 = 0,0,1,1 */
ul ol li.red {}     /* a=0 b=0 c=1 d=3 -> 优先级 = 0,0,1,3 */
li.red.level {}     /* a=0 b=0 c=2 d=1 -> 优先级 = 0,0,2,1 */
#x34y {}     /* a=0 b=1 c=0 d=0 -> 优先级 = 0,1,0,0 */
style=""     /* a=1 b=0 c=0 d=0 -> 优先级 = 1,0,0,0 */

[备注]
　　:first-line 伪元素
　　[rel=up] 其他属性

优先级只基与选择器的形式，特殊的，一个“[id=p33]“形式的选择器是按照属性选择器来计算的（a=0, b=0, c=1, d=0），即使用定义中包含ID。

了解了这些你应该不会再对”11个class与一个id”谁的优先级高“这类的问题有疑问了吧，因为a,b,c,d只是在各自位置数字的累加，而不会越级。

当然权重最高的是!important，会覆盖以上所有。行内样式也高不过它。

有一幅生动的图可以展示这个规则：大鱼吃小鱼

CSS 优先级算法如何计算？

优先级就近原则，同权重情况下样式定义最近者为准
载入样式以最后载入的为准
优先级为: !important > id > class > tag important 比内联优先级高

谈谈浮动和清除浮动

浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上

解决方法

父级 div 定义伪类：after 和 zoom (推荐使用，建议定义公共类，以减少 CSS 代码)

   .clearfloat:after{
       display:block;
       clear:both;
       content:"";
       visibility:hidden;
       height:0}

   .clearfloat{zoom:1}

在结尾处添加空 div 标签 clear:both

<div class="parent">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="clearfloat"></div>
</div>

<style>
    .left {float:left}
    .clearfloat{clear:both}
</style>

父级 div 定义 height
父级 div 定义 overflow:auto
父级 div 定义 overflow:hidden
父级 div 也一起浮动
父级 div 定义 display:table
结尾处加 br 标签 clear:both

参考链接几种常用的清除浮动方法

box-sizing 常用的属性有哪些？分别有什么作用？

box-sizing: content-box; // 默认的标准(W3C)盒模型元素效果
box-sizing: border-box; // 触发怪异(IE)盒模型元素的效果
box-sizing: inherit; // 继承父元素 box-sizing 属性的值

请列举几种隐藏元素的方法

visibility: hidden; 这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在
opacity: 0; CSS3 属性，设置 0 可以使一个元素完全透明
position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外
display: none; 元素会变得不可见，并且不会再占用文档的空间。
transform: scale(0); 将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留
<div hidden="hidden"> HTML5 属性,效果和 display:none;相同，但这个属性用于记录一个元素的状态
height: 0; 将元素高度设为 0 ，并消除边框
filter: blur(0); CSS3 属性，将一个元素的模糊度设置为 0，从而使这个

rgba() 和 opacity 的透明效果有什么不同？

opacity 作用于元素以及元素内的所有内容（包括文字）的透明度
rgba() 只作用于元素自身的颜色或其背景色，子元素不会继承透明效果

css 属性 content 有什么作用？

content 属性专门应用在 before/after 伪元素上，用于插入额外内容或样式

请解释一下 CSS3 的 Flexbox（弹性盒布局模型）以及适用场景？

Flexbox 用于不同尺寸屏幕中创建可自动扩展和收缩布局

请写出多种等高布局

在列的父元素上使用这个背景图进行 Y 轴的铺放，从而实现一种等高列的假像
模仿表格布局等高列效果：兼容性不好，在 ie6-7 无法正常运行
css3 flexbox 布局： .container{display: flex; align-items: stretch;}

圣杯布局的实现原理？

要求：三列布局；中间主体内容前置，且宽度自适应；两边内容定宽

好处：重要的内容放在文档流前面可以优先渲染

原理：利用相对定位、浮动、负边距布局，而不添加额外标签

  .container {
      padding-left: 150px;
      padding-right: 190px;
  }
  .main {
      float: left;
      width: 100%;
  }
  .left {
      float: left;
      width: 190px;
      margin-left: -100%;
      position: relative;
      left: -150px;
  }
  .right {
      float: left;
      width: 190px;
      margin-left: -190px;
      position: relative;
      right: -190px;
  }

什么是双飞翼布局？实现原理？

双飞翼布局：对圣杯布局（使用相对定位，对以后布局有局限性）的改进，消除相对定位布局

原理：主体元素上设置左右边距，预留两翼位置。左右两栏使用浮动和负边距归位，消除相对定位。

.container {
    /*padding-left:150px;*/
    /*padding-right:190px;*/
}
.main-wrap {
    width: 100%;
    float: left;
}
.main {
    margin-left: 150px;
    margin-right: 190px;
}
.left {
    float: left;
    width: 150px;
    margin-left: -100%;
    /*position: relative;*/
    /*left:-150px;*/
}
.right {
    float: left;
    width: 190px;
    margin-left: -190px;
    /*position:relative;*/
    /*right:-190px;*/
}

在 CSS 样式中常使用 px、em 在表现上有什么区别？

px 相对于显示器屏幕分辨率，无法用浏览器字体放大功能
em 值并不是固定的，会继承父级的字体大小： em = 像素值 / 父级 font-size

为什么要初始化 CSS 样式？

不同浏览器对有些标签样式的默认值解析不同
不初始化 CSS 会造成各现浏览器之间的页面显示差异
可以使用 reset.css 或 Normalize.css 做 CSS 初始化

初级前端面试题——CSS问题（2）