50道css基础面试题

1、介绍一下标准的css的盒子模型？与低版本IE的盒子模型有什么不同？

答：标准的盒子模型：宽度=内容的宽度（content）+border+padding+margin

       低版本IE盒子模型：宽度=内容宽度（content+border+padding）+margin

2、box-sizing的属性？

答：用来控制元素的盒子模型的解析模式，默认为content-box

content-box:W3C的标准盒子模型，设置元素的height/width属性指的是content部分的宽/高

border-box:IE传统盒子模型，设置元素的height/width属性指的是border+padding+content部分的宽/高

3、css的选择器有哪些？哪些属性可以继承？

答：css选择符：id选择器（#），类选择器（.），标签选择器（html标签）,相邻选择器（h1+p），子选择器（ul>li），后代选择器（li a）、通配符选择器（*），属性选择器（a[href="#"]）、伪类选择器（a:hover,a:link,a:before，li:nth-child）

可继承的属性：font-size,font-family,color

不可继承的属性：border,padding,margin,width,height

优先级：！important>id>class>tag

注：！importan比内联优先级高。

4、css优先级算法如何计算？

答、元素选择器：1

       class选择符：10

       id选择器：100

       行内样式：1000

注：！important的声明的样式优先级最高，如果冲突再进行计算

         如果优先级相同，则选择最后出现的样式

         继承得到的样式的优先级最低

5、css3新增的伪类有哪些？

答：p:first-of-type:选择属于其父元素的首个元素

　　p:last-of-type:选择属于其父元素的最后元素

　　p:only-of-type:选择属于其父元素的唯一的元素

　　p:nth-child(2):选择其属于父元素的第二个子元素

　　:enabled:disabled:表单空间的禁用状态

　　:checked:单选框或复选框被选中

6.如何居中div?如何居中一个浮动元素？如何让绝对定位的div居中？

让div水平居中
div{//这种居中需要知道其父元素的宽度
border:1px solid red;
margin:0 auto;
height:50px;
width:80px;}
浮动元素的上下左右居中：
border：1px solid red;
float:left;
position:absolute;
width:100px;
left:50%;
top:50%;
margin:-50px 0 0 -100px;
绝对定位的左右居中：

border：1px solid red;
position:absolute;
width:200px;
left:0;
right:0;
margin:0 auto;

7、display有哪些值？说明他们的作用？

答：inline（默认）-内联

       none:隐藏

       block:块显示

       table:表格显示

       list-item-项目列表

       inline-block:行内块

8、position的值？

答：static(默认)：按照正常文档流进行排列

       relative(相对定位)：不脱离文档流，参考自身静态位置，通过top、bottom、left、right定位

       absolute(绝对定位):参考距其最近的一个不为static的父元素（relative、absolute）通过top、bottom、left、right定位

9、css3有哪些新特性？

　　1、RGBA和透明度

　　2、background-image background-origin(content-box,border-box,padding-box) background-size:background-repeat

　　3、word-wrap(对长的不可分割单词换行)

     　　word-wrap:break-word

　　4、文字阴影：text-shadow:5px 5px 5px #ff0000(水平阴影、垂直阴影、模糊距离、阴影颜色)

　　5、font-face属性：定义自己的字体

　　6、圆角（边框半径）:border-radius

　　7、边框图片：border-image:url(border.png) 30 30 round

　　8、盒阴影：box-shadow:10px 10px 5px #888888

　　9、媒体查询：定义两套css,当浏览器的尺寸变化时会采用不同的属性。

10、请解释一下css3的flexbox（弹性盒布局模型），以及使用场景？

答：该布局模型的目的是提供一种更高效的方式来对容器中的条目进行布局，对其和分配空间。在传统的布局方式中，block布局是把块在垂直方向上从上到下依次排列的；而inline布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。

适用场景：弹性布局适合用于移动端开发，在Android和ios也完美支持。

11、常见的IE兼容性问题？

1、不同的浏览器默认的margin和padding不一样。*{margin:0，padding:0}

2、IE双边距bug（浮动加倍）：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。

      解决办法：在浮动元素的样式设置中增加display:inline属性。

3、渐进的识别方式：从总体中主键排除局部。首先巧妙的使用“9”这一标记，将IE浏览器从所有的情况中分离出来，接着再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

