- CSS属性是否区分大小写？
不区分。（HTML, CSS都不区分，但为了更好的可读性和团队协作，一般都小写，而在XHTML 中元素名称和属性是必须小写的。）
- css中单位px和em，rem的区别？
px是像素，设置字体大小时，比较稳定和精确。但是如果改变了浏览器的缩放，页面布局会被打破。因此，这时就提出了使用“em”来定义Web页面的字体。
em是根据基准来缩放字体的大小。em实质是一个相对值，而非具体的数值。这种技术需要一个参考点，一般都是以自己的或父级的“font-size”为基准。
rem：em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道它父元素的大小。而rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值。
浏览器的兼容性：除了IE6-IE8，其它的浏览器都支持em和rem属性，px是所有浏览器都支持。
- display:none 和visibilty:hidden的区别？
display:none会使对象彻底消失，不占据空间;
visibility:hidden所占的空间还在，留了一块空白区域;
- rgba()和opacity的透明效果有什么不同？
rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）
opacity作用于元素，以及元素内的所有内容的透明度。
- link和@import都可以为页面引入CSS文件，其区别是？
将样式定义在单独的.css的文件里，link和@import都可以在html页面引入css文件。有link和@import两种方式，link方式：
<link rel="stylesheet" type="text/css" href="common.css">@import方式：
<style type="text/css">@import "common.css";</style>①祖先的差别。Link属于html标签，而@import完全是CSS提供的一种方式。Link标签除了可以加载CSS外，还可以做很多其他的事情，比如定义rel连接属性等；@import就只能加载css了。
②加载顺序的差别。当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢时更为明显。
③兼容性的差别。由于@import是CSS2.1提出的所有老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
④使用DOM控制样式时的差别。当使用JavaScript控制DOM去改变样式的时候，只能使用link标签，因为@import不是DOM可以控制的。
⑤@Import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表。
- 什么是css的盒子模型？
- 如何理解css的box-sizing？
content-box：标准盒模型，CSS定义的宽高只包含content的宽高，在宽度和高度之外绘制元素的内边距和边框。
border-box：IE盒模型，CSS定义的宽高包括了content，padding和border，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
- 前端需要注意哪些SEO？
①合理的title、description、keywords：搜索对着三项的权重逐个减小，
title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；
description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；
keywords列举出重要关键词即可；
②语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页重要内容；
③HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取；
④重要内容不要用js输出：爬虫不会执行js获取内容
⑤少用iframe：搜索引擎不会抓取iframe中的内容；
⑥非装饰性图片必须加alt；
⑦提高网站速度：网站速度是搜索引擎排序的一个重要指标；
-
img标签的alt和title属性区别？
①alt意思为改变、替换，是给搜索引擎识别，在图像无法显示时的替代文本；
②title是关于元素的注释信息，主要是给用户解读。当鼠标放到文字或是图片上时有title文字显示。（因为IE不标准）在IE浏览器中alt起到了title的作用，变成文字提示。在定义img对象时，将alt和title属性写全，可以保证在各种浏览器中都能正常使用。
- 如何进行网站性能优化？
content方面：①减少HTTP请求：合并文件、CSS精灵、inline Image；②减少DOM元素数量；
server方面：①使用CDN；②使用Gzip压缩；
cookie方面：①减小cookie大小；
css方面：①将样式表放到页面顶部；②不使用CSS表达式；③使用<link>不使用@import；
Javascript方面：①将脚本放到页面底部；②将javascript和css从外部引入；③压缩javascript和css；④删除不需要的脚本；⑤减少DOM访问；
图片方面：①优化图片：根据实际颜色需要选择色深、压缩；②优化css精灵；③不要在HTML中拉伸图片；
- 页面上有很多position定位,好不好？
不好，大量的重绘影响页面性能。
- css3有哪些新特性？
新增各种css选择器、圆角 border-radius、多列布局、阴影和反射、文字特效text-shadow、线性渐变、旋转transform
- 定位属性position有哪些值？说明他们的作用？
absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位；
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位；
relative：生成相对定位的元素，相对于其正常位置进行定位；
static 默认值。没有定位，元素出现在正常的流中；
inherit 规定从父元素继承 position 属性的值；
- css用双冒号与单冒号的区别？
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
伪类，添加一个实际的类，如下:active、:focus、:hover、:link、:visited、:fist-child、:lang
伪元素，添加一个实际的元素，如下:first-letter、:before、:after
伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；伪元素本质上是创建了一个有内容的虚拟容器；
CSS3中伪类和伪元素的语法不同；可以同时使用多个伪类，而只能同时使用一个伪元素；
- less介绍？
less是基于JavaScript运行,所以less是在客户端处理。
①变量：使用@符号定义变量。变量的作用就是把值定义在一个地方（或一个文件里，通过@import导入），然后在各处使用，这样能让代码更易维护。
②变量也支持URLs：
// Variables
@images: "../img";
// 用法
body {
color: #444;
background: url("@{images}/white-sand.png");
}
③属性也支持变量的形式：
@property: color;
.widget {
@{property}: #0ee;
background-@{property}: #999;
}④混合（Mixin）：前面定义的一个样式，后文可以直接引用。
.red {
color: red;
}
.box {
width: 200px;
.red; // 或者 .red();
}⑤嵌套，还支持&符号。
⑥任何数字、颜色或者变量都可以参与运算。
@var: 1px + 5;
div{
width:@var;
}⑦Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。
@base: #f04615;
@width: 0.5;
.class {
width: percentage(@width); // returns `50%`
color: saturate(@base, 5%);
background-color: spin(lighten(@base, 25%), 8);
}函数手册：
color(string) 解析颜色,将代表颜色的字符串转换为颜色值
convert(value,unit) 将数字从一种单位转换到另一种单位.第一个参数为带单位的数值,第二个参数为单位.
ceil(number)向上取整
floor(number)向下取整
percentage(number)将浮点数转换为百分比字符串
round(number)四舍五入取整
sqrt(number)计算一个数的平方根,并原样保持单位
pow(number,number)设第一个参数为A,第二个参数为B,返回A的B次方.
mod(number,number)返回第一个参数对第二参数取余的结果.
min(value1, ..., valueN)返回一系列值中最小的那个.
max(value1, ..., valueN)返回一系列值中最大的那个.
abs(number)计算数字的绝对值,并原样保持单位
sin(number)正弦函数
cos(number)余弦函数
asin(number)反正弦函数.返回以弧度为单位的角度,区间在 -PI/2 到 PI/2之间.
acos(number)反余弦函数.区间在 0 到 PI之间.
tan(number)正切函数
atan(number)反正切函数
pi()返回圆周率 π (pi)
isnumber(value)如果待验证的值为数字则返回 true,否则返回 false
isstring(value)如果待验证的值是字符串则返回 true,否则返回 false
iscolor(value)如果待验证的值为颜色则返回 true,否则返回 false
⑧命名空间，为了更好组织 CSS 或者单纯是为了更好的封装，将一些变量或者混合模块打包起来，一些属性集之后可以重复使用。
/*模块*/
#bundle {
.button {
display: block;
border: 1px solid black;
background-color: grey;
&:hover {
background-color: white
}
}
.tab { /**/ }
.citation { /**/ }
}
/*下面复用上面的一部分代码*/
#header a {
color: orange;
#bundle > .button;
}
- scss与less区别？
①编译环境不一样，编译Sass要安装Ruby,而Ruby官网在国内访问不了,个人在实际开发中更倾向于选择Less。
②变量是$，less变量是@。
③作用于不同。
Less-作用域
@color: #00c; /* 蓝色 */
#header {
@color: #c00; /* red */
border: 1px solid @color; /* 红色边框 */
}
#footer {
border: 1px solid @color; /* 蓝色边框 */
}
Less-作用域编译后
#header{border:1px solid #cc0000;}
#footer{border:1px solid #0000cc;}
scss-作用域
$color: #00c; /* 蓝色 */
#header {
$color: #c00; /* red */
border: 1px solid $color; /* 红色边框 */
}
#footer {
border: 1px solid $color; /* 蓝色边框 */
}
Sass-作用域编译后
#header{border:1px solid #c00}
#footer{border:1px solid #c00}④输出设置不同，Less没有输出设置，Sass提供4中输出选项：
nested：嵌套缩进的css代码（默认）
expanded：展开的多行css代码
compact：简洁格式的css代码
compressed：压缩后的css代码
⑤Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。
/* Sample Sass “if” statement */
@if lightness($color) > 30% {
} @else {
}
/* Sample Sass “for” loop */
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}⑥引用外部CSS文件，scss引用的外部文件命名必须以_开头, 如下例所示:其中_test1.scss、_test2.scss、_test3.scss文件分别设置的h1 h2 h3。文件名如果以下划线_开头的话，Sass会认为该文件是一个引用文件，不会将其编译为css文件.Less引用外部文件和css中的@import没什么差异。
// 源代码：
@import "_test1.scss";
@import "_test2.scss";
@import "_test3.scss";
// 编译后：
h1 {
font-size: 17px;
}
h2 {
font-size: 17px;
}
h3 {
font-size: 17px;
}
扫一扫
2482
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
