CSS知识总结

m5k1umn

1、CSS基本

CSS，英文全叫作是 Cascading Style Sheet，层叠样式表。由李爵士的伴侣赖先生发明。

why 层叠样式表

样式层叠，选取器层叠，文件层叠 。css的这种特性引起它非常灵活。

CSS的版本

CSS 2.1是运用最广泛的版本CSS 3 是最现代的版本 能够在caniuse.com上查询那些浏览器支持那些特性。

CSS语法

样式语法

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

@语法

@charset "UTF-8"; /*声明文档字符编码为UTF-8*/ @import url(x.css); /*导入x.css文档*/ @media (min-width:100px) { } /*媒介查找*/ 复制代码

CSS调试

W3C CSS validateor ，W3C验证器，结果较为准确。Webstorm 看颜色。但该软件需求电脑配置。vscode 看颜色，只能看出大概。

border 调试法

倘若可疑元素的某个属性有问题，就在它前后依次加上border。倘若border显现且设置的符合预期，说明代码的bug出此刻该属性下方，可能是选取器或语法显现错误。

CSS文档流

在CSS中，文档的流动方向默认为从左到右（内联元素）、从上到下（块级元素）。内联元素的高度由line-height行高间接决定。而块级元素是其内部文档流元素高度的总和，能够被设置。

CSS盒模型

在对一个文档进行布局时，浏览器会将所有元素都暗示为一个矩形的盒子，每一个盒子由border、margin、padding和内容四部分构成。盒模型能够分为border-box和content-box，前者的width包含该盒子的padding、content以及border，后者的width只是内容content的宽度。通常运用border-box，由于其宽度就为设置的值，毋需进行加减宽度操作。

2、CSS布局

1、float布局

在子元素上加上float: left;和width属性，父元素加上如下属性，即完成float布局。

.clearfix::after { content: ""; display: block; clear: both; } 复制代码

运用负margin来处理平均布局问题。

2、flex布局

flexboxfroggy.com/#zh-cn

3、grid布局

二维布局，先在页面上画网格，再按需求取网格区域。 cssgridgarden.com/#zh-cn

3、CSS定位

垂直于页面上的次序（由上至下）：内联元素、浮动元素、块级元素、border、bac公斤round。

position的取值

static ，默认取值relative ，用做位移或是属性position: absolute;元素的父元素absolute ，相针对祖先元素中近期的一个定位元素来进行定位fixed ， 固定定位 以上除了默认的static外均为定位元素。

层叠上下文

从上到下依次为：定位元素（z-index=0/1/2）、内联子元素、浮动元素、块级子元素、border、bac公斤round、定位元素（z-index<0）。

每一个层叠上下文都是一个小世界 可查阅mdn相关文档看那些属性能够创建一个层叠上下文。

4、 CSS动画

浏览器渲染的原理

按照HTML构建HTML树（DOM）按照CSS构建CSS树（CSSOM）将两棵树合并成一棵渲染树（render tree）Layout布局（文档流、盒模型计算体积和位置）Paint 绘制（边框文字颜色，暗影等）合成，按照层叠关系展示画面

CSS动画的两种做法

transition法

为一个元素加上transition属性，再加上另一一个属性，transition即暗示该元素在当前属性与新加属性之间的转换方式。

它的语法如下：

各参数依次为属性名