例：{background-color：#ff0000;/*所有识别*/

        .background-color:#ff0000\9;/*IE6、7、8识别*/

        +background-color:#ff0000;/*IE6、7识别*/

        _background-color:#ff0000;}/*IE6识别*/

4、chrome中文界面下默认会将小于12px的文本强制按照12px显示，可通过加入css属性-webkit-text-size-adjust:none解决。

12、为什么要初始化css样式

答：因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对css初始化往往会出现浏览器之间的页面显示差异。

13、css里的visibility属性有个collapse属性值，在不同的浏览器下有什么区别？

答：在chrome中，使用collapse值后和使用hidden没有区别。

       在firefox、opera和IE，使用collapse值和使用display:none没有什么区别。

14、display:none与visibility:hidden的区别？

答:display:none不显示对应的元素，在文档布局中不再分配空间（回流+重绘）

    visibility:hidden隐藏对应元素，在文档布局中仍然保留原来的空间（重绘）

15、position跟display、overflow、float这些特性相互叠加后会怎么样？

答：display属性规定元素应该生成框的类型；

       position属性规定元素的定位类型，float属性是一种布局方式，定义元素在哪个方向浮动。类似于优先级别机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float或者absolute定位的元素，只能是块元素或者表格。

16、为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

答:浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现的就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上

    浮动带来的问题：

    1、父元素的高度无法被撑开，影响与父元素同级的元素

    2、与浮动元素同级的非浮动元素（内联元素）会跟随其后

    3、若非一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

清除浮动的方式：

1、给父元素定义一个高度（height）

2、最后一个浮动元素后孔家div标签，并添加样式clear:both

3、包含浮动元素的父标签添加样式overflow为hidden或outo

4、父级定义zoom

17、上下margin重合的问题

在重合元素外包裹一层容器，并触发该容器生成一个BFC

<div class="aside"></div>
<div class="text">
    <div class="main"></div>
</div>
css样式
.aside{margin-bottom:100px;
          width:100px;
          height:150px;
          background:#f66;}
.main{margin-top:100px;
          height:200px;
          background:#fcc;
}
.text{/*盒子main的外面包一个div，通过改变div的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/
        overflow:hidden;//此时已经触发了BFC属性。
}    

18、设置元素浮动后，该元素的display值是什么？

答：自动变成display：block;

19、移动端的布局用过媒体查询吗？

答：通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，以适应设备的显示

1、<link rel="stylesheet" type="text/css" href="xxx.css" media="only screen and(max-device-width:480px)">

2、css:@media only screen and(max-device-widhth:480px)

20、css优化、提高性能的方法有哪些？

1、避免过度约束

2、避免后代选择符

3、避免链式选择符

4、使用紧凑的语法

5、避免不必要的命名空间

6、避免不必要的重复

7、最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么

8、避免使用！important

9、尽可能精简规则，你可以合并不同类里的重复规则

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

答：当按百分比设定一个元素的宽度是，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如：padding-top,padding-bottom,mairgin-top,margin-bottom等，当按百分比设定他们时，依据的也是父容器的高度，而不是高度。

22、什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本浏览器？

答：响应式网站设计（Responsive Web Design）是一个网站能够兼容多个终端，而不是为每一个终端都做一个特定的版本。

基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。

页面头部必须有meta声明的viewport

<meta neme="viewport" content="width=device-width,"instal-scale="1",maximum-scale="1",user-scable="no" />

23、::before和：after中双冒号和单冒号有声明区别？解释一下这2个伪元素的作用。

答:1、单冒号（:）用于css3伪类，双冒号用于（::）css3伪元素。

     2、::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在与dom中，只存在页面之中。

:before和:after这两个伪元素，是在css2.1里新出现的，起初伪元素的前缀使用的是单冒号语法，但随着web的进化，在css3的规范里，伪元素的语法被修改成用双冒号，成为::before和::after.

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

1、有空格的时候会有间隙     解决：移除空格

2、margin正值的时候            解决：margin使用负值

3、使用font-size的时候         解决：font-size:0、letter-space、word-spacing

25、有一个高度自适应的div，里面有两个div，一个高度100px，希望另外一个填满剩下的高度？

外层div使用position：relative；高度要求自适应的div使用position：absolute；top：100px;bottom:0;left:0

26、文字超出部分以省略号显示的css设置

div{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap}