css基础

Ah_牛仔
378 阅读17分钟

1、CSS选择器及其优先级

  • CSS选择器包括行内样式、id选择器、class选择器、标签选择器
  • 优先级: !important > 行内样式 > id选择器 > class选择器 > 标签选择器

2、CSS中可继承与不可继承属性有哪些

参考链接

3、display的属性值及其作用

参考链接

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

  • 默认值 inline 此元素会被显示为内联元素，元素前后没有换行符。设置width,height,margin-top,margin- bottom,padding-top,padding-bottom无效； 内联元素不能设置宽高，但这也不是绝对的。 html标签中有部分标签，例如：<span/>、<a>、<em>、<img>、<input>、<label>等等都是内联元素，默认display属性均为inline，但是<img>、<input>标签的元素却可以设置宽高！因为它有内在尺寸，所以具有width和height，可以设定。
  • block 此元素将显示为块级元素，此元素前后会带有换行符。 块状元素可以设置宽高。 html标签中有部分标签，例如：<div>、<p>、<ol>等等，其display属性默认为block
  • inline-block 行内块元素，结合了inline、block的特点，此元素前后没有换行符，可以设置宽高。

5、隐藏元素的方法有哪些

  • display: none;
  • opacity: 0;
  • 宽高设为0
  • 通过定位移到可是区域外

6、link和@import的区别

  • 区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
  • 区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
  • 区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
  • 区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。

7、transition和animation的区别

  • transition： 强调过渡；需要触发一个事件，比如鼠标移上去、焦点、点击。(被动调用)
  • animation：多个关键帧，实现自由动画；不需要触发任何事件也可随时间变化达到一种动画效果；与transition不同是animation可以通过@keyframe控制当前帧属性，更灵活。（主动调用）

8、display:none与visibility:hidden的区别

  • display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留
  • visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别
  • visibility: hidden不会影响计数器的计数，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样
  • CSS3的transition支持visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验

9、伪元素和伪类的区别和作用？

参考链接

伪类和伪元素的根本区别在于：它们是否创造了新的元素

  • 伪元素：不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。
  • 伪类：存在DOM文档中，逻辑上存在但在文档树中却无须标识的“幽灵”分类。 伪元素选择符 image.png 伪类选择符 image.png

10、对requestAnimationframe的理解

要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。
通俗一点讲就是: 假设一个web页面为60fps（fps意为frame per second）,这意为着这个页面每秒钟能重新渲染60次，60帧/1000ms换算过来约为16.6ms/帧。

setTimeout(()=>{...},16.6)

11、对盒模型的理解

  • 盒子模型：content（实际内容）、border（边框）、padding（内边距）和margin（外边距）
  • 盒子模型有两种：IE盒子模型（IE6以下版本浏览器)和标准W3C盒子模型
  • 标准盒模型的宽高是concent的宽高，而IE盒模型的宽高是concent + padding + border。
  • 标准盒模型: box-sizing: content-box, IE盒模型: box-sizing: border-box

12、为什么有时候⽤translate来改变位置⽽不是定位？

translate（）是transfrom的一个值。改变transfrom或者opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。

13、li 与 li 之间有看不见的空白间隔是什么原因引起的？如何解决？

浏览器的默认行为是把 inline 元素间的空白字符（空格换行 tab）渲染成一个空格，也就是我们上面的代码<li>换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度。
解决方案：

  • <li>1</li><li>2</li><li>3</li> 写成一排
  • 将<ul>内的字符尺寸直接设为 0
ul {
  font-size: 0px;
}
  • 将<ul>内的字符间隔消除
ul {
  letter-spacing: -5px;
}
li {
  letter-spacing: normal;
}

14、CSS3中有哪些新特性

参考链接

15、替换元素的概念及计算规则

在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。通俗点讲，替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。(参考链接)

例如img标签，嵌入的文档（iframe之类）或者applet，这些叫做替换元素。比如img元素通过src属性的值来读取图片信息并显示出来，而如果查看(x)html代码，却看不到图片的实际内容，而且img元素的内容通常会被src属性指定的图像替换掉；例如input元素的type属性决定是显示输入框，还是单选按钮等。(x)html中的img , input , textarea , select , object都是替换元素。这些元素没有实际的内容，即是个空元素

