CSS 知识总结的宽度只包含content,border-box的宽度包含到border,分别是border 内边距pa

CSS全称为层叠样式表

样式、选择器、文件都可以层叠、这些特性使CSS极度灵活也存在缺陷

CSS2.1是目前使用最广泛的版本

caniuse.com 可以查看各个浏览器CSS支持情况

CSS语法

语法一

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

语法二 at 语法

   @charset "UTF-8";
   @import url(2.css);
   @media(min-width:100px) and (max-width:200px){
       语法一
   }

charset "UTF-8"指的是字符编码

Border调试法

怀疑摸个元素有问题,就给这个元素加border,border没出现?说明选择器错了或者语法错了
border出现了?看看边界是否符合预期,bug解决了才可以把border删掉

文档流

指的是文档中元素流动的方向

流动方向

inline 元素从左到右,到达最右边才会换行
block 元素从上到下,每一个都另起一行
inline-block 也是从左到右，但inline-block到达最后的时候不会把自己分成两块

宽度

inline 宽度为内部inline元素的和,不能用width指定
block高度由内部文档流元素决定,可以设height
inline-block跟block类似,可以设置height

元素已经不分为inline元素或者是block元素任何元素都可以用display来指定
block元素默认宽度是 width:auto 自动计算宽度
inline元素里写block元素

overflow溢出

当内容大于容器可用overflow来设置是否显示滚动条

auto是灵活设置
scroll是永远显示
hidden是直接隐藏溢出部分
visible是直接显示溢出部分
overflow可以分为overflow-x和overflow-y

脱离文档流

float position:absolute/fixed 可以脱离文档流

盒模型

CSS盒模型分两种一种是content-box，一种是border-box，他们两个的区别是content-box 的宽度只包含content,border-box的宽度包含到border,分别是border 内边距padding和内容。

margin合并

margin合并只出现在上下方向

父子margin合并
兄弟margin合并

如何阻止合并

父子合并用padding/border挡住
父子合并用overflow:hidden挡住
父子合并用 display:flex
兄弟合并是符合预期的
兄弟合并是可以用inline-block消除

基本单位

长度单位

px像素
em相当于自身font-size的倍数
百分数
整数

颜色

十六进制#FF6600
RGBA颜色 rgb(0,0,0,1)
hsl颜色hsl(360,100%,100%)

CSS布局

float布局

步骤

子元素上加float:left或width
在父元素上加 .clearfix

.clearfix:after{
	content:'';
   display:block;
   clear:both;
}

如现图片下面有溢出来的部分可以加个vertical-align:top
如果是块元素并且宽度固定，使用margin-left:auto margin-right:auto 就可以居中
如果做平均布局就是需要用到 - margin

flex布局

分为容器container和items

display:felx
flex-direction:row/column
flex-wrap:wrap
justify-content: center/space-between
align-items:center

grid布局

CSS定位

position

static默认值,带在文档流里
relative相对定位,升起来,但不脱离文档流
absolute绝对定位,absolute相对于祖先元素中最近的一个定位元素定位(非static)
fixed固定定位,定位基准是viewport (也不一定)
sticky粘滞定位
如果写了absolute,一般都得补一个relative
如果写了absolute或fixed,一定要补top和left

层叠上下文

比喻

每个层叠上下文就是一个新的小世界(作用域)
这个小世界里面的z-index跟外界无关
处在同一个小世界的z-index才能比较

CSS动画

浏览器渲染过程

步骤

根据HTML构建HTML树(DOM)
根据CSS构建CSS树(CSSOM)
将两棵树合并成一颗渲染树(render tree)
Layout布局(文档流、盒模型、计算大小和位置)
Paint绘制(把边框颜色、文字颜色、阴影等画出来)
Compose合成(根据层叠关系展示画面)

transform

四个常用功能

位移 translate
缩放 scale
旋转 rotate
倾斜 skew

一般都需要配合transition过渡
inline元素不支持transform 需要先变成block

CSS 知识总结