【芝士整理】CSS基础图谱

选择器注意点

属性选择器

• [attr^=value] - 开头或全等
• [attr$=value] - 结尾或全等
• [attr*=value] - 包含值
• [attr~=value] - 字符串包含

选择器组

• A > B - 直接子节点
• A + B - 下一个兄弟节点
• A ~ B - 兄弟节点

优先级

!important > 内联样式 > ID选择器 > 属性选择器（类选择器，属性选择器，伪类）> 元素选择器 （类型选择器，伪元素）> 继承 > 用户代理样式

通配选择符(*), 关系选择符(+, >, ~, ' ') 和 否定伪类(:not()) 对优先级没有影响。（但是，在 :not() 内部声明的选择器是会影响优先级）。

块元素/行内元素/行内块元素

• block box - 整块，独占一行，可指定宽高
• inline box - 包裹内容，行内流动，文本太长会段落行中断开（设置border分行后的显示效果）；无法指定宽高
• inline-block box - 行内流动，段落行中不会断开，成块显示，可指定宽高

盒模型

当对一个文档进行布局的时候，浏览器渲染引擎会根据CSS-Box模型将所有元素表示为一个矩形盒子

盒模型由由外边距、边界、内边距、内容块组成

外边距

盒模型的最外层，常用于元素外布局，垂直方向上易出现元素外边距重叠的效果，详细介绍可见CSS深入理解之margin

边界

背景层延伸到边界，默认颜色为字体颜色，可用边界实现一些常用图形效果，详细介绍可见CSS深入理解之border

内边距

内容区和边界之间的距离，背景层渗透，不支持负值，详细可见CSS深入理解之padding

CSS-Box模型

可通过box-sizing属性设置

• content-box ，标准盒子模型，width = 内容区宽度
• border-box，IE盒子模型，width = 内容区宽度 + 内边框 + 边框

行内框盒模型

行内框盒模型描述内容在元素中的布局结构

行内元素都具有line-height和vertical-align属性，这两个属性影响内容在垂直方向上的分布，详细介绍可见CSS深入理解之line-height以及CSS深入理解之vertical-align

流布局

在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。

浮动

浮动起源于实现文字环绕效果。

为了实现文字环绕效果，规范规定的措施是使父容器塌陷，元素脱离文档流浮动产生BFC，元素周围的内容转换为inline boxes围绕元素排列。

从浮动的起因和浮动的副作用来看，浮动不适合用于大范围的布局，更适合利用其特性实现一些小范围的流体布局效果。

关于浮动的具体介绍，可见CSS深入理解之float

定位

相对定位

未脱离文档流，相对于元素在文档流中的位置偏移，不会对其他元素的布局产生影响

绝对定位

脱离文档流，相对于包含块定位

绝对定位元素具有跟随性，在未手动定位时，元素根据原有位置脱离文档流放置

无固定宽/高，设定对立定位方向，产生拉伸效果

关于绝对定位的具体介绍，可以CSS深入理解之absolute

固定定位

脱离文档流，相对于视口

BFC

什么是BFC?

CSS规范的一个特性，产生BFC特性的元素可以理解为一个封闭独立的容器，能够排除一些外界因素的影响

如何产生BFC?

• 根元素
• 浮动
• 绝对定位
• display: inline-block/table-cell/table-caption/flex/inline-flex
• overflow非visible

BFC的日常应用

• 解决外边距重叠问题
• 清除浮动
• 排除兄弟元素的浮动影响

详细例子可见10 分钟理解 BFC 原理

层叠

详细介绍可见CSS深入理解z-index

度量单位

• 绝对单位

  • px

• 相对单位

  • em - 相对父元素的字体大小（font-size而不是计算出的字体高度）
  • rem - 相对于基础字体大小，支持IE9及以上
  • vw, vh- 分别是视口宽度的1/100和视口高度的1/100

rem布局使用解说
大体简述

• px太过死板，无法实现等比缩放。
• 使用em需要严格控制各级元素关系，容易出错，不易维护
• 使用rem的好处在于可通过修改根元素字体大小实现等比缩放，根元素字体大小需要用js计算。如果将屏幕宽度分为一百等分，一单位宽度即clientWidth/100，根元素字体大小设置为该值，50rem即代表50%的宽度。若要方便还原设计图尺寸，使用元素的rem值计算公式：元素宽度 / UE图宽度 * 100

文本

文本溢出处理

介绍几个属性

word-break

• normal：默认断行规则，CJK文本自动换行，非CJK不会自动换行（边界遇空白符会换行）
• break-all：非CJK文本可在任意字符间断行
• keep-all：CJK文本不断行，非CJK保持默认断行

word-wrap

overflow-wrap的别名，当行内没有多余的空间容纳一个单词到结尾，是否允许这个单词中断换行

注：word-wrap 属性原本属于微软的一个私有属性，在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。 word-wrap 现在被当作 overflow-wrap 的 “别名”。 稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。

• normal
• break-word

white-space

如何处理空白

| | 换行符 | 空格和制表符 | 文字转行 |
| ---------- | ------ | ------------ | -------- |
| normal | 合并 | 合并 | 转行 |
| nowrap | 合并 | 合并 | 不转行 |
| pre | 保留 | 保留 | 不转行 |
| pre-wrap | 保留 | 保留 | 转行 |
| pre-line | 保留 | 合并 | 转行 |

word-break控制任意字符是否换行，word-wrap控制单词是否中断换行，white-space可控制是否换行。如果无换行前提，word-space与word-wrap将失去意义。

https://codepen.io/curlywater...

常见处理

不做转换的情况下，显示多行文本，并且控制换行

.content {
    white-space: pre-wrap;
    word-wrap: break-word;
}

对溢出文本做省略字符处理

.line-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

行内元素水平间隔

行内元素之间若有空白符/换行符/制表符掺入，将会产生元素间隔的渲染效果

• 解决方式一：避免掺入，旧式开发中注意写法，现代框架和打包可以避免该问题
• 解决方式二：容器字体大小设置为0

html{
    // 字体大小不受设备终端调整
　　-webkit-text-size-adjust:none;
}
.container {
    font-size: 0;
}
.container span {
    font-size: 16px;
}