前端开发经典面试题及答案-CSS篇

端开发经典面试题及答案——CSS篇

一、CSS选择器的优先级排序，怎么计算权值？

二、display：none和visibility：hidden的区别

三、CSS的引用方式有哪些？它们的区别？

四、CSS有哪些选择符？可继承的属性有哪些？

CSS选择符：

可继承和不可继承的属性：

五、fixed和absolute的区别？

六、如何实现水平、垂直居中？

1、利用定位+margin:auto

2、利用定位+margin:负值

3、利用定位+transform

4、table布局

5、flex布局

6、gird布局

七、如何实现左侧边栏固定，其他内容自适应?

1、左侧固定宽度，右侧flex自适应 flex：1，占据剩余空间；

2、左侧固定宽度，右侧flex自适应 flex：1，占据剩余空间；

3、左侧固定宽度左浮动，右侧设margin-left等于左侧宽度；

4、左侧固定宽度、固定定位，右侧宽度100%；

5、左侧宽度固定、固定定位，右侧左边距等于左侧宽度；

6、双左浮动，右侧计算属性计算宽度；

7、左侧左浮，右侧右浮动，右侧计算宽度；

8、左侧固定宽度，display:inline-block，右侧右浮动，计算宽度。

八、css3的新特性

1、CSS3新特性之选择器

2、CSS3新特性之样式

3、CSS3新特性之transition 过渡

4、CSS3新特性之transform 转换

5、CSS3新特性之animation 动画

6、CSS3新特性之渐变

九、了解过哪些页面布局？

十、Sass写一个数组？

十一、什么时候用less

1、函数式编程css

2、自定义变量用于整体主题调整

3、嵌套语法简化开发复杂度

4、页面层级结构多，重复使用的css代码较多时

十二、animation和transition

十三、盒子模型概念

十四、px、em、rem、%、vm、vh

十五、display的值和作用

十六、列举两种清除浮动的方法

1、父元素添加overflow:hidden

通过触发BFC方式，实现清除浮动

优点：代码简洁

缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。

2、使用after伪元素清除浮动

优点：符合闭合浮动思想，结构语义化正确。

缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout。

以上就是霸哥今日整理的前端经典面试题及答案CSS篇，如有疑问，欢迎私信霸哥！

SS(Cascading Style Sheets) ，层叠样式表（级联样式表），用于设置HTML页面中的文本内容的字体、大小、对齐方式等，图片的宽高、边框样式、边距等以及页面的布局排版等各种外观显示样式。

CSS以HTML为基础，可以针对不同的浏览器设置不同的样式。CSS的出现可以说拯救了我们的页面，让HTML 专注去做结构呈现，而样式全部交给 CSS来美化。

CSS样式规则，具体格式如下：

CSS语法由两部分组成：选择器和声明。声明包括：属性和属性值
选择符 {属性: 属性值 ; 属性:属性值}

规则：

每个CSS样式由两部分组成，即选择器和声明。选择器用于指定CSS样式作用的HTML对象，声明又分为属性和属性值；
属性是对选择器选定的对象设置的样式属性，例如字体大小、文本颜色等。必须放在花括号中，属性与属性值用英文冒号连接，以“键值对”的形式出现。
每条声明用英文分号结束。当一个属性有多个属性值的时候，属性值与属性值不分先后顺序。在书写样式过程中，空格、换行等操作不影响属性显示。

注释规则

注释规则
/* 需要注释的内容 */
示例
p { color: red; /* 所有段落标签字体颜色是红色*/ }

三、CSS样式表引入方法

CSS放到什么位置呢？怎么让它跟我们的HTML文件关联起来呢？

内联样式（行内式）

内联样式，又称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式。

语法

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

<h2 style="color:red;">
    红色标题
</h2>

说明
（1）style是标签的属性，任何HTML标签都有style属性，用来设置行内样式。
（2）属性和值的书写规范与CSS样式规则相同。
注意
行内样式只对其所在的标签及嵌套在其中的子标签起作用。

内部样式表

内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义

