css知识点

爱赛跑的小雅
87 阅读13分钟

CSS匹配规则顺序是怎么样的？

从右向左匹配

页面导入样式时，使用link和@import有什么区别？

link属于HTML标签，而@import是css提供的；
页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载；
@import只在IE5以上才能识别，而link无兼容问题；
link方式的样式的权重高于@import的权重。

CSS中，box-sizing属性值有什么用？

**用来控制元素的盒子模型的解析模式，默认为content-box

  • context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽
  • border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽**

为什么会出现浮动？什么时候需要清除浮动？清除浮动的方式有哪些？

浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。

浮动带来的问题：

  • 父元素的高度无法被撑开，影响与父元素同级的元素
  • 与浮动元素同级的非浮动元素（内联元素）会跟随其后
  • 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方式：

  • 父级div定义height
  • 最后一个浮动元素后加空div标签 并添加样式clear:both。
  • 包含浮动元素的父标签添加样式overflow为hidden或auto。
  • 父级div定义zoom

元素竖向的百分比设定是相对于容器的高度吗？

当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。

两个同级的相邻元素之间，有看不见的空白间隔，是什么原因引起的？有什么解决办法？

解决方法：

  • 相邻元素代码代码全部写在一排
  • 浮动元素，float:left;
  • 在父级元素中用font-size:0;

什么是CSS Sprites？

将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background-repeat，background-position 的组合进行背景定位。 利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能。

优点

  • 减少网页的http请求，提高性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
  • 减少图片的字节：多张图片合并成1张图片的字节小于多张图片的字节总和；
  • 减少了命名困扰：只需对一张集合的图片命名，不需要对每一个小元素进行命名提高制作效率；

缺点

  • 图片合成比较麻烦；

CSS 中有哪几种定位方式？

  • Static 这个是元素的默认定位方式，元素出现在正常的文档流中，会占用页面空间。
  • Relative 相对定位方式，相对于其父级元素进行定位，准确地说是相对于其父级元素所剩余的未被占用的空间进行定位，且会占用该元素在文档中初始的页面空间，即在使用top，bottom，left，right进行移动位置之后依旧不会改变其所占用空间的位置。可以使用z-index进行在z轴方向上的移动。
  • Absolute

绝对定位方式，脱离文档流，不会占用页面空间。以最近的不是static定位的父级元素作为参考进行定位，如果其所有的父级元素都是static定位，那么此元素最终则是以当前窗口作为参考进行定位。

可以使用top，bottom，left，right进行位置移动，亦可使用z-index在z轴上面进行移动。

注意：当元素设置为绝对定位时，在没有指定top，bottom，left，right的值时，他们的值并不是0，这几个值是有默认值的，默认值就是该元素设置为绝对定位前所处的正常文档流中的位置。

  • Fixed 绝对定位方式，直接以浏览器窗口作为参考进行定位。其它特性同absolute定位。

当父元素使用了transform的时候，会以父元素定位。

position：absolute绝对定位，是相对于谁的定位？

absolute的元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的 非 static 定位祖先元素 的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。

css加载会造成阻塞吗？

  • css加载不会阻塞DOM树的解析
  • css加载会阻塞DOM树的渲染
  • css加载会阻塞后面js语句的执行

为了避免让用户看到长时间的白屏时间，我们应该尽可能的提高css加载速度，比如可以使用以下几种方法:

  • 使用CDN(因为CDN会根据你的网络状况，替你挑选最近的一个具有缓存内容的节点为你提供资源，因此可以减少加载时间)
  • 对css进行压缩
  • 合理的使用缓存
  • 减少http请求数，将多个css文件合并，或者是干脆直接写成内联样式(内联样式的一个缺点就是不能缓存)

html和css中的图片加载与渲染规则是什么样的？

浏览器渲染Web页面大约会经过六个过程：

  • 解析HTML，构成DOM树
  • 解析加载的样式，构建样式规则树
  • 加载JavaScript，执行JavaScript代码
  • DOM树和样式规则树进行匹配，构成渲染树
  • 计算元素位置进行页面布局
  • 绘制页面，最终在浏览器中呈现

怎么让Chrome支持小于12px 的文字？

常见的解决方案有：

  • zoom
  • -webkit-transform:scale()

Zoom

zoom 的字面意思是“变焦”，可以改变页面上元素的尺寸，属于真实尺寸

  • zoom:50%，表示缩小到原来的一半
  • zoom:0.5，表示缩小到原来的一半
<style type="text/css">
    .span1{
        font-size: 12px;
        display: inline-block;
        zoom: 0.8;
    }
    .span2{
        display: inline-block;
        font-size: 12px;
    }
</style>
<body>
    <span class="span1">测试10px</span>
    <span class="span2">测试12px</span>
