前端面试题-CSS

2023-10-08 21:20:52

一、什么是行内元素，什么是块级元素

1、行内元素特性：和其他元素可以同行；高，行高，外边距，内边距部分可以改变；宽度至于内容有关；行内元素只能容纳文本或者其他行内元素；常用的内联元素有：a,span,img,font,input,label,select,textareas

2、块级元素特性：总在新行开始并占据一行；高度，行高，外边距，内边距都可以控制；宽度初始和浏览器宽度一致，与内容无关；可以容纳行内元素和其他块级元素；常用的块级元素：div,p,table,form,h1-h6,dl,ol,ul,li

二、CSS的居中方式

居中方式分为三种：水平居中，垂直居中，水平垂直居中

1、水平居中

1.1行内元素水平居中

利用属性 text-align:center 可以实现块级元素内的行内元素水平居中

1.2块级元素水平居中

利用margin-left或者margin-right为audio,或者margin属性为 0 audio,将固定宽度的块级元素水平居中

1.3多个块级元素在同一行水平居中

1.3.1 将块级元素设置为行内块元素display:inline-block,然后将这些块元素的父级块元素设置属性text-align:center

1.3.2 利用弹性布局display:flex

将块元素的父级块元素设置为弹性布局display:flex，然后加上属性justify-content：center，align-item:flex-end。

flex-direction 决定主轴方向（即项目的排列方向，row(默认值，水平方向，起点在左边)，row-reverse(水平方向，起点在右边)，column(垂直方向，起点在上方)，column-reverse(垂直方向，起点在下方)）

flex-wrap 项目在一排，如何换行（nowrap(默认，不换行)，wrap(换行，第一行在上面)，wrap-reverse(换行，第一行在下面)）

flex-flow 属性是flex-direction 和 flex-wrap的属性的简写，默认值是 row no-wrap

justify-content 属性定义了项目在主轴方向上的对齐方式。(flex-start(左对齐)，flex-end(右对齐)，center(居中对齐)，space-between(两端对齐，项目之间的间隔都相等)，space-around（每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍)）

align-items 定义项目在交叉轴上如何对齐（flex-start(交叉轴的起点对齐)，flex-end(交叉轴的终点对齐)，center(交叉轴的中点对齐)，baseline(项目第一行文字基线对齐)，stretch(如果项目没有设置高度或者设为audio，将占满整个容器的高度)）

2、垂直居中

2.1单行行内元素垂直居中

设置行内元素的高度height 以及行高line-height，使元素垂直居中

2.2多行元素垂直居中

2.2.1利用表格布局。设置父级块级元素display:table，设置行内元素vertical-align:middle

2.2.2利用flex布局。设置父级块元素display:flex，flex-direction:column，justify-content:center

2.3块级元素垂直居中

固定高度的块级元素垂直居中，通过绝对定位元素距离顶部50%，position:absolute,top:50%，并设置margin-top向上偏移高度的一半，就可以实现垂直居中

当垂直居中的块级元素高度未知时，可以先绝对定位元素距离顶部50%，position:absolute,top:50%，在借助CSS3中的transform属性向Y轴反向偏移50%，

transform: translateY(-50%)的方法实现垂直居中

3水平垂直居中

3.1固定宽高，水平垂直居中

通过绝对定位距离顶部左边各50%position:absolute,top:50%,left:50%，然后通过margin向上，向左偏移元素的高度，宽度的一半，就实现了水平垂直居中。

3.2未知的宽高，水平垂直居中

通过绝对定位距离顶部左边各50%position:absolute,top:50%,left:50%，然后利用

2D变换，在水平和垂直方向都反向平移宽度，高度的一半transform: translate(-50%, -50%)，然后就实现了水平垂直居中。

3.3利用flex布局

给元素父级块级元素添加flex布局display: flex，设置居中方式justify-content:center，而align-items属性定义flex子项在flex容器的当前行的侧轴方向上的对齐方式align-items: center。

三、display的值和作用

none:元素不会显示，而且改元素现实的空间也不会保留。但有另外一个 visibility: hidden，是保留元素的空间的。

inline: display的默认属性。将元素显示为内联元素，元素前后没有换行符。我们知道内联元素是无法设置宽高的，所以一旦将元素的display 属性设为 inline，设置属性height和width是没有用的。此时影响它的高度一般是内部元素的高度（font-size）和padding。

