Q20160803-CSDN博客

原创渐变/变换/过渡/动画

旋转变换 transform: rotate(30deg);原点 transform-origin:50px 50px。缩放变换 -ms-transform: scale(2,3)；原点 transform-origin:50px 50px。位移变换 transform: translate(50px,100px);斜切变换 transform: skew(30deg,20deg);

2023-10-16 17:57:14 21 1

1.父元素设置：display：flex;flex-direction:column-reverse 从下到上。flex-direction:row-reverse 从右到左。调整对齐方式：justify-content：flex-start。调整主轴方向：flex-direction:row 从左到右。3.控制元素视觉顺序（元素出生顺序，后出生的元素显示在前面）主轴元素的换行:flex-wrap:wrap。项目：弹性盒的直接子元素--自动块状化。2.父元素：display：flex。

2023-10-16 15:45:45 13 1

原创 BFC 区块格式化上下文

1.开启BFC，其子元素不会再产生margin塌陷问题（不会和他的子元素产生margin合并）3.开启BFC，自己不会被其他浮动元素所覆盖（不会与浮动元素重叠，会避开浮动元素排布）2.开启BFC，就算子元素浮动，自身高度也不会坍塌（高度计算不再无视浮动元素）5.兄弟关系的情况下，正常元素可能会被浮动元素覆盖（正常元素在浮动元素之后）9.column-span为all的元素（表格第一行横跨所有列）4.父子关系的情况下，父元素无视浮动元素会产生高度坍塌。3.当然，不同的BFC区域，渲染时也互不干扰。

2023-10-16 13:59:32 19 1

原创 AR（增项现实）可视化运维

最后是MR“混合现实”，也是最容易与AR“混淆”的，其实MR是AR的“升级版”，就是虚拟世界与现实世界无缝衔接，虚实融合。通过实时数据反馈和故障信息来快速定位和识别设备，进而加快维修和保养的速度，减少停机时间，提高运营效率，还可以提供工作指南、培训和操作手册，帮助员工更好地理解设备使用的风险和安全操作流程，从而减少意外事件发生。先说VR“虚拟现实”，也是我们最常提到的，就是利用电脑模拟出一个类似现实世界的虚拟空间，比如VR游戏，通过VR眼镜和手柄在游戏里互动，犹如身临其境。2.信息远离工作现场。

2023-10-13 11:59:31 35

原创浮动/高度坍塌/清除浮动

2.浮动元素在前，普通元素在后，浮动元素会对身后的普通元素产生影响，文字/内容会避开浮动盒子。普通元素在前（2），浮动元素在后（3），普通元素排布的时候，无视浮动元素，会进入浮动元素的下面（层级）。3.开启浮动之后，display属性都会变成block，宽度和高度都是由内容撑开的，默认情况;普通元素在前（1），浮动元素在后（2），浮动元素排布的时候，会避开普通元素。2.如果有定位元素，浮动元素的层级是没有定位元素的层级高。行元素（文字）在排列的时候，会避开浮动元素。4.浮动元素，普通元素在同一个包含块中，

2023-10-10 17:50:31 22 1

原创相对定位、绝对定位、固定定位、粘性定位

发生了位置变化后，元素当初自己的位置是不会释放的 position:relative;left:250px;b.元素脱离了文档流（开启了绝对定位），包含块就是第一个开启定位属性的祖先元素。1.开启绝对定位后，脱离文档流，定位元素 position:absolute;3.相对定位元素，层级会发生变化，如果出现了叠加，定位元素在上面。相对定位应用场景：1.位置的微调，2.配合绝对定位一起使用。2.相对于元素最初自己的位置，不释放元素原来的位置（灵魂）绝对定位是相对于包含块，固定定位是相对于视口的概念。

2023-10-10 17:06:30 25 1

原创居中css

父元素设置：display：flex;垂直居中：子元素设置 line-height:父元素高度px（在父元素中设置line-height:父元素高度px）垂直居中：父元素设置 line-height:父元素高度px，子元素设置vertical-align:middle。并设置父元素文字大小为0，图片是以文字基线对齐，父元素中font-size:0px。水平居中：父元素设置 text-align:center。水平居中：父元素设置 text-align:center。块元素居中（弹性盒）

2023-10-10 15:43:37 14 1

原创 margin合并问题，塌陷问题

父子关系，子元素设置了margin-top，看起来好像是被父元素“抢走了”行元素的margin问题，横向可用且不重合，纵向margin根本不起作用。行元素的padding，横向可以设置，纵向不能完美设置（能看见，没空间）3.父元素overflow：hidden 触发BFC。1.给父元素增加padding:1px。2.给父元素增加border。

2023-10-10 14:21:30 16 1

原创元素的显示模式

3.默认宽度撑满父元素，默认高度由内容撑开。1.页面中独占一行，不能与其他人共享。1.页面中不独占一行，可以与别人共享。3.默认宽度和高度，都是由内容撑开的。4.可以通过CSS来设置宽高。4.不能通过CSS来设置宽度。2.从左到右的，自动换行。行内元素（行级元素）

2023-10-10 13:14:58 11 1

原创浏览器渲染原理

比较源次序（权重值一致，后来者居上）a.样式声明（样式表-自定义/浏览器默认）比较重要性（自己>浏览器默认）比较特殊性（计算选择器权重值）3.渲染的时候，每一个元素所有css属性必须有值。c.如果可以，则从父元素那里继承。2.从父元素开始渲染，才是子元素。b.计算层叠（权重问题）1.解析 html树 css树。

2023-10-10 12:21:00 17 1

原创浏览器线程/进程

GUI渲染线程 html css。定时器触发线程 setTimeOut()事件触发线程事件队列事件循环。浏览器是一个多进程/多线程的应用程序。JS解析引擎线程(单线程) js。异步网络请求线程 AJAX。浏览器主进程（只有一个）GPU进程（3D渲染）浏览器渲染进程（内核）

2023-10-09 16:31:24 18 1

Q20160803的博客