整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
文资料来源于
https://github.com/qiu-deqing/FE-interview
目前已在github获得4700个star，在前端知识项目中名列第一。
上一篇主要分享了该项目中的HTML， HTTP，web综合问题部分。
本文主要分享该项目中的CSS部分的知识点及面试题部分，后续分享剩余5个章节。
欢迎关注笔者，优质文章都在这里等你。
概念：将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。
优点：
缺点：
联系：它们都能让元素不可见
区别：
原理：利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器样式。常见的hack有1）属性hack。2）选择器hack。3）IE条件注释
<!--[if IE 6]> Special instructions for IE 6 here <![endif]-->
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
specified value,computed value,used value计算方法
link与@import的区别
参考资料： 选择正确的图片格式 GIF:
JPEG：
PNG：
CSS有哪些继承属性
.target {
min-height: 100px;
height: auto !important;
height: 100px; // IE6下内容高度超过会自动扩展高度
}
<style type="text/css">
.outer {
width: 215px;
height: 100px;
border: 1px solid red;
overflow: auto;
position: relative; /* 修复bug */
}
.inner {
width: 100px;
height: 200px;
background-color: purple;
position: relative;
}
</style>
<div class="outer">
<div class="inner"></div>
</div>
<style type="text/css">
.p:hover,
.hover {
background: purple;
}
</style>
<p class="p" id="target">aaaa bbbbb<span>DDDDDDDDDDDd</span> aaaa lkjlkjdf j</p>
<script type="text/javascript">
function addClass(elem, cls) {
if (elem.className) {
elem.className +=' ' + cls;
} else {
elem.className=cls;
}
}
function removeClass(elem, cls) {
var className=' ' + elem.className + ' ';
var reg=new RegExp(' +' + cls + ' +', 'g');
elem.className=className.replace(reg, ' ').replace(/^ +| +$/, '');
}
var target=document.getElementById('target');
if (target.attachEvent) {
target.attachEvent('onmouseenter', function () {
addClass(target, 'hover');
});
target.attachEvent('onmouseleave', function () {
removeClass(target, 'hover');
})
}
</script>
.opacity {
opacity: 0.4
filter: alpha(opacity=60); /* for IE5-7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
}
display: inline-block; *display: inline; *zoom: 1;
容器包含若干浮动元素时如何清理(包含)浮动
/**
* 在标准浏览器下使用
* 1 content内容为空格用于修复opera下文档中出现
* contenteditable属性时在清理浮动元素上下的空白
* 2 使用display使用table而不是block：可以防止容器和
* 子元素top-margin折叠,这样能使清理效果与BFC，IE6/7
* zoom: 1;一致
**/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/**
* IE 6/7下使用
* 通过触发hasLayout实现包含浮动
**/
.clearfix {
*zoom: 1;
}
Flash Of Unstyled Content：用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再从新显示文档，造成页面闪烁。解决方法：把样式表放到文档的head
如何创建块级格式化上下文(block formatting context),BFC有什么用
创建规则：
作用：
外边距折叠(collapsing margins)
毗邻的两个或多个margin会合并成一个margin，叫做外边距折叠。规则如下：
如何确定一个元素的包含块(containing block)
z轴上的默认层叠顺序如下（从下到上）：
如何创建stacking context：
<body>
<div class="content">
aaaaaa aaaaaa a a a a a a a a
</div>
</body>
<style>
body {
background: #DDD;
text-align: center; /* 3 */
}
.content {
width: 500px; /* 1 */
text-align: left; /* 3 */
margin: 0 auto; /* 2 */
background: purple;
}
</style>
<body>
<div class="content">
aaaaaa aaaaaa a a a a a a a a
</div>
</body>
<style>
body {
background: #DDD;
}
.content {
width: 500px; /* 1 */
float: left;
position: relative; /* 2 */
left: 50%; /* 3 */
margin-left: -250px; /* 4 */
background-color: purple;
}
</style>
<body>
<div class="content">
aaaaaa aaaaaa a a a a a a a a
</div>
</body>
<style>
body {
background: #DDD;
position: relative;
}
.content {
width: 800px;
position: absolute;
left: 50%;
margin-left: -400px;
background-color: purple;
}
</style>
<body>
<div class="content">
aaaaaa aaaaaa a a a a a a a a
</div>
</body>
<style>
body {
background: #DDD;
position: relative;
}
.content {
width: 800px;
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
background-color: purple;
}
</style>
如何竖直居中一个元素
参考资料：6 Methods For Vertical Centering With CSS。 盘点8种CSS实现垂直居中
<p class="text">center text</p>
<style>
.text {
line-height: 200px;
}
</style>
对大厂架构设计，BAT等厂家面试题解读，编程语言理论或者互联网圈逸闻趣事这些感兴趣，欢迎关注笔者，没有错，干货文章都在这里。
篇文章主要给大家介绍一下如何使用html+css实现元素的水平与垂直居中效果，这也是我们网页在编码制作中会经常用到的问题。
主要实现css代码：
水平居中：text-align:center;
垂直居中：line-height:XXpx; /*line-height与元素的height的值一致*/
我们先来看这样一个例子，加入我们这里有一个div，宽度和高度为300px，背景颜色为黑色，然后在div中有一行简短文字，我们只需要使用line-height:200px;就可以实现文字的居中效果，具体的代码如下所示：
由上图可以看出我们实现了单行文字的垂直居中效果，但是很多时候我们的文字并不知道具体有多少，可能有一行，也可能有很多行，那么遇到多行文字的这种问题我们要如何处理呢。
对于多行文本的垂直居中我们有很多种实现方式，我们这里逐个的来看一下；
1、使用display:table来实现
主要实现代码：
display: table使块状元素成为一个块级表格;
display: table-cell;子元素设置成表格单元格;
vertical-align: middle;使表格内容居中显示，即可实现垂直居中的效果;
具体的html与css的代码就如下所示：
2、使用absolute与transform配合实现
主要实现代码：
position:absolute; 首先给文本绝对定位；
left:50%;top:50%;transform:translate(-50%,-50%); 让文本距离盒子左边和上边分别为50%，再用transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了。
具体的html与css的代码就如下所示：
3、使用flex实现
主要实现代码：
display: flex;设置 display 属性的值为 flex 将其定义为弹性容器
align-items: center;定义项目在交叉轴（纵轴）上如何对齐，垂直对齐居中
justify-content: center; 定义了项目在主轴上的对齐方式，水平对齐居中
具体的html与css的代码就如下所示：
好了，本篇文章就给大家说到这里，大家自己动手写一下看能不能写出一样的页面效果出来，也可以找一些类似的页面自己练习一下，有需要源码的可以直接私信【网站源码】即可。
每日金句：了解别人心里想什么，你才能得到自己想要的。喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。
目前大多数人对于CSS的使用只是停留在基本层面，设置位置，宽高，背景色等等。但是CSS还有很多的高级使用技巧，在开发时省去很多时间。
今天我们就一起来看看CSS中的一些高级使用技巧，让你的页面更加的炫酷吧。
CSS
如何将一张彩色的图片在页面上展示成黑白图片呢？
我们需要用到一个filter属性，在webkit中，-webkit-filter专门为元素的渲染提供一些效果，比如灰度，亮度，模糊等。
使用灰度控制grayscale属性，就可以很容易的将图片置为黑白色。
我们看到下面一张图片。
原始图片
当我们加上以下一段代码后。
CSS代码
可以看到图片如下所示。
处理过的图片
有的时候我们将网页的顶部设置为阴影效果，这个是怎么做到的呢？
利用body的伪元素:before，可以减少额外的元素。
在顶部增加一个div，设置一个高度，宽度为100%
将其position设置为fixed，然后设置偏移量为设定的高度值。
设置box-shadow属性，值等于设定的高度值。
得到的代码如下所示。
页面顶部加阴影
运行完上述代码后，就可以看到整个页面顶部有阴影的效果。
假如有一个很简单的页面，需要所有的元素都垂直居中显示，实现的方法其实很简单。
将与align有关的属性设置为center。
displag设置为flex。
得到的代码如下所示。
垂直居中的CSS方法
设置以后，我们可以看到不管将窗口设置为多高，所有元素都是垂直居中的状态。
但是这种方法有个弊端，就是会将所有元素水平排列，垂直居中，页面元素过多时，页面会被水平撑开，不太美观。
因此这种方法建议在页面元素少的情况下使用。
元素垂直居中
在一个使用ul>li创建的列表中，如果想要选择其中的几个元素，我们可以使用nth-child选择器，例如:nth-child(1)代表第一个元素。
那么假如我们想选择第一个到第三个元素，使用nth-child该怎么做呢？
很多人第一选择是:nth-child(1)，:nth-child(2)，:nth-child(3)，然后设置属性。
其实还有一种更简单的方法，那就是使用负数选择器。
:nth-child(-n+3)，就代表选择从第一个到第三个元素。
我们可以通过以下例子测试，首先在看看页面的HTML代码，并将它们的display全部设置为none，这样就可以将li全部隐藏起来。
HTML代码
然后通过nth-child选择器设置css属性。
nth-child选择器
最后看看页面上的内容呈现，可以看出实际选中的li只有前三个，符合预期。
页面内容
页面的table元素，如果不对tr>td设置宽度，列td的宽度是会随着内容的变化而变化，这样就会造成页面布局很难看。
我们可以将表格的每列设置成相同的宽度，这样不管内容怎么变化都不会改变页面的布局。
只需要使用如下一个属性即可。
表格列等宽
实际的效果如下图所示。
表格列等宽
在CSS3中新增了一个calc()方法，用于动态的计算值，不管是数值还是百分比，都可以参与计算。
这个方法非常适用于自适应的容器中，动态计算宽高，间距(margin,padding)，边框(border)等值，这样在容器大小变化的时候，不会改变元素之间的布局。
例如以下我们定义的两个div。
CSS属性
看到的页面效果如下图所示。
calc()效果
假设在页面上有一个很重要的区域，只是只读的，不能让鼠标点击，可以直接禁用掉鼠标点击事件。
这个在CSS3中新增了pointer-event属性，只要将其设置为none即可。
禁用鼠标点击
有的时候我们可以看到页面上有一些文字渐变的效果，如下图所示。
渐变文字
这个效果是怎么实现的呢?
通过设置伪元素，然后在伪元素中使用-webkit-mask-image属性，这个属性是专门用来产生遮罩效果的。
然后将遮罩效果的字与原来的文章重合，就可以达到上述效果。
我们设置一个h2标签，然后设置data-text属性，date-text属性值与页面显示值一样。
HTML元素
然后设置对应的CSS属性。
CSS属性
当我们在页面运行后，我们就可以得到上面的文字渐变效果。
和上面的渐变文本类似，模糊文本也有专门的属性可以设置，那就是text-shadow。
通过下面一段简单的代码，就可以得到模糊文本了。
模糊文本样式
得到的效果如下图所示。
模糊文本
今天这篇文章主要介绍了CSS中几个高级的使用技巧，可以让你在实现相同效果时，减少很多的代码量，提高工作效率。
大家要好好掌握~
*请认真填写需求信息，我们会在24小时内与您取得联系。
