前端面试题（CSS篇）

CSS篇

1、介绍一下标准CSS的盒模型？低版本IE的盒子模型有什么不同的？
IE盒子模型、W3C盒子模型
盒模型：内容（content）、填充（padding）、边界（margin）、边框（border）
区别：IE 的content部分把border和padding计算了进去；
在CSS3中引入了box-sizing属性，它可以允许改变默认的CSS盒模型对元素宽高的计算方式，共包括两个选项
content-box：标准盒模型，CSS定义的宽高只包含content的宽高
border-box：IE模型，CSS定义的宽高包括了content，padding和border

2、CSS选择符有哪些？哪些属性可以继承？
id选择器（#myid）
类选择器（.myclassname）
标签选择器（div, h1, p）
相邻选择器（h1+p）
子选择器（ul>li）
后代选择器（li a）
通配符选择器（*）
属性选择器（a[rel="external"]）
伪类选择器（a:hover, li:nth-child）
可继承的样式：font-size font-family color, ul li dl dd dt;
不可继承的样式：border padding margin width height;

4、CSS3新增伪类有哪些？
p:first-of-type 选择属于其父元素的首个<p>元素的每个<p>元素
p:last-of-type 选择属于其父元素的最后<p>元素的每个<p>元素
p:only-of-type 选择属于其父元素的唯一子元素的每个<p>元素
p:only-child 选择属于其父元素的唯一子元素的每个<p>元素
p:nth-child(2) 选择属于其父元素的第二个子元素的每个<p>元素
:after 在元素之前添加内容，也可以用来做清除浮动
:before 在元素之后添加内容
:disabled 控制表单控件的禁用状态
:checked 单选框或复选框被选中

5、如何居中div

• 负margin方法
  CSS代码

.container {
	width: 500px;
	height: 400px;
	border: 2px solid #cfc;
	position: relative;
}
.inner {
	width:480px;
	height: 380px;
	background-color: limegreen;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -190px; /*height的一半*/
	margin-left: -240px; /*width的一半*/ 
}

HTML代码

<div class="container"><div class="inner"></div></div> 

这里，我们首先用top:50%和left:50%让inner的坐标原点（左上角）移动到container的中心，然后再利用负margin让它往左偏移自身宽的一半，再往上偏移自身高的一半，这样inner的中心点就跟container的中心点对齐了。

• table-cell方法
  CSS代码：

div{    
     width: 300px; 
     height: 300px; 
     border: 3px solid #555; 
     display: table-cell; 
     vertical-align: middle; 
     text-align: center; 
}
img{
     vertical-align: middle; 
}

HTML代码：

<div><img src="mm.jpg"></div> 

通过将盒子转换为table元素，table元素本身是可以通过属性来控制位置，div上面的vertical-align: middle是控制垂直方向上的居中的，而text-align: center是控制水平方向的

• 弹性盒子法
  CSS代码：

.container{
	width: 300px; 
    height: 200px; 
    border: 3px solid #546461; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-align-items: center; 
    align-items: center; 
    -webkit-justify-content: center; 
    justify-content: center;  
} 
.inner{
    border: 3px solid #458761; 
    padding: 20px;  
}

HTML代码：

<div class="container"> 
     <div class="inner"> 
         我在容器中水平垂直居中 
     </div> 
</div>

align-items控制垂直方向的居中，justify-content控制水平方向的居中。这是CSS3的新方法

• 位移方法
  位移方法和margin定位方法一样，只不过吧margin改成了位移不需要计算一半是多少，直接 transform:translate(-50%,--50%)

6、display有哪些值？说明他们的作用
block 象块类型元素一样显示。
none 缺省值。象行内元素类型一样显示。
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示，并添加样式列表标记。
table 此元素会作为块级表格来显示
inherit 规定应该从父元素继承 display 属性的值

7，position的值relative和absolute定位原点是？
absolute 生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。
fixed （老IE不支持） 生成绝对定位的元素，相对于浏览器窗口进行定位。
relative 生成相对定位的元素，相对于其正常位置进行定位。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。
inherit 规定从父元素继承 position 属性的值。

8，CSS3有哪些新特性？
新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）
圆角 （border-radius:8px）
多列布局 （multi-column layout）
阴影和反射 （Shadow\Reflect）
文字特效 （text-shadow）
文字渲染 （Text-decoration）
线性渐变 （gradient）
旋转 （transform）
增加了旋转,缩放,定位,倾斜,动画，多背景

transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

9，用纯CSS创建一个三角形的原理是什么？
把上、左、右三条边隐藏掉（颜色设为 transparent）

#demo {
   width: 0;
   height: 0;
   border-width: 20px;
   border-style: solid;
   border-color: transparent transparent red transparent;
}

10，一个满屏 品 字布局 如何设计?
简单的方式：
上面的div宽100%，
下面的两个div分别宽50%，
然后用float或者inline使其不换行即可

11，li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。

16，请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式
浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
1.使用空标签清除浮动。
这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。
2.使用overflow。
给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
3.使用after伪对象清除浮动。
该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；

17、CSS优化、提高性能的方法有哪些？
将样式表放到页面顶部
不使用CSS表达式
不使用@import
不使用IE的Filter

18、png、jpg、gif 这些图片格式解释一下，分别什么时候用？
GIF： 8位像素，256色，无损压缩 ，支持简单动画，支持boolean透明，适合简单动画
JPEG：颜色限于256 ，有损压缩，可控制压缩质量，不支持透明 适合照片
PNG：有PNG8和truecolor PNG PNG8类似GIF颜色上限为256，文件小，支持alpha透明度，无动画、适合图标、背景、按钮

19、display: none;与visibility: hidden;的区别
display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间
visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见