CSS知识点整理

CSS 样式权重

引入样式优先级

内联样式 > 内部样式表 > 外部样式表

选择器权重

!important > id > class | 属性 > 标签 > *

CSS 书写顺序

• 显示属性：display,positon,float,clear
• 自身属性：width,height,margin,padding,border,background
• 文本属性：color,font,text-align,vertical-align,whitespace
• 其他

link和@import的区别

• @import是css提供的语法规则，只可以引入样式表，link是html标签，除了css文件，还可以引入其他文件
• 加载顺序不同，link引入的文件会被同时加载，而@import引入的文件会在页面加载完毕后再进行加载
• 兼容性问题，@import是css2.1的语法，故只可在 IE5+ 才能识别；link 标签作为 HTML 元素，不存在兼容性问题。
• DOM可控性的区别，可以通过JS操作DOM插入link标签来改变样式，由于dom是基于文档的，没法使用@import的方式插入样式

字体

浏览器在设置字体大小的时候，设置的是字符的高度，字符的宽度则是根据字体的设计比例自动进行缩放，以保持整个字形的整体设计不变

简写

font-style font-weight font-size line-height font-family
font: italic bold 12px/20px "微软雅黑"

1em = 10px

浏览器默认字体大小为 16px，设置根节点字体大小为 62.5%，即 1em = 10px，可以使用这个基数来方便的设置大小。

html {
  font-size: 62.5%; /* 16px * 62.5% = 10px */
}
p {
  font-size: 1.6em; /* 1em = 10px; 1.6em = 16px */
}

常见场景

文本截断和显示省略号

单行文本截断和显示省略号

div {
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

多行文本截断

{
  ...
  width: ...;
  height: ...;
  overflow-y: hidden;
}

文本垂直居中

• 单行文本：行高等于容器高度
• 由于table单元格默认垂直居中，据此实现容器内多行文本垂直居中

div {
  display: table;
  width: 100px;
  height: 100px;
  font-size: 12px;
  border: 1px solid #000;
}
span {
  display: table-cell;
  vertical-align: middle;
}

<div>
  <span>这是一段文字</span>
</div>

布局

绝对定位中的两栏设计

• 左/右侧绝对定位
• 内容区域margin-left/right：左/右侧宽度;

BFC

内容节选于 左鹏飞：BFC原理剖析

Block Fomatting Context = block-level box + Formatting Context

Box

box 即盒子模型。

Block-Level Box

即块级元素，display 属性为 block, list-item, table 的元素，会生成 block-level box，并且参与 block fomatting context。

Inline-Level Box

即行内元素，display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box，并且参与 inline formatting context。

Formatting context

Formatting context是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系、相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context(简称IFC)。

CSS2.1 中只有BFC和IFC, CSS3中还增加了G（grid）FC和F(flex)FC。

BFC 的生成

BFC是一块渲染区域，那这块渲染区域到底在哪，它又是有多大，这些由生成BFC的元素决定，CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC。

• 根元素
• float的值不为none
• overflow的值不为visible
• display的值为inline-block、table-cell、table-caption 　
• position的值为absolute或fixed

display：table也认为可以生成BFC，其实这里的主要原因在于Table会默认生成一个匿名的table-cell，正是这个匿名的table-cell生成了BFC

BFC的约束规则

• 内部的Box会在垂直方向上一个接一个的放置
• 垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠（塌陷），与方向无关。）
• 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
• BFC的区域不会与float的元素区域重叠
• 计算BFC的高度时，浮动子元素也参与计算
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

一个通俗的说法是，BFC就好比是孙悟空给唐僧画的一个庇护圈