column（多列布局）
定义和用法
css3选择器中提出了分栏的属性，其浏览器支持情况为：Internet Explorer 10 和 Opera 支持 column 属性，Firefox 支持替代的 -moz-column 属性，Safari 和 Chrome 支持替代的 -webkit-column 属性。即在书写样式时要加上相应的浏览器前缀。当需要在页面中展示大量文本时，如果每段的文本都很长，阅读起来就会非常麻烦，有可能读错行或读串行。提高阅读的舒适性。所谓多列布局指的就是您可以将文本内容分成多块，然后让这些块并列显示，类似于报纸、杂志那样的排版形式，如下图所示：图：多列布局演示CSS3 中提供了一系列实现多列布局的属性，如下表所示：
属性
说明
column-count
指定元素应该分为几列
column-fill
指定如何填充每个列
column-gap
指定列与列之间的间隙
column-rule
所有 column-rule-* 属性的简写形式
column-rule-color
指定列与列之间边框的颜色
column-rule-style
指定列与列之间边框的 ...
transform 2D 与 3D 转换
1. transform 属性
在 CSS 中，利用 transform 这个属性实现对元素进行 移动、旋转、缩放和倾斜；transform 属性的值可以是 none 或一个或多个 css 变换函数；transform 的值不是 none 时，元素会创建自己的层叠上下文。
1.1. transform 的 2D 变换函数
属性值
描述
实例
translate(x,y)
x，y 为长度单位,可以是 px，也可以是百分比%， x 表示元素在 x 轴上的 移动量 y 表示元素在 y 轴上的移动量，如果 y 值不写，则默认为 0，例如 translate(10px)表示 translate(10px,0)
transform:translate(100px,200px)
translateX(x)
x 为长度单位，可以是 px，也可以是百分比% 表示元素在平面 x 轴上的位移量
transform:translateX(300px)
translateY(y)
y 为长度单位，可以是 px，也可以是百分比% 表示元素在平面 Y 轴上的位移量
transform:trans ...
ioc/aop是什么模式 又是基于java的什么模式
IoC是什么
Ioc—Inversion of Control，即“控制反转”，不是什么技术，而是一种设计思想。在Java开发中，Ioc意味着将你设计好的对象交给容器控制，而不是传统的在你的对象内部直接控制。
AOP是什么？
定义：将与核心业务无关的代码独立的抽取出来，形成一个独立的组件，然后以横向交叉的方式应用到业务流程当中的过程被称为AOP。也可以说是一种编程范式。
作用：在不惊动原始设计的基础上为其进行功能增强，前面有技术就可以实现这样的功能即代理模式。
优点：代码复用性增强、代码易维护、使开发者更关注业务逻辑。
1. Spring的IOC和AOP机制
IOC是控制反转，AOP是面向切面编程。主要用到的是设计模式有工厂模式和代理模式。IOC就是典型的工厂模式，通过SessionFactory去注入实例。AOP就是典型的代理模式的体现。代理模式就是常用的java设计模式，他的特征是代理类与委托类有同样的接口，代理类主要负责为委托类预处理消息、过滤消息、把消息转发给委托类，以及事后处理消息等。代理类与委托类之间通常会存在关联关系，一个代理类的对象与一个委托类的对象关联，代理类 ...
xpath
简介
XPath 是一门在 XML 文档中查找信息的语言。XPath 用于在 XML 文档中通过元素和属性进行导航。
什么是 XPath?
XPath 使用路径表达式在 XML 文档中进行导航
XPath 包含一个标准函数库
XPath 是 XSLT 中的主要元素
XPath 是一个 W3C 标准
XPath 路径表达式
XPath 使用路径表达式来选取 XML 文档中的节点或者节点集。这些路径表达式和我们在常规的电脑文件系统中看到的表达式非常相似。
XPath 标准函数
XPath 含有超过 100 个内建的函数。这些函数用于字符串值、数值、日期和时间比较、节点和 QName 处理、序列处理、逻辑值等等。
XPath 节点
在 XPath 中，有七种类型的节点：元素、属性、文本、命名空间、处理指令、注释以及文档节点（或称为根节点）。
XPath 术语节点（Node）
在 XPath 中，有七种类型的节点：元素、属性、文本、命名空间、处理指令、注释以及文档（根）节点。XML 文档是被作为节点树来对待的。树的根被称为文档节点或者根节点。
123456789<?xml ...
transition过度
简介
过渡transition是个复合属性，它包括了transition-property、transition-duration、transition-timing-function、transition-delay这四个属性，配合这四个属性完成一个完整的过渡动画效果。
transition语法
缩写形式：transition: transition-property transition-duration transition-timing-function transition-delay;
用法
1234567891011121314151617181920212223242526272829303132333435363738394041<!DOCTYPE html><html lang="zh"> <head> <meta charset="utf-8"> <title>过渡属性</title> <style> ...
CSS伪类
伪类介绍用于已有元素处于某种状态时（滑动、点击等）为其添加对应的样式，这个状态是根据用户行为而动态变化的。
伪类选择器
动态伪类
作用
:link
链接没有被访问前的样式效果
:visited
链接被访问后的样式效果
:hover
鼠标悬停在元素上面时的样式效果
:active
点击元素时的样式效果，即按下鼠标左键时发生的样式
:focus
用于元素成为焦点时的样式效果，常用与表单元素
结构伪类
作用
:first-child
选择某个元素的第一个子元素
:last-child
选择某个元素的最后一个子元素
:nth-child()
选择某个当前元素的兄弟节点下的一个或多个特定的子元素
:nth-last-child()
选择某个当前元素的兄弟节点的一个或多个特定的子元素，从后往前数
:nth-of-type()
当前元素的同类型兄弟节点的第n个当前元素
:nth-last-of-type()
当前元素的同类型兄弟节点的第n个当前元素，从后往前数
:first-of-type
选择一个父级元素下第一个同类型子元素
: ...
flex布局
什么是flex布局
、Flex 是 Flexible Box 的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为flex布局。
当我们为父盒子设为flex布局以后 ，子元素的float、clear和vertical-align属性将失效。通过给父盒子添加flex属性，来控制子盒子的位置 和排列方式。
Flex 布局基本概念
采用flex布局的元素，称为flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，成为flex项目（flax item），简称“项目”。容器默认存在两根轴：水平的为主轴（main axis）和垂直的为交叉轴（cross axis）主轴的开始位置（与边框的交叉点）叫做main start,它的结束位置叫做main end，交叉轴的开始位置叫做cross start，结束位置叫做cross end单个项目单据主轴空间叫做main size，占据的交叉轴叫做cross size。
1234567891011121314151617181920.main{ height: 30 ...
JVM内存模型
引言 只要掌握了java的内存模型，内存空间分为哪些区域，才能更好地理解，java是如何创建对象以及如何分配对象的空间。对后续的jvm调优打下坚实的基础。而对于现在的互联网行业来说，高并发，高可用已经必不可少，而学好jvm调优，不仅能在企业工作当中针对高并发场景下的系统进行优化，在日常对系统的错误排查、系统的优化也起着至关重要的作用。
1.什么是jvm?
jvm是一种用于计算设备的规范，它是一个虚构出来的机器，是通过在实际的计算机上仿真模拟各种功能实现的。
jvm包含一套字节码指令集，一组寄存器，一个栈，一个垃圾回收堆和一个存储方法域。
JVM屏蔽了与具体操作系统平台相关的信息，使Java程序只需生成在Java虚拟机上运行的目标代码（字节码）,就可以在多种平台上不加修改地运行。
JVM在执行字节码时，实际上最终还是把字节码解释成具体平台上的机器指令执行。
2. jdk、jre、jvm是什么关系？
JRE(Java Runtime Environment)，也就是java平台。所有的java程序都要在JRE环境下才能运行。
JDK(Java Developm ...
Lombok详解
Lombok是一种Java库，通过在编译时自动生成代码，简化了Java类的开发过程。它提供了一组注解，可以用于自动生成Java类的常见方法（如Getter、Setter、Constructor等），从而减少了样板代码的编写。
快捷键使用： idea 查找父类所有方法快捷键 ctrl+F12 ，查询父类所有方法的快捷键 ctrl+o
一、引入Lombok依赖
首先，需要在项目的构建文件（如Maven的pom.xml或Gradle的build.gradle）中引入Lombok的依赖。
普通maven项目Lombok依赖为：123456<dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <version>1.18.22</version> <scope>provided</scope></dependency>
SpringBoot项目Lombo ...
浮动
浮动的特点
一旦元素设置了浮动，元素就会脱离文档流，它原来在文档流得位置， 就会被它下面的元素挤上来
如果浮动元素它上面的元素不浮动，则浮动元素无法上移
浮动元素也不会超过它前面浮动元素
浮动元素不会超出它的父元素
当浮动元素遇到了文字，浮动元素不会覆盖文字， 文字会环绕在浮动元素的周围，从而有文字环绕图片的效果。 这也是设置浮动最开始的想要的效果。
当元素设置浮动以后，会完全脱离文档流，元素脱离文档流后， 元素原来在文档流得特点，就都没有了，也就是说不再区分块，行内，行内块。
什么是高度塌陷？
一般情况下，我们是不给父元素设置高度的， 让其内部的子元素自动撑开父元素的高度， 这样父元素的高度就可以随着子元素高度的变化而变化 ,.然而子元素若设置浮动，就会脱离文档流，也就撑不开父元素的高度从而导致父元素的高度丢失，影响整个页面布局，这就叫高度塌陷
高度塌陷的解决方案解决方案一、
给父元素设置自己的高度，但不推荐使用。
123456789101112131415161718192021222324252627282930313233<!DOCTYPE html>& ...