前端CSS面试题

最新推荐文章于 2024-05-10 03:30:56 发布

前端小菜鸡努力学习中

最新推荐文章于 2024-05-10 03:30:56 发布

阅读量386

点赞数

分类专栏：前端CSS 文章标签： css css3

本文链接：https://blog.csdn.net/hzylearning/article/details/120388342

版权

前端CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、Css选择器（重要）

·作用：选择html标签

·基础选择器：标签选择器标签{}

类选择器 .类名{}

id选择器 #id {} （只能调用一次）

通配符选择器 *{} （选取页面中所有标签）

·复合选择器：后代选择器父元素子元素 {}

子元素选择器父元素>亲儿子 {} （选择某元素的最近一个子元素）

并集选择器元素1,元素2 {} （选择多个标签设置相同的样式）

伪类选择器：

·链接伪类选择器 a:link 未被访问

a:visited 已经被访问

a:hover 鼠标指针位于其上的链接

a:active 鼠标按下未弹起

·:focus伪类选择器：

元素:focus {} 常用于input 用设置当获得焦点时的样式

·Css新增选择器：

·属性选择器：E[att] 选择具有att属性的E元素

E[att=’val’] 选择具有att属性且属性值为val的E元素

E[att^=’val’] 选择具有att属性且属性值以val开头的E元素

E[att$=’val’] 选择具有att属性且属性值以val结尾的E元素

E[att*=’val’] 选择具有att属性且属性值中含有val的E元素

·结构伪类选择器：

E:first-child 获取父元素E中的第一个子元素

E:last-child 获取父元素E中的最后一个子元素

E:nth-child(n) 获取父元素E中的第n个子元素（n可以是公式、数字）

E:first-of-type 获取指定E元素的第一个

E:last-of-type 获取指定E元素的最后一个

E:nth-of-type(n) 获取指定E元素的第n个（n可以是公式、数字）

·伪元素选择器：

::before 在元素内部前面插入内容

::after 在元素内部后面插入内容

注意：必须要有content=””属性

如果使用它们插入元素，那么插入的元素是行内元素

2、::before 和::after 中双冒号和单冒号有什么区别、作用？

在 CSS 中伪类一直用（ : ）表示，如 :hover, :active 等。

伪元素在 CSS1 中已存在，当时语法是用 : 表示，如 :before 和 :after。后来在 CSS3 中修订，伪元素用 :: 表示，如 ::before 和 ::after，以此区分伪元素和伪类

伪类与伪元素的本质区别就是是否抽象创造了新元素

3、CSS元素显示模式（重要）

·块元素

特点：自己独占一行

高度宽度外边距及内边距都可以设置

宽度默认是父级宽度的100%

是一个容器里面可以放置行内或行内块元素

注意：文字类标签<h> <p> 里面不能放置块级元素

·行内元素：

<a> <strong> <b> <em> <i> <span>等

特点：相邻的行内元素在一行上

宽和高不能设置

默认宽度和高度是它里边内容的宽高

只能容纳文本或其他行内元素

注意：链接<a>里不能再放置链接，但是可以放置块级元素

·行内块元素

特点：和相邻行内块元素在一行上但是有空白缝隙隔开

默认宽度是其内容的宽度

高度宽度边距可以直接设置

4、CSS三大特性及权重计算（重要）

·层叠性：相同选择器给相同元素设置样式，此时哪个样式距离结构近就执行哪个样式（就近原则）

·继承性：子标签会继承父标签的某些样式，如文本颜色和字号，恰当使用能够简化代码。

·优先级：当同一个元素指定多个选择器就会产生优先级

选择器相同执行层叠性

选择器不同根据选择器权重执行

选择器权重：

选择器 权重

继承或*（通配符选择） 0.0.0.0

类选择器（.类名），标签选择器（div{}），伪元素选择器（::before） 0.0.0.1

伪类选择器（:hover），属性选择器（E[att=’val’]），结构伪类选择器 0.0.1.0

