1.sass/scss、less区别
1.1 编译环境不一样 Sass是在服务端处理的，以前是Ruby，现在是Dart-Sass或Node-Sass，而Less是需要引入less.js来处理Less代码输出CSS到浏览器，也可以在开发服务器将Less语法编译成css文件，输出CSS文件到生产包目录，有npm less, Less.app、SimpleLess、CodeKit.app这样的工具，也有在线编译地址。
1.2 变量符不一样，Less是@，而Scss是$。
1.3 Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持
2.口述less与scss循环样式
less：
.login-animation(@counter) when (@counter < 5) {
.login-animation(@counter+1);
.login-animation(@counter) {
opacity: 0;
animation-name: error-num;
animation-duration: 0.7s;
animation-fill-mode: forwards;
animation-delay: calc(@counter / 10) + s;
}
}
.login-animation(4); // 调用循环
scss：
@for $i from 1 through 4 {
.login-animation#{$i} {
opacity: 0;
animation-name: error-num;
animation-duration: 0.5s;
animation-fill-mode: forwards;
animation-delay: calc($i/10) + s;
}
}
3.import {XXXX} 与 import XXX 区别
export default，不能用花括号；
export 但是没有default，用花括号。
4.ES6中export及export default的区别
在JavaScript ES6中，export与export default均可用于导出常量、函数、文件、模块等，你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用，但在一个文件或模块中，export、import可以有多个，export default仅有一个。
4.1.export与export default均可用于导出常量、函数、文件、模块等
4.2.在一个文件或模块中，export 、import可以有多个，export default仅有一个
4.3.通过export方式导出，在导入时要加{ }，export default则不需要
4.4.export能直接导出变量表达式，export default不行
5.为什么会出现浮动? 什么时候需要清除浮动？清除浮动有哪些方式？优缺点是什么？你认为最好的是哪一种？为什么？
出现浮动的原因：
浮动元素碰到包含它的边框或者浮动元素的边框停留。在CSS规范中，浮动定位不属于正常的页面流，而是独立定位的，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。
关于css的定位机制：普通流，浮动，绝对定位（position：fixed是position：absolute的一个子类）。浮动的框可以左右移动，直到它的外边缘遇到包含框或者另一个浮动框的边缘，所以才说浮动定位不属于正常的页面流。文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，就会出现包含框不会自动伸缩高度类笔盒浮动元素。所以，只含有浮动元素的父容器在显示时不需要考虑子元素的位置，就造成显示父容器像空容器一样。
浮动带来的问题：
父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素（内联元素）会跟随其后
若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。
清除浮动的方式：
父级div定义height
最后一个浮动元素后加空 div 标签 并添加样式 clear:both。（理论上能清除任何标签，增加无意义的标签）
包含浮动元素的父标签添加样式 overflow 为 hidden 或 auto。
父级 div 定义 zoom（空标签元素清除浮动而不得不增加无意义代码的弊端，使用zoom:1用于兼容IE）
用after伪元素清除浮动（用于非IE浏览器）
6.::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。
:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after
注意:对于IE6/7/8仅支持单冒号表示法，而现代浏览器同时支持这两种表示法。另外，在CSS3中单冒号和双冒号的区域主要是用来区分伪类和伪元素的。
7.常用的伪累选择器有哪些？
标签 意思
E:first-child 选择E的父元素里的第一个子元素
E:first-of-type 选择同类元素中的第一个元素
E:last-child 选择E的父元素里的最后一个子元素
E:last-of-type 选择同类元素中的最后一个元素
E:nth-child(n) 选择E的父元素里的第n个子元素
E:nth-of-type(n) 选择同类元素中的第n个元素
E:hover E元素获得焦点时候干啥
E:active E元素被点击时候干啥
E:link E元素未被访问的样式
E:visited E元素已经访问过的样式
8.如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？如何居中一个img（position定位）
水平居中div：
border: 1px solid red;
margin: 0 auto;
height: 50px;
width: 80px;复制代码
水平垂直居中一个浮动元素（position定位）
第一种：未知元素宽高
<div class="outer">
<span>我想居中显示</span>
</div>
<style>
.outer{
width:300px;
height:300px;
position:relative;
background-color:#ccc;
}
span{
float:left;
position:absolute;
backgroond-color:red;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
</style>复制代码
第二种：已知元素宽高的
<div class="outer">
<span>我想居中显示</span>
</div>
<style>
.outer{
width:300px;
height:300px;
position:relative;
background-color:#ccc;
}
span{
float:left;
position:absolute;
backgroond-color:red;
width:150px;
height:50px;
top:50%;
left:50%;
margin:-25px 0px 0px -75px;
}
</style>复制代码
如何垂直居中一个img（display : table-cell 或者 position定位）
<div class="outer">
<img src="nz.jpg" alt="">
</div>
<style>
.outer{
width: 300px;
height: 300px;
border: 1px solid #cccccc;
display: table-cell;
text-align: center;
vertical-align: middle;
}
img{
width: 150px;
height: 150px;
}
</style>复制代码
绝对定位的div水平垂直居中：
border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: auto;
left: 0;
right: 0;
top:0;
bottom:0;
9. Jquerty固定表头思路，能简书出来代码更好
通过一个额外的table来显示固定顶端的表头，当滚动条滚动到某一位置（原数据表头被遮盖）的时候，显示这个固定的表头，反之则隐藏。
首先是显示数据的表格
<table id="tMain"> <thead> <tr> <th>Test</th> <th>Test</th> <th>Test</th> <th>Test</th> <th>Test</th> <th>Test</th> </tr> </thead> <tbody> // 这里用的是asp.net写的，就是输出50行数据 @{ for (int i = 0; i < 50; i++) { <tr> <td>TestTestTestTestTest</td> <td>TestTestTestTest</td> <td>TestTestTest</td> <td>Test</td> <td>TestTest</td> <td>Test</td> </tr> } } </tbody> </table>
然后，再放一个table元素，只包含表头部分
<table id="tScroll">
<thead>
<tr>
<th>Test</th>
<th>Test</th>
<th>Test</th>
<th>Test</th>
<th>Test</th>
<th>Test</th>
</tr>
</thead>
</table>这个表格要设置一下样式，我们知道，要固定显示在顶部，用position:fixed;比较方便。
#tScroll{
position:fixed;
top:0;
display:none;
}然后就是代码了。
<script>
$(document).ready(function () {
// 先缓存两个元素
var $tmain = $("#tMain");
var $tScroll = $("#tScroll");
// 标题相对于document的位置信息（即document的滚动条的偏移值达到这个数值的时候，表头将被遮盖掉）
var pos = $tmain.offset().top + $tmain.find(">thead").height();
$(document).scroll(function () {
var dataScroll = $tScroll.data("scroll");
dataScroll = dataScroll || false;
// 当滚动到表头被完全遮盖的位置时
if ($(this).scrollTop() >= pos) {
// 要判断dataScroll是否为false，只有为false的时候，才显示
if (!dataScroll) {
$tScroll
.data("scroll", true)
.show()
.find("th").each(function () {
// 实时获取原数据表对应列的宽度
$(this).width($tmain.find(">thead>tr>th").eq($(this).index()).width());
})
;
}
} else {
// 同样，只有当dataScroll为true的时候，才隐藏，因为如果是false，它就已经是隐藏了的
if (dataScroll) {
$tScroll
.data("scroll", false)
.hide()
;
}
}
});
});
</script>
扫一扫
1009
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
