css面试题总结（转）

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css面试题总结（转）相关的知识，希望对你有一定的参考价值。

转自此网页http://www.cnblogs.com/YangqinCao/p/5721810.html。

1、两栏布局，左边栏宽度固定，适应父元素高度变化

首先分析两栏布局，

两栏布局两种常见方法，

技术分享
.left{
    width:200px;
    float:left;
}
.main{
    margin-left:200px;
}
技术分享

 

技术分享
.left{
    width:200px;
    position:absolute;
    top:0;
    left:0;
}
.main{
    margin-left:200px;
} 
技术分享

对于第一种方法，使用float，可以通过将左边栏的padding-bottom设置为足够大的值，然后为margin-bottom设置同样大小的负值，用以弥补padding造成的长度过长，然后设置父元素overflow:hidden

技术分享
.container{
    overflow:hidden;
}
.left{
    width:200px;
    float:left;
    padding-bottom:5000px;
    margin-bottom:-5000px;
}
.main{
    margin-bottom:210px;
}
技术分享

演示：https://cdn.rawgit.com/Yangqin0607/ife.baidu/master/mianshi/%E5%B1%85%E4%B8%AD/test2.html

对于第二种方法，使用absolute，使得左边栏脱离了文档流，但是高度还需要随父元素高度变化怎么办呢？

技术分享
.left{
    width:200px;
    position:absolute;
    top:0;
    left:0;
    bottom:0;//第一种方法，设置为bottom为0；第二种方法设置高度100%；
}
.main{
    margin-left:200px;
}
技术分享

 演示：https://cdn.rawgit.com/Yangqin0607/ife.baidu/master/mianshi/%E5%B1%85%E4%B8%AD/test1.html

技术分享
.parent{
    position: relative;
}
.left{
    position: absolute;
    top: 0px;
    width: 200px;
    height: 100%;
}
.main{
    margin-left: 210px;
}
技术分享

 

 演示：https://cdn.rawgit.com/Yangqin0607/ife.baidu/master/mianshi/%E5%B1%85%E4%B8%AD/test6.html

 

2、水平垂直居中

1）子元素宽高已知

.element {
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    margin-top: -200px;    /* 高度的一半 */
    margin-left: -300px;    /* 宽度的一半 */
}

 

技术分享
.element {
    width: 600px; height: 400px;
    position: absolute; 
    left: 0; 
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;    /* 有了这个就自动居中了 */
}
演示地址：https://cdn.rawgit.com/Yangqin0607/ife.baidu/master/mianshi/%E5%B1%85%E4%B8%AD/test3.html
技术分享

 

2）子元素宽高未知

.element{
    position:absolute; 
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);//有兼容性问题
}

 

3) 多行文字垂直居中

技术分享
<div class="container">
    <div class="child">
         <span>
              我是第一行文字<br/>
          我是第二行文字<br/>
          我是第三行文字<br/>
          我是第四行文字<br/>
          我是第五行文字
         </span>
    </div>
</div>
技术分享

 

技术分享
.child{
    height:600px;
    background-color:pink;
    line-height:600px;
   text-align：center
}
.child span{
    display:inline-block;
    line-height:1.5em;
    vertical-align:center;
}
技术分享

 

技术分享

 

4) 图片垂直居中方法 

div { line-height: 240px; } img { vertical-align: middle; }
效果并不是完全的垂直居中，只是近似
那是因为「幽灵空白节点」高度行高撑开，其垂直中心是字符content area的中心，而对于字符x而言，都是比绝对中心位置要下沉的（不同字体下沉幅度不一样），换句更易懂的描述就是x的中心位置都是在字符内容区域高度中心点的下方，而这上下的偏差就是这里图片上下间距的偏差。
middle中线位置(字符x的中心)并不是字符内容的绝对居中位置。两个位置的偏差就是图片近似居中的偏差。

要想完全垂直居中，最先想到的方法就是让后面的“幽灵字符”也是vertical-align:middle，然而，既然称之为“幽灵”就表示不会受非继承特性的属性影响，所以，根本没法设置vertical-align:middle，除非你自己创建一个显示的内联元素。

“幽灵字符”可以受具有继承特性的CSS属性影响，于是，我们可以通过其他东西来做调整，让字符的中线和字符内容中心线在一起，或者说在一个位置上就可以了。

设置font-size:0, 因此此时content area高度是0，各种乱七八糟的线都在高度为0的这条线上，绝对中心线和中线重合。自然全垂直居中：

