一、CSS基础

1. 什么是CSS

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

2. CSS的发明

1994年提出CSS概念，1994年哈坤·利提出了CSS的最初建议。而当时伯特·波斯（Bert Bos）正在设计一个名为Argo的浏览器，于是他们决定一起设计CSS。

3. CSS的优点

样式层叠

可以多次对同一选择器进行样式声明

选择器层叠

可以用不同选择器对同一元素进行样式声明

文件层叠

可以用多个文件进行层叠

这些特性使得CSS极度灵活

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

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

5. CSS的语法

5.1. 语法一

选择器 {
    属性名: 属性值;
    /*注释*/
}
复制代码

注：

所有的符号都是英文符号
区分大小写
没有//注释
最后一个分号可以省略，但是不建议省略
任何地方写错了都不会报错，浏览器会直接忽略

5.2. 语法二

@charset "UTF-8";

@import url(2.css);

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

注：

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

5.3. border调试法

border 1px solid red;

根据红框出现与否来判断

若出现了则上边没错，若没出现则上边有错

二、文档流

1. 正常布局流

MDN：CSS布局详解

MDN：正常布局流详解

1.1. 内联元素、块级元素

例：
【HTML】

<body>
<p>柴犬耳朵</p>
<ul>
    <li>给耳朵喂食</li>
    <li>带耳朵出去玩</li>
    <li>给耳朵洗澡</li>
</ul>
<p>一天结束了</p>
</body>
复制代码

【效果】

屏幕截图 2021-07-05 211945.png

注意，HTML元素完全按照源码中出现的先后次序显示——第一个段落、无序列表、第二个段落。

出现在另一个元素下面的元素被描述为块元素，与出现在另一个元素旁边的内联元素不同，内联元素就像段落中的单个单词一样。

新H5中 display: inline就是内联元素，display: block就是块级元素

1.2. 内联元素、块级元素的流动方向

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

1.3. 宽度

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

1.4. 高度

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

2. overflow

MDN：overflow详解

CSS属性 overflow 定义当一个元素的内容太大而无法适应 块级格式化上下文 时候该做什么。它是overflow-x和overflow-y的简写属性。

overflow的值：

div { 
    border: 2px solid gray;
    height: 30px;
    
    /*overflow取值*/
   
    overflow: visible;
    /*超出部分可视。默认值。内容不会被修剪，可以呈现在元素框之外。*/
   
    overflow: hidden;
    /*超出部分隐藏。如果需要，内容将被剪裁以适合填充框。不提供滚动条。*/
    
    overflow: scroll;
    /*超出部分以滚动方式看见。如果需要，内容将被剪裁以适合填充框。浏览器显示滚动条，无论是否实际剪切了任何内容。（这可以防止滚动条在内容更改时出现或消失。）打印机仍可能打印溢出的内容。*/
    
    overflow: auto;
    /*超出显示滚动条，不超出则无。取决于用户代理。 如果内容适合填充框内部，则它看起来与可见内容相同，但仍会建立新的块格式化上下文。 如果内容溢出，桌面浏览器会提供滚动条。*/
}
复制代码

3. 脱离文档流

MDN：In Flow and Out of Flow详解

【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*/

}
复制代码

position: absolute

元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。

position: fixed

元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。

position: float

CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位相反）。

三、盒模型

MDN：盒模型详解

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

3.1. 盒模型的组成

盒模型图解

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

内容边界 Content edge： 这个区域是用来 显示内容，大小可以通过设置 width 和 height

内边距边界 Padding Edge： 包围在内容区域外部的空白区域；大小通过 padding 相关属性设置。

边框边界 Border Edge： 边框盒包裹内容和内边距。大小通过 border 相关属性设置。

外边框边界 Margin Edge： 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

3.2. 控制框盒中内容流的属性

详见上节的overflow

其中包括：overflow；
overflow-x；
overflow-y

3.3. 控制框盒大小的属性

3.3.1. box-sizing

MDN：box-sizing详解

CSS 中的 box-sizing 属性定义了用户应该如何计算一个元素的总宽度和总高度。

box-sizing: content-box;
width: 100%;
复制代码

content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

box-sizing: border-box;
width: 100%;
复制代码

border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

3.3.2. height

MDN：height详解

height CSS 属性指定了一个元素的高度。默认情况下，这个属性决定的是 内容区（content area）的高度，但是，如果将 box-sizing 设置为 border-box , 这个属性决定的将是 边框区域（border area）的高度。

3.3.3. width

MDN：width详解

width 属性用于设置元素的宽度。width 默认设置内容区域的宽度，但如果 box-sizing 属性被设置为 border-box，就转而设置边框区域的宽度。

3.4. 控制外边距 Margin 的属性

