CSS笔记 | 昊宇’s Blog

type

status

date

slug

summary

CSS

cascading style sheet

层叠式样式表

样式语法:

选择器 { 属性名: 属性值; }

at语法

@charset "UTF-8";

@import url(2.css);

@media (min-width:100px) and (max-width: 200px){

样式语法

}

书写g

引用：

行内/内部/外部

内联样式 > 内部样式表 > 外部样式表

浏览器渲染原理

步骤

根据HTML构建一个HTML树🌲(DOM)

根据CSS构建一个CSSDOM树（CSSDOM）

将两棵树合并成一颗渲染树(render tree)

Layout 布局（文档流，盒模型，计算大小位置）

paint绘制（把边框颜色文字颜色阴影等画出来）

Compose 合成（根据层叠关系来展示画面）

渲染优化google文档

CSS动画

transition

transform + transition

transform属性可以跟：

只能转换由盒模型定位的元素。根据经验，如果元素具有display: block，则由盒模型定位元素。

位移translate

缩放scale

旋转rotate

倾斜skew

transition CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。

注意：并非所有属性都能过渡

display:none到blcok就不行

需要用 visibility:hidden => visible

跳动的心transition版

animation

keyframe 语法

animation语法

animation:时长|过渡方式|延迟|次数|方式|填充模式|是否暂停|动画名

跳动的心animation版

选择器

伪类选择器(伪元素）

伪类伪元素

啥是伪类？

CSS伪类是用来添加一些选择器的特殊效果。伪类是基于元素的特征而不是他们的id、class、属性或者内容。由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式，所以它是基于文档之外的抽象。

:focus 聚焦效果

:hover 鼠标移上去的效果

:disabled 禁用的效果

:last-child :first-child :nth-child首个末个子元素选择器

table tr:nth-child tr 第几行 td 第几列 odd even 最常见

啥是伪元素？

伪元素是创造DOM之外的对象伪元素可以为一些在源文档中不存在的内容分配样式。伪元素的内容实际上和普通DOM元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

并列选择器

派生/父子选择器

标签+标签

标签+class 反之亦然

标签 + id等等

如何算权重

256进制

数学正无穷 = 正无穷+1 计算机正无穷 < 正无穷 +1

选择器之间优先级

文档流

从左到右从上到下

行内元素从左到右直到占满一行

块级元素每个都占一行

内联元素从左到右

•流动方向

inline 元素从左到右，到达最右边才会换行

block 元素从上到下，每一个都另起一行

inline-block 也是从左到右

宽度

inline 宽度为内部 inline 元素的和，不能用 width 指定

block 默认自动计算宽度，可用 width 指定

inline-block 结合前两者特点，可用 width

高度

inline 高度由 line-height 间接确定，跟 height 无关

block 高度由内部文档流元素决定，可以设 height

inline-block 跟 block 类似，可以设置 height

脱离文档流

float

position: absolute / fixed

盒模型

分别是

content-box 内容盒 - 内容就是盒子的边界

border-box 边框盒 - 边框才是盒子的边界（比较好用）

公式

content-box width = 内容宽度

border-box width = 内容宽度 + padding + border

Margin 合并

哪些情况会合并

父子 margin 合并

兄弟 margin 合并

如何阻止合并

父子合并用 padding / border 挡住

父子合并用 overflow: hidden 挡住

父子合并用 display: flex，不知道为什么

兄弟合并是符合预期的

兄弟合并可以用 inline-block 消除

总之要一条一条死记

而且 CSS 的属性逐年增多，每年都可能有新的

CSS中需要注意的属性

min-width/height max..

overflow

border

font

position

static

absolute

relative

fixed

sticky

z-index

阴影

其他

统一样式(global.css)

浮动

清除浮动

表格

聊天气泡

浮动 + 伪元素 + 画三角形父元素相对定位 + 子元素绝对定位

BFC

浏览器

组成成分

shell	内核
Google chrome	blink（自己搞的）
Safari	webkit
IE	trident
firefox	gecko

CSS