• 说一下 css 盒模型

盒模型分为IE盒模型和W3C标准盒模型。盒子的宽度和高度的计算方式由box-sizing属性控制.

box-sizing属性值
content-box：默认值，content内容的宽高就是盒子width和height。
border-box：为元素设定的width和height属性决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去 边框 和 内边距 才能得到内容的宽度和高度。
inherit：规定应从父元素继承box-sizing属性的值

1. W3C 标准盒模型：

属性width,height只包含内容content，不包含border和padding。

width = 内容的宽度

height = 内容的高度

2. IE 盒模型：

属性width,height包含border和padding，指的是content+padding+border。

width = border + padding + 内容的宽度

height = border + padding + 内容的高度

• 画一条 0.5px 的线

方法一、border-width: 0.5px

直接通过样式来设置0.5px的边框。当然这个方案是非常理想的方案，但是事实总是残酷的，它只在 iOS 8+ 上支持，对于 Android 无法支持。

.border {border: 1px #000 solid;}@media(min-device-pixel-ratio: 2) {border-width: 0.5px;
}

当然对于这种兼容性问题我们可以通过 JavaScript 来做降级处理，我们将默认边框设置为1px，分辨出来是 iOS 并且版本为 8 以上，就可以将边框设置为0.5px；

方法二、移动端，采用meta viewport的方式

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

这样子就能缩放到原来的0.5倍，如果是1px那么就会变成0.5px。

方法三、采用 transform: scale()的方式

transform: scale(0.5,0.5);

方法四、使用boxshadow

<style>
.boxshadow {height: 1px;background: none;box-shadow: 0 0.5px 0 #000;
}
</style>
<p>box-shadow: 0 0.5px 0 #000</p><div class="boxshadow"></div>

设置box-shadow的第二个参数为0.5px，表示阴影垂直方向的偏移为0.5px。

方法五、使用background-image结合SVG的方式

使用svg的line元素画线，stroke表示描边颜色，默认描边宽度stroke-width=“1”，由于svg的描边等属性的1px是物理像素的1px，相当于高清屏的0.5px，

这样在Chrome能很好的显示，但在firefox挂了，究其原因是因为firefox的background-image如果是svg的话只支持命名的颜色，如"black"、"red"等，如果把上面代码的svg里面的#000改成black的话就可以显示出来，但是这样就很不灵活了。因此，只能把svg转成base64的形式，

最终如下：

.hr.svg {background: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1px'><line x1='0' y1='0' x2='100%' y2='0' stroke='#000'></line></svg>");//使用base64来使得支持firefoxbackground: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzFweCc+PGxpbmUgeDE9JzAnIHkxPScwJyB4Mj0nMTAwJScgeTI9JzAnIHN0cm9rZT0nIzAwMCc+PC9saW5lPjwvc3ZnPg==");
}

画一条0.5px 线的方法 - 腾讯云开发者社区-腾讯云

• link 标签和 @import 标签的区别

link 属于 html 标签，而@import 是 css 提供的
页面被加载时，link 会同时被加载，而@import 引用的 css 会等到页面加载结束后加
载。
link 是 html 标签，因此没有兼容性，而@import 只有 IE5 以上才能识别。
link 方式样式的权重高于@import 的。

https://www.cnblogs.com/my--sunshine/p/6872224.html

• transition 和 animation 的区别

一、transition（过渡、转变的意思）

transition 属性是一个简写属性，用于设置四个过渡属性：

1. transition-property：设置过渡效果的属性名称（默认值是all）；

2. transition-duration：设置过渡完成所需要的时间（默认值是0）；

3. transition-timing-function：设置过渡速度效果曲线（默认值是ease）；

4. transition-delay：设置过渡的开始时间（默认值是0）；

语法：transition: property duration timing-function delay;

注意：这里transition-duration是必须要填的，不填默认为是0，没有过渡效果。

二、animation（动画、活力的意思）

animation 属性也是一个简写属性，用于设置六个动画属性：

1. animation-name：设置绑定到选择器的@keyframem名称（默认值是none）；

2. animation-duration：设置完成动画所花费的时间（默认值是0）；

3. animation-timing-function：设置动画的速度曲线（默认值是ease）；

4. animation-delay：设置动画延迟几秒开始（默认值是0）；

5. animation-iteration-count：设置动画播放的次数（默认值是1）；

6. animation-direction：设置时候轮流反向播放动画（默认值是normal）；

语法：animation: name duration timing-function delay iteration-count direction;

注意：这里animation-duration是必须要填的，不填默认是0，就不会播放动画了。

三、相同点

Animation 和 transition 大部分属性是相同的，他们都是随时间改变元素的属性值。

四、区别

1. transition是一个过渡的效果，没有中间状态，需要设置触发事件（如hover等）才能执行；transition 为 2 帧，从 from .... to

2. animation是一个动画的效果，有多个中间帧，可以在任意一个中间帧设置状态，不需要设置触发事件就能执行。animation 可以一帧一帧的。

• Flex 布局

什么是Flex布局

Flex是Flexible Box的缩写 flex布局表示弹性布局，可以为盒状模型提供最大的灵活性。

适用范围

任何一种元素都可以指定为flex布局

.wrap{display:flex;
}

行内元素也可以使用Flex布局。

.box{display: inline-flex;
}

Webkit内核的浏览器，必须加上-webkit前缀。

.box{display: -webkit-flex; /* Safari */display: flex;
}

flex布局中的一些基本概念

容器和项目

什么叫容器
采用flex布局的元素被称作容器。

什么叫项目
在flex布局中的子元素被称作项目。

