CSS

[BFC]

BFC的基本概念
- BFC就是“块级格式化上下文”的意思，也有译作“块级格式化范围”。
- 它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。
- 通俗的讲，就是一个特殊的块，内部有自己的布局方式，不受外边元素的影响。
- 它是一个独立的渲染区域，只有Block-level box参与，
- 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC原理
- BFC内部的盒子，会在垂直方向，一个接一个地放置。垂直方向上也会发生边距重叠。
- BFC就是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素，外边的也不会影响里边的。
- BFC的区域不会与float box重叠。
- 计算BFC的高度时，浮动元素也被计算在内。
BFC如何产生
- overflow: auto/ hidden;
- position: absolute/ fixed;
- float: left/ right;
- display: inline-block/ table-cell/ table-caption/ flex/ inline-flex

在属性值为这些的情况下，都会让所属的box产生BFC。

BFC的使用场景
- 去除边距重叠现象
- 清除浮动（让父元素的高度包含子浮动元素）
- 避免某元素被浮动元素覆盖
- 避免多列布局由于宽度计算四舍五入而自动换行

盒模型

盒子模型分为：标准盒模型和IE盒模型

通过box-sizing进行切换（默认值为content-box，即标准盒模型；如果将box-sizing设为border-box则用的是IE盒模型）
- content-box（标准盒模型）
  - width = 内容的宽度
  - height = 内容的高度
- border-box（IE盒模型）
  - width = border + padding + 内容的宽度
  - height = border + padding + 内容的高度

JS设置/获取盒模型对应的宽高

 dom.style.width/height：内联样式的宽高
 dom.currentStyle.width/height：渲染后的最终宽高（IE）
 window.getComputedStyle(dom).width/height：DOM标准，不支持IE
 dom.getBoundingClientRect().width/height：计算元素的绝对位置（视窗左顶点为起点，含left/right/height/width）

在编写页面代码时应尽量使用标准的W3C模型(需在页面中声明DOCTYPE类型)，这样可以避免多个浏览器对同一页面的不兼容。因为若不声明DOCTYPE类型，IE浏览器会将盒子模型解释为IE盒子模型，FireFox等浏览器会将其解释为W3C盒子模型；若在页面中声明了DOCTYPE类型，所有的浏览器都会把盒模型解释为W3C盒模型。

flex布局

弹性容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end
flex:1

flex:1 为：flex: 1 1 0;(flex-grow;flex-shrink;flex-basis)
容器属性：
- flex-direction属性决定主轴的方向（即项目的排列方向）
  - ```
   flex-direction: row | row-reverse | column | column-reverse;
```
- row（默认值）：主轴为水平方向，起点在左端。
- row-reverse：主轴为水平方向，起点在右端。
- column：主轴为垂直方向，起点在上沿。
- column-reverse：主轴为垂直方向，起点在下沿。
- flex-wrap属性定义，如果一条轴线排不下，如何换行
  - ```
   flex-wrap: nowrap | wrap | wrap-reverse;
```
- nowrap（默认）：不换行。
- wrap：换行，第一行在上方。
- wrap-reverse：换行，第一行在下方。
- flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
- justify-content属性定义了项目在主轴上的对齐方式
  - ```
   justify-content: flex-start | flex-end | center | space-between | space-around;
```
- flex-start（默认值）：左对齐
- flex-end：右对齐
- center：居中
- space-between：两端对齐，项目之间的间隔都相等。
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
- align-items属性定义项目在交叉轴上如何对齐
  - ```
   align-items: flex-start | flex-end | center | baseline | stretch;
```
- flex-start：交叉轴的起点对齐。
- flex-end：交叉轴的终点对齐。
- center：交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
- align-content属性定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用
  - ```
   align-content: flex-start | flex-end | center | space-between | space-around | stretch;
```
- flex-start：与交叉轴的起点对齐。
- flex-end：与交叉轴的终点对齐。
- center：与交叉轴的中点对齐。
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch（默认值）：轴线占满整个交叉轴。
项目属性
- order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0
- flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
- flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
- flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size），默认值为auto，即项目的本来大小
- flex属性是flex-grow,flex-shrink和flex-basis的简写，默认值为0 1 auto
- align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
  - ```
   align-self: auto | flex-start | flex-end | center | baseline | stretch;
```

