1.CSS

外部样式

• 提高页面响应速度
• 解决多页面样式重复
• 代码分离，有利于阅读

三原色 红绿蓝

• #f00
• #0f0
• #00f

字体大小

• px 绝对单位
• em 相对单位（相对与父元素 为父元素的倍数）
• 如果父元素字体大小没有，则使用基准像素（浏览器）
• sans-serif 非衬线字体
• text-indent 缩进 em（表示一个字符）

line-height

• 数字 表示为当前文字的多少倍（多行元素适用） 1.5 为当前文字的1.5倍

元素选择器

• + 兄弟元素 例： div+li
• ~ 后面全部元素 例： div~li

2.层叠

• 声明冲突：同一个样式，多次应用到同一个元素。
• 层叠：解决声明冲突的过程，浏览器自动处理。（或者成为权重计算）
• 比较重要性 （由高到低）
  • 作者样式表中的 !important 样式
  • 作者样式表中的普通样式
  • 浏览器默认样式
• 比较特殊性（看选择器）
  • 总体规则：选择器选择的范围越窄，越特殊。 （例如 id：智能选中一个元素）
• 具体规则：通过选择器计算出四位数
• 1、千位 内联样式，存在记为 1，否为 0
• 2、百位 所有 ID 选择器的数量
• 3、十位 类选择器、属性选择器、伪类选择器
• 4、个位 所有元素选择器、伪元素选择器
• 比较源次序
  • 代码书写靠后的胜出
• normalize.css、reset.css、meyer.css
• 爱恨法则 live、visited、hover、active

3.继承

• 通常跟文字相关的属性都能继承

4.属性值的计算过程

（指元素的所有属性都有值）

• 页面树形结构渲染
• 渲染每个元素的条件：该元素的所有 css 属性必须有质
• 过程
  • 确定声明值：参考样式标中没有冲突的声明，作为 css 属性值
  • 层叠冲突：对样式表中有冲突的声明使用层叠规则，确定 css 属性值
  • 使用继承：对仍然没有值的属性，若可以继承，责继承父元素的值 （inherit）
  • 使用默认值：对仍然没有值的属性，使用默认值
• css 特殊值
  • inherit: 继承值
  • initial: 初始值、默认值

5.盒模型

盒子：每个元素在页面中都会生成一个矩形区域

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

• 标准盒子模型: width = content-width
• IE 盒子模型: width = content-width + border + padding

• 盒子类型

  • 1、行盒 inline
  • 2、块盒 block

