CSS小结

TL;DR

防止margin合并的方法：

/* 防止同级元素发生margin合并： */
.chiled{
    display:inline-block;
}

/* 防止子元素和父级元素发生margin合并 */
.parent{
  /* 方法一：父级元素添加border（top或bottom） */
    border-top:1px solid red;
  /* 方法二：父级元素添加padding */
    padding:1px;
  /* 方法三：父级元素添加overflow:hidden; */
    overflow:hidden;
}

float 布局

/*避免元素脱离文档流。使用float布局时，此选择器必须写*/
.clearfix{
    content:'';
 	display:block;
    clear:both;
}

/*设置float布局*/
.floatelement{
    float:left;
}

flex控制元素水平垂直居中

.container{
  display:flex;
  justify-content:center;
  align-items:center;
  height: 100vh;
}

CSS动画

transition可以为一个元素在不同状态之间切换的时候定义不同的过渡动画效果。比如在不同的伪元素之间切换，像是 :hover，:active 或者通过 JavaScript 实现的状态变化。

伪代码举例：

.heart{
     transition:all 1s;
     /* transition定义:hover的过度动画为1s内完成全部动作 */
}

.heart:hover{
    transform: scale(1.2);
    /* 缩放或扩大 */
    /* transform: translate(50px); */
    /* 位移*/
    /* transform: rotate(-135deg); */
    /* 旋转*/
}

animation定义了元素在关键帧（@keyframes）之间变化的参数，间接控制动画效果。

伪代码举例：

.heart{
    animation:.5s heart infinite alternate;
    / * animation定义heart关键帧之间变化的动画效果在0.5s以内完成（周期0.5s），infinite表示动画效果无限次循环，alternate表示在关键帧之间循环往复 */
}

@keyframes heart{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.2)
    }
    100%{
        transform: scale(1.5);
    }
}

/* @keyframes heart{
    from{	
        transform: scale(1);
    }
    to{
        transform: scale(1.5);
    }
} */
/* from先当于0%，to相当于100% */

项目

用纯CSS制作红心（transition配合:hover）

源码：https://github.com/yichang8421/css-demo-HeartSheep/blob/main/index.html

用纯CSS制作跳动的心（animation）

源码：https://github.com/yichang8421/BeatingHeart

浏览器渲染过程

参考：渲染页面：浏览器的工作原理

解析：

1. 构建DOM树：处理HTML标记并构造DOM树。
2. 构建CSSOM树：处理CSS并构建CSSOM树。

渲染：

3. 构建Render树：将DOM和CSSOM组合成一个Render树。

4. Layout布局：在渲染树上运行布局以计算每个节点的几何体。例如，文档流、盒模型、计算大小和位置

5. Paint：将各个节点边框颜色、文字颜色、阴影等绘制到屏幕上。

6. Compose合成：根据层叠关系展示画面。当文档的各个部分以不同的层绘制，相互重叠时，必须进行合成，以确保它们以正确的顺序绘制到屏幕上，并正确显示内容。

使用js更新样式时，浏览器有三种更新方式：

CSS动画优化总结

参考：https://developers.google.com/web/fundamentals/performance/rendering/optimize-javascript-execution

​ JS优化：setTimeout/setInterval => requestAnimationFrame

CSS优化：left/right/top/bottom => transform:translate

文档流

inline 从左到右，超过部分会分割换行。宽度由其内inline元素的宽度之和决定。高度由行高间接确定，一般设置的只是inline的可视高度。

block 从上到小，独占一行。宽度为auto。高度为其内文档流元素的高度之和决定。

（经验：**尽量不要写width: 100%**）

inline-block 从左到右，会换行但是元素成块不会分割跨行。

文档流超出边框时overflow，一般只使用overflew: auto;

overflew: visible；

overflew: hidden;

overflew: auto;

overflew: scroll; 横纵向都有滚动条，这个值可以完全被auto替代。

脱离文档流

元素脱离文档流的方法：

/*方法一：position设为absolute或fixed*/
position: absolute;
/*方法二：*/
float: left;

盒模型

盒模型是网页布局的基础，它制定了元素如何在页面中显示。

• css中盒模型按boder-sizing的不同分为content-box和border-box。

• 二者的区别是content-box宽度只包含content（内容）；而border-box宽度包含border（边框）、padding（内边距）、content（内容）。

• 当没有指定border和padding值时，二者是相同的。

实际开发中使用border-box更多。

margin合并

元素设置margin值时可能会出现合并问题：

• margin合并问题只出现在两个元素垂直方向上同时设置margin时，水平方向同时设置margin不会出现此问题。

• 当垂直方向上兄弟元素同时设置上下margin时，则兄弟元素的上下margin会重合。

• 当父级元素和孩子元素同时设置上下margin时，则父级元素会和其第一个孩子元素以及最后一个孩子元素发生margin重合。

防止margin合并的方法：

/* 防止同级元素发生margin合并： */
.chiled{
    display:inline-block;
}

/* 防止子元素和父级元素发生margin合并 */
.parent{
  /* 方法一：父级元素添加border（top或bottom） */
    border-top:1px solid red;
  /* 方法二：父级元素添加padding */
    padding:1px;
  /* 方法三：父级元素添加overflow:hidden; */
    overflow:hidden;
}