CSS

1.介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不一样的？

有两种， IE 盒子模型、W3C 盒子模型；
盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
区  别： IE的content部分把 border 和 padding计算了进去；

在CSS3中引入了box-sizing属性, 它能够容许改变默认的CSS盒模型对元素宽高的计算方式.
共包括两个选项：
content-box：标准盒模型，CSS定义的宽高只包含content的宽高
border-box：IE盒模型，CSS定义的宽高包括了content，padding和border

2.CSS选择符有哪些？哪些属性能够继承？

id选择器（ # myid）
类选择器（.myclassname）
标签选择器（div, h1, p）
相邻选择器（h1 + p）
子选择器（ul > li）
后代选择器（li a）
通配符选择器（ * ）
属性选择器（a[rel = "external"]）
伪类选择器（a:hover, li:nth-child）
可继承的样式： font-size font-family color, UL LI DL DD DT;
不可继承的样式：border padding margin width height ;

3.CSS优先级算法如何计算？

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

4.CSS3新增伪类有那些？

举例：
p:first-of-type 选择属于其父元素的首个 <p>元素的每一个 <p>元素。
p:last-of-type  选择属于其父元素的最后 <p>元素的每一个 <p>元素。
p:only-of-type  选择属于其父元素惟一的 <p>元素的每一个 <p>元素。
p:only-child        选择属于其父元素的惟一子元素的每一个 <p>元素。
p:nth-child(2)  选择属于其父元素的第二个子元素的每一个 <p>元素。
 
:after          在元素以前添加内容,也能够用来作清除浮动。
:before         在元素以后添加内容
:enabled       
:disabled       控制表单控件的禁用状态。
:checked        单选框或复选框被选中。

5.如何居中div？

水平垂直居中问题，在css中margin: 0 auto;能够实现水平居中，可是在垂直居中方面一直没有特定的属性，直到css3的出现，有了弹性盒，能够经过设置弹性盒直接设置居中位置，作浏览器兼容的话能够经过使用一些hack处理 负margin方法，table-cell方法，位移方法

1）负margin方法：

CSS代码：

.container{      
        width: 500px;       
        height: 400px;       
        border: 2px solid #379;       
        position: relative;  
} 
.inner{      
        width: 480px;       
        height: 380px;       
        background-color: #746;       
        position: absolute;       
        top: 50%;       
        left: 50%;       
        margin-top: -190px; /*height的一半*/       
        margin-left: -240px; /*width的一半*/  
}

HTML代码：

<div class="container">
     <div class="inner">
     </div>
</div>

这里，咱们首先用top:50%和left:50%让inner的坐标原点（左上角）移动到container的中心，而后再利用负margin让它往左偏移自身宽的一半，再往上偏移自身高的一半，这样inner的中心点就跟container的中心点对齐了。

2）table－cell方法

 
CSS代码：

div{    
     width: 300px; 
     height: 300px; 
     border: 3px solid #555; 
     display: table-cell; 
     vertical-align: middle; 
     text-align: center; 
}
img{
     vertical-align: middle; 
}

HTML代码：

<div>
    <img src="mm.jpg"> 
</div>

经过将盒子转换为table元素，table元素自己是能够经过属性来控制位置，div上面的vertical-align: middle是控制垂直方向上的居中的，而text-align: center是控制水平方向的
3）弹性盒子法
CSS代码：

.container{
       width: 300px; 
       height: 200px; 
       border: 3px solid #546461; 
       display: -webkit-flex; 
       display: flex; 
       -webkit-align-items: center; 
       align-items: center; 
       -webkit-justify-content: center; 
       justify-content: center;  
} 
.inner{
       border: 3px solid #458761; 
       padding: 20px;  
}

HTML代码：

<div class="container"> 
     <div class="inner"> 
         我在容器中水平垂直居中 
     </div> 
</div>

align-items控制垂直方向的居中，justify-content控制水平方向的居中。这是CSS3的新方法

4）位移方法

位移方法和margin定位方法同样，只不过吧margin改为了位移不须要计算一半是多少，直接 transform:translate(-50%,--50%)

6.display有哪些值？说明他们的做用。

block              象块类型元素同样显示。
none               缺省值。象行内元素类型同样显示。
inline-block   象行内元素同样显示，但其内容象块类型元素同样显示。
list-item         象块类型元素同样显示，并添加样式列表标记。
table               此元素会做为块级表格来显示
inherit            规定应该从父元素继承 display 属性的值