即父级元素采用flex布局，则父级元素为容器，全部子元素自动成为项目。

容器的一些属性

有六个常用属性设置在容器上，分别为：

• flex-direction （水平方向）
• flex-wrap （是否换行）
• flew-flow （flex-deriction和flex-wrap属性的简写）
• justify-content （对齐方式）
• align-items （垂直方向）
• align-content （多根轴线的对齐方式）

flex-direction

设置容器主轴的方向，横的还是竖的

.wrap{flex-direction:row | row-reverse | column | column=reverse;
}

包含四个属性值：

row: 默认值，表示沿水平方向，由左到右

row-reverse ：表示沿水平方向，由右到左

column：表示垂直方向，由上到下

column-reverse:表示垂直方向，由下到上

flex-wrap

设置是否换行

.wrap{flex-wrap:nowrap | wrap | wrap-reverse;
}

包含三个属性值：

nowrap：表示不换行，说明：设置的项目的宽度就失效了，强行在一行显示

wrap：正常换行，第一个位于第一行的第一个

wrap-reverse：向上换行，第一行位于下方

flex-flow

flex-flow属性是flex-deriction和flex-wrap属性的简写，默认值为[row nowrap]

.box {flex-flow: row-reverse wrap;
}

第一个属性值为flex-direction的属性值

第二个属性值为flex-wrap的属性值

justify-content

设置项目在容器中的左右对齐方式

.wrap{justify-content: flex-start | flex-end | center |space-between | space-around
}

该属性主要要五个属性值：

flex-start：默认值，左对齐

flex-end：右对齐

center：居中对齐

space-between：两端对齐

space-around：每个项目两侧的间距相等

align-items

项目在交叉轴上是如何对齐显示的

该属性主要有五个属性值：（以交叉轴从上向下为例）

flex-start:交叉轴的起点对齐

flex-end 交叉轴的终点对齐

center 交叉轴居中对齐

baseline 项目的第一行文字的基线对齐
stretch：默认值：如果项目未设置高度或者高度为auto，将占满整个容器的高度

