新的面试题CSS

解释CSS Hack

一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。

IE浏览器Hack一般又分为三种，条件Hack、属性级Hack、选择符Hack（详细参考CSS文档：css文档）。例如：

// 1、条件Hack

复制代码

<!--[if IE]>
<style>
.test{color:red;}
</style>
<![endif]-->
// 2、属性Hack
.test{
color:#0909; /* For IE8+ */
*color:#f00; /* For IE7 and earlier */
_color:#ff0; /* For IE6 and earlier */
}
// 3、选择符Hack
* html .test{color:#090;} /* For IE6 and earlier */
* + html .test{color:#ff0;} /* For IE7 */

简要描述CSS中 content属性的作用？

content属性与：before及：after伪元素配合使用，用来插入生成的内容，可以在元素之前或之后放置生成的内容。可以插入文本、图像、引号，并可以结合计数器，为页面元素插入编号

复制代码

body{
counter-reset:chapter；
}
h1:before{
content："第" counter（ chapter）"章"
}
h1{
counter-increment:chapter：
}
<h1></h1>
<h1></h1>
<h1></h1>
使用 content属性，并结合 :before选择器和计数器 counter，可以在每个<h1>元素前插入新的内容。

CSS的float和absolute属性的异同

共同点：对内联元素设置float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高。

不同点：float仍会占据位置，absolute会覆盖文档流中的其他元素

假如你有5个不同的CSS文件，加载进页面最好方式是

用一个大的css文件代替这5个css文件

如何使用DIV+CSS实现3栏布局（左右固定200px,中间自适应）

复制代码

html
<div class="container">
<div class="main">
<h2>有课前端网</h2>
</div>
<div class="left">左边内容</div>
< div class="right" >右边内容</div>
</dv>
CSS

.container div {height：200px；}
.container{ padding：0 200px；}
.main,.left,.right{position:relative；float:left；}
.left.right{width：200px；}
.main{ width：100%；background:yellow；}
.left {background:blue：margin-left：-100%；left：-200px；}
.right {background:green；margin-left：-200px；left：200px；}

解释CSS Sprite ,以及如何在页面或网站中使用它

CSS Sprite其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的" background- image"" background- repeat"" background- position"的组合进行背景定位， background- position可以用数字精确地定位出背景图片的位置。

注意：在高级浏览器中，可以基于图片的bose64编码存储，将图片与其他类型的文件打包

简述CSS中content的作用

content属性与：before及：after伪元素配合使用，用来插入生成的内容，可以在元素之前或之后放置生成的内容。可以插入文本、图像、引号，并可以结合计数器，为页面元素插入编号。比如，查看如下代码。

复制代码

body{
counter-reset:chapter；
}
h1:before{
content："第" counter（ chapter）"章"
}
h1{
counter-increment:chapter：
}
<h1></h1>
<h1></h1>
<h1></h1>
使用 content属性，并结合 :before选择器和计数器 counter，可以在每个<h1>元素前插入新的内容

CSS如何定义高度很小的容器

因为有一个默认的行高，所以在IE6下无法定义小高度的容器。

两种解决方案分别是 overflow:hidden或font-size：容器高度px

如何在图片下方设置几像素的空白间隙？

定义img为 display:block，或定义父容器为font-size：0

如何解决IE6双倍 margin的Bug？

使用 display:inline

简述css如何让a标签不可点击？

1、设置颜色为灰色

2、停用事件响应

3、设置鼠标样式为默认样式 - 选择用的箭头样式

复制代码

<a href="#" style="pointer-events: none;cursor: default;color:gray;">点击</a>
<a href="#">点击</a>

CSS如何使英文单词发生词内断行？

word-wrap:break-word

简述Animation与 Transition的异同？

Animation功能通过定义多个关键帧，实现更为复杂的动画效

Transition只能用指定属性的开始值和结束值，两个属性值之间使用平滑过渡的方式实现动画效果，不能实现比较复杂的动画效果。

简述Animation属性值有哪些

两个必要属性如下。

animation-name，即动画名称。

animation- duration，即动画持续时间。

其他属性值如下。

animation- play-state，即播放状态（ running表示播放， paused表示暂停），可以用来控制动画暂停。

animation- timing- function，即动画运动形式。

animation- delay，即动画延迟时间。

mation-iteration- count，即重复次数。

animation-direction，即播放前重置（ alternate动画直接从上一次停止的位置开始执行）

缺点如下:

（1）在动画控制上不够灵活

（2）兼容性不好。

（3）部分动画功能无法实现

如何把元素从左侧移动50像素，从顶端移动100像素？

div{transform:translate（50px,100px）；}

CSS如何把一个元素旋转30°？

div{transform:rotate（30deg）}

如何解决通过 transform进行skew变形、 rotate旋转会出现锯齿现象的问题？

-webkit-transform:rotate（-4deg） skew（10deg） translateZ（0）；

transform:rotate（-4deg） skew（10deg） translateZ（0）;

outline:lpx solid rgba（255， 255， 255， 0）;

如何利用CSS3制作淡入淡出的动画效果？

复制代码

@-webkit-keyframes fadeIn {
from {
opacity：0；/*初始状态，透明度为0*/
}
to { opacity：1；/*结尾状态，透明度为1*/
}
}
@-webkit-keyframes fadeout {
from { opacity：1；/*初始状态，透明度为1*/
}
to{
opacity：0；/*结尾状态，透明度为0*/
}
}
（2）为div增加如下动画代码。

div{
-webkit- animation-name:fadeIn；/*动画名称*/
- webkit- animation-duration：3s；/*动画持续时间*/
- webkit- animation-iteration- count：1；/*动画次数*/
- webkit- animation- delay：0s；/*延迟时间*/

简述CSS3中 transition属性值及含义？

ransition属性是一个简写属性，用于设置以下4个过渡属性。

transition- property，哪个属性需要实现过渡

transition- duration，完成过渡效果需要多少秒/毫秒

transition- timing- function，速度效果的运动曲线，如 linear、ease-in、ease、ease-out、 ease-in-out, cube-bezier。

transition- delay，规定过渡开始前的延迟时间。

简述CSS中background-clip和 background- origin的区别？

background-clip规定背景（包括背景颜色和背景图片）的绘制区域它有3种属性，分别是 border-box、 padding-box、 content-box。

border-box，即背景从边框开始绘制。

padding-box，即背景在边框内部绘制。

content-box，即背景从内容部分绘制。

background- origin，规定背景图片的定位区域。

CSS如何实现自适应布局？

（1）可以使用媒体查询做响应式页面。

（3）使用弹性盒模型

简述三栏布局方式两边固定中间自适应？

margin 负值法：左右两栏均左浮动，左右两栏采用负的 margin 值。

中间栏被宽度为 100%的浮动元素包起来

自身浮动法：左栏左浮动，右栏右浮动，中间栏放最后
绝对定位法：左右两栏采用绝对定位，分别固定于页面的左右两侧，

中间的主体栏用左右 margin 值撑开距离。

4.flex 左右固定宽中间 flex：1

5.网格布局

table 布局

简述css怎么禁止选中文字？

user-select：none |text| all | element

none：文本不能被选择

text：可以选择文本

all：当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素。

lement：可以选择文本，但选择范围受元素边界的约束

简述css怎样设置一半背景？

background-repeat:no-repeat

background-size:50% 100%

简述css如何取消链接下划线？

{text-decoration:none;}

简述css如何将背景图居中？

background-position:center

简述css怎样实现鼠标悬浮改变图片？

图片元素:hover{background:url(鼠标悬浮后显示图片的路径);}

简述css中:not用法是什么？

:not"是选择器的一种，如果希望某个样式不作用到选择器上，可以使用:not(选择器），语法格式为" 元素:not(元素id){属性:属性值;}

简述css3怎样控制旋转时间？

利用animation属性和"@keyframes"规则给元素定义一个旋转动画

利用"animation-duration"属性设置控制元素的旋转时间，语法为"元素{animation-duration:time;}"

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.div1{
width:100px;
height:100px;
background-color:pink;
animation:fadenum;
animation-duration:10s;
}
@keyframes fadenum{
100%{transform:rotate(360deg);}
}
.div2{
width:100px;
height:100px;
background-color:pink;
animation:fadenum1;
animation-duration:5s;
}
@keyframes fadenum1{
100%{transform:rotate(360deg);}
}
</style>
</head>
<body>
<div class="div1"></div><br><br>
<div class="div2"></div>
</body>
</html>