CSS基础

对于选择器的优先级：

标签选择器、伪元素选择器：1；
类选择器、伪类选择器、属性选择器：10；
id 选择器：100；
内联样式：1000；

注意：

！important声明的样式的优先级最高；
如果优先级相同，则最后出现的样式生效；
继承得到的样式的优先级最低；
通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ；
样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。

css中可继承与不可继承属性有哪些

**一、无继承性的属性**

display：规定元素应该生成的框的类型
文本属性：

vertical-align：垂直文本对齐
text-decoration：规定添加到文本的装饰
text-shadow：文本阴影效果
white-space：空白符的处理
unicode-bidi：设置文本的方向

盒子模型的属性：width、height、margin、border、padding
背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment
定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
生成内容属性：content、counter-reset、counter-increment
轮廓样式属性：outline-style、outline-width、outline-color、outline
页面样式属性：size、page-break-before、page-break-after
声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

二、有继承性的属性

字体系列属性

font-family：字体系列
font-weight：字体的粗细
font-size：字体的大小
font-style：字体的风格

文本系列属性

text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：单词之间的间距
letter-spacing：中文或者字母之间的间距
text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
color：文本颜色

元素可见性

visibility：控制元素显示隐藏

列表布局属性

list-style：列表风格，包括list-style-type、list-style-image等

光标属性

cursor：光标显示为何种形态

display的属性值及其作用

display的block、inline和inline-block的区别

（1）**block：**会独占一行，多个元素会另起一行，可以设置width、height、margin和padding属性；

（2）**inline：**元素不会独占一行，设置width、height属性无效。但可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin；

（3）**inline-block：**将对象设置为inline对象，但对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内。

对于行内元素和块级元素，其特点如下：

（1）行内元素

设置宽高无效；
可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin；
不会自动换行；

（2）块级元素

可以设置宽高；
设置margin和padding都有效；
可以自动换行；
多个块状，默认排列从上到下。

隐藏元素的方法有哪些

**display: none**：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也** 不会响应**绑定的监听事件。 + **visibility: hidden**：元素在页面中仍占据空间，但是** 不会响应**绑定的监听事件。 + **clip/clip-path** ：使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是** 不会响应**绑定的监听事件。 + **transform: scale(0,0)**：将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是** 不会响应**绑定的监听事件。

opacity: 0：将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
z-index: 负值：来使其他元素遮盖住该元素，以此来实现隐藏。

link和@import的区别

` ` 是HTML方式，` @import` 是CSS方式。` ` 标签在HTML文档的` ` 部分中使用，用于引入外部CSS文件；` @import` 是在CSS文件中使用，用于引入其他CSS文件。 2. ` ` 标签最大限度地支持并行下载，浏览器会同时下载多个外部CSS文件；而` @import` 引入的CSS文件会导致串行下载，浏览器会按照顺序逐个下载CSS文件，这可能导致页面加载速度变慢，出现FOUC（Flash of Unstyled Content）问题。 3. ` ` 标签可以通过` rel="alternate stylesheet"` 指定候选样式表，用户可以在浏览器中切换样式；而` @import` 不支持` rel` 属性，无法提供候选样式表功能。 4. 浏览器对` ` 标签的支持早于` @import` ，一些古老的浏览器可能不支持` @import` 方式引入CSS文件，而可以正确解析` ` 标签。 5. ` @import` 必须出现在样式规则之前，而且只能在CSS文件的顶部引用其他文件；而` ` 标签可以放置在文档的任何位置。 + link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。 6. 总体来说，` ` 标签在性能、兼容性和灵活性方面优于` @import` 。

display:none与visibility:hidden的区别

这两个属性都是让元素隐藏，不可见。**两者****区别如下：**

（1）在渲染树中

display:none会让元素完全从渲染树中消失，渲染时不会占据任何空间；，但在dom树中还有
visibility:hidden不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见。

（2）是否是****继承属性

display:none是非继承属性，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示；
visibility:hidden是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility:visible可以让子孙节点显示；

（3）修改常规文档流中元素的 display 通常会造成文档的重排，但是修改visibility属性只会造成本元素的重绘；

（4）如果使用读屏器，设置为display:none的内容不会被读取，设置为visibility:hidden的内容会被读取。

伪元素和伪类的区别和作用

伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成，它们只在外部显示可见，但不会在文档的源代码中找到它们

伪类：将特殊的效果添加到特定的选择器上，它是已有元素上添加类别，不会产生新的元素

对盒模型的理解

CSS3中的盒模型有以下两种：标准盒子模型、IE盒子模型

盒模型都是由四个部分组成的，分别是margin、border、padding和content。

标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同：

