前端面试题2021-css

1.css性能优化的方法，至少说出五种

1.异步加载CSS
2.js，css文件压缩、
3.有选择地使用选择器
4.优化重排与重绘
5.不要使用@import
6.减少闭包的使用
7.减少dom操作
8.使用精灵图和雪碧图

2.Css选择器有几种？选择器的优先级是怎样的。
元素选择器，id选择器，calss 选择器，后代选择器，子代选
择器，伪类选择器，通配符
内联样式> id>class>元素>通配符>继承样式

3.浮动的原理什么？浮动有几种？
将排成一列的元素变成一行，脱离文档流。
主要是为了让一些标签并排显示
使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘
向下浮动向上浮动两种

4.定位有几种，他们的特点分别是什么？是相对于什么进行定位的？
static静态定位
html元素的默认值，不受top、bottom、left、right属性影响，元素出现在正常的文档流中
relative相对定位
相对定位, 特点：不脱离文档流的布局，受top、bottom、left、right属性影响,只改变自身的位置，在文档流原先的位置遗留空白区域。
absolute绝对定位
绝对定位 特点:脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(position不为static)，否则为html文档本身。
fixed固定定位
固定定位, 特点：类似于absolute，但不随着滚动条的移动而改变位置。元素的位置相对于浏览器窗口是固定位置
sticky粘性定位。
粘性定位的语法格式如下：
选择器 { position: sticky; top: 10px; }
1、粘性定位可以认为是相对定位和固定定位的混合；
2、粘性定位的元素是以浏览器的可视窗口为参照点移动元素；
3、粘性定位继续占有原先的位置；
4、必须添加top、bottom、left、right其中一个才有效；
5、一般都是跟页面滚动搭配使用；

5.如何设置背景透明？
background-rgba（四个参数）
background-color:rgba(0,0,0,0~1)，使用这个方法就只会设置div背景透明，而不会影响到div里的内容。
background-color:transparent

6.请列举几种布局方式，并列举各自优点
https://blog.csdn.net/weixin_43684713/article/details/88576200
1 静态布局:布局简单，没有兼容性问题。
2 自适应布局:自适应布局是为不同的屏幕分辨率分别定义不同的布局。改变屏幕分辨率可以切换不同的静态布局
3 流式布局:流式布局的特点是随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整，这个正好与自适应布局相补。
4 响应式布局:通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不一样展示给用户的网页内容也不一样.利用媒体查询可以检测到屏幕的尺寸(主要检测宽度)，并设置不同的CSS样式，就可以实现响应式的布局

7.css引入方式有几种？link和@import有什么区别？
4种，行内样式，内嵌式，导入式，外链式
link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义ref连接属性等作用；
        @import是CSS提供的，只能用于加载CSS;
页面被加载的时，link会同时被加载
        @import引用的CSS会等到页面被加载完再加载; 网络不好的情况下，会造成页面混乱
        
8.在css样式中使用em和px。各有什么优势，在表现上有什么区别？
px：长度单位，值是固定的
em：值不是固定的，并且会继承父级元素的字体大小。例如浏览器默认字体的高是16px，如果未经调整的话，1em=16px。12px=0.75em

9.请列举几种隐藏元素的方法？（至少三种）
display:none    通过隐藏盒子属性
visibility:hidden    通过隐藏盒子属性
overflow:hidden 溢出隐藏
opacity: 0  ； 通过改变元素的透明度
使用绝对定位，定位到看不见的地方

10.css3中有哪些新属性？（至少五种）
background-size
padding-box
text-shadow
transform：
transition	

11.请写出清除浮动有几种方式，分别是什么.
clear：both：
父级添加overflow属性（父元素添加overflow:hidden）
使用after伪元素清除浮动
使用before和after双伪元素清除浮动

12.如何初始化css样式？为什么要初始化css样式？
最简单的初始化方法就是： * {padding: 0; margin: 0;} 。
初始化CSS时候将为我们节约网页代码，节约网页下载时间；还会使得我们开发网页内容时更加方便简洁，不用考虑很多。

13.如何让一段文本中的所有英文单词的首字母大写？0
text-transform：capitalize 首字母大写
text-transform ：uppercase 全部都是大写
text-transform ：lowercase 全都是小写

14.rgba()和opacity的透明效果有什么不同？
opacity作用于元素，以及元素内的所有内容元素
.rgba()只作用于元素的颜色或其背景色，元素的子元素不会继承透明效果

15.行内，块状，行内块元素之间如何进行转换？
display:inline； 行内样式
display:inline-block；行内块元素
display：block; 块状元素

16.如何设置一个元素，固定到网页的底部
bottom：0；
position：fixed；

17.如何使用css将多出范围的字变为...
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
css能做到文本超出第二行显示省略号
 	width:100px;
    overflow : hidden;/*必须结合的属性,当内容溢出元素框时发生的事情*/
    text-overflow: ellipsis;/*可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本*/
    display: -webkit-box;/*必须结合的属性 ，将对象作为弹性伸缩盒子模型显示*/
    -webkit-line-clamp: 2;/*用来限制在一个块元素显示的文本的行数*/
-webkit-box-orient: vertical;/*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式*/

18.如何解决浮动引起的高度坍塌
1.给父元素设置高度
2.设置一个空标签，并且给此标签加上clear:both；