</body>

image.png

-webkit-transform:scale()

针对chrome浏览器,加webkit前缀，用transform:scale()这个属性进行放缩

注意的是，使用scale属性只对可以定义宽高的元素生效，所以，下面代码中将span元素转为行内块元素

<style type="text/css">
    .span1{
        font-size: 12px;
        display: inline-block;
        -webkit-transform:scale(0.8);
    }
    .span2{
        display: inline-block;
        font-size: 12px;
    }
</style>
<body>
    <span class="span1">测试10px</span>
    <span class="span2">测试12px</span>
</body>

image.png

总结

Zoom 非标属性，有兼容问题，缩放会改变了元素占据的空间大小，触发重排
-webkit-transform:scale() 大部分现代浏览器支持，并且对英文、数字、中文也能够生效，缩放不会改变了元素占据的空间大小，页面布局不会发生变化

如何实现单行／多行文本溢出的省略样式？

如果一段文本的数量过长，受制于元素宽度的因素，有可能不能完全显示，为了提高用户的使用体验，这个时候就需要我们把溢出的文本显示成省略号

  • 单行文本溢出

二、实现方式

单行文本溢出省略

文本在一行内显示，超出部分以省略号的形式展现

overflow:hidden
white-space:nowrap; 设置文本不换行
text-overflow:
-   clip：当对象内文本溢出部分裁切掉
-   ellipsis：当对象内文本溢出时显示省略标记（...）

text-overflow只有在设置了overflow:hidden和white-space:nowrap才能够生效的

浏览器Web页面渲染流程？

image.png

简单的归纳就是浏览器渲染Web页面大约会经过六个过程：

  • 解析HTML，构成DOM树
  • 解析加载的样式，构建样式规则树
  • 加载JavaScript，执行JavaScript代码
  • DOM树和样式规则树进行匹配，构成渲染树
  • 计算元素位置进行页面布局
  • 绘制页面，最终在浏览器中呈现

js和css是如何影响DOM树构建的？

CSS不会阻塞DOM的解析，但是会影响JAVAScript的运行，javaSscript会阻止DOM树的解析，最终css（CSSOM）会影响DOM树的渲染，也可以说最终会影响渲染树的生成。

JavaScript脚本在html页面中

<html>
  <body>
    <div>1</div>
    <script> 
      let div1 = document.getElementsByTagName('div')[0]
      div1.innerText = 'time.geekbang'
    </script>
    <div>test</div>
  </body>
</html>

当解析到script脚本标签时，HTML解析器暂停工作，javascript引擎介入，并执行script标签中的这段脚本。脚本执行完成之后，HTML解析器回复解析过程，继续解析后续的内容，直至生成最终的DOM。

变成引入javaScript文件的模式

<html>
  <body>
    <div>1</div>
    <script type="text/javascript" src='foo.js'></script>
    <div>test</div>
  </body>
</html>

执行到JAVAScript标签时，暂停整个DOM的解析，这里需要重点关注下载环境，因为javascript文件的下载过程会阻塞DOM解析

优化机制：

  1. 谷歌浏览器做了很多优化，解析到相关文件之后，会开启一个预解析线程提前下载这些文件。
  2. 也能使用 CDN 来加速 JavaScript 文件的加载
  3. 或者压缩 JavaScript 文件的体积。
  4. 如果 JavaScript 文件中没有操作 DOM 相关代码，就可以将该 JavaScript 脚本设置为异步加载，通过 async 或 defer 来标记代码

使用方式如下所示：

<script async type="text/javascript" src='foo.js'></script>
<script defer type="text/javascript" src='foo.js'></script>

async和defer区别：

  • async：脚本并行加载，加载完成之后立即执行，执行时机不确定，仍有可能阻塞HTML解析，执行时机在load事件派发之前。
  • defer：脚本并行加载，等待HTML解析完成之后，按照加载顺序执行脚本，执行时机DOMContentLoaded事件派发之前。

html页面中有css样式

如果代码里引用了外部的 CSS 文件，那么在执行 JavaScript 之前，还需要等待外部的 CSS 文件下载完成，并解析生成 CSSOM 对象之后，才能执行 JavaScript 脚本。

总结：JavaScript 会阻塞 DOM 生成，而样式文件又会阻塞js的执行。

你知道哪些css模块化的方案？

目前主流的 css 模块化分为 css modules 和 css in js 两种方案。

css modules

CSS Modules 指的是我们像 import js 一样去引入我们的 css 代码，代码中的每一个类名都是引入对象的一个属性, 编译时会将 css 类名 加上唯一 hash。

css module 需要 webpack 配置 css-loader 或者 scss-loader , module 为 true

