2023高薪前端面试题（一、前端基础——css）
• 说一下 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的方式
这样子就能缩放到原来的0.5倍，如果是1px那么就会变成0.5px。
方法三、采用 transform: scale()的方式
transform: scale(0.5,0.5);方法四、使用boxshadow
box-shadow: 0 0.5px 0 #000
设置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,
");
//使用base64来使得支持firefox
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzFweCc+PGxpbmUgeDE9JzAnIHkxPScwJyB4Mj0nMTAwJScgeTI9JzAnIHN0cm9rZT0nIzAwMCc+PC9saW5lPjwvc3ZnPg==");
}画一条0.5px 线的方法 - 腾讯云开发者社区-腾讯云
• link 标签和 @import 标签的区别
link(链接式) |
@import（导入式） |
|
| 从属关系 | 是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等 | CSS 提供的语法规则，只有导入样式表的作用 |
| 加载顺序 | 和页面同时加载 | 页面加载完毕后加载 |
| 兼容性 | 无兼容问题 | IE5+ |
| DOM可控性 | 可以通过 JS 操作 DOM ，插入link标签来改变样式 |
由于 DOM 方法是基于文档的，无法使用@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:;
}
.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. 根元素：
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：
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。 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的属性
优点： 通俗易懂，书写方便。（不推荐使用）
缺点： 添加许多无意义的标签，结构化比较差。
big
small
额外标签法
.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执行，其他浏览器不执行*/
}
big
small
四、双伪标签法：（较常用推荐）
这种方法不仅可以清除浮动还可以防止塌陷，塌陷的条件是父子元素都为块级元素，且嵌套
优点： 代码更简洁
big
small
五、父级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、位于 标签里的中所定义的CSS拥有最高级的优先权。 -
CSS基础知识-选择器的种类及优先级 - 简书
• css 动画如何实现
2、第二级的优先属性由位于 标签中的 @import 引入样式表所定义。
3、第三级的优先属性由标签所引入的样式表定义。
4、第四级的优先属性由标签所引入的样式表内的 @import 导入样式表定义。
5、第五级优先的样式有用户设定。
6、最低级的优先权由浏览器默认。
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
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、语义上的隐藏：读屏软件不可读，但正常占据空间。
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 属性的值有哪些及其区别
• z-index 的定位方法
• 如果想要改变一个 DOM 元素的字体颜色，不在它本身上进行操作？
• 对 CSS 的新属性有了解过的吗？
1.文本阴影属性
text-shadow:水平距离 垂直距离 模糊半径(模糊程度) 阴影颜色
text-shadow: 10px 10px 5px #ccc;2.盒子阴影
box-shadow : 水平距离(必填，可为负值) 垂直距离(必填，可为负值) 模糊距离 阴影大小 阴影颜色 阴影位置(内侧或外侧)
box-shadow: 10px 10px 8px 10px #999 inset;3.文本换行
(1）word-wrap 此属性来设置是否允许浏览器在单词内断句，解决一个字符串太长浏览器找不到自然断点而文本溢出的问题。
属性值：nomal 只在允许的断字点换行(浏览器默认属性)
break-word 允许长单词或者长URL地址换行到下一行。
word-wrap: nomal | break-word;（2）
word-break: break-all | keep-all;属性值：break-all 断句方式非常粗暴，不是将长单词挪到下一行而是单词内直接断句。 keep-all 文本不会换行只能在半角空格或连字符处换行。
4. 文本溢出
text-overflow
设置或检索当当前行超过指定容器的边界时如何显示，属性有两个值选择：
- clip：修剪文本
- ellipsis：显示省略符号来代表被修剪的文本
5. text-decoration
CSS3里面开始支持对文字的更深层次的渲染，具体有三个属性可供设置：
- text-fill-color: 设置文字内部填充颜色
- text-stroke-color: 设置文字边界填充颜色
- text-stroke-width: 设置文字边界宽度
6. 颜色
css3新增了新的颜色表示方式rgba与hsla
- rgba分为两部分，rgb为颜色值，a为透明度
- hala分为四部分，h为色相，s为饱和度，l为亮度，a为透明度
7. 边框
css3新增了三个边框属性，分别是：
-
border-radius：创建圆角边框
-
box-shadow：为元素添加阴影
-
border-image：使用图片来绘制边框
8. 背景
新增了几个关于背景的属性，分别是background-clip、background-origin、background-size和background-break
background-clip
用于确定背景画区，有以下几种可能的属性：
- background-clip: border-box; 背景从border开始显示
- background-clip: padding-box; 背景从padding开始显示
- background-clip: content-box; 背景显content区域开始显示
- background-clip: no-clip; 默认属性，等同于border-box
通常情况，背景都是覆盖整个元素的，利用这个属性可以设定背景颜色或图片的覆盖范围
background-origin
当我们设置背景图片时，图片是会以左上角对齐，但是是以border的左上角对齐还是以padding的左上角或者content的左上角对齐? border-origin正是用来设置这个的
- background-origin: border-box; 从border开始计算background-position
- background-origin: padding-box; 从padding开始计算background-position
- background-origin: content-box; 从content开始计算background-position
默认情况是padding-box，即以padding的左上角为原点
background-size
background-size属性常用来调整背景图片的大小，主要用于设定图片本身。有以下可能的属性：
- background-size: contain; 缩小图片以适合元素（维持像素长宽比）
- background-size: cover; 扩展元素以填补元素（维持像素长宽比）
- background-size: 100px 100px; 缩小图片至指定的大小
- background-size: 50% 100%; 缩小图片至指定的大小，百分比是相对包 含元素的尺寸
background-break
元素可以被分成几个独立的盒子（如使内联元素span跨越多行），background-break 属性用来控制背景怎样在这些不同的盒子中显示
- background-break: continuous; 默认值。忽略盒之间的距离（也就是像元素没有分成多个盒子，依然是一个整体一样）
- background-break: bounding-box; 把盒之间的距离计算在内；
- background-break: each-box; 为每个盒子单独重绘背景
CSS3新增了哪些新特性？_css3新特性_distantimg的博客-CSDN博客
• line-height 和 height 的区别
参考回答：
line-height 一般是指布局里面一段文字上下行之间的高度，是针对字体来设置的，
height 一般是指容器的整体高度
• 设置一个元素的背景颜色，背景颜色会填充哪些区域？
• 知道属性选择器和伪类选择器的优先级吗
• inline-block、inline 和 block 的区别；为什么 img 是 inline 还可以 设置宽高
-
用 css 实现一个硬币旋转的效果
.box {
transform-style: preserve-3d; //旋转保持3d效果
animation: rotate 3s linear infinite; //匀速，永动
}
@keyframes rotate {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}• 了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档脱离文档流有哪些方法
如果改变了元素的宽高，元素的位置，就会导致浏览器不得不重新计算元素的几何属性，并重新构建渲染树，这个过程称为“重排”。
- 添加或者删除可见的 DOM 元素，
- 元素尺寸位置的改变
- 浏览器页面初始化，
- 浏览器窗口大小发生改变，重排一定导致重绘，重绘不一定导致重排，
- 不在布局信息改变时做 DOM 查询，
- 使用 csstext,className 一次性改变属性
- 使用 fragment
- 对于多次重排的元素，比如说动画。使用绝对定位脱离文档流，使其不影响其他元素
• CSS 画正方体，三角形
//三角形
.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;
}
• overflow 的原理
box-sizing: content-box/border-box;• box-sizing 的语法和基本用处
box-sizing属性用于定义盒子的宽度值和高度值是否包含元素的内边距和边框
box-sizing: content-box/border-box;●content-box：浏览器对盒模型的解释遵从W3C标准，当定义width和height时，它的参数值不包括border和padding。
●border-box：当定义width和height时，border和padding的参数值被包含在width和height之内。
• 两个嵌套的 div，position 都是 absolute，子 div 设置 top 属性，那么这个 top 是相对于父元素的哪个位置定位的。
• css 布局
• relative 定位规则
• 实现一个两列等高布局，讲讲思路
参考回答：
1、flex方法
父盒子 display：flex;
2、Grid方法
父盒子 display：grid；
3、Position：absolute；方法
父容器相对定位，子元素绝对定位，高度为100%时会自动适应父容器的高度。所以当右侧的高度变化撑起父容器不同的高度时，左侧也会保持一致。
.father {
position: relative;
.child {
position: absolute;
height: 100%;
}
}4、Table法
.father {
display: table;
.child {
display: table-cell;
vertical-align: top;
}
}5、Margin: -9999px + Pading: 9999px方法
纯css(内外边距相互抵消，再加上一个overflow:hidden即可)：
为了实现两列等高，可以给每列加上 padding-bottom:9999px;
margin-bottom:-9999px;同时父元素设置 overflow:hidden;
.father {
overflow: hidden;
.child {
margin-bottom: -9999px;
padding-bottom: 9999px;
}
}https://www.cnblogs.com/jyughynj/p/15758270.html