19.margin和padding的区别是什么？
Margin是调盒子与盒子之间的距离，padding调整盒子内部的距离。

20.如何取消a链接点击时的背景颜色
-webkit-tap-highlight-color:transparent;

21.display：none；和visibility：hidden；的区别是什么？
display:none 不占页面空间，visiblity:hidden 占据原先页面空间。、
display:none 引起页面重绘和回流， visiblity:hidden 只引起页面重绘。

22.css3新增的伪类有哪些？
:root 选择文档的根元素，等同于 html 元素
:empty 选择没有子元素的元素
:target 选取当前活动的目标元素
:not(selector) 选择除 selector 元素意外的元素
:enabled 选择可用的表单元素
:disabled 选择禁用的表单元素
:checked 选择被选中的表单元素
:after 在元素内部最前添加内容
:before 在元素内部最后添加内容
:nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n
:nth-last-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n，从后向前数
:nth-child(odd)
:nth-child(even)
:nth-child(3n+1)
:first-child
:last-child
:only-child
:nth-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n
:nth-last-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n，从后向前数
:nth-of-type(odd)
:nth-of-type(even)
:nth-of-type(3n+1)
:first-of-type
:last-of-type
:only-of-type
:selection 选择被用户选取的元素部分
:first-line 选择元素中的第一行
:first-letter 选择元素中的第一个字符

23.请描述一下渐进增强与优雅降级
优雅降级：项目开始就构建站点的完整功能，然后针对浏览器测试和修复。对低版本的浏览器就行兼容性的修复。
渐进增强：项目开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。 	
渐进增强相当于向上兼容，而优雅降级相当于向下兼容。向下兼容指的是高版本支持低版本的

24.请简述你所了解的css中z-index的权重问题
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
后面的数值越大，表示越要优先显示

25.有哪几种方法可以使html元素脱离文本流？
1:float 2:absolute 3:fixed

26.超链接访问过后hover样式就不出现的问题是什么？如何解决？
被点击访问过的超链接样式不再具有hover和active了，解决办法是改变css属性的排列顺序：L-V-H-A（link,visited,hover,active）

27.介绍一下标准的css的盒子模型？与低版本IE的盒子模型有什么不同？
在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。 IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。

28.CSS中哪些属性可以继承？
font：组合字体
font-family：规定元素的字体系列
font-weight：设置字体的粗细
font-size：设置字体的尺寸
font-style：定义字体的风格
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
color：文本颜色
visibility：元素可见性
光标属性：cursor

29.width: auto 和 width: 100% 的区别？
width: 100%的大小不包括外边距、边框
width: auto包括外边距和边框
1、width:100% 并不包含margin-left margin-right的属性值，width直接取其父容器的宽度。如果设置了margin那新的width=100%+margin的值。就会发现加了 margin相对应的边就会多出设置的空白。而且会多出横向滚动条因为宽度已经超出了屏幕的范围，(这条相对于父容器是body)。
2、width:auto包含margin-left/margin-right的属性值。width:auto总是占据整行，如果要设置margin的值那么新width=100%-margin。减去的这个值就是相应边得空白。显著的特征是这个没有横向滚动条出现也就是宽度没有增加。
3、一般width:auto使用的多，因为这样灵活，而width:100%使用比较少，因为在增加padding或者margin的时候，容易使其突破父级框，破环布局。

30.什么是FOUC？你如何来避免FOUC
如果使用import方法对CSS进行导入，会导致某些页面在Windows下的IE出现一些奇怪的现象：
以无样式显示页面内容的瞬间闪烁，这种现象称之为文档样式短暂失效(Flash of Unstyled Content)，简称为FOUC。
原理：当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。
解决方法：使用link标签将样式表放在文档head中。

31.content-box和border-box，为什么看起来content-box更合理，但还是经常使用border-box
content-box不包含padding，border-box包含padding

32.如何让一个容器成为弹性容器？
display: flex;

33.弹性布局的布局原理是什么？什么场景下使用弹性布局？
该布局模型的目的是提供一种更加高效的方式来对容器的条目进行布局、对齐和分配空间。适用于移动端，在Android和ios.上也支持

34.如何让实现一个元素在网页中垂直居中？
弹性布局用给父元素加上{ display:flex;align-items:center; }
普通元素用：magin:auto

35.请简述弹性布局与传统盒模型布局的区别和优缺点？
传统布局，基于盒模型，依赖 display属性 、position属性 、float属性。它对于那些特殊布局非常不方便，比如垂直居中
如果屏幕尺寸发生变化,传统布局的页面样式就会发生变化.
弹性盒子可以根据屏幕尺寸或浏览器窗口尺寸自动调整页面中各局部区域的显示方式，即实现非常灵活的布局处理

36.请简述css不同选择器有哪些,并对其权重由大到小进行排序
内联-id-class-元素-通配符-继承样式

37.什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的iE?
响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有meta声明的viewport

38.—个200*200的div在不同的屏幕分辨率上下左右居中
left：0;right：0;margin:auto 可以使元素水平居中； top:0;bottom:0;margin:auto 可以使元素垂直居中。所以，设置四个值都是0；margin：auto；后，这个元素就在正中间了。

希望能帮助到大家！！！！！！