CSS小知识点

167 阅读2分钟

1. CSS 是谁发明的

CSS 由哈坤·利于1994年提出

2. 层叠指什么

  • 样式层叠

可以多次对同一选择器进行样式声明

  • 选择器层叠

可以用不同的选择器对同一元素进行样式声明

  • 文件层叠

可以用多个文件进行层叠

3. 对于CSS版本有什么需要注意点

  • CSS2.1 编写于2004年~2011年,是目前使用最广泛的版本
  • CSS3 与1999年开始起草,此后 CSS 分模块进行更新,各个模块更新进度和迭代版本数不一,因此也就不存在完成的 CSS4 等版本了

4. 如何快速了解浏览器支持 CSS 哪些特性

caniuse.com进行查询

5. CSS 的语法

  • 样式语法
选择器 {
  属性名: 属性值;
  /*注释*/
  }
  • at语法
@charset "UTF-8";
@import url(2.css);
@media (min-width: 100px) and (max-width: 200px) {
  语法一
}

6. 什么是文档流

文档流的英文名称叫做 Normal Flow,应该翻译成常规流或者普通流。HTML 5 中已经抛弃了「内联元素」「块级元素」「内联块」的概念,所有元素都可以通过 CSS 变成内联的。

6.1 流动方向

  • inline 元素从左到右,到达最右边才会换行

  • block 元素从上到下,每一个都另起一行

  • inline-block 也是从左到右

6.2 宽度

  • inline 宽度为内部 inline 元素的和,不能用 width 指定

  • block 默认自动计算宽度,可用 width 指定

  • inline-block 结合前两者特点,可用 width

6.3 高度

  • inline 高度由 line-height 间接确定,跟 height 无关

  • block 高度由内部文档流元素决定,可以设 height

  • inline-block 跟 block 类似,可以设置 height

6.4 overflow 溢出

当内容的宽度或高度大于容器的,会溢出,可用 overflow 来设置是否显示滚动条,以下为 overflow 不同取值的效果:

  • auto 是灵活设置

  • scroll 是永远显示

  • hidden 是直接隐藏溢出部分

  • visible 是直接显示溢出部分

6.5 哪些元素可以脱离文档流

  • float

  • position: absolute / fixed

7. 是盒模型

7.1 什么是盒模型

CSS 盒模型有两种,一种是 content-box,一种是 border-box。 content-box 的宽度 width 表示内容区的宽度,不包含 padding 和 border;

border-box 的宽度 width 表示内容区 + padding + border 的总和。 一般优先使用后者。

7.2 margin 合并

  • 哪些情况会合并

父子 margin 合并;兄弟 margin 合并

  • 如何阻止合并
* 父子合并用 padding / border 挡住

* 父子合并用 overflow: hidden 挡住

* 父子合并用  display: flex

* 兄弟合并可以用 inline-block 消除