居中方式

水平居中

行内元素

如果父元素是块级元素，那么直接给父元素设置text-align:center

如果父元素不是块级元素，那么可以给父元素设置块级元素，然后再设置text-align:center

块级元素

给定宽度

可以设置margin: 0, auto;（使得盒子自己居中）

不给定宽度

这时子元素的默认宽度等于父元素的宽度，给子元素转换成行内块级元素或行内元素，即将子元素设置成display: inline-block;或者display: inline;,同时给父元素设置成text-align: center;

使用定位属性

将父元素设置为相对定位position: relative;,再将子元素设置为绝对定位position: absolute;,同时设置子元素左上角水平居中，即left: 50%;

使用flex布局实现

使用flex盒子布局，需要将待处理的块级元素的父元素添加属性display: flex;justify-content:center;

垂直居中

单独的行内元素

将需要设置单行行内元素的“行高等于盒子的高”

多行的行内元素

给父元素设置display: table-cell;和vertical-align: middle;

块级元素

使用定位

将父元素设置为相对定位，将子元素设置为绝对定位，设置子元素的top:50%,即让子元素的左上角垂直居中。

定高度：设置子元素margin-top: -子元素高度的一半或者transform: translateY(-50%);

不给定高度：利用CSS3新增属性transform: translateY(-50%);

使用flex布局实现

使用flex盒子布局，只需要将待处理的块级元素的父元素设置为display: flex;align-items:center;

水平垂直同时居中

已知高度和宽度的元素

(1)将父元素设置为相对定位，子元素设置为绝对定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;

(2)将父元素设置为相对定位，将子元素设置绝对定位，left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;

不知高度和宽度的元素

(1)使用定位元素将父元素设置为相对定位，将子元素设置为绝对定位，left: 50%;top: 50%;transform: translateX(-50%) translateY(-50%)

(2)使用flex布局实现将父元素设置为flex布局,justify-content: center; align-items: center;

css单位

1、px

px就是一张图片最小的一个点1024x768
px是像素pixel的缩写，网页开发的基本长度单位

在 CSS 中经常写的 px 就是指逻辑像素，它和物理像素并不一定是一一对应的，物理像素和逻辑像素之间的对应关系会有 DPR 决定。

DPR（device pixel ratio）即设备像素比，定义了物理像素和逻辑像素之间的关系。

DPR = 物理像素/逻辑像素

当 DPR 为 1 时，屏幕上的一个逻辑像素需要 1*1 物理像素来渲染，当 DPR 为 2 时，屏幕上的一个逻辑像素需要 2*2 个物理像素来渲染，以此类推，DPR 越大需要的物理像素越多，同时画面显示就会越清晰和细腻。

2、em

参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px）
em是一个相对长度单位，相对于当前元素内的文本字体大小

3、rem

css3新单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。
rem是css3中新增的一个相对单位，根据html元素的字体大小决定

4、%

一般宽泛的讲是相对于父元素，但是并不是十分准确。
1、对于普通定位元素就是我们理解的父元素
2、对于position: absolute;的元素是相对于已定位的父元素
3、对于position: fixed;的元素是相对于ViewPort（可视窗口）

5、vw

css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。
举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。
100vw即为视口宽度的100%

6、vh

css3新单位，viewpoint height的缩写，视窗高度，1vh等于视窗高度的1%。
举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。
100vh即为视口高度的100%

7、vm

css3新单位，相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm
举个例子：浏览器高度900px，宽度1200px，取最小的浏览器高度，1 vm = 900px/100 = 9 px。

导入样式link 和 @import 区别

link 是 html 标签加载 dom 时会同步加载 link 标签的内容，@import引入的资源需要等 dom 加载完成之后加载
link 标签可以通过 js 动态插入到文档中，@import不可以
link是HTML方式， @import是CSS方式
link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC(文档样式短暂失效)
link可以通过rel="alternate stylesheet"指定候选样式
浏览器对link支持早于@import，可以使用@import对老浏览器隐藏样式
@import必须在样式规则之前，可以在css文件中引用其他文件
link优于@import