align-content

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box {align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

该属性可能取6个值。

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

项目的一些属性

order
order属性设置项目排序的位置，默认值为0，数值越小越靠前

.item{order:<Integer>;
}.green-item{order:-1;
}

flex-grow

flex-group属性用来控制当前项目是否放大显示。默认值为0，表示即使容器有剩余空间也不放大显示。如果设置为1，则平均分摊后放大显示。

.green-item{order:-1;flex-grow:2;
}

flex-shrink

flex-shrink属性表示元素的缩小比例。默认值为1，如果空间不够用时所有的项目同比缩小。如果一个项目的该属性设置为0，则空间不足时该项目也不缩小。

flex-basis

flex-basis属性表示表示项目占据主轴空间的值。默认为auto，表示项目当前默认的大小。如果设置为一个固定的值，则该项目在容器中占据固定的大小。

flex属性

flex属性是 flex-grow属性、flex-shrink属性、flex-basis属性的简写。默认值为：0 1 auto；

.item{flex:(0 1 auto) | auto(1 1 auto) | none (0 0 auto)
}

align-self

align-self属性表示当前项目可以和其他项目拥有不一样的对齐方式。它有六个可能的值。默认值为auto
auto：和父元素align-self的值一致

flex-start：顶端对齐

flex-end：底部对齐

center：竖直方向上居中对齐

baseline：item第一行文字的底部对齐

stretch：当item未设置高度时，item将和容器等高对齐

• BFC（块级格式化上下文，用于清楚浮动，防止 margin 重叠等）

是什么？

一块区域，一块拥有着自己的渲染规则的区域。只要为一个普通的元素添加BFC的特征属性（下面会讲BFC特征属性有哪些），就可以让其变为一个BFC。

BFC特征属性：

1. 根元素：<html/>

2. float：left、right

3. position：absolute、fixed

4. display：inline-block、table-cell、table-caption、table、table-row、table-row-group、table-header-group、table-footer-group、inline-table、flow-root、flex、inline-flex、grid、inline-grid

5. overflow：hidden、auto、scroll

6. contain：layout、content、paint

7. 多列容器（元素的column-count/column-width不为auto，包括column-count为1）

有什么作用？

BFC可以被看做是一个“隔离了的”独立容器，容器内的元素在布局上不会影响到外面的元素。因此，其作用主要有3个：

BFC 区域不会与 float box 重叠
BFC 是页面上的一个独立容器，子元素不会影响到外面
计算 BFC 的高度时，浮动元素也会参与计算

1. 避免外边距重叠

举例：两个拥有margin属性的div纵向排列时，二者border之间的距离为：两个div的margin属性较大的那个值，也就是较小的margin属性会被覆盖在下面。但是如果我们的目的就是让两个margin属性都显示，不被覆盖，这个时候就可以用到BFC。

做法：将两个div分别包裹在两个容器中，为这两个容器添加BFC特征属性，让这两个容器均变为BFC，那么在每个BFC中，div的margin属性均会显露出来，也就不会重合了

2. 清除浮动：

父元素father中嵌套一个子元素son，为子元素添加float：left属性。这个时候，父元素就会出现高度塌陷，视觉效果就是父元素变成了一条线，子元素跑到了父元素的外部，并没有被包裹在这个父元素中，即浮动导致的脱离文档流。

做法：为father添加BFC属性，就可以让son再次回到文档流

3. 阻止元素被浮动元素覆盖

两个相邻div：brother1和brother2，为brother1添加float：left属性。这个时候，brother1会覆盖在brother2上面，如果想让brother1位于brother左侧

做法：为brother2添加BFC特征属性，以触发正常元素的BFC属性

链接： BFC（块级格式化上下文，用于清楚浮动，防止ma__牛客网
来源：牛客网

• 8种垂直居中的方法

1、display：flex

//父盒子
.box {display: flex;align-item: center;
}

2、使用css-table实现

      display: table-cell; 

     vertical-align: middle;

注意：这种方式其实是父元素要固定宽高

vertical-align 属性设置一个元素的垂直对齐方式。
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

//父盒子
.box {display: table-cell;vertical-align: middle;
}

3、 margin，transform配合

.box {overflow: hidden; //防止塌陷.box1 {margin:50% auto;transform: translateY(-50%); }
}

4、inline-block+vertical-aligin

父子都要设置行高line-height

.box {line-height: 300px;.box1 {line-height:100px;display: inline-block;vertical-align: middle;}
}

5、absolute+负margin 子绝父相，子top50% ,margin:  - 高度 / 2

.box {position: relative;.box1 {position: absolute;top: 50%;margin-top: -50px;}
}

6、absolute+margin:auto （宽高未知时使用）

.box {position: relative;.box1 {position: absolute;top: 0;bottom: 0;margin: auto;}
}

7、absolute+transform

.box {position: relative;.box1 {position: absolute;top: 50%;transform: translateY(-50%);}
}

8、使用网格布局grid+align-self+justify-self实现

注意：这种方式父元素要没有其他的子元素或者是内容

.box {display: grid;.box1 {align-self: center;  //垂直居中justify-self: center; //水平居中}
}

8种垂直居中的方法_「已注销」的博客-CSDN博客

css垂直居中的6种方式_KinHKin(五年前端)的博客-CSDN博客

• 关于 JS 动画和 css3 动画的差异性

JS动画（逐帧动画）:

首先，在js动画是逐帧动画，是在时间帧上逐帧绘制帧内容，由于是一帧一帧的话，所以其可操作性很高，几乎可以完成任何想要的动画形式。但是由于逐帧动画的帧序列内容不一样，会增加制作负担，且资源占有比较大。

但是，如果帧速率太低，则从一个帧到另一个帧的过渡很可能是不自然且不一致的。

缺点：

• js是单线程的脚本语言，当js在浏览器主线程运行时，主线程还有其他需要运行的js脚本、样式、计算、布局、交互等一系列任务，对其干扰线程可能出现阻塞，造成丢帧的情况。
• 其次，js在做动画的时候，其复杂度是高于css3的，需要考虑一些计算，操作等方便问题。

优点：

• JavaScript动画控制能力很强，可以控制动画在播放过程中：开始、暂停、播放、终止、取消都可以完成。
• 因为它相似与电影播放模式，很适合于表演很细腻的动画，如3D效果、人物或动物急剧转身等等效果。
• 功能涵盖面，JS 比 CSS 大。
• 动画效果比CSS3动画更丰富，一些动画效果，如曲线运动、冲击闪烁、视差滚动等效果，只有JavaScript动画才能完成。
• CSS3有兼容性问题，而JS大多数时候没有兼容性问题。

css3（补间动画） :

css3动画的制作方法简单方便。只需确定第一帧和最后一帧的关键位置即可，两个关键帧之间帧的内容由Composite线程自动生成，不需要人为处理。当然也可以多次添加关键帧的位置。

因为只设置几个关键帧的位置，所以在进行动画控制的时候时比较弱的。不能够在半路暂停动画，或者在动画过程中不能对其进行一些操作等。

css3在实现一些简单的滑动，翻转等特效的时候会很方便，但是想要做到一些酷炫的效果的时候，其操作往往可能会比js操作有更多的冗余。

css3在做动画的时候，浏览器可以对其进行一些优化，会比js使用更少的占用cpu资源，但是效果足够流畅。

优点：

（1）浏览器可以优化动画。

（2）代码相对简单，并且性能调整方向是固定的。

（3）对于帧速率性能较差的低版本浏览器，CSS3可以自然降级，而JS需要编写其他代码。

缺点：

1.运行过程的控制较弱，不可能附加事件绑定回调函数。 CSS动画只能暂停，无法在动画中找到特定的时间点，不能中途反转动画，无法更改时间比例，无法添加回调函数或将播放事件绑定到特定位置，并且没有进度报告

2。 代码冗长。 如果您想使用CSS来实现稍微复杂一点的动画，那么CSS代码最终将变得非常繁琐。

总结：

如果动画只是简单的状态切换，不需要中间过程控制，在这种情况下，css动画是优选方案。

如果你在设计很复杂的富客户端界面或者在开发一个有着复杂UI状态的 APP。那么你应该使用js动画，这样你的动画可以保持高效，并且你的工作流也更可控。

js动画与css3动画的区别_js逐帧动画_Sco_Jing1031的博客-CSDN博客

• 说一下块元素和行元素

块元素：独占一行，并且有自动填满父元素，可以设置 margin 和 pading 以及高度和宽度。
行元素：不会独占一行，width 和 height 会失效，并且在垂直方向的 padding 和margin 会失效。

• CSS3 中对溢出的处理

overflow：

• visible：默认值，内容不会被修剪，会呈现在元素将之外。
• hidden:  内容会被修剪，并且其余内容是不可见的。
• scroll：内容会被修剪，但是浏览器会提供滚动条以便于查看其他内容。
• auto：文本溢出则显示滚动条，不溢出则不显示。
• inherited：规定应该从父元素继承overflow的属性值
• x轴、y轴：overflow-x、overflow-y针对两个轴分别设置

overflow: visible | hidden | scroll | auto | inherit;overflow-x: visible | hidden | scroll | auto | inherit;overflow-y: visible | hidden | scroll | auto | inherit;

• 单、多行元素的文本省略号

单行

1、white-space: nowrap; 文本超过容器最大宽度不换行(若文本自动显示在一行则不需要这个属性)  。

2、overflow: hidden; 文本超出容器最大宽度的部分不显示。

3、text-overflow: ellipsis; 文本超出容器最大宽度时显示三个点。

p {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}

多行

1、width：xxpx；（容器宽度：（必须要有宽度）px、%，都可以）；

2、text-overflow:ellipsis;  溢出文本显示省略号。

3、display: -webkit-box 主要是控制父容器里面子元素的排列方式 ，让容器变成一个弹性伸缩盒子。

4、-webkit-line-clamp: 2; 最大显示的文本行数。

5、-webkit-box-orient: vertical;  设置或检索伸缩盒对象的子元素纵向排列。

6、overflow : hidden;文本溢出隐藏。

p {width: 100px;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;
}    

• 三种隐藏方式的区别：visibility=hidden, opacity=0，display:none

1、display:none隐藏 display:black 显示

2、visibility: hidden 隐藏 visibility: visible 显示

3、 opacity: 0 隐藏 opacity：1 显示

结构

display:none: 浏览器不会渲染 display 属性为 none 的元素，不占据空间。
visibility: hidden:元素被隐藏，但是会被渲染不会消失，占据空间。
opacity: 0: 透明度为 100%，元素隐藏，占据空间。

继承

display: none不会被子元素继承，毕竟子类也不会被渲染。
visibility: hidden：会被子元素继承，子元素可以通过设置 visibility: visible; 来取消隐藏。
opacity: 0：会被子元素继承,且，子元素并不能通过 opacity: 1 来取消隐藏。

性能

display none : 动态改变此属性时会引起重排，性能较差。
visibility:hidden: 动态改变此属性时会引起重绘，性能较高。
opacity: 0： 提升为合成层，不会触发重绘，性能较高。

事件监听

display none : 无法进行 DOM 事件监听。
visibility:hidden: 无法进行 DOM 事件监听。
opacity: 0：可以进行 DOM 事件监听。

transition

display none : transition 不支持 display。
visibility:hidden: transition 不支持 display。
opacity: 0：transition 不支持 opacity。

• 双边距重叠问题（外边距折叠）

多个相邻（兄弟或者父子关系）普通流的块元素垂直方向marigin会重叠

折叠的结果为：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。

• position 属性 比较

1、固定定位fixed：

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

2、相对定位relative：

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

3、绝对定位absolute：

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

4、粘性定位sticky：

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

5、默认定位Static：

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

6、inherit:

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

清除浮动的方法（最常用的4种）

一、 额外标签法：

1.给父元素的内部加入一个块级元素

2.该块级元素添加一个clear:both的属性

优点： 通俗易懂，书写方便。（不推荐使用）
缺点： 添加许多无意义的标签，结构化比较差。

<div class="fahter"><div class="big">big</div><div class="small">small</div><div class="clear">额外标签法</div>
</div>

.clear{clear:both;
}

二、 父级添加overflow方法： 可以通过触发BFC的方式，实现清楚浮动效果。必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

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

缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。不能和position配合使用，因为超出的尺寸的会被隐藏。

注意： 别加错位置，是给父亲加（并不是所有的浮动都需要清除，谁影响布局，才清除谁。）

.fahter{width: 400px;border: 1px solid deeppink;overflow: hidden;
}

三、单伪标签法 ：由伪元素代替额外标签，是空元素的升级版，因为额外元素会让html结构变得复杂，好处是不用单独加标签了。IE8以上和非IE浏览器才支持:after，，zoom(IE专有属性)可解决ie6,ie7浮动问题（较常用推荐）

优点： 符合闭合浮动思想，结构语义化正确，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）

缺点： 由于IE6-7不支持：after，使用zoom：1

.clearfix::after{/*伪元素是行内元素 正常浏览器清除浮动方法*/content: "";display: block;height: 0;clear:both;visibility: hidden;}.clearfix{*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/}<body><div class="father clearfix"><div class="big">big</div><div class="small">small</div><!--<div class="clear">额外标签法</div>--></div><div class="footer"></div>
</body>

四、双伪标签法：（较常用推荐）

这种方法不仅可以清除浮动还可以防止塌陷，塌陷的条件是父子元素都为块级元素，且嵌套

优点： 代码更简洁

<style>.father{border: 1px solid black;*zoom: 1;}.clearfix:after,.clearfix:before{content: "";display: block;clear: both;}.big ,.small{width: 200px;height: 200px;float: left;}.big{background-color: red;}.small{background-color: blue;}</style><div class="father clearfix"><div class="big">big</div><div class="small">small</div></div><div class="footer"></div></div>

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

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

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

清除浮动的几种方法_小阿哈的博客-CSDN博客

清除浮动的4种方式_star@星空的博客-CSDN博客

• css3 新特性

CSS3的新特性有：

1、CSS3选择器

2、CSS3圆角与边框（盒阴影）border-radius，box-shadow 等

3、CSS背景与渐变, background-size，background-origin 等；

4、CSS3过渡；

5、CSS3变换, 2D，3D 转换如 transform 等

6、CSS3动画如animation 等。

https://www.cnblogs.com/tiyou/p/16172145.html

【css】CSS3有哪些新特性_css3新特性_光明山顶的博客-CSDN博客

• CSS 选择器有哪些，优先级呢

• 选择器优先级由高到低分别为：
  css优先级: !important>行间样式> ID选择器>属性选择器&&伪类选择器&&类选择器>元素选择器
  具体：
  a:行内样式:优先级1000
  b:ID选择器:优先级100
  c:类选择器:优先级10 (伪类属性优先级10 ）
  d:元素选择器:优先级1
  注意：! important:优先级最大10000 (用了后就不能修改慎用)

具体例子：
span 优先级1
div span 优先级1+1
div:first-child == 1+10
.p1 span 优先级10+1.
#divI span 优先级100+1

• 当比较多个相同级别的CSS选择器优先级时，它们定义的位置将决定一切。下面从位置上将CSS优先级由高到低分为六级：
  1、位于<head/>标签里的<style/>中所定义的CSS拥有最高级的优先权。
  2、第二级的优先属性由位于 <style/>标签中的 @import 引入样式表所定义。
  3、第三级的优先属性由<link/>标签所引入的样式表定义。
  4、第四级的优先属性由<link/>标签所引入的样式表内的 @import 导入样式表定义。
  5、第五级优先的样式有用户设定。
  6、最低级的优先权由浏览器默认。

• CSS基础知识-选择器的种类及优先级 - 简书

  ---

  • css 动画如何实现

css实现动画主要有3种方式：

①、transition实现过渡动画，

②、transform转变动画，

③、animation实现自定义动画。

一、transition过渡动画

.box {transition: property duration timing-function delay;
}

1、 transition: 属性是个复合属性

transition-property： 规定设置过渡效果的 css 属性名称
transition-duration： 规定完成过渡效果需要多少秒或毫秒
transition-timing-function：指定过渡函数, 规定速度效果的速度曲线
transition-delay： 指定开始出现的延迟时间
2、默认值为：transition: all 0 ease 0;
3、单个 css 属性的过渡效果时：

.box {transition: background 0.8s ease-in 0.3s;
}

有多个 css 属性的过渡效果时：

.box {transition: background 0.8s ease-in 0.3s, color 0.6s ease-out 0.3s;
}

二、transform 变形动画

可以利用 transform 功能来实现文字或图像的 旋转、缩放、倾斜、移动 这四种类型的变形处理

.box {transform: rotate(45deg);transform: scale(0.5);transform: skew(30deg);transform: translate(100px);
}

1、旋转 rotate

1.1、 用法: 主要分为2D旋转和3D旋转。

2D 旋转

 transform: rotate(45deg); // 顺时针旋转45度

3D旋转：围绕原地到(x,y,z)的直线进行3D旋转

 transform: rotate(x,y,z,angle);

x,y,z：分别表示 X、Y 和 Z 轴方向，都不能省略；
angle：设置对象设置对象的旋转角度，不能省略；
rotateX(angle)，沿着X轴进行3D旋转；rotateY(angle)，沿着Y轴进行3D旋转；rotateZ(angle)，沿着Z轴进行3D旋转；
一个参数 “角度”，单位 deg 为度的意思，正数为顺时针旋转，负数为逆时针旋转。

2、缩放 scale

2.1、主要分为2D缩放和3D缩放

2D缩放

transform: scale(0.5);
transform: scale(0.5, 2);

• 一个参数时： 表示水平和垂直同时缩放该倍率；
• 两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率 。

3D缩放

transform: scale3d(x, y, z);
transform: scaleX(x);
transform: scaleY(y);
transform: scaleZ(z);

• x、y、z为收缩比例

3. 倾斜 skew

transform: skew(30deg) ;
transform: skew(30deg, 30deg);

• 一个参数时：表示水平方向的倾斜角度 ；
• 两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度 。
• skew 的默认原点 transform-origin 是这个物件的中心点

4. 移动 translate

4.1、2D移动

transform: translate(45px);
transform: translate(45px, 150px); //沿着X轴和Y轴同时移动

• 一个参数时：表示水平方向的移动距离；
• 两个参数时：第一个参数表示水平方向的移动距离，第二个参数表示垂直方向的移动距离 。

4.2、3D移动

transform: translateX(100px); //仅仅是在X轴上移动
transform: translateY(100px); //仅仅是在Y轴上移动
transform: translateZ(100px); //仅仅是在Z轴上移动（注意：translateZ一般都是用px单位）
transform: translate3d(x,y,z); //在x，y，z轴上都移动

transformZ的直观表现形式就是大小变化，实质是XY平面相对于视点的远近变化（说远近就一定会说到离什么参照物远或近，在这里参照物就是perspective属性）。比如设置了perspective为200px;那么transformZ的值越接近200，就是离的越近，看上去也就越大，超过200就看不到了，因为相当于跑到后脑勺去了，我相信你正常情况下，是看不到自己的后脑勺的。
x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度；z只能设置长度值。

5. 基准点 transform-origin

在使用 transform 方法进行文字或图像的变形时，是以元素的中心点为基准点进行的 。 使用 transform-origin 属性，可以改变变形的基准点 。
用法: transform-origin: 10px 10px;
表示相对左上角原点的距离，单位 px，第一个参数表示相对左上角原点水平方向的距离，第二个参数表示相对左上角原点垂直方向的距离；
两个参数除了可以设置为具体的像素值，其中第一个参数可以指定为 left、center、right，第二个参数可以指定为 top、center、bottom。

6. 多方法组合变形

这四种变形方法顺序可以随意， 但不同的顺序导致变形结果不同， 原因是变形的顺序是从左到右依次进行。

 transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);

三、 animation 关键帧动画

1. 在 CSS3 中创建动画, 您需要学习 @keyframes 规则 。
   2. @keyframes 规则用于创建动画 。 在 @keyframes 中规定某项 CSS 样式, 就能创建由当前样式逐渐改为新样式的动画效果 。
   3. 必须定义动画的名称和时长 。 如果忽略时长, 则动画不会允许, 因为默认值是 0。
   4. 请用百分比来规定变化发生的时间, 或用关键词 “from” 和 “to”, 等同于 0% 和 100% 。

5. 语法
     

animation: name duration timing-function delay iteration-count direction;

      1. animation-name 规定需要绑定到选择器的 keyframe 名称
      2. animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
      3. animation-timing-function 规定动画的速度曲线。 默认是 “ease”。
      4. animation-delay 规定动画何时开始 。 默认是 0。
      5. animation-iteration-count 规定动画被播放的次数 。 默认是 1。
      6. animation-direction 规定动画是否在下一周期逆向地播放 。 默认是 “normal”; alternate (轮流),。

.box3 {width: 100px;height: 100px;background: green;animation: myfirst 2s ease 0.5s infinite alternate;
}@keyframes myfirst {from {background:green;}to {background:yellow;}
}

alternate (轮流): 动画播放在第偶数次向前播放, 第奇数次向反方向播放 (animation-iteration-count 取值大于1时设置有效
   2. 语法: animation-direction: alternate;

animation-play-state 规定动画是否正在运行或暂停 。 默认是 “running” 播放; paused 暂停播放 。
   1. 语法: animation-play-state: paused;

animation-fill-mode 属性规定动画在播放之前或之后, 其动画效果是否可见; 规定对象动画时间之外的状态; none | forwards | backwards | both 。
   1. none: 不改变默认行为 (默认, 回到动画没开始时的状态) 。
   2. forwards: 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义) (动画结束后动画停留在结束状态) 。
   3. backwards: 在 animation-delay 所指定的一段时间内, 在动画显示之前, 应用开始属性值 (在第一个关键帧中定义) （动画回到第一帧的状态）。
   4. both: 向前和向后填充模式都被应用 （根据 animation-direction 轮流应用 forwards 和 backwords 规则）。
   5. 语法: animation-fill-mode: forwards
      1. 0% 是动画的开始, 100% 是动画的完成。

【css】css动画实现的3种方式_光明山顶的博客-CSDN博客

• css3 transform, transition, animation区别和使用场景

CSS3 有3种和动画相关的属性：transform, transition, animation。

其中 transform 描述了元素静态样式。而transition 和 animation 却都能实现动画效果。

所以三者之中transform 常常配合后两者使用，在页面实现酷炫的五毛（或五元）特效。

不同点：

1.  触发条件不同。transition通常和hover等事件配合使用，由事件触发。animation则和gif动态图差不多，立即播放。

2. 循环。 animation可以设定循环次数。

3. 精确性。 animation可以设定每一帧的样式和时间。tranistion 只能设定头尾。 animation中可以设置每一帧需要单独变化的样式属性， transition中所有样式属性都要一起变化。

4. 与javascript的交互。animation与js的交互不是很紧密。tranistion和js的结合更强大。js设定要变化的样式，transition负责动画效果，天作之合，比之前只能用js时爽太多。

结论：

1. 如果要灵活定制多个帧以及循环，用animation.

2. 如果要简单的from to 效果，用 transition.

3. 如果要使用js灵活设定动画属性，用transition.

css3 transform, transition, animation区别和使用场景_transform和animation_jdk137的博客-CSDN博客

• 如何实现图片在某个容器中居中的？

1.绝对定位+直接计算法：
当父元素固定宽高时，利用定位，和margin。
例如：父元素400px正方形 子元素200px正方形 css代码：

.father {position:relative;
}.child {position:absolute;margin:100px;
}

2.定位+平移

.father {position:relative;
}.child {position:absolute; left: 50%; top: 50%;transform: translate(-50%,-50%);
}

3.table法

父元素table布局，子元素设置vertical-align:center;

vertical-align: middle；实现块级元素垂直居中

.father {display:table;text-align: center;
}.child {display:table-cell;vertical-align:middle;
}

4.弹性布局 flex

.father {display:flex;justify-content:center;align-items:center;
}.child { }

• float 的元素，display 是什么

答案： blcok

一个元素其display属性不论是inline、inline-block还是block，在设置了float属性后都变成了block,就是说浮动之后会变成块级元素。

浮动元素float

css布局的三种机制
分别是普通流（标准流）、浮动和定位

1.标准流

块级元素会独占一行从上向下排列。
行内元素会按照顺序排列，从左往右排碰到父级元素则会自动换行

2.浮动

让盒子从普通流中浮起来，主要让多个块级盒子一行显示

3.定位

将盒子定在浏览器的某个位置

为什么需要浮动？

它可以实现多个元素一行显示，而之前学的行内块（inline-block）也可以实现但会有空白间隙，也不可以实现空盒子左右对齐

• 隐藏页面中某个元素的方法

display:none;

visibility:hidden;

opacity: 0;

position 移到外部；

z-index 涂层遮盖等等

1、完全隐藏：元素从渲染树中消失，不占据空间。

(1) display 属性

display:none;

(2) hidden 属性 HTML5 新增属性，相当于 display: none

<div hidden></div>

2、视觉上的隐藏：屏幕中不可见，占据空间。

(1) 设置 posoition 为 absolute 或 fixed，通过设置 top、left 等值，将其移出可视区域。

position: absolute;
left: -99999px;

(2)设置 position 为 relative，通过设置 top、left 等值，将其移出可视区域。

position: relative;
left: -99999px;

(3)设置 margin 值，将其移出可视区域范围(可视区域占位)。

margin-left: -99999px;

(4)将元素隐藏，但是在网页中该占的位置还是占着。

visibility: hidden;

(5)透明度设置成0，占据空间。

opacity: 0;

3、语义上的隐藏：读屏软件不可读，但正常占据空间。

<div aria-hidden="true"></div>

visibility:hidden和display:none的区别

visibility属性指定一个元素是否是可见的。

display这个属性用于定义建立布局时元素生成的显示框类型。

• 三栏布局的实现方式

三栏布局：两边固定，中间自适应

一.流体布局（float布局）

1.首先绘制左右两栏，左栏左浮动，右栏右浮动

2.再绘制中间一栏，留出左右两栏距离与间距

缺点：主要内容无法最先加载 ，当主要内容过多时影响用户体验

二、BFC布局

我们先把左右两栏元素浮动，中间栏不做其他属性，发现中间栏默认撑满全屏，这时候我们就可以利用BFC不会和浮动元素重叠的规则，把中间元素改成一个BFC，使用overflow:hidden或者display: flex达到中间栏自适应

缺点：主要内容无法最先加载 ，当主要内容过多时影响用户体验

三、flex布局

flex属性的完整写法是:flex-grow项目放大比例、flex-shrink项目缩小比例 、flex-basis项目占据属性

1.项目绘制按照左中右排列

2.父元素使用flex属性

3.(1)左右两栏固定宽度
赋值给元素width属性
赋值给元素flex属性：flex: 0 1 200px(放大比例0，缩小比例1，项目宽度200px）
(2)中间使用flex:1占据剩余空间

缺点：无法兼容所有浏览器

四、position定位

1.父元素使用相对定位
2.两侧子元素使用绝对定位
3.中间元素不做定位处理，只留出空间就好

优点：主要内容可以优先加载，兼容性比较好

五、Table布局

1.先设置外边盒子采用表格布局
2.设置子元素为表格单元格格式
3.左右两栏设置宽度，中间无需设置

缺点：无法设置栏间距

六、圣杯布局

圣杯布局的核心是浮动、负边距、相对定位、不添加额外标签
左、中、右 三栏都使用float进行浮动，然后通过负值margin进行调整

1.三栏都使用float进行浮动，左右定宽，中间宽度100%
2.因为中间100%所以布局变成这样

七、双飞翼布局

双飞翼布局前两步和圣杯布局一样，只是处理中间栏部分内容被遮挡的问题解决方案不同：
在mian内部添加一个content，通过设置左右margin（左右两栏的宽度+间距margin）来避开遮挡

七种方式实现三栏布局_仙女爱吃鱼的博客-CSDN博客

浮动布局时，三个 div 的生成顺序有没有影响

有影响，浮动布局时会因为div块的先后顺序而产生不同的效果。
这种情况下，把左右两栏div放在中间栏div之前。这样，才能让左右两个边栏浮动到它们应该的位置上，以此来使得中栏能够进入中间的空间，并自适应布局。若是浏览器在一个或者两个边栏div之前发现中栏，那么中栏会先占据一侧或者两侧位置，这样浮动的部分就会跑到中栏的下面。

• calc 属性

Calc 用户动态计算长度值(宽度或高度)，任何长度值都可以使用 calc()函数计算，能够自动根据不同尺寸的屏幕自动调接数值，从而很轻松的实现自适应布局展示在不同尺寸屏幕下。需要注意的是，运算符前后都需要保留一个空格。

width: calc(100% - 100px);

此元素宽度等于父级宽度下减100像素

• 有一个 width300，height300，怎么实现在屏幕上垂直水平居中

对于行内块级元素，
1、父级元素设置 text-alig：center，然后设置 line-height 和 vertical-align 使其
垂直居中，最后设置 font-size：0 消除近似居中的 bug
2、父级元素设置 display：table-cell，vertical-align：middle 达到水平垂直居中
3、采用绝对定位，原理是子绝父相，父元素设置 position：relative，子元素设置
position：absolute，然后通过 transform 或 margin 组合使用达到垂直居中效果，设
置 top：50%，left：50%，transform：translate（
-50%，-50%）
4、绝对居中，原理是当 top,bottom 为 0 时，margin-top&bottom 设置 auto 的话会无
限延伸沾满空间并平分，当 left，right 为 0 时,margin-left&right 设置 auto 会无限
延伸占满空间并平分，
5、采用 flex，父元素设置 display：flex，子元素设置 margin：auto
6、视窗居中，vh 为视口单位，50vh 即是视口高度的 50/100，设置 margin：50vh
auto 0，transform：translate(-50%)

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

参考回答：
Display:table 和本身 table 是相对应的，区别在于，display：table 的 css 声明能
够让一个 html 元素和它的子节点像 table 元素一样，使用基于表格的 css 布局，是我
们能够轻松定义一个单元格的边界，背景等样式，而不会产生因为使用了 table 那样
的制表标签导致的语义化问题。
之所以现在逐渐淘汰了 table 系表格元素，是因为用 div+css 编写出来的文件比用
table 边写出来的文件小，而且 table 必须在页面完全加载后才显示，div 则是逐行显
示，table 的嵌套性太多，没有 div 简洁

• position 属性的值有哪些及其区别

text-shadow: 10px 10px 5px #ccc;

box-shadow: 10px 10px 8px 10px #999 inset;

word-wrap: nomal | break-word;

word-break: break-all | keep-all;

.box {transform-style: preserve-3d; //旋转保持3d效果animation: rotate 3s linear infinite; //匀速，永动
}@keyframes rotate {0% {transform: rotateY(0deg);}100% {transform: rotateY(360deg);}
}

//三角形
.triangle {width: 0;height: 0;border-width: 100px;border-style: solid;border-color: transparent pink;
}

div {width:0px;height:0px;border-top:10px solid red;border-right:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid transparent;
}

box-sizing: content-box/border-box;

box-sizing: content-box/border-box;

.father {position: relative;.child {position: absolute;height: 100%;}
}

.father {display: table;.child {display: table-cell;vertical-align: top;}
}

.father {overflow: hidden;.child {margin-bottom: -9999px;padding-bottom: 9999px;}
}

2023高薪前端面试题（一、前端基础——css）相关推荐

1. 2023高薪前端面试题（一、前端基础——HTTP/HTML/浏览器）

   说一下http和https? http:超文本传输协议,是一个基于请求与响应.无状态的应用层协议,以明文方式发送信息,最初设计目的是提供一种发布和接收 HTML 页面的方法. https:是http的 ...

2. 【前端面试题】前端基础 | 八股文 | HTTP网络 | Vue | React

   ⭐️ 本文首发自 前端修罗场(点击加入),是一个由 资深开发者 独立运行 的专业技术社区,我专注 Web 技术.Web3.区块链.答疑解惑.面试辅导以及职业发展.博主创作的 <前端面试复习笔记& ...

3. array 前端面试题_web前端开发面试题汇总

   前端面试题汇总 第一部分HTML&CSS 1. 浏览器分类 浏览器:IE,Chrome,FireFox,Safari,Opera. 内核:Trident,Gecko,Presto,Webkit ...

4. 2023高频前端面试题总结（附答案）

   html与css 1.<img>的title与alt有什么区别 -title是提示文本,鼠标放在图片上提示的文字 -alt 是图片显示不出来时的文字替代,能显示出来就不用替换 2.labe ...

5. 前端面试题集锦——前端综合问题

   前端综合问题 前端页面有哪三层构成,分别是什么?作用是什么? 1)结构层(html)structural layer 由HTML或者XHTML之类的标记语言负责创建,即:标签: 2)表示层(css)p ...

6. 字节跳动最爱考的前端面试题：计算机网络基础

   3)问:HTTP 缓存 HTTP 缓存又分为强缓存和协商缓存: 首先通过 Cache-Control 验证强缓存是否可用,如果强缓存可用,那么直接读取缓存 如果不可以,那么进入协商缓存阶段,发起 HT ...