语法
<head> <style type="text/CSS"> 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} p{ color:#000;font-size:14px;} </style> </head>
说明
（1）style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。
（2）type=“text/CSS” 在html5中可以省略，写上也比较符合规范，所以这个地方可以写也可以省略。

外部样式表（外链式）

当我们页面比较复杂，大量的内部样式，会导致页面看上去不美观，而且不利于维护。这时我们通常将所有的样式放在一个或多个以 .CSS 为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中。

格式
<head> <link rel="stylesheet" type="text/CSS" href="CSS文件的路径" /> </head>
说明
（1）rel：用于定义文档关联（当前文档与被链接文档之间的关系），在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件，表示关联样式表。
（2）type：用于定义文档类型，通常指定为“text/css”，表示链接的外部文件为CSS样式表。
（3）href：用于定义所链接外部样式表文件的URL，通常是相对路径。
注意
link 是单标签哦 _！
使用link元素导入外部样式表时，需将该元素写在文档头部，即与之间。

三种样式表总结

样式表	特点	使用	控制范围	优先级
行内样式表	书写方便，权重高	较少	控制单个标签（小）	高
内部样式表	结构和样式部分分离	较多	控制一个页面（中）	与书写的顺序有关，后书写的高
外部样式表	结构和样式完全分离，需要引入	最多，推荐使用	控制整个网站（多）	与书写的顺序有关，后书写的高

四、标签的类型(显示模式)

网页中的标签很多，为了更好的完成我们的网页布局，我们需要在不同地方会放不同类型的标签。

根据标签在网页中的显示模式，可以将HTML标签一般分为块级标签和行内标签两种类型，即块元素和行内元素。

块级元素(block-level)

说明
每个块元素通常都会独自占据一行或多行，可以设置其宽度、高度、对齐方式等属性，常用于网页布局和网页结构的搭建。
举例
常见的块元素有：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素，非常适合布局，所以我们常称之为 “CSS+DIV布局”。
特点

块元素总是从新行开始，宽度是容器的100%。
块状元素都可以定义自己的宽度、高度、外边距以及内边距。
两个相邻块元素不会出现并列显示的现象；默认，块元素会按自上而下顺序排列。
块级元素一般可以容纳内联元素和其他块元素，故将其比喻为一个盒子。

注意
文字类块级标签，里面不能放其他块级元素。比如，只有文字才能组成段落因此 p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt。

行内元素(inline-level 或内联元素)

说明
行内元素（内联元素）不占独立的区域，仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
举例
常见的行内元素有<a>、<b>、<span>、<strong>、<em>、<i>、<del>、<s>、<ins>、<u>等，其中<span>标签最典型的行内元素。
特点

和相邻行内元素在一行上显示
设置宽、高无效，可设置水平方向的padding和margin，但垂直方向的无效。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或其他行内元素。（a除外）

注意

链接里面不能再放链接！

行内块元素（inline-block）

说明
在行内元素中有几个特殊的标签，比如<img />、<input />、<td>，可以设置它们的宽、高和对齐方式，故称之为行内块元素。
特点
可同相邻行内元素（行内块）显示在一行上，但之间会有空白缝隙
默认宽度就是它本身内容的宽度
可设置高度，行高、外边距以及内边距

元素显示模式转变（display）

通过设置display的值，改变元素的显示模式。

属性值
block、inline、inline-block、none
说明

行内转块：display:block;
将元素转为块状元素，使该元素拥有块状元素的特点；
显示：
类似在元素后面添加换行符，也就是说其他元素不能在其后面并列显示。
块转行内：display:inline;
将元素转换为内联元素，使该元素拥有行内元素的特点；
显示：
在元素后面删除换行符，多个元素可以在一行内并列显示。
块、行内元素转换为行内块： display: inline-block;
只有这一个元素类型支持vertical-align属性，img,input（行内块元素）。
显示：
元素的内容以块状显示，行内的其他元素显示在同一行。
none 此元素不会被显示

CSS 是一种基于 CSS 的预编译器，使用于增强 CSS 的可重用性、可维护性和可读性。它是现代 web 开发中使用最广泛的预编译器之一。

SCSS 的优势

* 可重用性：SCSS 提供了变量、混合物和函数等功能，以提高 CSS 代码的可重用性。

* 可维护性：嵌套选择器和命名类名等功能可以简化代码结构，提高可维护性。

* 可读性：SCSS 的语法类似于 CSS，但更易于阅读和理解。

* 增强功能：SCSS 提供了许多增强功能，例如自动前缀和变量。

SCSS 的核心概念

1. 变量

* 允许在 CSS 代码中定义可重用的值。

* 可以使用变量来存储颜色、尺寸和任何其他值。

2. 混合物

* 允许组合多个选择器以创建新的选择器。

* 可以使用混合物来简化和组织 CSS 代码。

3. 嵌套选择器

* 允许将选择器嵌套在彼此内。

* 可以使用嵌套选择器来组织代码并提高可读性。

4 vicisslet

* 允许在 CSS 代码中定义函数。

* 可以使用变量和混合物来定义函数。

工具和集成

* Sass 编译器：用于将 SCSS 代码转换为 CSS。

* 各种集成：有许多工具可用于将 SCSS 与其他工具集成。例如，Sass 可以与 gulp 或 grunt 集成。

使用 SCSS 的优点

* 提高 CSS 代码的可重用性。

* 提高 CSS 代码的可维护性。

* 提高 CSS 代码的可读性。

* 增强 CSS 功能。

结论

SCSS 是一种强大的 CSS 预编译器，可以提高 CSS 代码的可重用性、可维护性和可读性。它是现代 web 开发中使用最广泛的预编译器之一。

在线咨询

上一篇：SpringBoot应用不能访问项目静态页面html问题处理
下一篇：HTML打开神器，让你秒懂！

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商