MDN：margin详解

margin 属性为给定元素设置所有四个（上下左右）方向的外边距属性。也就是 margin-top，margin-right，margin-bottom，和 margin-left 四个外边距属性设置的简写。

3.5. margin合并

3.5.1. 什么是margin合并

又可以称 外边距重叠

MDN：外边距重叠详解

块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。

3.5.2. 相邻的兄妹元素合并

例：

目标设定：兄妹距离150px

【HTML】设定两个兄妹块级元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>

<body>
<div class='brother'></div>
<div class='sister'> </div>
</body>

</html>
复制代码

【CSS】哥哥下边距设置50px，妹妹上边距设置为100px

body{
    margin:0;
    padding:0;
}
.brother{
    width:100px;
    height:100px;
    background: #709ce8;
    margin-bottom:50px;
}
.sister{
    width:200px;
    height:200px;
    background: #6edc63;
    margin-top: 100px;
}
复制代码

【效果】

屏幕截图 2021-07-05 232919.png

可见，上下距离虽然设定了分别是50px和100px，但是兄妹的距离仍然是100px，而并不是150px。

相邻的两个兄妹元素之间的外边距会取两者之前的最大值进行合并

3.5.3. 块级父元素与其第一个/最后一个子元素

例：

目标设定：在父级元素中的儿子，需要距离父亲50px

【html】设置父级块father，其中有儿子女儿块级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>

<body>
<div class='father'>
    <div class='son'></div>
    <div class='daughter'></div>
</div>
</body>

</html>
复制代码

【CSS】给儿子设置上边距50px

.father{
    width:400px;
    height:300px;
    background: red;
}
.son{
    width:300px;
    height:100px;
    background: yellow;
    margin-top: 50px;
}
.daughter{
    width:200px;
    height:100px;
    background: blue;
}
复制代码

【效果】

屏幕截图 2021-07-05 235149.png

可见，儿子并没有距离父亲50px，而是距离最上50px，父子块出现合并现象

3.5.4. 空块级

例：
【HTML】兄妹之间加入space块级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>

<body>
<div class='brother'></div>
<div class="space"></div>
<div class='sister'></div>
</body>

</html>
复制代码

【CSS】space设定上边距为50px，下边距为100px

body{
    margin:0;
    padding:0;
}
.brother{
    width:100px;
    height:100px;
    background: #709ce8;
}
.sister{
    width:200px;
    height:200px;
    background: #6edc63;
}
.space{
    margin-top: 50px;
    margin-bottom: 100px;
}
复制代码

【效果】

屏幕截图 2021-07-05 235846.png

可见，space块级的上边距和下边距合并了，兄妹之间距离100px

3.5.5. 如何阻止合并

兄妹合并是符合预期的，兄妹合并可以用inline-block消除；

特殊情况：
【CSS】哥哥设置浮动，妹妹又清除了浮动

body{
  padding-top:1px;  //若不设置，body和灰色div会存在父子元素之间的margin合并
}
.brother{
    width:100px;
    height:100px;
    background: #709ce8;
    margin-bottom:50px;
    float: left;
}
.sister{
    width:200px;
    height:200px;
    background: #6edc63;
    margin-top: 100px;
    clear: both;
}
复制代码

【效果】

妹妹距离最上方的距离为100px，由于有哥哥的存在又必须在哥哥下面，所以只能以哥哥的下边距50px为主，但是若是妹妹的上边距设定为200px会如何？见下：
【效果】

这时妹妹完全距离上方200px，距离哥哥100px

父子合并用padding/border挡住;
父子合并用overflow: hidden挡住;
父子合并用display: flex挡住

【HTML】

 <div class="parent">
     <div class="child">第一个孩子</div>
     <div class="child">第二个孩子</div>
     <div class="child">第三个孩子</div>
 </div>
复制代码

【CSS】

.parent{
    margin: 30px 0;
    background: red;
    overflow: hidden;/*阻止父子合并*/
}
.child{
    border: 1px black;
    margin: 30px 0;
    display: inline-block;/*阻止兄弟合并*/
}
复制代码

3.5.6. 总结

发生外边距合并的元素：块元素之间（父子、兄弟、空块）；发生外边距合并的边距：上、下边距（左右边距不会合并）；
相邻的兄弟元素之间必出现margin合并（除非后者兄弟姐妹需要清除过去的浮动）；
父元素与第一个子元素间，如果没有padding、border、inline content、清除浮动这四个属性之一，就会出现上边距合并；
父元素与最后一个子元素之间，如果没有padding、border、inline content、height、min-height、max-height这几个属性之一，就会出现下边距合并；
空的块级元素，如果其border、padding、inline content、height、min-height都不存在，那么它的上下外边距将会合并。