16、常见的图片格式及使用场景

参考链接

17、对 CSSSprites 的理解

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

优点：

  • 利用CSS Sprites能很好地减少网页的http请求，从而大大提高了页面的性能，这是CSS Sprites最大的优点；
  • CSS Sprites能减少图片的字节，把3张图片合并成1张图片的字节总是小于这3张图片的字节总和。 缺点：
  • 在图片合并时，要把多张图片有序的、合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景。在宽屏及高分辨率下的自适应页面，如果背景不够宽，很容易出现背景断裂；
  • CSSSprites在开发的时候相对来说有点麻烦，需要借助photoshop或其他工具来对每个背景单元测量其准确的位置。
  • 维护方面：CSS Sprites在维护的时候比较麻烦，页面背景有少许改动时，就要改这张合并的图片，无需改的地方尽量不要动，这样避免改动更多的CSS，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动CSS。

18、什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要用到@3x, @2x这种图片？

以 iPhone XS 为例，当写 CSS 代码时，针对于单位 px，其宽度为 414px * 896px，也就是说当赋予一个 DIV元素宽度为 414px，这个 DIV 就会填满手机的宽度；

而如果有一把尺子来实际测量这部手机的物理像素，实际为 1242*2688 物理像素；经过计算可知，1242/414=3，也就是说，在单边上，一个逻辑像素=3个物理像素，就说这个屏幕的像素密度为 3，也就是常说的 3 倍屏。

对于图片来说，为了保证其不失真，1 个图片像素至少要对应一个物理像素，假如原始图片是 500 * 300 像素，那么在 3 倍屏上就要放一个 1500 * 900 像素的图片才能保证 1 个物理像素至少对应一个图片像素，才能不失真。

当然，也可以针对所有屏幕，都只提供最高清图片。虽然低密度屏幕用不到那么多图片像素，而且会因为下载多余的像素造成带宽浪费和下载延迟，但从结果上说能保证图片在所有屏幕上都不会失真。

还可以使用 CSS 媒体查询来判断不同的像素密度，从而选择不同的图片:

my-image { background: (low.png); }
@media only screen and (min-device-pixel-ratio: 1.5) {
  #my-image { background: (high.png); }
}

19、margin 和 padding 的使用场景

使用margin值的情况:

  • 1.需要在border外侧添加空白时;
  • 2.空白处不需要背景色时;
  • 3.上下相连得两个盒子之间的空白需要相互抵消时，如15px+20px得margin，将得到20px的空白。（margin折叠）
  • 4.需要使用负值对页面布局时（margin值可以取负值，padding不行）。 使用padding时的情况:
  • 1.需要在border内侧添加空白时。
  • 2.空白处需要背景（色）时。
  • 3.上下相连的两个盒子之间的空白，希望等于两者之和时。如15px＋10px将得到25px的空白。 最后，需注意margin是用来隔开元素与元素的间距;padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不干扰;padding用于元素与内容之间的间隔，让内容与元素之间有一段距离。 在怪异盒模型中，一个块的总宽度受margin影响但不受padding影响。

20、对line-height 的理解及其赋值方式

理解： 顾名思意指一行文字的高度，具体来说是指两行文字间基线之间的距离，如下图中两条红线之间的距离就是行高 line-height。vertical-align 中有 top、middle、baseline、bottom 与之是有关联的。
赋值方式：

  • 带单位：px不用计算，em则会使元素以其父元素font-size值为参考来计算自己的行高\
  • 纯数字：把比例传递给后代，例如父级行高为1.5，子元素字体为18px，则子元素行高为1.5*18=27px\
  • 百分比：将计算后的值传递给后代

21、CSS 优化和提高性能的方法有哪些？

加载性能：

（1）css压缩：将写好的css进行打包压缩，可以减小文件体积。

（2）css单一样式：当需要下边距和左边距的时候，很多时候会选择使用 margin:top 0 bottom 0；但margin-bottom:bottom;margin-left:left;执行效率会更高。

（3）减少使用@import，建议使用link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。

选择器性能：

（1）关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。CSS选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等；

（2）如果规则拥有ID选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）。

（3）避免使用通配规则，如*{}计算次数惊人，只对需要用到的元素进行选择。

（4）尽量少的去对标签进行选择，而是用class。

（5）尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素。