block:将元素将显示为块级元素，元素前后会带有换行符。设置为block后，元素可以设置width和height了。元素独占一行。

inline-block:行内块元素。这个属性值融合了inline 和 block 的特性，即是它既是内联元素，又可以设置width和height。

list-item:此元素会作为列表显示。
run-in:此元素会根据上下文作为块级元素或内联元素显示。
table:此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table:此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group:此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group:此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group:此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row:此元素会作为一个表格行显示（类似 <tr>）。
table-column-group:此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column:此元素会作为一个单元格列显示（类似 <col>）
table-cell:此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption:此元素会作为一个表格标题显示（类似 <caption>）
inherit:规定应该从父元素继承 display 属性的值。

四、px,em,rem的区别

1、px是固定的像素。

2、em是相当于父元素的字体大小来进行设置。

3、rem是相当于根节点<html>的字体大小进行设置。

五、css3的新特性

1、选择器（基本选择器，属性选择器，伪类选择器）

2、边框与圆角（圆角：border-radius，border-image，阴影：box-shadow）

3、背景与渐变（背景：background-image，渐变：可以在两个或者多个指定颜色之间显示平移的过渡）

4、过渡（允许css的属性值在一定时间区间内平滑的过渡，在鼠标点击，鼠标滑过或对元素任何改变中触发，并圆滑地以动画形式改变css的属性值，transition）

5、变换（让一个元素在一个坐标系统中变形，这个属性包含一系列的变形函数，可以移动，旋转，缩放元素，rotate(30deg); translate(30px,30px); scale(.8); skew(10deg,10deg); rotateX(180deg); rotateY(180deg); rotate3d(10,10,10,90deg)）

6、动画（animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running））

7、背景 background-clip 制定背景绘制（显示）区域 background-origin background-size 1.（background-clip: border-box;）默认情况（从边框开始绘制） 2.（background-clip: padding-box;）从padding开始绘制（显示），不算border,，相当于把border那里的背景给裁剪掉！ 3.（background-clip: content-box;）只在内容区绘制（显示），不算padding和border，相当于把padding和border那里的背景给裁剪掉！

9、反射 -webkit-box-reflect:方向[ above-上 | below-下 | right-右 | left-左 ]，偏移量，遮罩图片

10、颜色 rgba（rgb为颜色值，a为透明度） color: rgba(255,00,00,1);background: rgba(00,00,00,.5); hsla h:色相”，“s：饱和度”，“l：亮度”，“a：透明度” color: hsla( 112, 72%, 33%, 0.68);background-color: hsla( 49, 65%, 60%, 0.68)

11、滤镜

12、弹性布局 flex

13、栅格布局 grid

14、多列布局

15、盒模型定义 box-sizing:border-box的时候，边框和padding包含在元素的宽高之内！

box-sizing:content-box的时候，边框和padding不包含在元素的宽高之内

16、媒体查询就在监听屏幕尺寸的变化，在不同尺寸的时候显示不同的样式！在做响应式的网站里面，是必不可少的一环！

六、谈谈fixed ，related ， absolute

静态定位（position:static）：是HTML中默认的定位，符合常规文档流

相对定位(position:relative)：相对定位是相对本身位置而言的，进行上下左右的偏移，但是他不脱离文档流

绝对定位(position:absolute)：绝对定位是相对于父元素来定位的，如果没有父元素或者说父元素没有定位的情况下，会向上一直找寻参照物，直至最终的浏览器窗口，区别于相对定位，绝对定位会脱离文档流

固定定位（position：fixed），可理解为绝对定位中的一种特殊情况，即absolute包含fixed。它的特殊之处在于它不用像absolute疯狂“找爸爸”，它天生参照于浏览器窗口！当为对象设置固定定位后，该对象即处于浏览器窗口画面中的固定位置，无视文档长短、窗口大小和滚条滚动

七、float和absolute有什么区别

使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。
　　而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。

备注：

①普通流：就是按照上下左右的顺序一行一行排列的，长度不够就会自动挤到下一行。

