前端面试CSS篇

blank_06

已于 2023-04-13 12:17:02 修改

阅读量339

点赞数 1

文章标签： css 前端 html 面试

于 2023-04-13 12:15:27 首次发布

本文链接：https://blog.csdn.net/kd_want/article/details/130121407

版权

CSS盒模型

画一条0.5px的线

link标签和import标签的区别

transition和animation的区别

Flex布局

BFC（Block Formatting Context）

display：table和本身的table有什么区别

z-index的定位方法

CSS盒模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，包括：边距、边框、填充和实际内容。

CSS3盒模型包括IE盒子模型和标准的W3C盒子模型。

盒子模型最主要的区别就是width的包含范围

标准的盒子模型：一个块的总宽度=width（width指content的宽度）

IE盒子模型：一个块的总宽度=width+padding+border

怪异盒模型：一个块的总宽度=width+margin（width包含了padding+border）

box-sizing:content-box|border-box|padding-box

画一条0.5px的线

方法一：

采用meta viewport的方法让viewport宽度等于物理设备的真实分辨率

content：设备初始缩放比例，允许用户缩放的最小比例

user-scalable：设备是否允许用户进行缩放

<meta name="vieport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

方法二：采用border-image的方式

方法三：采用transform：scale（）的方式

link标签和import标签的区别

link属于html标签，可以加载CSS；而@import是css提供的语法，只有导入样式表的作用
link在页面加载时CSS同时被加载；@import要等页面加载完毕后再加载
link是HTML提供的语法，没有兼容性问题；@import只有IE5以上才能被识别
js控制DOM可以通过插入link标签来改变样式，不能通过@import改变
link标签引入的样式权重大于@import标签

transition和animation的区别

相同点：都是随时间改变元素的属性值

不同点：transition需要出发一个事件才能改变属性，animation不需要触发任何事件会随时间改变属性值；transition为2帧，从from...to，而animation可以一帧一帧的

Flex布局

Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒装模型提供最大的灵活性，简单的分为容器属性和元素属性

容器属性：

flex-flow:<flex-direction>||<flex-wrap>

决定主轴的方向 flex-direction：row|row-reverse|column|column-reverse
决定换行规则 flex-wrap:npwrap|wrap|wrap-reverse
水平主轴对齐方式 justify-content
竖直轴线对齐方式 align-items

项目属性：

flex:<flex-grow>||<flex-shrink>||<flex-basis> 默认 0 1 auto

order属性：定义项目的排列顺序，顺序越小，排列越靠前，默认为0
flex-grow属性：定义项目的放大比例，即使存在空间，也不会放大
flex-shrink属性：定义项目的缩小比例，当空间不足的情况下会等比例的缩小，如果定义为0，则为不缩小
flex-absis属性：定义了在分配多余的空间，项目占据的空间
align-self:允许单个项目与其他项目不一样的对齐方式，可以覆盖align-items，默认属性auto，表示继承父元素的align-items

BFC（Block Formatting Context）

块级格式化上下文，是一个独立的渲染区域，规定了内部如何布局，比较重要的布局规则有内部box垂直放置
计算BFC的高度的时候，浮动元素也参与计算
该区域不会与float box重叠，不会影响到外面的元素
触发BFC的规则：根元素，浮动元素，position为absolute或fixed的元素，display为inline-block、table-caption、flex、inline-flex，overflow不为visible的元素

清除浮动

使用带clear属性的空元素
使用CSS的overflow属性，在IE6中还需要触发hasLayout，例如为父元素容器设置宽高或设置zoom:1
给浮动的元素的容器添加浮动
给浮动元素后面的元素添加clear属性
使用class的：after伪元素

calc属性

用户动态计算长度值，任何长度值都可以使用calc()函数计算，需要注意的是运算符前后都需要保留一个空格

元素垂直居中的方法

父元素：display：flex align-items：center
元素绝对定位：top：50% margin-top：-（高度/2）
高度不确定用transform：translateY（-50%）
父元素tablel布局，子元素设置vertical-align：center

实现图片在容器中居中

父元素固定宽高，利用定位及设置子元素margin值为自身的一半
父元素固定宽高，子元素设置position：absolute margin：auto 平均分配margin
css3属性transform，子元素设置 position：absolute left\top：50% transform:translate（-50%，-50%）
父元素 display：table，子元素设置为单元格 display：table
弹性布局：flex:父元素 align-items：center justify-content：center

