层叠样式表 (Cascading Style Sheets，缩写为 CSS）

一、CSS基础

CSS的发明

1994年提出CSS概念

CSS的优点

样式层叠
可以多次对同一选择器进行样式声明
选择器层叠
可以用不同选择器对同一元素进行样式声明
文件层叠
可以用多个文件进行层叠
这些特性使得CSS极度灵活

如何确定浏览器支持哪些特性

几十种浏览器进行实验
使用caniuse.com

CSS的语法

语法一

选择器 {
    属性名: 属性值;
    /*注释*/
}

注：

所有的符号都是英文符号
区分大小写
没有//注释
最后一个分号可以省略，但是不建议省略
任何地方写错了都不会报错，浏览器会直接忽略
语法二
@charset "UTF-8";
@import url(2.css);

@media (min-width: 100px) and (max-width: 200px) {
   语法一
｝

注：

@charset必须要放在第一行
前两个@语法必须以分号结尾
charset是字符集的意思，UTF-8是字符编码encoding，这是历史遗留问题

border调试法

border 1px solid red;
根据红框出现与否来判断
若出现了则上边没错，若没出现则上边有错

二、文档流

正常布局流
查看MDN介绍的normal flow
新H5中 display: inline就是内联元素，display: block就是块级元素

流动方向

display: inline从左到右流动
display: block从上到下流动
display: inline-block从左到右流动，但是元素不会跨行存在

宽度

inline的宽度就是内部inline元素的总和宽度，width不能定义inline的宽度（不要把block元素放进inline中）
block的宽度是自定计算的，可以用width指定（永远不要写width 100%）
inline-block结合两者特点，默认宽度类似inline，但是可以用width指定

高度

inline的高度是由inline-height间接决定的，不是由height决定的（间接决定情况发生在字体不一致深入理解CSS：字体度量、line-height 和vertical-align ）
block的高度由内部文档流元素高度决定（有一些元素能够脱离文档流），可以设置height
inlet-block默认和block类似，可以设置height

overflow溢出

当内容大于容器

等内容的宽度或高度大于容器，会溢出

div {
    border: 2px solid gray;
    height: 30px;
    /*overflow*/
    overflow: visible;/*超出部分可视*/
    overflow: hidden;/*超出部分隐藏*/
    overflow: scroll;/*超出部分以滚动方式看见*/
    overflow: auto;/*超出显示滚动条，不超出则无*/
}

脱离文档流

HTML

<body>
  <div class="div1">
      <div class="div2"><span>你好</span></div>
  </div>
</body>

CSS

.div1{
    border: 1px solid green;
}
.div2{
    border: 1px solid red;
}
span{
    position: absolute;/*或fixed、脱离文档流*/
    float: left;/*或者right*/

}

absolute
元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
fixed
元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。
float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位相反）。

三、盒模型

当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。

盒模型图解

每个盒子由四个部分（或称区域）组成，其效用由它们各自的边界（Edge）所定义（原文：defined by their respective edges，可能意指容纳、包含、限制等）。如图，与盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。

box-size

box-sizing 属性可以被用来调整这些表现:

content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。
注: border-box不包含margin

margin合并

哪些情况合并
父子margin
兄弟margin
如何阻止合并
父子合并用padding/border挡住
父子合并用overflow: hidden挡住
父子合并用display: flex挡住
兄弟合并是符合预期的
兄弟合并可以用inline-block消除