标准盒模型的width和height属性的范围只包含了content，
IE盒模型的width和height属性的范围包含了border、padding和content。

可以通过修改元素的box-sizing属性来改变元素的盒模型：

box-sizing: content-box表示标准盒模型（默认值）
box-sizing: border-box表示IE盒模型（怪异盒模型）

为什么有时候用translate改变位置而不是定位

t ranslate 是 transform 属性的⼀个值。改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。而改变绝对定位会触发重新布局，进而触发重绘和复合。transform使浏览器为元素创建⼀个 GPU 图层，但改变绝对定位会使用到 CPU。因此translate()更高效，可以缩短平滑动画的绘制时间。⽽translate改变位置时，元素依然会占据其原始空间，绝对定位就不会发⽣这种情况。

复合是将页面中不同的图层（Layers）按层级叠放，并最终合并成一个完整帧的过程。每个图层在渲染树中是独立的渲染单元，

为什么修改 **transform**/ **opacity**只触发复合？

不影响布局（Reflow），因为不影响元素的集合属性如宽高位置

不影响绘制：元素的视觉属性（如颜色、边框）未改变

CSS3有哪些新特性

新增各种CSS选择器（: not(.input)：所有 class 不是"input"的节点） + 圆角（border-radius:8px） + 多列布局（multi-column layout） + 阴影和反射（Shadoweflect） + 文字特效（text-shadow） + 文字渲染（Text-decoration） + 线性渐变（gradient） + 旋转（transform） + 增加了旋转,缩放,定位,倾斜,动画,多背景

常见的图片格式以及应用场景

（1）**BMP**，是无损的、既支持索引色也支持直接色的点阵图。这种图片格式几乎没有对数据进行压缩，所以BMP格式的图片通常是较大的文件。

（2）GIF是无损的、采用索引色的点阵图。采用LZW压缩算法进行编码。文件小，是GIF格式的优点，同时，GIF格式还具有支持动画以及透明的优点。但是GIF格式仅支持8bit的索引色，所以GIF格式适用于对色彩要求不高同时需要文件体积较小的场景。

（3）JPEG是有损的、采用直接色的点阵图。JPEG的图片的优点是采用了直接色，得益于更丰富的色彩，JPEG非常适合用来存储照片，与GIF相比，JPEG不适合用来存储企业Logo、线框类的图。因为有损压缩会导致图片模糊，而直接色的选用，又会导致图片文件较GIF更大。

（4）PNG-8是无损的、使用索引色的点阵图。PNG是一种比较新的图片格式，PNG-8是非常好的GIF格式替代者，在可能的情况下，应该尽可能的使用PNG-8而不是GIF，因为在相同的图片效果下，PNG-8具有更小的文件体积。除此之外，PNG-8还支持透明度的调节，而GIF并不支持。除非需要动画的支持，否则没有理由使用GIF而不是PNG-8。

（5）PNG-24是无损的、使用直接色的点阵图。PNG-24的优点在于它压缩了图片的数据，使得同样效果的图片，PNG-24格式的文件大小要比BMP小得多。当然，PNG24的图片还是要比JPEG、GIF、PNG-8大得多。

（6）SVG是无损的矢量图。SVG是矢量图意味着SVG图片由直线和曲线以及绘制它们的方法组成。当放大SVG图片时，看到的还是线和曲线，而不会出现像素点。SVG图片在放大时，不会失真，所以它适合用来绘制Logo、Icon等。

（7）WebP是谷歌开发的一种新图片格式，WebP是同时支持有损和无损压缩的、使用直接色的点阵图。从名字就可以看出来它是为Web而生的，什么叫为Web而生呢？就是说相同质量的图片，WebP具有更小的文件体积。现在网站上充满了大量的图片，如果能够降低每一个图片的文件大小，那么将大大减少浏览器和服务器之间的数据传输量，进而降低访问延迟，提升访问体验。目前只有Chrome浏览器和Opera浏览器支持WebP格式，兼容性不太好。

在无损压缩的情况下，相同质量的WebP图片，文件大小要比PNG小26%；
在有损压缩的情况下，具有相同图片精度的WebP图片，文件大小要比JPEG小25%~34%；
WebP图片格式支持图片透明度，一个无损压缩的WebP图片，如果要支持透明度只需要22%的格外文件大小。

对CSSSprites的理解

CSSSprites(精灵图)，将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的background-image，background-repeat，background-position属性的组合进行背景定位

优点：

利用CSS Sprites 可以很好的减少页面的http请求，从而大大的提高了页面的性能，这是CSS Sprites最大的优点

CSS Sprites能减少图片的字节，把三张图片合并成一张图片的字节总是小于这3张图片的字节总和

