CSS3 核心知识面试题

 

一种常见利用伪类清除浮动的代码

.clearfix:after {
content:"."; //这里利用到了content属性
display:block;
height:0;
visibility:hidden;
clear:both; 
}
.clearfix {
*zoom:1;
}

 

box-sizing属性？

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

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

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

 

CSS优先级算法如何计算？

元素选择符： 1
class选择符： 10
id选择符：100
元素标签：1000
!important声明的样式优先级最高

 

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

首先，需要把元素的宽度、高度设为0。然后设置边框样式。
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
borer-bottom: 40px solid #ff0000;

 

设置元素浮动后，该元素的display值是多少？

自动变成display:block

 

解释该div高度的意思：height: calc(50vh - 100px)

less预编译写法：height: calc(~‘50vh - 100px’) 或 height: ~‘calc(50vh - 100px)’

 

在网页中的应该使用奇数还是偶数的字体？为什么呢？

使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。