前端面试题集锦(css篇)

请描述一下 CSS 选择器的优先级别顺序?

!import > 内嵌 > id > class > tag > *

就近原则,优先级就近原则,同权重情况下样式定义最近者为准;


双飞翼布局?

-- css --

.left,.right{ position: absolute; top: 0; width: 200px;}
.left { left: 0; }
.right {right: 0; }
.center {  margin: 0 200px;}

-- html --

< div class="center" >
< div class="left" >
< div class="right" >

"品"字形布局?

--  css --

header{ width:100%;   height:40%;  background: #e33;}
main{  width:100%;  height: 60%; }
main:after{   content:"";  display:table; clear:both; overflow:hidden }
.left, .right{  width:50%; height: 100%;  float:left;   background: #a23;}
.right{ background: #e11;}
    

-- html --

 

“圣杯”布局?
-- css --
body { min-width: 550px;}
main {  padding-left: 200px;  padding-right: 150px;  }
.column { position: relative; float: left;}
#center { width: 100%;}
#left { width: 200px;  right: 200px;  margin-left: -100%;}
#right { width: 150px;  margin-right: -150px;}
footer { clear: both;}
* html #left {left: 150px; /*  IE6 Fix*/}


-- html --

请列举一些浏览器兼容性问题?以及提高性能方面的方案

兼容性

  1. 不加文档声明IE下会陷入怪异合模型解析;
  2. IE6 下高度小于 19px 的元素,高度会被当作 19px 处理(可利用 overflow 解决);
  3. chrome 下字体大小小于 12px 时会被当作 12px 来处理 (目前只能截图处理);
  4. 在 IE8 以前的 IE 中不识别 HTML5 新增的标签; (可利用 document.createElement 来创建该标签);
  5. 在 IE6 下,块元素有浮动 ,左右的 margin 值会被放大成两倍(display:inline);
  6. 在 IE6,7 下 li 本身没有浮动,但是内容浮动了,li 下边就会多出间隙( li 加浮动或 vertical-align:top )

优化

  1. 加载方面
  • 慎用 @import:import 会使我们的 link 样式由原本的并发加载,变成异步加载;
  • 压缩代码体积:
    • 压缩代码,删除换行,多余的空格和注释;
    • 合并重复代码,提高代码的通用性;
    • 精简包含选择符,在使用包含选择的时候,尽量精简层级;
    • 能使用复合样式时,尽量使用复合样式;
    • 多利用继承,来精简样式;
  1. 优化请求
  • 使用 css 精灵,减少图片个数和体积;
  • 合理合并文件,精简外部文件个数;
  • 对于不需要重复使用的图片,可适当使用 data Uri;
  • 在设计统一的情况下,可使用 FontIcon 的方法,来统一整合页面上的图片;
  1. 渲染方面
  • 涉及动画方面,尽量可以使用位移来解决,努力减少回流;
  • 涉及动画方面,可以利用 3D,来进行 GPU 加速;
  • 避免使用 table,为了减少回流;
  • 避免 text-shadow 和 box-shadow 层级过多;
  • 减少浮动和绝对定位的滥用;
  • 不滥用 WEB 字体,在部分浏览器下会造成渲染阻塞;
  1. 其它性能方面
  • 遵守盒模型规则
  • 避免使用过多的长串选择器
  • 不滥用浮动
  • 不滥用web字体
  • 不声明过多的font-size
  • 标准化前缀
  • 谨慎选择选择器

其实还有很多……懒得写了~~ ㄟ(▔,▔)ㄏ


用纯CSS创建一个三角形的原理是什么?

均分原理。把上、左、右三条边隐藏掉。

width:0;
height:0;
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:7px solid #c00;
font-size:0;
line-height:0;

li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?

给ul一个font-size:0。行框的排列会受到中间空白(回车空格等等)的影响,这些空白也会被应用样式,占据空间。


CSS里的visibility属性有个collapse属性值是干嘛用的?在不同浏览器下以后什么区别?

  • 在谷歌浏览器里,使用 collapse 值和使用 hidden 值没有什么区别。
  • 在火狐浏览器、Opera和IE11里,使用 collapse 值的效果就如它的字面意思:table的行会消失,它的下面一行会补充它的位置。

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

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


CSS哪些属性可以继承?

  • 可继承的样式: font-size font-family color, UL LI DL DD DT;
  • 不可继承的样式:border padding margin width height ;

实现**不使用 border **画出1px高的线, 在标准模式与怪异模式下都能保持一致
height:1px;
overflow:hidden;
background:red

CSS3选择器有那些?
元素选择符 关系选择符 属性选择符 伪类选择符 伪对象选择符
* E F E[att] E:focus E:first-letter
E E>F E[att="val"] E:lang () E:first-line
# E+F E[att~="val"] E:not() E:first-letter
.class E~F E[att^="val"] E:root E:before
--- --- E[att$="val"] E:first-child E:after
--- --- E[att*="val"] E:last-child E::selection
--- --- E[attI="val"] E:on-child ----
--- --- - ---- E:nth-child(n) ---
--- --- - ---- E:nth-last-child(n) ---
--- --- - ---- E:first-of-type ---
--- --- - ---- E:last-of-type ---
--- --- - ---- E:only-of-type ---
--- --- - ---- E:nth-of-type(n) ---
--- --- - ---- E:nth-last-of-type(n) ---
--- --- - ---- E:empty ---
--- --- - ---- E:checked ---
--- --- - ---- E:enabled ---
--- --- - ---- E:disabled ---
--- --- - ---- E:target ---
--- --- - ---- @page:first ---
--- --- - ---- @page:left ---
--- --- - ---- @page:right ---

请解释一下CSS3的Flexbox以及适用场景?
  • 一个用于页面布局的全新CSS3功能,Flexbox可以把列表放在同一个方向(从上到下排列,从左到右),并让列表能延伸到占用可用的空间。
  • 较为复杂的布局还可以通过嵌套一个伸缩容器(flex container)来实现。
  • 采用Flex布局的元素,称为Flex容器(flex container),简称"容器"。
  • 它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称"项目"。
  • 常规布局是基于块和内联流方向,而Flex布局是基于flex-flow流可以很方便的用来做局中,能对不同屏幕大小自适应。
  • 在布局上有了比以前更加灵活的空间。

持续更新........................

部分摘录自 妙味课堂

你可能感兴趣的:(前端面试题集锦(css篇))