缺点：

在图片合并时，要把多张图片有序的，合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景，在宽屏及高分辨率下的自适应页面，如果背景不够宽，很容易出现背景断裂；

CSS Sprites在开发的时候相对来说有点麻烦，要借助ps或其他工具对每个背景单元测量其准确的位置

维护方面：CSS Sprites在维护的时候比较麻烦，页面背景有少许改动时，就要改这张合并的图片，无需改的地方尽量不要动，这样避免改动更多的CSS 如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动CSS。

CSS预处理器/后处理器是什么，为什么要使用它们

预处理器：less sass stylus 用来预编译sass或者less 增加了css代码的复用性。层级，mixin,变量循环，函数等对编写以及开发UI组件都极为方便

后处理器：如：postCss，通常是在完成的样式表中根据css规范处理css 让其更加有效，目前最常做的是给css属性添加浏览器私有前缀，实现跨浏览器兼容性的问题

对line-height的理解

line-height指一行文本的高度，包含了字间距，实际上是下一行基线到上一行基线的距离，

如果一个标签没有定义height 那么最终表现高度由line-height决定

一个容器没有设置高度，那么撑开容器高度的是line-height 而不是容器内的文本内容

Sass Less 是什么为什么要使用它们

都是css预处理器，是css上的一种抽象层他们是一种特殊的语法/语言编译成 CSS。例如 Less 是一种动态样式语言，将 CSS 赋予了动态语言的特性，如变量，继承，运算，函数，LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可以在服务端运行 (借助 Node.js)

为什么要使用它们？

结构清晰，便于扩展。可以方便地屏蔽浏览器私有语法差异。封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
可以轻松实现多重继承。完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

stylus/sass/less区别

Sass, Less, 和 Stylus 是三种常用的 CSS 预处理器，它们在功能和语法上有一些区别：

语法差异 ：Sass 使用类似 Ruby 的缩进语法，而 Less 和 Stylus 使用类似 CSS 的语法。Sass 使用严格的缩进表示层次与嵌套关系，而 Less 和 Stylus 可以使用大括号 {} 表示层次和嵌套关系。
变量：Sass、Less 和 Stylus 都支持变量，用于存储和复用值。在 Sass 和 Less 中，变量以 $ 符号开头，而在 Stylus 中，变量以 $ 或者 @ 符号开头。
混合：混合（Mixins）允许将一组 CSS 规则集合存储为一个可重用的样式块。Sass 和 Less 使用 @mixin 定义混合，而 Stylus 使用 mixin 关键字定义混合。
嵌套：Sass、Less 和 Stylus 都支持嵌套规则，可以在父级规则内部定义子级规则。Sass 使用缩进表示嵌套关系，Less 和 Stylus 使用大括号 {} 表示嵌套关系。
继承：继承（Inheritance）允许一个选择器继承另一个选择器的样式。在 Sass 中，使用 @extend 实现继承，而在 Less 和 Stylus 中，使用 & 符号实现继承。
颜色混合 ：颜色混合（Color blending）允许将两个颜色混合生成一个新的颜色。Sass 使用 mix() 函数实现颜色混合，Less 使用 blend() 函数，而 Stylus 使用 mix() 函数。
环境和工具支持 ：Sass 是基于 Ruby 的，需要安装 Ruby 环境来编译，而 Less 和 Stylus 可以通过 Node.js 的 NPM 安装相应的库来编译。

总的来说，Sass、Less 和 Stylus 在功能上大致相似，它们都提供了类似的特性，如变量、混合、嵌套、继承等，但在语法和一些细节上有一些差异。选择哪种预处理器取决于个人偏好、团队需求和项目要求

对媒体查询的理解

媒体查询由⼀个可选的媒体类型和零个或多个使⽤媒体功能的限制了样式表范围的表达式组成，例如宽度、高度和颜色。媒体查询，添加自CSS3，允许内容的呈现针对⼀个特定范围的输出设备而进行裁剪，而不必改变内容本身，适合web网页应对不同型号的设备而做出对应的响应适配。

媒体查询包含⼀个可选的媒体类型和满⾜CSS3规范的条件下，包含零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示⽂档所使⽤的设备类型，并且所有的表达式的值都是true，那么该媒体查询的结果为true。那么媒体查询内的样式将会⽣效。

简单来说，使用 @media 查询，可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是需要设置设计响应式的页面，@media 是非常有用的。当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

单行，多行文本溢出隐藏

单行

css 复制代码

overflow:hidden; //溢出隐藏
text-overflow:ellipsis;//溢出用省略号显示
white-space:nowrap;//文本不换行

多行