css基础面试题

css新特性

• 1.Flexbox布局
• 2.grid布局 自定义属性：CSS变量是CSS中非常有用的新特性之一，它可以定义全局或局部的变量，并且可以在样式表中的任何位置调用这些变量，从而简化代码并提高可维护性
• 3文字效果- 文字阴影（Text shadow） 文字渐变（Text gradient） 字形，字间距，字间间距（Letter-spacing, Word-spacing） 文字装饰（Text decoration） 单词断行（Word-break）
• 4.盒子效果 CSS3的盒子效果更为强大，新增了许多属性，比如： 圆角（Border-radius） 阴影（box-shadow） 颜色和透明度（RGBA, HSLA） 多列布局（Multi-columns layout） 边框图片（Border image） 变形（Transform） 过渡（Transition） 动画（Animation）
• 5.媒体查询

px em rem vw vh 百分比 的区别

• px 绝对单位，像素px是相对于显示器屏幕分辨率而言。
• em 相对单位 em大小相对当前元素的字体大小。当前元素没有设置大小，则相对浏览器的默认字体大小，em会继承父元素的字体大小
• rem 相对单位 使用rem为元素字体大小时，相对的是html根元素大小
• vw 相对单位 1vw相对于浏览器窗口宽度百分之一
• vh 相对单位 1vh相对于浏览器窗口高度百分之一
• 百分比 相对单位 相对于父元素宽度或者高度的百分比

盒模型？

标准盒模型

box-sizing = context-box 盒子的最终宽度和高度 = 设置的宽度与高度 + 边框 + 内边距 + 外边距，会把盒子撑大

怪异盒模型

box-sizing = border-box 盒子的最终宽度和高度 = 设置宽度与高度，(边框，内边距，外边距)会相内减少盒子内容空间

css定位？

• position:static 静态定位 一般的元素不加任何定位属性都属于静态定位，在页面的最底层属于标准流，一般用来清除定位
• position:relative 相对定位 相对定位的盒子仍在标准流中，不影响其他元素布局。
• position:absolute 绝对定位 绝对定位的元素脱离了文档流，绝对定位元素不占据空间。
• position:fixed 相对于浏览器窗口定位，并且不会随着滚动条进行滚动。
• position:sticky 可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

盒子水平垂直居中

1. margin:auto方法

当元素有固定宽高时，给元素设置margin:auto;水平居中，在利用子绝父相，父元素设置position:relative;子元素设置position:adsoliute;top:0pk;left:0px;right:0px;bottom:0px;

2. 定位方法

给元素设置position:adsoliute;top:50%;left:50%;margin-right:-盒子宽度一半；margin-top:-盒子高度一半；

3.display:flex

父元素设置display:flex;justify-content:center;align-items:center;

4. 栅格布局

父元素设置dispay:grid;align-items:center;justify-content:center;

5. 栅格布局

父元素设置dispay:grid;子元素``` align-self: center; justify-content: center; margin: auto;

文字水平垂直居中盒子不行 使用文本与行高

text-align:center;line-height:高度；

清除浮动的方法？

1. 父元素设置高度

2.在结尾处加空标签clear;both

3.父元素定义伪类:after和zoom

4.父元素设置overflow：hidden;

5.双伪类元素

css的权重顺序？

!important > 内联式 > id选择器 > 类 | 伪类 | 属性选择器 | 伪对象 > 标签 > 继承 > 通配符

css常见的伪类标签有那些？

:hover伪类用于指定当鼠标悬停在元素上时的样式，常用于按钮、超链接等元素的样式设置

:active伪类用于指定当元素被激活时的样式，比如鼠标点击按钮、表单元素提交等事件。

:focus伪类用于指定当元素获得焦点时的样式，比如文本框点击输入时，或者通过tab键转移焦点时。

:nth-child伪类用于匹配某个元素的父元素的第n个子元素，n从1开始。同时，:nth-child可以和odd或者even关键字组合使用，表示奇数或偶数。 如 ul li:nth-child(3n) { background: pink; } ul li:nth-child(odd) { color: blue; }

css引入的方式有那些，link和@import的区别是什么

区别

1.link 属于xhtnl标签，而@impport完全是css提供的一种方式

2.当页面被加载时，link引用的css会同时被加载，@import引用的css会等页面加载完毕在加载。所以在网络不好的情况会闪烁。

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

css动画怎么使用的

动画 css动画主要是通过animation属性实现，使用动画时先声明动画@keyframes(声明名称){}然后在需要使用动画效果的位置使用 例:animation:(声明名称) 20S linear infinite alternate 进行调用

旋转 transform:rotate(45deg);

平移 transform: translate(200px, 200px);

css回流和重绘

重绘（repaint）：

• 当节点样式发生改变但是不影响布局时，会产生重绘。只会动态更新样式（比如颜色、透明度、背景）。
• 重绘相对于回流性能影响较小

回流（reflow）：

• 当节点样式发生改变影响到页面布局时，会产生回流。相当于刷新页面（比如宽高、边框大小、内外边距等）。
• js对 DOM 元素的增、删、改也会产生回流。改变 DOM 容易导致整体布局发生变化。

重绘不一定引发回流，回流一定会引发重绘