css选择器优先级与权重

选择器

id选择器(#myid)
类选择器(.myclass)
属性选择器(a[rel="external"])
伪类选择器(a:hover, li:nth-child)
标签选择器(div, h1,p)
相邻选择器（h1 + p）
子选择器(ul > li)
后代选择器(li a)
通配符选择器(*)

CSS 几种常见选择器优先级是：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

选择器权重

内联样式，如: style="..."，权值为1000。
ID选择器，如：#content，权值为0100。
类，伪类、属性选择器，如.content，权值为0010。
类型选择器、伪元素选择器，如div p，权值为0001。
通配符、子选择器、相邻选择器等。如* > +，权值为0000。
继承的样式没有权值

CSS两栏布局的实现

一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应，两栏布局的具体实现：利用浮动，给左边设置一定的宽度，并且设置向左浮动。将右边元素的margin-left的值设置为左边元素的宽度。右边宽度设置为auto，利用浮动，左侧元素设置固定大小，并左浮动，右侧元素设置overflow: hidden; 这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。利用flex布局，将左边元素设置为固定宽度，将右边的元素设置为flex:1。利用绝对定位，将父级元素设置为相对定位。左边元素设置为absolute定位，并且设置一定的宽度，将右边元素的margin-left的值设置为左边元素的宽度。利用绝对定位，将父级元素设置为相对定位。左边元素设置一定的宽度，右边元素设置为绝对定位，左边定位为和左边元素的宽度相同，其余方向定位为0。

CSS三栏布局的实现

三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，三栏布局的具体实现：利用绝对定位，将父级元素设置为相对定位，左右两栏设置为绝对定位，中间的margin-left的值等于作左边元素的宽度，margin-right的值等于作右边元素的宽度。

  <style>
         .parent{
             width:900px;
             margin:0 auto;
             position: relative;
         }
         .left {
             position: absolute;
             width: 300px;
             top:0;
             left:0;
             height: 400px;
             background: tomato;
         }
         .right {
         position: absolute;
         top: 0;
         right: 0;
         width: 300px;
         height: 400px;
         background: gold;
         }
 
         .middle {
             margin:0 300px;
             height: 400px;
             background: lightgreen;
         }
   </style>

利用flex布局，左右两栏设置固定大小，中间一栏设置为flex:1。利用浮动，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的margin值，注意这种方式，中间一栏必须放到最后

CSS左侧固定，右侧自适应布局

1.float+bfc ，左侧宽度不需要固定，但父级容器宽度需大于左侧宽度，否则右侧被挤压无法展示

  /*左浮动固定宽度，右边盒子overflow:hidden触发bfc，使其不与浮动盒子区域重叠，因此会重新计算宽度。*/
         .container1 .left{
             float: left;
             width: 100px;
         }
         .container1 .right {
             overflow: hidden;
         }
         /*清除浮动*/
         .container1:after{
             content: "";
             height: 0;
             line-height: 0;
             display: block;
             visibility: hidden;
             clear: both;
         }

2.float+margin-left，左侧宽度需固定

 /*左浮动固定宽度,右边margin-left*/
         .container2 .left{
             float: left;
             width: 100px;
         }
         .container2 .right{
             margin-left: 100px;
         }
         /*清除浮动*/
         .container2:after{
             content: "";
             height: 0;
             line-height: 0;
             display: block;
             visibility: hidden;
             clear: both;
         }

3.absolute+margin-left，左侧宽度需固定并且绝对定位，缺点：当左侧高于右侧时，左侧会超出父元素，需要使用js补救

  .container3 {
             position: relative;
         }
         .container3 .left{
             position: absolute;
             left: 10px;
             top: 10px;
             width: 100px;
         }
         .container3 .right{
             margin-left: 100px;
         }

4.子元素inline-block + calc动态计算宽度，左侧宽度需固定，父元素需要设置font-size:0清除默认间距，子元素设置vertical-align：top使其顶部对齐，右侧设置 width: calc(100% - 140px);达到自适应

 /*双display:inline-block*/
         .container4{
            font-size: 0;
         }
         .container4 .left{
             width: 100px;
         }
         .container4 .left,.container4 .right{
             display: inline-block;
             font-size: 16px;
             vertical-align: top;
         }
         .container4 .right{
             width: calc(100% - 100px);
         }

5.table-cell，表格布局

  .container5{
             display: table;
         }
         .container5 .left,.container5 .right{
             display: table-cell;
         }

6.flex，最便捷的方法，flex-grow可自由伸张，缺点：低版本IE不支持

  .container6{
         display: flex;
     }
     .container6 .right{
         flex-grow: 1;
     }

7.grid，网格布局

    .container7{
             display: grid;
         }
         .container7 .left{
             grid-column:1;
         }
         .container7 .right{
             grid-column:2;
         }

左边固定，右边自适应

利用浮动

左侧div利用float脱离文档流，为了不遮挡右侧div，使用margin-left拉开距离。
利用绝对定位

绝对定位也可以使元素脱离文档流，然后为右侧div设置margin-left拉开距离防止遮挡。

要记得为父元素设置position: relative。
利用浮动+BFC

首先让左侧元素浮动，使其脱离文档流。为了让浮动不影响右侧元素，可以使右侧元素形成一个BFC。最简单的就是为右侧元素设置overflow: hidden。
利用flex

首先，给父容器设置display: flex，然后让右侧div自动放大，撑满剩余空间，设置属性flex: 1 1 auto（也可简写为flex: auto）

响应式布局

百分比布局： 利用对属性设置百分比来适配不同屏幕，注意这里的百分比是相对于父元素；能够设置的属性有 width、height、padding、margin，其他属性比如 border、font-size 不能用百分比设置的

子元素的padding如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。

子元素的margin如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width

border-radius不一样，如果设置border-radius为百分比，则是相对于自身的宽度

缺点

计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位
使用媒体查询 (CSS3 @media 查询)

利用媒体查询设置不同分辨率下的css 样式，使用@media媒体查询可以针对不同的媒体类型定义不同的样式，特别是响应式页面，可以针对不同屏幕的大小，编写多套样式，从而达到自适应的效果。媒体查询的缺点也很明显，如果在浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐。
rem

rem单位是相对于字体大小的html元素，也称为根元素。默认情况下，html元素的font-size为16px。所以此时1rem = 16px。
vw/vh

css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度。任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一。
flex弹性布局

弹性布局是一种十分方便的，只需要依赖于CSS样式的实现响应式布局的方式，也是最多用到的一种实现响应式的方法。

CSS3动画

CSS3 @keyframes 规则

要创建 CSS3 动画，你需要了解 @keyframes 规则。

@keyframes 规则是创建动画。

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

下面的表格列出了 @keyframes 规则和所有动画属性：

属性	描述	CSS
@keyframes	规定动画。	3
animation	所有动画属性的简写属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 "ease"。	3
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。	3
animation-delay	规定动画何时开始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。	3

CSS实现三角形

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8" />
         <title>三角形</title>
         <style>
         div{
             width:0px;
             height:0px;
             border-width:80px;
             border-style:solid;
             border-color:  transparent transparent red transparent;
         }
     </style>
     </head>
     <body>
         <div></div>
     </body>
 </html>

[CSS新增特性]

1.属性选择器

2.结构伪类选择器

":first-child"是选择其父盒子里面的第一个元素

":last-child"是选择其父盒子里面的最后一个元素

“:nth-child()”的（）里面可以设置自己所需要的量

“nth-child()”中如果()是 even 则表示选中其父盒子里面的所有偶数项

3.边框

css3新增了三个边框属性，分别是：

border-radius：创建圆角边框
box-shadow：为元素添加阴影
border-image：使用图片来绘制边框

4.背景5

新增了几个关于背景的属性

background-clip

用于确定背景画区，有以下几种可能的属性：

background-clip: border-box; 背景从border开始显示
background-clip: padding-box; 背景从padding开始显示
background-clip: content-box; 背景显content区域开始显示
background-clip: no-clip; 默认属性，等同于border-box

通常情况，背景都是覆盖整个元素的，利用这个属性可以设定背景颜色或图片的覆盖范围

background-origin

当我们设置背景图片时，图片是会以左上角对齐，但是是以border的左上角对齐还是以padding的左上角或者content的左上角对齐? border-origin正是用来设置这个的

background-origin: border-box; 从border开始计算background-position
background-origin: padding-box; 从padding开始计算background-position
background-origin: content-box; 从content开始计算background-position

默认情况是padding-box，即以padding的左上角为原点

background-size

background-size属性常用来调整背景图片的大小，主要用于设定图片本身。有以下可能的属性：

background-size: contain; 缩小图片以适合元素（维持像素长宽比）
background-size: cover; 扩展元素以填补元素（维持像素长宽比）
background-size: 100px 100px; 缩小图片至指定的大小
background-size: 50% 100%; 缩小图片至指定的大小，百分比是相对包含元素的尺寸
background-break

元素可以被分成几个独立的盒子（如使内联元素span跨越多行），background-break 属性用来控制背景怎样在这些不同的盒子中显示

background-break: continuous; 默认值。忽略盒之间的距离（也就是像元素没有分成多个盒子，依然是一个整体一样）
background-break: bounding-box; 把盒之间的距离计算在内；
background-break: each-box; 为每个盒子单独重绘背景

5.文字

word-wrap

语法：word-wrap: normal|break-word

normal：使用浏览器默认的换行
break-all：允许在单词内换行
text-overflow

text-overflow设置或检索当当前行超过指定容器的边界时如何显示，属性有两个值选择：

clip：修剪文本
ellipsis：显示省略符号来代表被修剪的文本
text-shadow

text-shadow可向文本应用阴影。能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色

text-decoration

CSS3里面开始支持对文字的更深层次的渲染

text-fill-color: 设置文字内部填充颜色
text-stroke-color: 设置文字边界填充颜色
text-stroke-width: 设置文字边界宽度

6.颜色

css3新增了新的颜色表示方式rgba与hsla

7.transtion

transition属性可以被指定为一个或多个CSS属性的过渡效果，多个属性之间用逗号进行分隔，必须规定两项内容：

过度效果持续时间

语法如下：

transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0) 上面为简写模式，也可以分开写各个属性

 transition-property: width; 
 transition-duration: 1s;
 transition-timing-function: linear;
 transition-delay: 2s;
 复制代码