• 盒子组成部分

  • 1、内容 content 内容盒(content-box）width、height 盒子的内容宽高
  • 2、填充（内边距） padding 填充盒(padding-box）
  • 3、边框 border 边框盒（border-box）
  • 4、外边距 margin

6.盒模型应用

改变背景覆盖范围

• background-clip: content-box; padding-box; border-box;

溢出隐藏

• 淘宝标题

7.行盒的盒模型

行盒 `span` `i` `img` `video` `audio`

• 调整高度 应使用 line-height

• padding 内边距、边框、外边距

  • 水平方向有效，垂直方向只会填充背景，不会实际占据空间

行块盒 `span` `i` `img` `video` `audio`

• 调整高度 应使用 line-height

• padding 内边距、边框、外边距

  • 水平方向有效，垂直方向只会填充背景，不会实际占据空间
• 空白折叠 元素之间的回车等 会用一个空格代替
• object-fit: 元素适应容器的范围

8.视觉格式化模型

页面中的多个盒子排列规则 大体将页面中的盒子排列分为3中方式：`常规流` `浮动` `定位`

• 常规流

  • 所有元素，默认都属于常规流
  • 包含块，决定了盒子的排列区域 （绝大部分 元素的包含）
  • 块盒在其包含块中居中，可以定宽，然后左右margin 设置为auto
  • 设置元素超出父元素，可使用 margin 负值
  • padding、margin、宽 百分比相当于包含块宽度的百分比
  • 外边距合并 上下相邻的元素取最大值 父子元素相邻的 margin-top 会合并，要使其不合并需要使其不相邻。

• 浮动

  • 应用场景：文字环绕 横向排列
  • 当一个元素浮动后必定是块盒（display: block）
  • 宽度为auto，适应内容宽度
  • 行盒在排列的时候会避开浮动的盒子
  • 高度坍塌：常规流盒子的自动高度，在计算的时候不会考虑浮动元素
  • 清除浮动 clear: left\right\both 清除所有左、右、左右的浮动盒子

• 定位

  • 定位下的居中显示
  • 绝对定位固定定位下 margin: auto 会自动吸收剩余空间
  • position: fixed; left: 0; right: 0; top: 0; bottom: 0; margin: auto;

9.样式

• 鼠标样式

  • cursor: url('.ico/.cur'), auto;
  • auto 类似字体设置，若图片获取失败，则显示auto

• 盒子隐藏

  • display: none;
  • visibility: hidden;

• 背景图

  • 当图片属于网页内容时，必须使用 img 元素
  • 当图片属于美化页面时，必须使用背景图
  • background-attachment: fixed; 控制图片是否固定

10.文字超出隐藏

• 单行

  .box {
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: nowrap;
  }
  

• 多行 （IE 不兼容）

  .box {
    width: 100px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    word-break: break-word;
  }
  

11.文本两端对齐

.wrap {
  text-align: justify;
  text-justify: distribute-all-lines; //ie6-8
  text-align-last: justify; //一个块或行的最后一行对齐方式
  -moz-text-align-last: justify;
  -webkit-text-align-last: justify;
}

12.自定义滚动条

overflow-y: scroll;
/* 整个滚动条 */
::-webkit-scrollbar {
  width: 5px;
}

/* 滚动条的轨道 */
::-webkit-scrollbar-track {
  background-color: #ffa336;
  border-radius: 5px;
}

/* 滚动条的滑块 */
::-webkit-scrollbar-thumb {
  background-color: #ffc076;
  border-radius: 5px;
}

13.三角形 & 扇形

.triangle {
  border-color: red yellow blue transparent;
  border-style: solid;
  border-width: 100px;
  height: 0px;
  width: 0px;
}
.div {
  border: 100px solid transparent;
  width: 0;
  height: 0;
  border-radius: 100px;
  border-top-color: red;
}

14.input

• 光标颜色单独设置

  caret-color: red; // IE不兼容
  

• placeholder 颜色设置

  .input1::-webkit-input-placeholder {
    color: green;
  }
  .input1:-moz-placeholder {
    color: green;
  }
  .input1::-moz-placeholder {
    color: green;
  }
  .input1:-ms-input-placeholder {
    color: green;
  }
  

15.@规则

• @import

  • 与 link 区别

  link 引用 CSS 时，在页面载入时同时加载；@import 需要页面网页完全载入以后加载。

/* index.css */
@import "common.css"; // 导入另外一个CSS

• @charset

/* index.css */
@charset "utf-8"; // 告诉浏览器该CSS 的字符编码集是utf-8 改行必须写在文件开头

16.web 字体

• 它是为了解决用户本地没有安装相应的字体， 强制让用户去下载字体

• 第一步：下载一个所需的字体包

• 第二步：使用 @font-face 制作新字体

@font-face {
  font-family: "my font";
  src: url("./font/myFont.ttf");
}

17.字体图标

• 使用 iconFont

18.粘性布局 sticky

• 英/'stɪki/
• CSS3 新增，设置了 sticky 值后，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是 top、left 等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成 fixed，根据设置的 left、top 等属性成固定位置的效果
• 特性
  • 该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
  • 当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置
    • 如果你设置了 top: 50px，那么在 sticky 元素到达距离相对定位的元素顶部 50px 的位置时固定，不再向上移动
  • 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于 viewport 来计算元素的偏移量

19.flex 布局相关

space-between 和 space-around 的区别

• space-between 两端对齐，项目之间的间隔都相等
• space-around 每个项目两侧的间隔 margin 相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

flex:1

• flex-grow 项目放大比例 默认 0
  • 0: 如果存在剩余空间，也不放大
  • 1: 等分剩余空间
  • 2: 占据的剩余空间将比其他项多一倍
• flex-shrink 项目缩小比例 默认 1
  • 1: 空间不足时，所有项目等比缩小
  • 0: 空间不足时，为 0 的项目不缩小
• flex-basis 在分配多余空间之前，项目占据的主轴空间 默认 auto
  • 可指定大小
• flex: 1 [1, 1, 0%]
  • 1、等分剩余空间，1、空间不足时等比缩小，0%、默认占 0%空间
  • 这也就是看到的 flex 1 的容器可自适应的原因

20.比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

• 1. display: none (不占空间，不能点击)（场景，显示出原来这里不存在的结构）
• 1. visibility: hidden（占据空间，不能点击）（场景：显示不会导致页面结构发生变动，不会撑开）
• 1. opacity: 0（占据空间，可以点击）（场景：可以跟 transition 搭配）

21.transition 和 animation 的区别

• transition 是过度属性，强调过度，它的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。它类似于 flash 的补间动画，设置一个开始关键帧，一个结束关键帧。
• animation 是动画属性，它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。它也类似于 flash 的补间动画，但是它可以设置多个关键帧（用@keyframe 定义）完成动画。

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

• 伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。
• 伪类：将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。

23.常见的图片格式及使用场景

• （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%的格外文件大小。

24.介绍下 BFC 及其应用

所谓 BFC，指的是一个独立的布局环境，BFC 内部的元素布局与外部互不影响。 触发 BFC 的方式有很多，常见的有：

• 设置浮动
• overflow 设置为 auto、scroll、hidden
• positon 设置为 absolute、fixed

常见的 BFC 应用有：

• 解决浮动元素令父元素高度坍塌的问题
• 解决非浮动元素被浮动元素覆盖问题
• 解决外边距垂直方向重合的问题

25: 0.5px 线

• transform transform: scale(0.5);
• box-shadow

  .boxshadow {
    height: 1px;
    background: none;
    box-shadow: 0 0.5px 0 #000;
  }
  

• viewport 缩放来解决
  • 根据像素比的不同，设置不同比例
  • 但这样做的副作用也很大，整个页面被缩放了。这时 1px 已经被处理成物理像素大小，这样的大小在手机上显示边框很合适。但是，一些原本不需要被缩小的内容，比如文字、图片等，也被无差别缩小掉了。