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 消除