（6）了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则。

渲染性能：

（1）慎重使用高性能属性：浮动、定位。

（2）尽量减少页面重排、重绘。

（3）去除空规则：｛｝。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。

（4）属性值为0时，不加单位。

（5）属性值为浮动小数0.**，可以省略小数点之前的0。

（6）标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后。

（7）不使用@import前缀，它会影响css的加载速度。

（8）选择器优化嵌套，尽量避免层级过深。

（9）css雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用。

（10）正确使用display的属性，由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。

（11）不滥用web字体。对于中文网站来说WebFonts可能很陌生，国外却很流行。web fonts通常体积庞大，而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。

可维护性、健壮性：

（1）将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用，提高css的可维护性。

（2）样式与内容分离：将css代码定义到外部css中。

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

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

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

css预处理器为``css增加一些编程特性，无需考虑浏览器的兼容问题，可以在CSS中使用变量，简单的逻辑程序，函数等在编程语言中的一些基本的性能，可以让css更加的简洁，增加适应性以及可读性，可维护性等。

其它css预处理器语言：Sass（Scss）, Less, Stylus, Turbine, Swithch css, CSS Cacheer, DT Css。

使用原因：

  • 结构清晰， 便于扩展
  • 可以很方便的屏蔽浏览器私有语法的差异
  • 可以轻松实现多重继承
  • 完美的兼容了CSS代码，可以应用到老项目中

23、::before 和 :after 的双冒号和单冒号有什么区别？

  • 冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
  • ::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。

注意： :before和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before、::after。

24、display:inline-block 什么时候会显示间隙？

  • 有空格时会有间隙，可以删除空格解决；
  • margin正值时，可以让margin使用负值解决；
  • 使用font-size时，可通过设置font-size:0、letter-spacing、word-spacing解决；

25、单行、多行文本溢出隐藏

  • 单行文本溢出
overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;      // 溢出用省略号显示
white-space: nowrap;         // 规定段落中的文本不进行换行
  • 多行文本溢出
overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;     // 溢出用省略号显示
display:-webkit-box;         // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3;        // 显示的行数
// 由于上面的三个属性都是 CSS3 的属性，没有浏览器可以兼容，所以要在前面加一个`-webkit-` 来兼容一部分浏览器。

26、Sass、Less 是什么？为什么要使用他们？

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

为什么要使用它们？

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

27、对媒体查询的理解？

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

28、对 CSS 工程化的理解

CSS 工程化是为了解决以下问题：

  • 宏观设计：CSS 代码如何组织、如何拆分、模块结构怎样设计？

  • 编码优化：怎样写出更好的 CSS？

  • 构建：如何处理我的 CSS，才能让它的打包结果最优？

  • 可维护性：代码写完了，如何最小化它后续的变更成本？如何确保任何一个同事都能轻松接手？ 以下三个方向都是时下比较流行的、普适性非常好的 CSS 工程化实践：

  • 预处理器：Less、 Sass 等；

  • 重要的工程化插件： PostCss；

  • Webpack loader 等 。

29、如何判断元素是否到达可视区域

以图片显示为例：

  • window.innerHeight 是浏览器可视区的高度；
  • document.body.scrollTop || document.documentElement.scrollTop 是浏览器滚动的过的距离；
  • imgs.offsetTop 是元素顶部距离文档顶部的高度（包括滚动条的距离）；
  • 内容达到显示区域的：img.offsetTop < window.innerHeight + document.body.scrollTop;

30、z-index属性在什么情况下会失效

通常 z-index 的使用是在有两个重叠的标签，在一定的情况下控制其中一个在另一个的上方或者下方出现。z-index值越大就越是在上层。z-index元素的position属性需要是relative，absolute或是fixed。

z-index属性在下列情况下会失效：

  • 父元素position为relative时，子元素的z-index失效。解决：父元素position改为absolute或static；
  • 元素没有设置position属性为非static属性。解决：设置该元素的position属性为relative，absolute或是fixed中的一种；
  • 元素在设置z-index的同时还设置了float浮动。解决：float去除，改为display：inline-block；

31、CSS3中的transform有哪些属性

transform的属性包括：rotate，skew，scale，translate ，分别还有x、y之分，比如：rotatex() 和 rotatey()

avatar
文章
阅读
粉丝