前端面试知识点 CSS

CSS

1，垂直居中的方法http://www.cnblogs.com/hutuzhu/p/4450850.html这是我看过的比较好的方法

• 对于文本垂直居中就用line-height
• 模拟表格法：.box{display:table-cell; vertical-align:middle; text-align:center}
• display:flex; 比如.box{display:flex; justify-content:center; align-items:center;}
• 绝对定位1.box{position: absolute; width:100px; height: 50px; top:50%; left:50%; margin-left:-50px;margin-top:-25px; text-align: center;}

• 绝对定位2.box{position:absolute; left:0; top:0; bottom:0; right:0;}

  2，flex的兼容性，怎么查找，怎么测试，怎么解决，虚拟设备怎么弄；
  flex分为旧版本，过渡版本，和新版本。如果在写程序时只写一种版本那么就会出现兼容性问题。解决要注意旧版要写在下面。兼容性是向下识别。

盒子
.box{

    display: -webkit-flex;  /* 新版本语法: Chrome 21+ */
    display: flex;          /* 新版本语法: Opera 12.1, Firefox 22+ */
    display: -webkit-box;   /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box;      /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox;   /* 混合版本语法: IE 10 */   

 }
内容
.flex1 {            
    -webkit-flex: 1;        /* Chrome */  
    -ms-flex: 1             /* IE 10 */  
    flex: 1;                /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -webkit-box-flex: 1     /* OLD - iOS 6-, Safari 3.1-6 */  
    -moz-box-flex: 1;       /* OLD - Firefox 19- */       
}

3，display:inline-block中间出现空白的问题

• 这个是inline的默认情况，所以inline-block就继承了这种情况，这块空白的东西是空白符。
• 解决方法：设置font-size。给盒子设置font-size：0；
  4，用css画一个三角形http://www.jb51.net/article/42513.htm

底部在上面的正三角形
.box{
    width:0;
    height:0;
    border-top:100px solid red;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
}

**5**margin和padding的关系，百分比相对于谁
在margin是外边距，padding是内边距，有五个不同值，
margin有重叠问题这里查看http://www.hujuntao.com/web/css/css-margin-overlap.html
（1）length 规定具体单位记的内边距长度
（2）% 基于父元素的宽度
（3）auto 浏览器计算内边距
（4）inherit 规定应该从父元素继承内边距（所有的IE都不兼容）
6，盒子模型，移动端盒子模型，盒子模型的继承

分为content-box和border-box。
两者区别在于

• content-box所设置的宽度是内容的实际宽度，包括padding，border，内容宽度
• border-box所设置的宽度是内容宽度加上padding和border。（移动端采用）
• 盒子模型的继承属性inherit 在IE里面是不兼容的。其他浏览器是兼容的