7.position的值relative和absolute定位原点是？

absolute  生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。
fixed （老IE不支持） 生成绝对定位的元素，相对于浏览器窗口进行定位。
relative  生成相对定位的元素，相对于其正常位置进行定位。
static        默认值。没有定位，元素出如今正常的流中（忽略 top, bottom, left, right z-index 声明）。
inherit      规定从父元素继承 position 属性的值。

8.CSS3有哪些新特性？

新增各类CSS选择器  （: not(.input)：全部 class 不是“input”的节点）
圆角           （border-radius:8px）
多列布局        （multi-column layout）
阴影和反射        （ShadowReflect）
文字特效      （text-shadow、）
文字渲染      （Text-decoration）
线性渐变      （gradient）
旋转          （transform）
增长了旋转,缩放,定位,倾斜,动画，多背景
transform:scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg)Animation:

9.用纯CSS建立一个三角形的原理是什么？

把上、左、右三条边隐藏掉（颜色设为 transparent）

#demo {
        width: 0;
        height: 0;
        border-width: 20px;
        border-style: solid;
        border-color: transparent transparent red transparent;
}

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

简单的方式：
上面的div宽100%，
下面的两个div分别宽50%，
而后用float或者inline使其不换行便可

11.li与li之间有看不见的空白间隔是什么缘由引发的？有什么解决办法？

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

12.为何要初始化CSS样式。

• 由于浏览器的兼容问题，不一样浏览器对有些标签的默认值是不一样的，若是没对CSS初始化每每会出现浏览器之间的页面显示差别。
• 固然，初始化样式会对SEO有必定的影响，但鱼和熊掌不可兼得，但力求影响最小的状况下初始化。