Id选择器（#id{}） 0.1.0.0

行内样式（style = “”） 1.0.0.0

!important 无穷大

5、CSS盒子模型（非常重要）

盒子模型（Box Modle）可以用来对元素进行布局，包括内边距，边框，外边距和实际内容

·盒子模型分为两种:

第一种是 W3C 标准的盒子模型（标准盒模型）

第二种 IE 标准的盒子模型（怪异盒模型）

·标准盒模型与怪异盒模型的表现效果的区别之处：

·标准盒模型中 width 指的是内容区域 content 的宽度；height 指的是内容区域 content 的高度

标准盒模型下盒子的大小 = content + border + padding + margin

·怪异盒模型中的 width 指的是内容、边框、内边距总的宽度（content + border +

padding）；height 指的是内容、边框、内边距总的高度

怪异盒模型下盒子的大小=width（content + border + padding） + margin

·除此之外，我们还可以通过属性box-sizing来设置盒子模型的解析模式

可以为 box-sizing 赋两个值：

content-box：（标准模型，默认的） border 和 padding 不算到 width 范围内。

总宽=width+padding+border+margin （设置border和padding会撑大盒子）

border-box：（怪异盒模型）border 和 padding 划归到 width 范围内，

总宽=width+margin（设置border和padding就不会撑大盒子）

6、CSS 中哪些属性可继承，哪些不可以？

能继承的属性：

（1）字体系列属性:font、font-family、font-weight、font-size、font-style;

（2）文本系列属性:

①内联元素：color、line-height、word-spacing、letter-spacing、 text-transform;

②块级元素：text-indent、text-align;

元素可见性：visibility

（4）表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、

table-layout;

（5）列表布局属性：list-style

不能继承的属性

（1）display：规定元素应该生成的框的类型；

（2）文本属性：vertical-align、text-decoration;

（3）盒子模型的属性：width、height、margin 、border、padding;

（4）背景属性：background、background-color、background-image;

（5）定位属性：float、clear、position、top、right、bottom、left、min-width、

min-height、max-width、max-height、overflow、clip;

7、如何解决 margin“塌陷”？

外边距塌陷共有两种情况：

第一种情况：两个同级元素，垂直排列，上面的盒子给 margin-bottom 下面的盒子给 margin-top，那么他们两个的间距会重叠，以大的那个计算。

解决方法：两个外边距不同时出现，只给一个盒子设置上/下外边距。

第二种情况：两个父子元素，内部的盒子给 margin-top，其父级也会受到影响，同时产生上边距，父子元素会进行粘连。

解决方法：

1、为父盒子设置 border，为外层添加 border 后父子盒子就不是真正意义上的贴合（可以设置成透明：border：1px solid transparent）；

2、为父盒子添加 overflow：hidden；

3、为父盒子设定 padding 值；

4、为父盒子添加 position：fixed；（脱标的盒子不会引起外边距塌陷问题）

5、为父盒子添加 display：table；

6、利用伪元素给父元素的前面添加一个空元素

.father::before {

content:' ';

display : table;

}

8、为什么会出现浮动？浮动元素会引起什么问题？如何清除浮动？（重要）

浮动定位将元素排除在普通流之外，即元素讲脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留，主要用作让块级盒子一行显示。

问题：

·父盒子在很多情况下不方便给高度，但是子盒子浮动后脱标不占有原来的位置，因此会影响父盒子后面的标准流

·与浮动元素同级的非浮动元素（内联元素）会跟随其后，对它们的排版造成影响

清除浮动的方法：

①额外标签法：在浮动元素末尾添加一个空的块级元素

②父级元素添加overflow 属性 ，但是无法显示隐藏部分

③.after伪元素法：（给父元素添加）