8.transform

transform属性允许你旋转，缩放，倾斜或平移给定元素

 transform-origin`：转换元素的位置（围绕那个点进行转换），默认值为`(x,y,z):(50%,50%,0)

使用方式：

transform: translate(120px, 50%)：位移
transform: scale(2, 0.5)：缩放
transform: rotate(0.5turn)：旋转
transform: skew(30deg, 20deg)：倾斜

9.animation

动画这个平常用的也很多，主要是做一个预设的动画。和一些页面交互的动画效果，结果和过渡应该一样，让页面不会那么生硬

animation也有很多的属性

animation-name：动画名称
animation-duration：动画持续时间
animation-timing-function：动画时间函数
animation-delay：动画延迟时间
animation-iteration-count：动画执行次数，可以设置为一个整数，也可以设置为infinite，意思是无限循环
animation-direction：动画执行方向
animation-play-state：动画播放状态
animation-fill-mode：动画填充模式

10.渐变

颜色渐变是指在两个颜色之间平稳的过渡，css3渐变包括

linear-gradient：线性渐变

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

radial-gradient：径向渐变

linear-gradient(0deg, red, green);

11.弹性盒布局

flex、grid布局

CSS预处理器

less
sass

隐藏元素的方式

display: none：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。
visibility: hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件。
opacity: 0：将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
z-index: 负值：来使其他元素遮盖住该元素，以此来实现隐藏。
clip/clip-path ：使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
transform: scale(0,0) ：将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