实现一个元素垂直水平居中的方法

父级元素设置text-align为center，然后设置line-height和vertical-align使其垂直居中，最后设置font-size为0消除近似居中的bug
父级元素设置display为table-cell,vertical-align为middle达到水平垂直居中
采用绝对定位，父元素position为relative，子元素设置为absolute，通过transform或margin的组合达到垂直居中效果
绝对居中：top bottom left right 为0，margin设置auto会无限延申占满空间并评分
采用flex，父元素设置flex,子元素设置margin为auto
视窗居中，vh为视口单位，50vh就是视口高度的一半，设置margin为50vh auto 0，transform为translate（-50%）。

关于JS动画和CSS3动画的差异

渲染线程分为 main thread 和 compositor thread

如果css动画只改变transform和opacity，这时整个css动画得以在compositor thread完成，而JS动画则会在mian thread执行，然后出发compositor thread进行下一步操作，如果改变 transform 和 opacity是不会layout或者paint

功能涵盖面，JS比CSS大
实现/重构难度不一，CSS3比JS更加简单，性能跳优方向固定
对帧速表现不好的低版本浏览器，css3可以做到自然降级
CSS动画有天然事件支持
CSS3有兼容性问题

块元素和行元素

块元素：独占一行，自动填满父元素，可以设置margin、padding和宽高，设置宽度仍然是独占一行。

行元素：不会独占一行，不能设置宽高，并且垂直方向的padding和margin会失效

行内块元素：既具有block的宽高度特性，又具有inline的同行特性

提醒：iframe、img、video是可替换元素，拥有内置宽高

多行元素的文本省略号

display：-webkit-box；// 将对象作为弹性伸缩盒子模型显示
-webkit-line-clamp：3; // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数
-webkit-box-orient：vertical; // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
text-overflow：ellipsis; // 溢出用省略号显示
overflow：hidden;  // 超出的文本隐藏
white-space: nowrap; // 溢出不换行

position属性

position属性把元素放在一个静态的、相对的、绝对的、固定的位置中

固定定位fixed：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。fixed定位使元素的位置与文档流无关，因此不占据空间。fixed定位的元素和其它元素重叠。

相对定位relative：会使得元素相对于它自身位置进行对应的移动。元素仍然占据原来的空间，会覆盖其他框。

绝对定位absolute：使元素相对于最近的已定位的父元素，如果没有已定位的，那么它会相对于HTML。元素位置与文档流无关，不占据空间与其他元素会重叠。

粘性定位sticky：元素先按照普通文档流定位，然后相对于该元素在流中的flow root（BFC）和containing block（最近的块级祖先元素）定位，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

默认定位static：默认值没有定位。元素出现在正常的流中，忽略top、bottom、left、right或者z-index声明。

inherit：规定应该从父元素继承position属性的值。

CSS3新特性

CSS3边框：border-radius、box-shadow

CSS3背景：background-size、background-origin

CSS3 2D，3D转换：transform

CSS3动画：animation

选择器：first-of-type，nth-of-child

颜色：透明，rgba

字体：允许嵌入字体和设置字体阴影

flex布局

box-sizing改变盒模型

媒体

CSS选择器

id选择器 class选择器标签选择器伪元素选择器伪类选择器

样式选择器类型不同时：id选择器>class选择器>标签选择器，属性=伪类
标签之间存在层级包含关系时，后代元素会继承祖先元素的样式，如果后代元素定义了与祖先元素相同的样式，则祖先元素的相同样式属性会被覆盖，继承的样式优先级比较低，至少比标签选择器的优先级低
带有！important标记的样式属性的优先级最高
样式表的来源不同时，优先级顺序为：内联样式>内部样式>外部样式>浏览器用户自定义样式>浏览器默认样式

CSS动画实现

animation：创建动画序列，需要使用animation属性或其子属性，该属性允许配置动画时间、时长、及其他动画细节，但该属性不能配置动画的实际表现（由@keyframes规则实现）
transition：强调过渡，是元素的一个或多个属性发生变化时产生的过渡效果，同一个元素通过两个不同的途径获取样式，而第二个途径当某种改变发生时（例如hover）时才能获取样式，这样就会产生过渡动画。