每天十道前端面试题第三天

最新推荐文章于 2023-11-17 09:54:07 发布

进阶中的小码农

最新推荐文章于 2023-11-17 09:54:07 发布

阅读量732

点赞数 1

文章标签：前端 css css3 less sass

本文链接：https://blog.csdn.net/m0_60665016/article/details/122191677

版权

1.介绍一下标准的CSS的盒子模型;与低版本IE的盒子模型有什么不同；

标准的盒子模型：宽度=内容宽度（content）+padding+border+margin;

低版本IE盒子模型：宽度=内容宽度(content+padding+border)+margin;

2.什么是Sass和Less;

Sass和Less都属于CSS预处理器，那什么是 CSS 预处理器呢？CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。通俗来说就是“用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用”。

3.Sass与Scss是什么关系?

Scss是 Sass 3 引入的新语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。Sass的缩排语法，对于写惯CSS前端的web开发者来说很不直观，也不能将CSS代码加入到Sass里面，因此Sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。

区别：

Scss 和 Sass 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：

文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 Scss 是以“.scss”后缀为扩展名。
语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 Scss的语法书写和我们的 CSS 语法书写方式非常类似。

4.Stylus、Sass和Less的区别;

均具有“变量”、“混合”、“嵌套”、“继承”、“颜⾊混合”五⼤基本特性;
Sass 和Less 语法较为严谨，Less要求⼀定要使⽤⼤括号“{}”， Sass 和 Stylus 可以通过缩进表示层次与嵌套关系;
Sass ⽆全局变量的概念，Less和 Stylus 有类似于其它语⾔的作⽤域概念;
Sass 是基于 Ruby 语⾔的，⽽ less和 Stylus 可以基于 NodeJS NPM 下载相应库后进⾏编译；

5.为什么要使用CSS预处理器？

JS中可以自定义变量，而CSS仅仅是一个标记语言，不是编程语言，因此不可以自定义变量，不可以引用等等。

CSS有具体以下几个缺点：

语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；
没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。

这就导致了我们在工作中无端增加了许多工作量。而使用CSS预处理器，提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大提高了我们的开发效率。

但是，CSS预处理器也不是万金油，CSS的好处在于简便，随时随地被使用和调试。预编译CSS步骤的加入，让我们开发工作流中多了一个环节，调试也变得更麻烦了。更大的问题在于，预编译很容易造成后代选择器的滥用。

所以我们在实际项目中衡量预编译方案时，还是得想想，比起带来的额外维护开销，CSS预处理器有没有解决更大的麻烦。

6.CSS选择器有哪些？有哪些属性可以继承；

基础选择器：标签选择器（div）、类选择器（.box）、id选择器（#name）、通配符选择器（*）；
组合选择器：并集选择器（div,p）、后代选择器（div p）、子元素选择器（div>p）、兄弟选择器（div+p）、伪类选择器（a:hover/li:nth-child）、属性选择器（input[value="密码"]）。

可继承的属性：

1、字体系列属性：font、font-family、font-weight、font-size、font-style、font-variant等；
2、文本系列属性：color、text-indent、text-align、line-height、word-spacing、letter-spacing、text-transform等；

...