opacity: 0、visibility: hidden、display: none区别
- opacity:0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的
- visibility:hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
- display:none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样

display：none和visibility：hidden的区别

1. display：none

如果给一个元素设置了display: none，那么该元素以及它的所有后代元素都会隐藏，它是前端开发人员使用频率最高的一种隐藏方式。隐藏后的元素无法点击，无法使用屏幕阅读器等辅助设备访问，不会占据内存空间。

2. visibility:hidden

给元素设置visibility: hidden也是起到隐藏元素的作用，但是隐藏后的元素仍然占据原来的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。

3. 二者的区别

visibility: hidden和display: none的区别仅仅在于display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留。
visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性，但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none是不一样的。
CSS3的transition支持visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果。
visibility: hidden不会影响计数器的计数，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行，而display：none则不是。

display属性值介绍：

none（元素不会被显示）

block（元素将显示为块级元素，元素前后会带有换行符）

inline（元素会被显示为内联元素，元素前后没有换行符）

inline-block（行内块元素）

table（元素会作为块级表格来显示，类似<table>，表格前后带有换行符）

table-row（元素会作为一个表格行显示，类似<tr>）

table-cell（元素会作为一个表格单元格显示，类似<td>和<th>

flex 将对象作为弹性伸缩盒显示

inline-flex：将对象作为内联块级弹性伸缩盒显示