{
    loader: 'css-loader',
    options: {
        modules: true, // 开启模块化
        localIdentName: '[path][name]-[local]-[hash:base64:5]'
    }
}

IconFont 的原理是什么

IconFont 的使用原理来自于 css 的 @font-face 属性。 这个属性用来定义一个新的字体，基本用法如下：

@font-face {
  font-family: <YourFontName>;
  src: <url> [<format>],[<source> [<format>]], *;
  [font-weight: <weight>];
  [font-style: <style>];
}

Js 动画与 CSS 动画区别及相应实现

  • CSS3 的动画的优点

    • 在性能上会稍微好一些，浏览器会对 CSS3 的动画做一些优化
    • 代码相对简单

  • 缺点

    • 在动画控制上不够灵活
    • 兼容性不好

JavaScript 的动画正好弥补了这两个缺点，控制能力很强，可以单帧的控制、变换，同时写得好完全可以兼容 IE6，并且功能强大。对于一些复杂控制的动画，使用 javascript 会比较靠谱。而在实现一些小的交互动效的时候，就多考虑考虑 CSS 吧

如何检测浏览器所支持的最小字体大小？

可以使用 JS 设置 DOM 的字体为某一个值，然后再取出来，如果值设置成功，就说明支持

如何使用css来实现禁止移动端页面的左右划动手势？

CSS属性 touch-action 用于设置触摸屏用户如何操纵元素的区域(例如，浏览器内置的缩放功能)。

html{
 touch-action: none;
 touch-action: pan-y;
}

还可以直接指定对应元素的宽度和overflow：

html{
 width: 100vw;
 overflow-x: hidden;
}

行内元素和块级元素有什么区别

行内元素只占据它对应标签所包含的空间。 块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。

image.png 行内元素只占据内容撑起来的区域，而块级元素占据了一整行的区域

行内元素和块级元素的区别

1、默认情况下，行内元素不会以新的一行开始，而块级元素会新起一行。

image.png 行内元素在一行内排不下的时候才会换行，而且其宽度随着元素的内容而变化。块级元素的则宽度自动填满其父元素宽度。
2、块级元素可以设置 width, height属性，注意：块级元素即使设置了宽度，仍然是独占一行的。 而行内元素设置width, height无效。

image.png

3、块级元素可以设置margin 和 padding。 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果
但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（也就是水平方向有效，竖直方向无效）

image.png 4、块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素

想在<span>标签内包含<div>标签是不被允许的。而在<div>标签中包含<span>标签是经常看到的。 5、设置居中。

将块级元素当中的行内元素居中。

image.png

三、常见的行内元素和块级元素

1、常见的行内元素

<span> <a> <lable> <strong> <b> <small> <abbr> <button> <input> <textarea> <select> <code> <img> <br> <q> <i> <cite> <var> <kbd> <sub> <bdo> 2、常见的块级元素

<div> <p> <li> <h1> <h2> <h3> <h4> <h5> <h6> <form> <header> <hr> <ol> <address> <article> <aside> <audio> <canvas> <dd> <dl> <fieldset> <section> <ul> <video>

下面这段代码中，class为content的元素，实际高度是100px吗？

image.png 答案： 不是

首先，content元素的 height 设置为 “100%”，在父级的高度为固定值时，直接继承该高度，也就是600px。

但父级设置了 display:flex ，在高度固定的前提下，子元素的高度会按比例进行缩放，所以content元素最后的高度应该是 600 * (600/(200+600+200)) = 360px

如何从html元素继承box-sizing？

image.png

不会覆盖其他组件的 box-sizing 值，又无需为每一个元素重复设置 box-sizing:border-box;

脱离文档流有哪些方法？

  • float
  • absolute
  • fixed

假设下面样式都作用于同一个节点元素span，判断下面哪个样式会生效

body#god div.dad span.son {width: 200px;} body#god span#test {width: 250px;}

  • 先比较高权重位，即第一个样式的高权重为 #god = 100
  • 第二个样式的高权重为 #god + #text = 200
  • 100 < 200
  • 所以最终计算结果是取 width: 250px;
  • 若两个样式的高权重数量一样的话，则需要比较下一较高权重！

答案是 width: 250px;

下面代码中，p标签的背景色是什么？

image.png

答案是 red

什么是硬件加速

硬件加速就是将浏览器的渲染过程交给GPU处理，而不是使用自带的比较慢的渲染器。这样就可以使得 animation 与 transition 更加顺畅。

我们可以在浏览器中用css开启硬件加速，使GPU (图形处理器)发挥功能，从而提升性能。

现在大多数电脑的显卡都支持硬件加速。鉴于此，我们可以发挥GPU的力量，从而使我们的网站或应用表现的更为流畅。

Vue 中 CSS scoped 的原理

avatar
文章
阅读
粉丝