.clearfix:after {

content: " ";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

.clearfix {

display: inline-block;

}

④双伪元素法：（给父元素添加）

clearfix:after,

clearfix:after {

content:""; /*设置内容为空*/

height:0; /*高度为 0*/

line-height:0; /*行高为 0*/

display:block; /*将文本转为块级元素*/

visibility:hidden; /*将元素隐藏*/

clear:both; /*清除浮动*/

}

.clearfix {

*zoom:1; /*为了兼容 IE*/

}

9.为什么出现定位，定位的模式及特点（重要）

作用：定位可以让盒子在页面或者父盒子内自由的移动位置，并且可以压住其他盒子，实现标准流和浮动不能实现的效果。
定位模式：

①静态定位：position : static;（几乎不用）

默认值，不脱离文档流，top，right，bottom，left 等属性不生效

② 相对定位：relative

·相对于自己原来的位置来移动的；

·不脱标，原来的位置继续占有，不影响后面的元素；

·主要用于给绝对定位当爹。

注意：左右 margin 为 auto 仍然有效

③绝对定位：absolute

·移动时以祖先元素为参照物，如果祖先元素有定位，则以最近一级有定位的祖先元素为参照点移动位置；

·如果祖先元素没有定位，则以浏览器为参照点；

·加了绝对定位的盒子脱离标准流

注意：绝对定位的盒子左右 margin 为 auto 将会失效；我们通过 left、top、bottom、right来决定元素位置。

④固定定位：fixed

·以浏览器可视窗口为参照点移动

·不随滚动条滚动

·脱标

固定在版心右侧技巧：

·首先然固定定位的盒子left：50%，移动到浏览器可视区的一半位置

·然后让固定定位的盒子margin-left：版心宽度的一半距离

⑤粘性定位：stick

·先移动到浏览器顶侧，然后不再跟随滚动条移动

·以浏览器可视窗口为参照点

·必须至少添加top、bottom、left、right其中一个才生效

·不脱标

10.子绝父相

·子级是绝对定位，不占有位置，可以放在父盒子里面的任何位置，且不影响其他的兄弟元素。

·父级需要加定位给绝对定位的子盒子作参考点

·父盒子在布局时需要占有位置，因此父亲只能是相对定位

11、display：none、visibility：hidden和opacity：0的区别？

·空间占据：

dispaly:none;产生回流和重绘，不占据空间

visibility:hidden和opacity:0：只引起页面重绘，仍然占据空间

·是否能继承：

display:non;不会被子元素继承
visibility:hidden;被子元素继承，可以通过设置子元素visibility:visible使子元素显示出来
opacity: 0;也会被子元素继承，但是不能通过设置子元素opacity: 0使其重新显示

·性能消耗：

display: none : 修改元素会造成文档回流,读屏器不会读取 display: none 元素内容，性能消耗较大

visibility: hidden ;修改元素只会造成本元素的重绘,性能消耗较少

opacity: 0 ;修改元素会造成重绘，性能消耗较少

12.为什么需要精灵图？

一个网页中往往会应用很多小的背景图，当图片过多时，服务器就会频繁的接受和发送请求，造成服务器压力过大，而精灵图技术能够有效减少服务器接收和发送请求的次数，提高网页加载速度。

主要通过background-position属性修改设置图片的位置，一般是负值。

缺点：图片文件过大

图片放大缩小会失真

一旦图片制作完成想要修改非常复杂

13.CSS三角

原理：把border三个属性颜色修改为透明，其余一个不透明。

选择器 {

width : 0;

height : 0；

border : 50px solid transparent;

border-top-color : 颜色；

}

14.CSS3新特性（非常重要）

（1）文字阴影(text-shadow) 盒子阴影 : box-shadow

（2）边框: 圆角 border-radius

（3）盒子模型: box-sizing

（4）过渡 : transition 可实现动画

（5）2D 转换;transform: translate(x,y) rotate(x,y) skew(x,y) scale(x,y)

（6）3D 转换

（7）颜色: 新增 RGBA , HSLA 模式

（8）自定义动画 animate @keyfrom

（9）弹性布局 flex

（10）border-image

（11）渐变: linear-gradient , radial-gradient

（12）背景:background-size、background-origin、background-clip

（13）字体图标 font-face

（14）媒体查询多栏布局 @media screen and (width:800px) {…}

15、BFC 是什么？（高薪常问）

定义

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有 Block-level box 参与，它规定了内部的 Block-level Box 如何布局，具有BFC特性的元素可以看做是隔离了的独立容器，容器里面的元素不会再布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。

布局规则：

1、内部的 Box 会在垂直方向，一个接一个地放置

2、Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠

3、每个元素的 margin box 的左边，与包含块 border box 的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此

4、BFC的区域不会与 float box 重叠

5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此

6、计算 BFC 的高度时，浮动元素也参与计算

哪些元素会生成 BFC：

1、根元素

2、float 属性不为 none

3、position 为 absolute 或 fixed

4、display 为 inline-block， table-cell， table-caption， flex， inline-flex

5、overflow 不为 visible

16、CSS 单位中 px、em 和 rem 的区别？

·px 像素（Pixel）。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一

个虚拟长度单位，是计算机系统的数字化图像长度单位

·em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值

·rem 是 CSS3 新增的一个相对单位（root em，根 em），使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML 根元素

区别：

px是绝对单位不可以缩放，而 em 和 rem 可以缩放，rem相对的只是 HTML 根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了 IE8 及更早版本外，所有浏览器均已支持 rem。

17、简述flex弹性布局

原理：通过给父元素添加flex属性，来控制盒子的位置即排列方法。

特点：

·所有子元素会在一行显示，即使给子盒子一个很大的宽度

·父级加了flex属性，子集的float、clear和vertical-align属性将失效

·如果兼容低版本的机型要加前缀-webkit-

父级常用属性：

·flex-direction：子元素排列方向（主轴的方向，如果设置了 column，则意味着主轴旋转了 90 度）

·flex-wrap：换行方式

·flex-flow：以上两种方式的简写

·justify-content：水平对齐方式（子元素在主轴上的对齐方式）

·align-items：单行垂直对齐方式（子元素在侧轴上的对齐方式）

·align-content：多行垂直对齐方式（侧轴）

子级常用属性：

·flex：定义子项目分配剩余空间，可以是数字也可以是百分号

·align-self：控制子项目在侧轴上的排列方式

·order：定义项目的排列顺序

18、简述rem适配布局

实现原理：使用媒体查询在不同的视口宽度下设置给html标签设置不同的font-size，然后利用rem实现页面元素的动态变化。

实现步骤：

·首先动态计算html的font-size，把视口分为几等份。

·把所有的px换算为rem

特点：

·元素会根据视口的大小动态变化

·同一个元素在不同设备下的大小是不一样的

·由于要进行大量除法运算，一般和less搭配使用

简述less

Less是一门css扩展语言，也称css预处理器，作为css的一种形式的扩展，它并没有减少css的功能，而是在css现有的语法上加入了程序式语言的特征，如变量、Mixin（混入），运算及函数，大大简化了css的编写，且降低了css的维护成本。

link和@import的区别

·从属关系：link是html的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等；而@import是css的语法，只有导入样式表的作用。

·加载顺序：页面被加载时，link会和html同时被加载而；@import引入的 CSS 将在页面加载完毕后被加载。

·兼容性：@import是 CSS2.1 才有的语法，所以只能在 IE5以上才能识别；而link是 HTML 标签，所以不存在兼容性问题。

·DOM：javascript只能控制dom去改变link标签引入的样式，而@import的样式不是dom可以控制的。

·link方式的样式权重高于@import的权重。（如果对权重不是十分了解，可以看我之前的文章）

19、什么是响应式设计？响应式设计的基本原理是什么？

响应式网站设计是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。

基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。页面头部必须有meta声明的viewport。

20、自己手动封装响应式布局方案

·首先，在网页代码的头部，加入一行 viewport 元标签。

·使 IE8 支持 HTML5 元素和媒体查询（media queries）功能

<!--[if lt IE 9]>

<![endif]-->

·“自适应网页设计”的核心，就是 CSS3 引入的 Media Query 模块

它的意思就是，自动探测屏幕宽度，然后加载相应的 CSS 文件

href="tinyScreen.css"/>

上面的代码意思是，如果屏幕宽度小于 400 像素，就加载 tinyScreen.css 文件

(max-device-width: 600px)" href="smallScreen.css"/>

如果屏幕宽度在 400 像素到 600 像素之间，则加载 smallScreen.css 文件

·除了用 html 标签加载 CSS 文件，还可以在现有 CSS 文件中加载

@import url("tinyScreen.css") screen and (max-device-width: 400px);

·同一个 CSS 文件中，也可以根据不同的屏幕分辨率，选择应用不同的 CSS 规则

@media screen and (max-device-width: 400px) { .column {float: none;width: auto;} #sidebar

{ display: none'}}

·除此之外，对于文字，不能使用绝对单位px，而是使用em相对单位

·页面元素使用流动布局，即各个区块的元素都是浮动的，好处是如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向 overflow（溢出），避免了水平滚动条的出现。

·除了布局和文本，”自适应网页设计”还必须实现图片的自动缩放这只要一行 CSS 代码：img { max-width: 100%;}

老版本的 IE 不支持 max-width，所以只好写成：img { width: 100%; }

21.Bootstrap 栅格系统的工作原理和使用方法

原理:栅格系统将页面布局划分为等宽的列（一般页面划分为12列），然后通过列数的定义来模块化页面布局。通过为元素设置所占的列数，来实现响应式功能。

使用方法：

·首先需要在 head 中引入 meta 标签，添加 viewpirt 属性

·引入bootstrap相关样式文件

22、什么是渐进增强和优雅降级?它们有什么不同？（高薪常问）

优雅降级和渐进增强是随着 CSS3 流出来的一个概念。由于低级浏览器不支持CSS3，但 CSS3 的效果又太优秀不忍放弃，所以在高级浏览中使用 CSS3 而低级浏览器只保证最基本的功能。关键的区别是他们所侧重的内容，以及这种不同造成的工作流程的差异

优雅降级：一开始就构建站点的完整功能，然后针对低版本浏览器测试和修复

渐进增强：一开始就针对低版本浏览器进行构建页面，完成基本功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

举个例子：

display：block；

width：200px；

height： 100px；

background：aquamarine；

/*我就是要用这个新 css 属性*/

transition：all 1s ease 0s；

/*可是发现了一些低版本浏览器不支持怎么吧*/

/*往下兼容*/

-webkit-transition：all 1s ease 0s；

-moz-transition：all 1s ease 0s；

-o-transition： all 1s ease 0s；

/*那么通常这样考虑的和这样的侧重点出发的 css 就是优雅降级*/

}

a：hover{

height：200px；

}

/ *那如果我们的产品要求我们要重低版本的浏览器兼容开始*/

/*优先考虑低版本的*/

-webkit-transition：all 1s ease 0s；

-moz-transition：all 1s ease 0s；

-o-transition： all 1s ease 0s；

/*高版本的就肯定是渐进渐强*/

transition：all 1s ease 0s；

}

“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站；

“渐进增强”观点则认为应关注于内容本身。

23、使用 CSS 怎么让 Chrome 支持小于 12px 的文字比如 10px？

针对谷歌浏览器内核，加 webkit 前缀，用 transform:scale()这个属性进行缩放！

<style>

p span {

font-size:10px;

-webkit-transform:scale(0.8);

display:block;

}

</style>

<p>

</p>

前端小菜鸡努力学习中

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端CSS面试题

1、Css选择器（重要）·作用：选择html标签·基础选择器：标签选择器标签{}类选择器 .类名{}id选择器 #id {} （只能调用一次）通配符选择器 *{} （选取页面中所有标签）·复合选择器：后代选择器父元素子元素 {}子元素选择器父元素>亲儿子 {} （选择某元素的最近一...
复制链接

扫一扫