overflow的属性值

visible→默认值，内容不会被剪切，内容会溢出显示在元素框之外

hidden→内容会被剪切，溢出于元素框的内容不可见

scroll→内容会溢出被你剪切，但会自动生成滚动条

auto→内容如果溢出，会自动生成滚动条

inherit→继承父级的overflow值

position定位方式

固定定位 fixed：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。
相对定位 relative：如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
绝对定位 absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。
粘性定位 sticky：元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
默认定位 Static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 inherit: 规定应该从父元素继承 position 属性的值

CSS可继承性的属性：

1、字体系列属性

font：组合字体

font-family：规定元素的字体系列

font-weight：设置字体的粗细

font-size：设置字体的尺寸

font-style：定义字体的风格

font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为

大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

font-stretch：允许你使文字变宽或变窄。所有主流浏览器都不支持。

font-size-adjust：为某个元素规定一个 aspect 值，字体的小写字母 "x" 的高度与

"font-size" 高度之间的比率被称为一个字体的 aspect 值。这

样就可以保持首选字体的 x-height。

2、文本系列属性

text-indent：文本缩进

text-align：文本水平对齐

line-height：行高

word-spacing：增加或减少单词间的空白（即字间隔）

letter-spacing：增加或减少字符间的空白（字符间距）

text-transform：控制文本大小写

direction：规定文本的书写方向

color：文本颜色

3、元素可见性：visibility

4、表格布局属性：caption-side、border-collapse、border-spacing、

empty-cells、table-layout

5、列表属性：list-style-type、list-style-image、list-style-position、list-style

6、生成内容属性：quotes

7、光标属性：cursor

8、页面样式属性：page、page-break-inside、windows、orphans

9、声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、

speech-rate、volume、voice-family、pitch、pitch-range、

stress、richness、、azimuth、elevation

所有元素可以继承的属性：

1、元素可见性：visibility、opacity 2、光标属性：cursor

内联元素可以继承的属性:

1、字体系列属性 2、除text-indent、text-align之外的文本系列属性

块级元素可以继承的属性:

1、text-indent、text-align

无继承的属性

1、display

2、文本属性：vertical-align：

text-decoration：

text-shadow：

white-space：

unicode-bidi：

3、盒子模型的属性:宽度、高度、内外边距、边框等

4、背景属性：背景图片、颜色、位置等

5、定位属性：浮动、清除浮动、定位position等

6、生成内容属性:content、counter-reset、counter-increment

7、轮廓样式属性:outline-style、outline-width、outline-color、outline

8、页面样式属性:size、page-break-before、page-break-after

继承中比较特殊的几点

1、a 标签的字体颜色不能被继承

1、h1-h6标签字体的大下也是不能被继承的

因为它们都有一个默认值

伪类与伪元素

伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的，比如说，当用户悬停在指定的元素时，我们可以用:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。

伪元素用户创建一些不在文档树中的元素，并为其添加样式，比如说，我们可以通过：before来在一个元素前增加一些文本，

伪类-状态

