前端面试题集锦(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>
< div class="left" ></div>
< div class="right" ></div>

---

"品"字形布局?

--  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 --

 <header></header>
<main>
  <div class="left"></div>
  <div class="right"></div>
</main>

---

“圣杯”布局？

-- 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 --
<header></header>
<main>
  <section id="center" class="column"></section >
  <section  id="left" class="column"></section >
  <section id="right" class="column"></section >
</main>
<footer></footer>

---

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

兼容性

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 样式由原本的并发加载，变成异步加载；
• 压缩代码体积：
  • 压缩代码，删除换行，多余的空格和注释；
  • 合并重复代码，提高代码的通用性；
  • 精简包含选择符，在使用包含选择的时候，尽量精简层级；
  • 能使用复合样式时，尽量使用复合样式；
  • 多利用继承，来精简样式；

2. 优化请求

• 使用 css 精灵，减少图片个数和体积；
• 合理合并文件，精简外部文件个数；
• 对于不需要重复使用的图片，可适当使用 data Uri；
• 在设计统一的情况下，可使用 FontIcon 的方法，来统一整合页面上的图片；

3. 渲染方面

• 涉及动画方面，尽量可以使用位移来解决，努力减少回流；
• 涉及动画方面，可以利用 3D，来进行 GPU 加速；
• 避免使用 table，为了减少回流；
• 避免 text-shadow 和 box-shadow 层级过多；
• 减少浮动和绝对定位的滥用；
• 不滥用 WEB 字体，在部分浏览器下会造成渲染阻塞；

4. 其它性能方面

• 遵守盒模型规则
• 避免使用过多的长串选择器
• 不滥用浮动
• 不滥用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流可以很方便的用来做局中，能对不同屏幕大小自适应。
• 在布局上有了比以前更加灵活的空间。

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

部分摘录自 妙味课堂