理解CSS ｜青训营笔记CSS是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可

盒子模型

盒子模型本质上就是一个盒子，封装周围的HTML元素，它包括四个部分：

content ：实际内容
padding ：内边距，清除内容周围的区域，是透明的，取值不能为负，受盒子 background属性影响。
border ：边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色三部分组成。
margin ：外边距，在元素外创建额外的空白，通常指不能放其他元素的区域。

盒模型分为：IE/怪异盒模型 和 W3C标准盒模型

标准盒模型：width / height = content 宽高，不包含 border 和 padding。
IE盒模型：width / height = content + padding + border，包含 border 和 padding。

css属性 box-sizing: content-box（W3C盒模型） | border-box（IE盒模型） | inherit（父元素继承）。

样式表类型

行内样式表（内联式样式）

利用style属性将样式写在HTML标签中。
内部样式表

将样式代码写在页面 <style>...</style> 标签之中
链接样式表（.css文件）

css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在 <head> 内使用<link> 标签将css样式文件链接到HTML文件内
导入样式表（@import）

@import一定要写在其他的CSS规则之前，如果置于其他位置会被浏览器忽略

优先级采用 就近原则 ，越靠近相关标签的样式优先级更高。

行内样式优先级最高。
内部样式优先级大于导入样式。
链接样式和内部样式、导入样式的优先级与文档顺序相关。

样式和选择器

一般来说，样式的优先级为：

（外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style

但如果外部样式表引入位置在内部样式后，则外部样式会覆盖内部样式表。

也就是说，距离HTML元素近的会覆盖距离远的。

选择器的优先级是通过计算规则算的，一般来说：

!important > 内联样式 > id选择器 > 类选择器（属性选择器） > 标签选择器 > 通配符选择器(*)

相邻选择器

也叫兄弟选择器。

+：类名1 + 类名2 ，则只能选中类名2。
~：类名1 ~ div，则选中除类名1的所有兄弟类。类名1 ~ 类名3，则选中类名3（间隔的兄弟）。

BFC 块格式化上下文

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

创建BFC

浮动元素：float属性不为none（指定float为left或者right都可以）
绝对定位元素：position为absolute或fixed
display: inline-block、table-cell、table-caption、flex、inline-flex
overflow不为visible

BFC特点

在BFC中，盒子从顶部开始垂直地一个接一个排列
盒子垂直方向的距离由margin决定。同一个BFC的两个相邻盒子margin会重叠。
BFC中，margin-left会触碰到border-left（对于从左至右的方式，反之）
BFC区域不会与浮动的盒子产生交集，而是紧贴边缘浮动
计算BFC高度时，自然会检测浮动的盒子高度

BFC用途

清除内部浮动，父元素设置为BFC可以清除子元素的浮动（最常用overflow:hidden，IE6需加上*zoom:1）：计算BFC高度时会检测浮动子盒子高度
解决外边距合并问题
右侧盒子自适应：BFC区域不会与浮动盒子产生交集，而是紧贴浮动边缘

父元素高度塌陷

dispaly: inline

若想使块级元素变成行内元素，就可以使用display: inline, 如果没有给父元素设置高度，父元素会随子元素塌陷，高度和子元素行高保持一致。

解决办法：给父元素设定固定高度，则会保持原有高度。
float

float 属性定义元素在哪个方向浮动，float: left=>浮动在左侧, float: right=》浮动在右侧，float: none=>不浮动。不管原本是什么元素，float会使其生成一个块级框。

子元素使用浮动后会“漂浮”页面，不占用空间，如果父元素没有设置高度，则父元素高度变成零。

解决办法：
1. 给父元素设置 overflow 属性可以清除浮动。将会使用父元素产生 BFC(block fomarttimg context) 机制，即父元素的高度计算会包括浮动元素的高度。
2. 通过::after伪元素清除对父元素浮动影响。
3. 给父元素设定固定高度（不够灵活）。
position: absolute

绝对定位不受文档流影响。如果父元素没有设置position，默认为position:static，此时父元素高度会塌陷。

解决办法：给父元素设置position: relative\fixed\sticky（则子元素会相对于父元素定位）, 再给父元素设置固定高度和宽度（可以通过JS获取子元素的高度document.getElementById("child").offsetHeight，然后赋值给父元素来解决。）
position: fixed

固定于页面某个位置。如果没有给父元素设置高度，父元素会随子元素塌陷。

解决办法：给父元素设置高度即可。

定位

静态定位static

是 position 属性的默认值，表示没有定位，使用静态定位的元素会按照元素正常的位置显示，并且不会受到 top、bottom、left、right 和 z-index 属性的影响。
相对定位relative

是元素相对于自己默认的位置来进行位置上的调整，您可以通过 top、bottom、left 和 right 四个属性的组合来设置元素相对于默认位置在不同方向上的偏移量。

相对定位的元素可以移动并与其他元素重叠，但会保留元素默认位置处的空间。
绝对定位absolute

相对于第一个非静态定位（static）的父级元素进行定位，如果找不到符合条件的父级元素则会相对与浏览器窗口来进行定位。您同样可以使用 top、bottom、left 和 right 四个属性来设置元素相对于父元素或浏览器窗口不同方向上的偏移量。

使用绝对定位的元素会脱离原来的位置，不再占用网页上的空间。
固定定位fixed

将元素相对于浏览器窗口进行定位，使用固定定位的元素不会因为浏览器窗口的滚动而移动，就像是固定在了页面上一样，我们经常在网页上看到的返回顶部按钮就是使用固定定位实现的。

fixed属性的元素在标准流中不占位置。
粘性定位sticky

像是相对定位和固定定位的结合体，当滚动页面时它的效果与相对定位相同，当元素滚动到一定程度时它又会呈现出固定定位的效果。比如一些网页上的导航菜单，当页面加载完成时它在自己默认的位置，当我们向下滚动页面时它又会固定在页面的最顶端。

在设置position:sticky;时，必须再定义 top、bottom、right、left 四个属性之一，否则只会处于相对定位；

伪类

:hover选择器：当鼠标悬停在所指定的元素上时所使用的样式；
:active选择器：当所指定的元素处于激活状态（鼠标在元素上按下还没有松开）时所使用的样式；
:focus选择器：当元素获得光标焦点时使用的样式，主要用在文本框输入文字时使用；

实现水平垂直居中

文本居中

.test {
    text-align: center; /* 水平居中 */
    line-height: 200px; /* 垂直居中 */
}

元素居中

弹性布局 flex

给父元素添加弹性布局 flex，通过设置 align-items （垂直居中）和 justify-content（水平居中）为 center 属性，来定义子元素水平垂直居中。

绝对定位 + margin（auto）

.test{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

绝对定位 + margin

设置 margin-top 、margin-left 偏移量。（需要提前知道元素宽高）

.test{
    height: 200px;
    width: 150px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -75px;
}

绝对定位 + transform

使用平移，transform 实现 margin-top 、margin-left。

.test {
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
}

行内元素设置宽高

display：转换为块级元素或者块级行内元素。

display: block / inline-block;
float：给行内元素添加浮动。

float：left / right;
position：给行内元素添加绝对定位或固定定位。

position: absolute / fixed;

单位

px：绝对单位，代表屏幕中每个「点」( pixel )。
em：相对单位，每个子元素通过「倍数」乘以父元素的px值。
rem：相对单位，每个元素通过「倍数」乘以根元素的px值。
%：相对单位，每个子元素通过「百分比」乘以父元素的px值。

字体大小单位可以是em，1em = 16px。

理解CSS ｜ 青训营笔记