最简单的初始化方法： * {padding: 0; margin: 0;} （强烈不建议）
淘宝的样式初始化代码：
     

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } 
     body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } 
     h1, h2, h3, h4, h5, h6{ font-size:100%; } 
     address, cite, dfn, em, var { font-style:normal; } 
     code, kbd, pre, samp { font-family:couriernew, courier, monospace; } 
     small{ font-size:12px; } 
     ul, ol { list-style:none; } 
     a { text-decoration:none; } 
     a:hover { text-decoration:underline; } 
     sup { vertical-align:text-top; } 
     sub{ vertical-align:text-bottom; } 
     legend { color:#000; } 
     fieldset, img { border:0; } 
     button, input, select, textarea { font-size:100%; } 
     table { border-collapse:collapse; border-spacing:0; }

13.absolute的containing block(容器块)计算方式跟正常流有什么不一样？

不管属于哪一种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，而后再判断：
1）若此元素为 inline 元素，则 containing block 为可以包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；
2）不然,则由这个祖先元素的 padding box 构成。
若是都找不到，则为 initial containing block。

补充：

1）static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分）
2）absolute: 向上找最近的定位为absolute/relative的元素
3）fixed: 它的containing block一概为根元素(html/body)，根元素也是initial containing block

14.对BFC规范(块级格式化上下文：block formatting context)的理解？

(W3C CSS 2.1 规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其余元素的关系和相互做用。）
 一个页面是由不少个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。

不一样类型的 Box,会参与不一样的 Formatting Context（决定如何渲染文档的容器）,所以Box内的元素会以不一样的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。
     建立规则：
          根元素
          浮动元素（float不是none）
          绝对定位元素（position取值为absolute或fixed）
          display取值为inline-block,table-cell, table-caption,flex, inline-flex之一的元素
          overflow不是visible的元素
      做用：
          能够包含浮动元素
          不被浮动元素覆盖
          阻止父子元素的margin折叠

15.css定义的权重

如下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，如下例子是演示各类定义的权重值：
                  /权重为1/            div{}
                  /权重为10/          .class1{}
                  /权重为100/       #id1{}
                  /权重为100+1=101/         #id1 div{}
                  /权重为10+1=11/              .class1 div{}
                  /权重为10+10+1=21/      .class1 .class2 div{}
若是权重相同，则最后定义的样式会起做用，可是应该避免这种状况出现

16.浮动元素引发的问题和解决办法？

浮动元素引发的问题：
（1）父元素的高度没法被撑开，影响与父元素同级的元素
（2）与浮动元素同级的非浮动元素（内联元素）会跟随其后
（3）若非第一个元素浮动，则该元素以前的元素也须要浮动，不然会影响页面显示的结构
解决方法：
使用CSS中的clear:both;属性来清除元素的浮动可解决二、3问题，对于问题1，添加以下样式，给父元素添加clearfix样式：

.clearfix:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix{
    display: inline-block;
} /* for IE/Mac */

                  
清除浮动的几种方法：
1）额外标签法，<div style="clear:both;"></div>（缺点：不过这个办法会增长额外的标签使HTML结构看起来不够简洁。）
2）使用after伪类

parent:after{

        content:".";             height:0; visibility:hidden;                      display:block;         clear:both;
 }
3）浮动外部元素
4）设置overflow为hidden或者auto

17.移动端的布局用过媒体查询吗？

css的媒体查询容许经过@media标签为特定媒体的浏览器设定样式，其中包含众多筛选，功能强大。
18.使用 CSS 预处理器吗？喜欢那个？            
SASS (SASS、LESS没有本质区别，只由于团队前端都是用的SASS)，可使用sass和less对css作模块化开发，定制样式的组件
19.CSS优化、提升性能的方法有哪些？
将样式表放到页面顶部
不使用CSS表达式
不使用@import
不使用IE的Filter

20.元素竖向的百分比设定是相对于容器的高度吗？

是的，元素的百分比设置通常是根据父级元素的宽高决定的，若是父级元素没有宽高百分比是不起做用的

21.什么是响应式设计？响应式设计的基本原理是什么？

响应式设计就是为了实现根据不一样设备环境自动响应及调整网页布局的一种设计方案
基本原理就是利用css的媒体查询功能更具不一样屏幕的大小，向下兼容设备、移动优先，达到响应的效果

22.::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的做用。

双冒号是在当前规范中引入的，用于区分伪类和伪元素。可是伪类兼容现存样式，浏览器须要同时支持旧的伪类，好比:first-line、:first-letter、:before、:after等。
对于CSS2以前已有的伪元素，好比:before和:after，单冒号和双冒号的写法::before和::after做用是同样的。
若是只须要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，若是不得不兼容IE浏览器，仍是用CSS2的单冒号写法比较安全。

23.display:inline-block 何时会显示间隙？

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

24.png、jpg、gif 这些图片格式解释一下，分别何时用？

GIF： 8位像素，256色   无损压缩   支持简单动画   支持boolean透明   适合简单动画
JPEG：颜色限于256   有损压缩   可控制压缩质量   不支持透明   适合照片
PNG：有PNG8和truecolor PNG    PNG8相似GIF颜色上限为256，文件小，支持alpha透明度，无动画、适合图标、背景、按钮

25.是CSS 预处理器 / 后处理器？

• 预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，加强了css代码的复用性，还有层级、mixin、变量、循环、函数等，具备很方便的UI组件模块化开发能力，极大的提升工做效率。

 

• 后处理器例如：PostCSS，一般被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常作的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

26.css sprite是什么,有什么优缺点。

概念：将多个小图片拼接到一个图片中。经过background-position和元素尺寸调节须要显示的背景图案
优势：
减小HTTP请求数，极大地提升页面加载速度
增长图片信息重复度，提升压缩比，减小图片大小
更换风格方便，只需在一张或几张图片上修改颜色或样式便可实现
缺点：
图片合并麻烦
维护麻烦，修改一个图片可能须要重新布局整个图片，样式

27.你用过栅格系统吗？

如今大部分UI框架都内置有删格化系统，经常使用bootstrap中的，bootstap它提供了一套响应式，移动优先的流式栅格系统(grid system)，将屏幕分红12列来实现响应式的。它的实现原理很是简单，Media Query加上float布局，也研究过bootstrap的源码，在这个过程当中也对预处理器有了更深的体会，删格系统这块在bootstrap中sass源码使用的循环生成，less使用的递归生成，我本身也单独封装过一个删格系统

28.渐进加强和优雅降级

渐进加强 ：针对低版本浏览器进行构建页面，保证最基本的功能，而后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 ：一开始就构建完整的功能，而后再针对低版本浏览器进行兼容。

29.什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？

FOUC - Flash Of Unstyled Content 文档样式闪烁
<style type="text/css" media="all">@import "../fouc.css";</style>
而引用CSS文件的@import就是形成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，而后再去导入外部的CSS文件，所以，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。 
解决方法简单的出奇，只要在<head>之间加入一个<link>或者<script>元素就能够了。

30.display: none;与visibility: hidden;的区别

联系：它们都能让元素不可见
区别：
display:none;会让元素彻底从渲染树中消失，渲染的时候不占据任何空间；
visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见
display: none;是非继承属性，子孙节点消失因为元素从渲染树消失形成，经过修改子孙节点属性没法显示；visibility: hidden;是继承属性，子孙节点消失因为继承了hidden，经过设置visibility: visible;可让子孙节点显式
修改常规流中元素的display一般会形成文档重排。修改visibility属性只会形成本元素的重绘。
读屏器不会读取display: none;元素内容；会读取visibility: hidden;元素内容

31.常见的布局方式

常见的布局这么几种单列水平居中布局, 一列定宽一列自适应布局, 两列定宽一列自适应布局, 两侧定宽中间自适应三列布局。
一列定宽一列自适应

定位布局

左边的宽度写死，右边盒子使用定位拉伸法实现，left等于左边盒子的宽度，right等于0

.left-box{
   width:200px;
}
.right-box{
  position:absolute; 
  left:200px; right:0; 
}

或者左边的定位写死宽度，右边的写padding-left等于左边的宽度（经常使用一点）

.left-box{ 
   width:200px;  
   position: fixed; 
   height:100%; 
}
.right-box{
  padding-left:200px;
}

浮动布局

左边的宽度写死而且浮动，右边盒子写overflow:hidden;利用的是建立一个新的BFC（块级格式化上下文）来防止文字环绕的原理来实现的。BFC就是一个相对独立的布局环境，它内部元素的布局不受外面布局的影响

.left-box {
        width: 200px;
        height: 150px;
        float: left;
        background: #f22;
}
.right-box {
        height: 200px;
        overflow: hidden;
        background: #cff;
 }

两列定宽一列自适应上面的布局方式一样适用

常见的三列布局通常使用圣杯布局和双飞翼布局。
圣杯布局和双飞翼布局
二者都属于三列布局，是一种很常见的页面布局方式，
三列通常分别是子列、主列和附加列，其中子列通常是居左的导航，且宽度固定；主列是居中的主要内容，宽度自适应；附加列通常是广告等额外信息，居右且宽度固定。

圣杯布局

<div class="container"> 
    <div class="main"></div> 
    <div class="sub"></div> 
    <div class="extra"></div> 
</div>
.container { 
    padding-left: 210px; 
    padding-right: 190px; 
}
.main { 
    float: left; 
    width: 100%; 
    height: 300px; 
}
.sub { 
    position: relative; 
    left: -210px; 
    float: left; 
    width: 200px; 
    height: 300px; 
    margin-left: -100%; 
}
.extra { 
    position: relative; 
    right: -190px; 
    float: left; 
    width: 180px; 
    height: 300px; 
    margin-left: -180px; 
}

双飞翼布局

<div class="main-wrapper"> 
    <div class="main"></div> 
</div>
<div class="sub"></div> 
<div class="extra"></div> 
.main-wrapper { 
    float: left; 
    width: 100%; 
}
.main { 
    height: 300px; 
    margin-left: 210px; 
    margin-right: 190px; 
    background-color: rgba(255, 0, 0, .5); 
}
.sub { 
    float: left; 
    width: 200px; 
    height: 300px; 
    margin-left: -100%; 
    background-color: rgba(0, 255, 0, .5); 
}
.extra { 
    float: left; 
    width: 180px; 
    height: 300px; 
    margin-left: -180px; 
    background-color: rgba(0, 0, 255, .5); 
}

俩种布局方式都是把主列放在文档流最前面，使主列优先加载。
两种布局方式在实现上也有相同之处，都是让三列浮动，而后经过负外边距造成三列布局。
两种布局方式的不一样之处在于如何处理中间主列的位置：圣杯布局是利用父容器的左、右内边距定位；双飞翼布局是把主列嵌套在div后利用主列的左、右外边距定位。

**其余的话还有
flex布局**
Flexbox又叫弹性盒模型。它能够简单使用一个元素居中（包括水平垂直居中），可让扩大和收缩元素来填充容器的可利用空间，能够改变源码顺序独立布局，以及还有其余的一些功能。
Flex布局是我最喜欢的布局，合理使用它可以大大减小布局方面的工做, 例如以上列举的三列布局也可使用flex轻松实现。此外在移动端使用flex也比较常见。
响应式布局
网页能够自动识别设备屏幕宽度，根据不一样的宽度采用不一样的CSS的样式，从而达到兼容各类设备的效果。
响应式布局使用媒体查询(CSS3 Media Queries), 根据不一样屏幕分辨率采用不一样CSS规则
流式布局
流式布常见的就是bootstrap了它提供了一套响应式，移动优先的流式栅格系统(grid system)，将屏幕分红12列来实现响应式的。它的实现原理很是简单，Media Query加上float布局

32.说一下CSS的hack

因为不一样厂商的流览器或某浏览器的不一样版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不同，致使在不一样浏览器的环境中呈现出不一致的页面展示效果。这时，咱们为了得到统一的页面效果，就须要针对不一样的浏览器或不一样版本写特定的CSS样式，咱们把这个针对不一样的浏览器/不一样版本写相应的CSS code的过程，叫作CSS hack

CSS Hack的方法

条件注释法
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]—>
类内属性前缀法
.hack{
    background-color:red; /* All browsers */   
    background-color:blue !important;/* All browsers but IE6 */   
    *background-color:black; /* IE6, IE7 */   
    +background-color:yellow;/* IE6, IE7*/  
    background-color:gray\9; /* IE6, IE7, IE8, IE9, IE10 */   
    background-color:purple\0; /* IE8, IE9, IE10 */   
    background-color:orange\9\0;/*IE9, IE10*/  
    _background-color:green; /* Only works in IE6 */   
}  

媒体查询
@media \0screen\,screen\9 { 
  .hack{ 
    /* IE 6 7 8 */ 
  }
}

@media screen and (-webkit-min-device-pixel-ratio:0) { 
   .demo { 
      /* Webkit内核 */ 
    }
}

33.说一下居中

水平垂直居中问题，在css中margin: 0 auto;能够实现水平居中，可是在垂直居中方面一直没有特定的属性，直到css3的出现，有了弹性盒，能够经过设置弹性盒直接设置居中位置，作浏览器兼容的话能够经过使用一些hack处理 负margin方法， table-cell方法，位移方法

负margin方法
咱们首先用top:50%和left:50%让inner的坐标原点（左上角）移动到container的中心，而后再利用负margin让它往左偏移自身宽的一半，再往上偏移自身高的一半，这样inner的中心点就跟container的中心点对齐了。

table－cell方法
经过将盒子转换为table元素，table元素自己是能够经过属性来控制位置，div上面的vertical-align: middle是控制垂直方向上的居中的，而text-align: center是控制水平方向的

弹性盒子法
align-items控制垂直方向的居中，justify-content控制水平方向的居中。这是CSS3的新方法

位移方法
位移方法和margin定位方法同样，只不过吧margin改为了位移不须要计算一半是多少，直接 transform:translate(-50%,--50%)

34.样式继承

可继承的样式font-size font-family color text-indent

35.link和@import的区别

link属于XHTML标签，而@import是CSS提供的
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载
@import只在IE5以上才能识别，而link是XHTML标签，无兼容问题
link方式的样式的权重 高于@import的权重

36.position属性

static：默认的属性值，按照标准流（包括浮动方式）进行布局。
relative：称为相对定位，使用相对的盒子的位置常以标准量的排版方式为基础，而后使盒子相对于它在本来的标准位置偏移指定的距离.相对定位仍在标准流中，它对父块和兄弟块盒子没有任何影响。
absolute：绝对定位，盒子的位置以它的包含框为基准进行偏移。绝对定位从标准流中脱离，而且以它最近的一个已经定位的祖先元素为基准进行定位。没有已经定位的祖先元素，则以浏览器窗口为基准进行定位。
inherit：规定从父元素继承 position 属性的值。
fixed：固定定位，与绝对定位相似，以浏览器窗口为基准进行定位，拖动浏览器窗口的滚动条时，位置保持不变。
sticky：粘性定位，粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，以后为固定定位。可是这个属性兼容性不太好，ios上支持度相对好一些