<div>
    <img src="1.png"> //img后须有空格或换行才能有幽灵空白节点
</div>
技术分享
.div{
    font-size:0;
    line-height:200px;
}
img{
    vertical-align:middle;
}
技术分享

 

 参考：http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/

演示地址：https://cdn.rawgit.com/Yangqin0607/ife.baidu/master/mianshi/%E5%B1%85%E4%B8%AD/test5.html

3、如何居中一个浮动元素

技术分享
.div {
      width:500px ; 
      height:300px;
      position:relative;相对定位
      left:50%;
      top:50%;
      margin: -150px 0 0 -250px;
    }
技术分享

 

4、描述下 “reset” CSS 文件的作用和使用它的好处

reset.css能够重置浏览器的默认属性。不同的浏览器具有不同的样式，重置能够使其统一。比如说ie浏览器和FF浏览器下button显示不同，通过reset能够统一样式，显示相同的效果。但是很多reset是没必要的，多写了会增加浏览器在渲染页面的负担。

 

5、 解释下浮动和它的工作原理

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

清除浮动的方式：

1. 在浮动元素后面设置空div,设置clear:both

2. 在浮动元素后面添加换行<br clear="all" />

3. 给父元素添加overflow:hidden;

4. 父元素设置浮动

5. 在父元素上应用:after

技术分享
.parent:after{
　　content:".";
　　display:block;
   height:0;
   visibility:hidden;
   clear:both;
}
.parent{
　　zoom:1;
}
技术分享

 

1) display:block 使生成的元素以块级元素显示,占满剩余空间; 
2) height:0 避免生成内容破坏原有布局的高度。 
3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互; 
4）通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的

5）zoom：1 触发IE hasLayout。 
除了clear：both用来清除浮动的，其他代码无非都是为了隐藏掉content生成的内容

Unicode字符里有一个“零宽度空格”，也就是U+200B ，这个字符本身是不可见的，所以我们完全可以省略掉 visibility:hidden了 

技术分享
.parent{
　　content:"\\200b";
    display:block;
　　height:0;
　　clear;both;

}
.parent{
　　zoom:1;
}
技术分享

 方法3,4,5都是因为生成了BFC，计算BFC的高度时，浮动元素也参与计算，由此解决了父元素的高度塌陷问题。

BFC：http://www.cnblogs.com/YangqinCao/p/5421898.html

详见：http://www.jb51.net/css/67471.html

浮动的问题

浮动因脆弱而饱受诟病。大多数的脆弱性来自于 IE6 及其一系列的浮动相关 bug。因为越来越多的设计师不再支持 IE6 了，你也可以不关注它了。不过对于那些要关注的人来说，这里有些大概。

  • 推倒是浮动元素内的元素（大多是图片）比浮动元素本身宽造成的现象。大多数的浏览器会在浮动之外渲染图片，但是不会有伸出来的部分影响其他布局。IE 会扩展浮动来包含图片，经常大幅度地影响布局。一个普遍的例子是突破伸出主内容之外把侧栏推到下面。技术分享

　　快速修正：确保不是图片造成这种情况，使用 overflow:hidden 来切除多余的部分。

  • 双倍边距bug处理 IE6 时，另一个需要记住的事情是，如果在和浮动方向相同的方向上设置外边距(margin)，会引发双倍边距。快速修正：给浮动设置 display:inline; 而且不用担心，它依然是块级元素。
  • 3像素间距是指挨着浮动元素的文本会神奇的被踢出去3像素，好像浮动元素的周围有一个奇怪的力场一样。快速修正：在受影响的文本上设置宽度或高度。
  • IE7 中，底边距 bug是当浮动父元素有浮动子元素时，这些子元素的底边距会被父元素忽略掉。快速修正：用父元素的底内补白(padding)代替。

详见：http://www.cnblogs.com/hnyei/archive/2011/09/27/2193133.html

 

6、relative、fixed、absolute 和 static 元素的区别

position有3个属性:static  absolute  relative fixed

static：元素没有定位，在文档流中出现在正常的位置。默认值，忽略 top, bottom, left, right 或者 z-index 声明。

absolute：绝对定位，脱离文档流，相对于最近的属性不为static的父元素位置。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

relative：相对定位，相对于原来文档流中正常出现的位置的偏移，但其在文本流中的位置依然存在。通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级。

fixed: 元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身。相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

inherit 规定从父元素继承 position 属性的值。

 

7、inline-block和float区别

1）文档流:浮动元素会脱离文档流，并使得周围元素环绕这个元素。而inline-block元素仍在文档流内。因此设置inline-block不需要清除浮动。当然，周围元素不会环绕这个元素