②非普通流：顾名思义就是脱离普通流的，在普通流上面是不占据位置的。css有position的样式，position包括：static，relative，absolute，fixed四种值。其中static是属于普通流；relative也是属于特殊的普通流；absolute和fixed以及float就是属于非普通流的，加载的时候，也会顺序加载，但是会脱离普通流的位置。

八、transition transform translate 之间的区别 transform的属性有哪些？

transition 在一定时间之内，一组css属性变换到另一组属性的动画展示过程。可以用来实现动态效果，css3的属性语法 transition：需要变换的属性变换需要的时间控制动画速度变化延期多少时间后开始执行（transition属性写在最初的样式里，而不是放在结束的样式里，即定义动画开始之前的元素外观的样式。只需要给元素设置一次transition，浏览器就会负责以动画展示从一个样式到另一个样式）

translate 是transform的属性值，是指元素进行2D变换，2D变换就是指，元素以当前位置（0,0）按照x轴的方向移动多少，按照y轴的方向移动多少

transform的中文翻译是变换、变形，是css3的一个属性，和其他width，height属性一样（例如：

transform：translate(0,100%) 表示从元素的当前位置延y轴方向，向下移动整个元素高度的距离

transform：translate(-20px,0) 表示从元素的当前位置延x轴方向，向左移动20px

transform 有很多其它属性值，translate3D（3D变换）,scale（2D缩放）等其他的变换方式

）

九、css3中的选择器

通配符选择器语法：* {属性名：属性值；属性名：属性值； .....}

类选择器语法：.类名{属性名：属性值；属性名：属性值； ...} 为含有相同类名的元素设置样式

id选择器语法：#id名{属性名：属性值；属性名：属性值； ....} 为id属性值为指定id名的元素设置样式

元素选择器（又叫标签选择器）语法：元素名{属性名：属性值；属性名：属性值； .......} 为所有指定的元素设置样式

属性选择器语法：简单属性选择器：选择具有某个属性名的元素---[元素属性名]{属性名：属性值；属性名：属性值； .......} 选择有指定属性名的元素，而不管元素的该属性的属性值是什么

；具体属性值选择器：选择具有指定属性键值对（属性名和属性值都要匹配）的元素----[元素属性="属性值"]{属性名：属性值；属性名：属性值； .......} 属性名和属性值要完全匹配；子串匹配属性选择器：可以规定属性值包含什么字符串(*)或以什么字符串开头(^)/结尾($)---

[元素属性^="def"]{属性名：属性值；属性名：属性值； .......} 相应的属性值以def开头的元素

[元素属性$="def"]{属性名：属性值；属性名：属性值； .......} 相应的属性值以def结尾的元素

[元素属性*="def"]{属性名：属性值；属性名：属性值； .......} 相应的属性值包含def的元素

伪类选择器语法：selector: pseudo-classes-selector{property:value;........} 向匹配selector选择器的元素添加一些效果

伪元素选择器语法：

selector: pseudo-element/:: pseudo-element{property:value;........} 通过添加一些实际的元素来向匹配selector选择器的元素添加一些效果

有以下五种：

①:first-line/::first-line伪元素用于向文本的首行设置特殊样式,只能用于块级元素

②:first-letter/::first-letter伪元素用于向文本的首字母设置样式，只能用于块级元素

③:before/::before 在元素内容之前添加内容，属于该元素，默认伪元素是行内元素

④:after /::after 在元素内容之后添加内容，属于该元素，默认伪元素是行内元素

⑤::selection 设置元素在被选择时的样式。

后代选择器（又叫包含选择器）语法：祖先元素后代元素 {属性名：属性值；属性名：属性值； .......} 为具有指定祖先元素的所有后代元素设置样式，这两个元素之间的层次间隔可以是无限的

子元素选择器语法：父元素>子元素 {属性名：属性值；属性名：属性值； .......} 为具有指定父元素的所有子元素设置样式，其中子元素为父元素的直接子元素（注意和后代子元素的区别）

兄弟选择器（相邻兄弟选择器+、通用兄弟选择器~）语法：相邻兄弟选择器---元素E+元素F {属性名：属性值；属性名：属性值； .......} 为紧接着E元素后的F元素设置样式，且E元素和F元素具有相同的父元素（两者为兄弟元素）；通用兄弟选择器---E~F {属性名：属性值；属性名：属性值； .......} 为E后面的所有能够匹配F的其兄弟元素F设置样式