7. 前端面试题，前端组件化、工程化、模块化的概念

   1.前端模块化: 可以理解为一组自定义业务的抽象封装,是根据项目的情况来进行封装组合到一起的,比如我们可以分为登录模块,评论模块.模块可维护性好,组合灵活,方便调用,多人协作互不干扰. 2.前端组件化 ...

8. 2023高频前端面试题（含答案）

   一.简单页面 1.CSS选择器样式优先级 2.CSS实现三列布局(左右固定宽度,中间自适应) (1)CSS浮动 第一个float:left,第二个float:right,第三个设置margin-lef ...

9. 2023高频前端面试题（持续更新 含答案）

   1,es6有哪些新特性? ES6是2015年推出的一个新的版本.这个版本相对于ES5的语法做了很多的优化 let和const具有块级作用域,不存在变量提升的问题.新增了箭头函数,简化了定义函数的写法, ...

最新文章

1. ASP.NET MVC – 样式和布局简介
2. 高并发场景之RabbitMQ篇
3. 网络推广外包专员浅析网络推广外包中网站转化率的发展意义
4. AI之FL：联邦学习(Federated Learning)的简介、入门、应用之详细攻略
5. [转]一文读懂目标检测：R-CNN、Fast R-CNN、Faster R-CNN、YOLO、SSD
6. java io流 教程_Java基础教程：IO流与文件基础
7. Qt笔记-Q_UNUSED解决编译器unused paramenter告警
8. C# 用Attribute实现AOP事务
9. python画超长图-python 画长图
10. RabbitMQ教程_4 Java 使用rabbitmq
11. java调用scala内部类_scala中的内部类 == 简单示例
12. PIC单片机的C语言程序基本框架,PIC单片机的基本编程汇总，初学者必看
13. 图书管理系统c语言ns图,图书管理系统流程图.doc
14. 为什么手机打电话的时候不能同时上网？
15. Matlab对语音信号做fft及对语音信号进行分帧加窗
16. 流媒体协议—HTTP
17. 全国大学生软件测试大赛web应用测试,2017全国大学生软件测试大赛Web应用测试（团体）夏季预选赛入选名单...
18. windows DNS污染解决
19. kali Linux的优点与缺点
20. LeetCode每日一题495. 提莫攻击

热门文章

1. STM32精英版（正点原子STM32F103ZET6开发板）学习篇12——电容触摸按键实验
2. html+angularjs+redis获取后台数据模拟京东/天猫的商品分类导航
3. configure: error: GD build test failed. Please check the config.log
4. 水果店水果保鲜期延长方法，水果店经营保鲜方法
5. 微信小程序开发常见问题总结
6. php 数值转时间格式,php数值转换时间及时间转换数值用法示例
7. 网上订餐叫外卖的发展优势
8. Python wordcloud词云：源码分析及简单使用
9. 不用光盘和u盘怎么重装系统win10
10. win10下sticky notes(便笺)数据存放地址、数据备份及恢复