2）水平位置：很明显你不能通过给父元素设置text-align:center让浮动元素居中。事实上定位类属性设置到父元素上，均不会影响父元素内浮动的元素。但是父元素内元素如果设置了display：inline-block，则对父元素设置一些定位属性会影响到子元素。（这还是因为浮动元素脱离文档流的关系）。

3）垂直对齐：inline-block元素沿着默认的基线对齐。浮动元素紧贴顶部。你可以通过vertical属性设置这个默认基线，但对浮动元素这种方法就不行了。这也是我倾向于inline-block的主要原因。

4）空白：inline-block包含html空白节点。如果你的html中一系列元素每个元素之间都换行了，当你对这些元素设置inline-block时，这些元素之间就会出现空白。而浮动元素会忽略空白节点，互相紧贴。

为了删除这些空白，可以删除HTML中的空白；使用负的外边距；给父元素设置font-size:0

原文：http://blog.163.com/zx_1258/blog/static/1332337992012111184519374/

 

怎么使用：

  1. 使用inline-block：当你需要控制元素的垂直对齐跟水平排列时，使用inline-block。
  2. 使用浮动：当你需要让元素环绕某一个元素时，或者需要支持旧版本ie，或者不想处理inline-block带来的空白问题时，使用浮动。

 

8、常见兼容性问题？

1）png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.

2）浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

3）IE6双边距bug:块属性标签float后，设置水平margin时，在ie6显示margin比设置的大。

浮动ie产生的双倍距离 ：#box{ float:left; width:10px; margin:0 0 0 10px;}

解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性

4）IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;

Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.

5）IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.

解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。

6）Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,解决方案：加入 CSS 属性 -webkit-text-size-adjust: none; //测试有点问题，在看看

7）超链接访问过后hover样式就不出现了 点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

8）设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

问题症状：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度

解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。

9）图片默认有间距

问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了通配符也不起作用。

解决方案：使用float属性为img布局

备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。（也可以使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法）

10）标签设置min-height不兼容

问题症状：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容

解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

备注：当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。

11）3像素问题：ie6下，当浮动元素与流动元素并列显示时，他们之间会存在三像素问题。

解决方法：用hack技术， 例如：所有浏览器通用 height:100px; 
                                                  ie6专用_height:100px;
                                                  ie7专用*+height:100px; 
                                                  ie6/ie7共用*height:100px;

12）当定义行内元素为包含框时，且包含框包含的绝对定位元素以百分比为单位进行定位时，会出现混乱。

13）opacity 定义元素的不透明度

  filter：alpha（opacity=80）；/*ie支持该属性*/
  opacity：0.8；/*支持css3的浏览器*/

14）z-index不起作用的 bug

1）ie6下 首先讲讲第一种z-index无论设置多高都不起作用情况。这种情况发生的条件有三个：1、父标签position属性为relative；2、问题标签含有浮动(float)属性。
2）父标签position属性为relative或absolute时，子标签的absolute属性是相对于父标签而言的。而在IE6下，层级的表现有时候不是看子标签的z-index多高，而要看它们的父标签的z-index谁高谁低。

15）使用hacker可以把浏览器分为3类：IE6 ；IE7和遨游；其他（IE8 chrome ff safari opera等）

◆IE6认识的hacker 是下划线_ 和星号 *

◆IE7 遨游认识的hacker是星号 *

内容摘自：http://www.cnblogs.com/duanhuajian/archive/2012/09/23/2699119.html        http://blog.csdn.net/chuyuqing/article/details/37561313/

 

9、页面导入样式时，使用link和@import有什么区别？

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

区别4：link支持使用javascript控制DOM去改变样式；而@import不支持。

 

<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />   

<style type="text/css" media="screen">   
@import url("CSS文件");   或者  @import url(style.css)
</style> 

 

10、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

首先：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。

（1）行内元素有：a b span img input select strong（强调的语气）
（2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

（3）常见的空元素：
<br> <hr> <img> <input> <link> <meta>
鲜为人知的是：
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>





































以上是关于css面试题总结（转）的主要内容，如果未能解决你的问题，请参考以下文章

Java进阶之光！2021必看-Java高级面试题总结

经验总结：Java高级工程师面试题-字节跳动，成功跳槽阿里！

CSS面试题总结

Java面试题全集（上）(中)（下） （转）+自己总结

前端基础：100道CSS面试题总结

前端面试题总结——HTML5 CSS3