群组选择器（几个共用，用逗号隔开）语法：selector1,selector2,selector3,....{property:value;........} 几种选择器共用一种样式，选择器之间用逗号隔开

十、css选择器的权重

优先级：！important>行间样式>id>class=属性=伪类选择器>元素=伪元素选择器>通配符

十一、CSS的引用方式有哪些？

1、内联引用CSS

将STYLE属性直接加在个别的元件标签里，<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...">

优点：可灵巧应用样式於各标签中。方便于编写代码时的使用

缺点：没有整篇文件的“统一性”，在需要修改某样式的时候也变的比较困难

2、内部引用CSS

将样式规则写在<STYLE>...</STYLE>标签之中

优点：整篇文章有了统一性，只要是有声明的的元件即会套用该样式规则

缺点：个别元件的灵活度不足，整站的功能性较弱

3、外部引用link标签引用CSS

将样式规则写在.css的样式文件中，再以<link>标签引入

优点：可以把要套用相同样式规则的数篇文件都指定到同一个样式文件中，可以进行统一的修改，也便于整站的设置有统一的风格

缺点：在个别文件或元素的灵活度不足

4、外部引用@import引用CSS

跟link方法很像，但必须放在<STYLE>...</STYLE> 中：

优点：可以灵活的引入css文件对xhtml元素进行控制。有时候也用来编写某些css hack

缺点：在个别文件或元素的灵活度不足

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

1、1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；

2、使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。

3、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别

4、CSS3的transition支持visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验

十三、link和@import的区别

1、link属于XHTML标签，而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了

2、加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显

3、兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题

4、使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的

十四、盒子模型概念

CSS盒子模型也叫做框模型，具备内容(content)、填充(padding)、边框(border)、边界(margin)这些属性。在CSS中，每一个元素都被视为一个框，而每个框都有三个属性：

border:元素的边框(可能不可见)，用于将框的边缘与其他框分开

margin：外边距，表示框的边缘与相邻框之间的距离，及相邻盒子的距离

padding:内边距，表示框内容和边框之间的空间

两种盒模型：W3C标准和 IE标准盒子模型

在这两种盒模型中width、height分别代表的值

1) 在W3C标准即标准盒模型中，width、height指的是content(element)元素内容的宽、高的大小

2) 在IE标准盒子模型也称怪异盒模型中，width、height指的是content + border+ padding的大小

标准盒模型与怪异盒模型的转化

利用box-sizing属性，属性值有

1)content-box默认值，可以使设置的宽度和高度值应用到元素的内容框。盒子的width只包含内容content

2) border-box 转化成的怪异盒模型，转化后的width、height指的是content + border+ padding的大小

两种盒模型的优缺点

标准盒模型的优点：

　　css样式中元素使用标准盒模型，width能直接表示出content内容的大小，不需计算。

　　缺点：

　　1)当给元素添加border和padding、margin时，width与height都要减去相应的值。

　　2)当设置了margin时存在margin相关的问题。

怪异盒模型的优点：

　　1)在网站设计稿中两处整个部分的宽高后直接把width与height的值设置成最外部的宽高，再根据设计稿直接加padding、margin、border，不用再修改width和height的值。

　　2)在网站中的某部分制作鼠标悬停放大等动态变化的宽度时，把元素设置成怪异盒模型可以消除对相邻的元素位置的影响。

　　缺点：存在兼容性问题，只适用于IE5/IE6

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

1、父级定义伪类：after和zoom

.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}

原理：利用css提高的clear:both清除浮动，zoom(IE转有属性)可解决ie6,ie7浮动问题

优点：浏览器支持，不容易出现问题

缺点：代码多，要两句代码结合使用，才能让主流浏览器都支持

2、在结尾处添加空div或者其他标签clear:both

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度

优点：简单，代码少，浏览器支持，不容易出现问题

缺点：如果页面浮动布局多，就要增加很多空div

3、父级div定义height

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题

优点：简单，代码少，容易掌握

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

4、父级div定义overflow:hidden/overflow:auto

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

优点：简单，代码少，浏览器支持

缺点：不能和position配合使用，因为超出的尺寸的会被隐藏/会出现滚动条

码农公寓