:link 选择未访问的链接
:visited 选择已访问的链接
:hover选择鼠标指针浮动在其上的元素
:active选择活动的链接
:focus 选择获取焦点的输入字段

伪类-结构化

:not 一个否定伪类，用于匹配不符合参数选择器的元素
:first-child 匹配元素的第一个子元素
:last-child 匹配元素的最后一个子元素
:first-of-type 表示一组兄弟元素中其类型的第一个元素
:last-of-type 表示一组兄弟元素中其类型的最后一个元素

:nth-child 根据元素的位置匹配一个或者多个元素，它接受一个an+b形式的参数

 0n+3或简单的3匹配第三个元素
 2n+1匹配位置为1,3,5,7...的元素 你可以用odd替换奇数行，even代替偶数行

:nth-last-child 与:nth-child相似，不同之处在于它从最后一个子元素开始计数
:nth-of-type与nth-child相似，不同之处在于它是只匹配特定类型的元素
:nth-last-type 与nth-of-type相似，不同之处在于它是从最后一个子元素开始计数的。
:only-child 当元素是其父元素中唯一的子元素时，:only-child匹配该元素
:only-of-type 当元素是其父元素中唯一特定类型的子元素时，:only-child匹配该元素
:target 当url带有瞄名称，指向文档内某个具体的元素时:target匹配该元素

伪类-表单相关

:checked 匹配被选中的input元素，这个input元素包裹radio和checkbox.
:default 匹配默认选中的元素
:disabled 匹配禁用的表单元素
:empty 匹配没有子元素的元素，如果元素中含有文本节点，html元素或者一个空格，则:empty不能匹配这个元素
:enabled 匹配没有设置disabled属性的表单元素
:in-range 匹配在指定区域内元素，
:out-of-range 匹配不在指定区域内的元素
:indetermimate 当某组中的单选框或复选框还没有选取状态时，：indeterminate匹配该组中所有的单选框或复选框
:valid 匹配条件验证正确的表单元素
:invalid 匹配提交验证错误的表单元素
:optional :required匹配设置有无设置required属性的表单元素
:read-only 匹配设置了只读属性的元素
：read-write匹配处于编辑状态的元素

伪类-其他

:root 匹配文档的跟元素
:fullscreen 匹配处于全屏模式下的元素

伪元素

1 ::before/:before 在被选元素前插入内容，需要使用content属性指定要插入的内容。被插入的内容实际上不在文档树中

2 ::after/:after 在被元素后插入内容.其用法和特性与:before相似

3 ::first-letter/:first-letter 匹配元素中文本的首字母

4 ::first-line/:first-line匹配元素中第一行的文本，这个伪元素只能用在快元素中。不能用在内联中

5 ::selection匹配被用户选择或者处于高亮状态的部分，该元素只支持双冒号的形式

6 ::placeholder 匹配占位符的文本，只有元素设置placeholder属性是，该伪元素才能生效。

CSS

CSS

[BFC]

盒模型

content-box（标准盒模型）

width = 内容的宽度

height = 内容的高度

border-box（IE盒模型）

width = border + padding + 内容的宽度

height = border + padding + 内容的高度

flex布局

居中方式

水平居中

行内元素

块级元素

垂直居中

单独的行内元素

多行的行内元素

块级元素

水平垂直同时居中

已知高度和宽度的元素

不知高度和宽度的元素

css单位

导入样式link 和 @import 区别

css选择器优先级与权重

选择器

选择器权重

CSS两栏布局的实现

CSS三栏布局的实现

CSS左侧固定，右侧自适应布局

左边固定，右边自适应

响应式布局

CSS3动画

CSS3 @keyframes 规则

CSS实现三角形

[CSS新增特性]

background-size

background-break

word-wrap

text-overflow

text-shadow

text-decoration

CSS预处理器

隐藏元素的方式

opacity: 0、visibility: hidden、display: none区别

display：none和visibility：hidden的区别

display属性值介绍：

overflow的属性值

position定位方式

CSS可继承性的属性：

所有元素可以继承的属性：

内联元素可以继承的属性:

块级元素可以继承的属性:

无继承的属性

伪类与伪元素