Kinghiee
Kinghiee

父元素中有transform, perspective 或 filter时，fixed子元素如何呈现

前几天做项目的时候，因为对position：fixed属性有认识不全面，然后就导致做弹出层的时候弹出层不能覆盖整个浏览器可视窗口 。

之前认为设置fixed的元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。
但fixed解释还有一部分就是，当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。

今天就场景复现一下。

一、父元素无transform, perspective 或 filter 时，弹出层呈现

效果图
父元素中有transform, perspective 或 filter时，fixed子元素如何呈现_第1张图片
父元素中有transform, perspective 或 filter时，fixed子元素如何呈现_第2张图片
父元素没有transform, perspective 或 filter 时，弹出层覆盖整个浏览器视口

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			html,body{
     
				padding: 0;
				margin: 0;
				height: 100%;
			}
			.main{
     
				height: 100%;
				display: flex;
				/* background-color: darkgoldenrod; */
			}
			/*左边样式*/
			.main > .left{
     
				height: 100%;
				border: 1px solid firebrick;
				box-sizing: border-box;
				background-color: blueviolet;
				flex: 1 1 auto;
				
			}
			/*弹出层样式*/
			.pop-modal-content{
     
			    position: fixed;
			    width: 100%;
			    height: 100%;
			    left: 0;
			    top: 0;
			    background-color: rgba(0,0,0,0.40);
			    display: none;
			}
			.pop-container{
     
			    position: absolute;
			    left: 0;
			    right: 0;
			    top: 0;
			    bottom: 0;
			    margin: auto;
			    width: 460px;
			    height: 290px;
			    padding: 56.1px 87px 48px 88px;
			    background: #FFFFFF;
			    box-shadow: 0 8px 64px 0 rgba(0,0,0,0.15);
			}
			.close{
     
			    line-height: 14px;
			    width: 14px;
			    text-align: center;
			    position: absolute;
			    right: 25px;
			    top: 25px;
			    color: #999999;
			    cursor: pointer;
			  }
		</style>
	</head>
	<body>
		<div class="main">
			<div class="left">
				<button id="test1">弹出层</button>
				  <div class="pop-modal-content">
				    <!--弹出层-->
				    <div class="pop-container">
				      <div class="close">
				        ×
				      </div>
				      <div class="pop-content">
				            12346
				      </div>
				    </div>
				  </div>
			</div>
		</div>
	</body>
	<script>
	     /*test1开启弹出层事件*/
		 function test1(){
     
			 document.getElementsByClassName("pop-modal-content")[0].style="display:block;";
		 }
		/*关闭弹出层事件*/
		function close(){
     
			document.getElementsByClassName("pop-modal-content")[0].style="display:none;";
		}
		document.getElementById("test1").addEventListener("click",test1);
		document.getElementsByClassName("close")[0].addEventListener("click",close);
		
	</script>
</html>

二、父元素有transform, perspective 或 filter 时，弹出层呈现

效果图
父元素中有transform, perspective 或 filter时，fixed子元素如何呈现_第3张图片
父元素中有transform, perspective 或 filter时，fixed子元素如何呈现_第4张图片
可以发现视口改为了当前的父元素，这样就不会占据整个浏览器。

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			html,body{
     
				padding: 0;
				margin: 0;
				height: 100%;
			}
			.main{
     
				height: 100%;
				display: flex;
				/* background-color: darkgoldenrod; */
			}
			/*左边样式*/
			.main > .left{
     
				height: 100%;
				border: 1px solid firebrick;
				box-sizing: border-box;
				background-color: blueviolet;
				flex: 1 1 auto;
				
			}
			/*右边样式*/
			.main > .right{
     
				height: 100%;
				border: 1px solid chartreuse;
				box-sizing: border-box;
				background-color: #B22222;
				flex: 1 1 auto;
				position: fixed;
				right: 0;
				width: 600px;
				transform: translateX(10px);
				/* perspective:150;
				-webkit-perspective:150; /* Safari and Chrome */ */
				/* -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
				    filter: grayscale(100%); */
			}
			/*弹出层样式*/
			.pop-modal-content{
     
			    position: fixed;
			    width: 100%;
			    height: 100%;
			    left: 0;
			    top: 0;
			    background-color: rgba(0,0,0,0.40);
			    display: none;
			}
			.pop-container{
     
			    position: absolute;
			    left: 0;
			    right: 0;
			    top: 0;
			    bottom: 0;
			    margin: auto;
			    width: 460px;
			    height: 290px;
			    padding: 56.1px 87px 48px 88px;
			    background: #FFFFFF;
			    box-shadow: 0 8px 64px 0 rgba(0,0,0,0.15);
			}
			.close{
     
			    line-height: 14px;
			    width: 14px;
			    text-align: center;
			    position: absolute;
			    right: 25px;
			    top: 25px;
			    color: #999999;
			    cursor: pointer;
			  }
		</style>
	</head>
	<body>
		<div class="main">
			<div class="left">
				<button id="test1">弹出层</button>
				  <div class="pop-modal-content">
				    <!--弹出层-->
				    <div class="pop-container">
				      <div class="close">
				        ×
				      </div>
				      <div class="pop-content">
				            12346
				      </div>
				    </div>
				  </div>
			</div>
			<div class="right">
				<button id="test2">父元素有transform属性的弹出层</button>
				  <div class="pop-modal-content" id="pop2">
				    <!--弹出层-->
				  <div class="pop-container">
				      <div class="close">
				        ×
				      </div>
				      <div class="pop-content">
				            pop2
				      </div>
				    </div>
				  </div>
			</div>
		</div>
	</body>
	<script>
	     /*test1开启弹出层事件*/
		 function test1(){
     
			 document.getElementsByClassName("pop-modal-content")[0].style="display:block;";
		 }
		/*关闭弹出层事件*/
		function close(){
     
			document.getElementsByClassName("pop-modal-content")[0].style="display:none;";
		}
		document.getElementById("test1").addEventListener("click",test1);
		document.getElementsByClassName("close")[0].addEventListener("click",close);
		
		
		/*test2*/
		function test2(){
     
			 document.getElementById("pop2").style="display:block;";
		 }
		/*关闭弹出层事件*/
		function close2(){
     
			document.getElementById("pop2").style="display:none;";
		}
		document.getElementById("test2").addEventListener("click",test2);
		document.getElementsByClassName("close")[1].addEventListener("click",close2);
	</script>
</html>

你可能感兴趣的:(css,fixed,transform,perspective,filter)

  • 精通Canvas：15款时钟特效代码实现指南 烟幕缭绕
    本文还有配套的精品资源，点击获取简介：HTML5的Canvas是一个用于绘制矢量图形的API，通过JavaScript实现动态效果。本项目集合了15种不同的时钟特效代码，帮助开发者通过学习绘制圆形、线条、时间更新、旋转、颜色样式设置及动画效果等概念，深化对Canvas的理解和应用。项目中的CSS文件负责时钟的样式设定，而JS文件则包含实现各种特效的逻辑，通过不同的函数或类处理时间更新和动画绘制，提
  • 霍夫变换（Hough Transform）算法原来详解和纯C++代码实现以及OpenCV中的使用示例 点云SLAM 算法图形图像处理算法opencv图像处理与计算机视觉算法直线提取检测目标检测霍夫变换算法
    霍夫变换（HoughTransform）是一种经典的图像处理与计算机视觉算法，广泛用于检测图像中的几何形状，例如直线、圆、椭圆等。其核心思想是将图像空间中的“点”映射到参数空间中的“曲线”，从而将形状检测问题转化为参数空间中的峰值检测问题。一、霍夫变换基本思想输入：边缘图像（如经过Canny边缘检测）输出：一组满足几何模型的形状（如直线、圆）关键思想：图像空间中的一个点→参数空间中的一个曲线参数空
  • kube-scheduler 抢占机制 分享放大价值 kubernetes源码分析kuberneteskube-scheduler抢占
    当pod调度失败后，会在PostFilter扩展点执行抢占流程，下面分析相关的代码实现抢占接口//PodNominatorabstractsoperationstomaintainnominatedPods.typePodNominatorinterface{//将pod加入抢占成功的node中AddNominatedPod(pod*PodInfo,nodeNamestring)//将pod从no
  • LLM中 最后一个词语的表征（隐藏状态）通常会融合前面所有词语的信息吗？ ZhangJiQun&MXP 教学2024大模型以及算力2021AIpython机器学习算法深度学习人工智能
    LLM中最后一个词语的表征（隐藏状态）通常会融合前面所有词语的信息吗？在大语言模型（LLM）中，最后一个词语的表征（隐藏状态）通常会融合前面所有词语的信息，这是由LLM的核心架构（以Transformer为基础）决定的，具体可以从以下角度理解：1.核心机制：自注意力（Self-Attention）的作用现代LLM（如GPT系列、Qwen等）均基于Transformer架构，其核心是自注意力机制。在
  • GoView 强势入驻 GitCode：拖拽低代码，打造高颜值数据大屏 GitCode 代码君 gitcode低代码开源
    信息可视化时代，数字大屏日益成为展示核心KPI、运营状态、监控预警的主流形式。然而，用传统方式开发一个定制化数字大屏需要解决多少问题？1.繁复的数据源集成，各种不同的协议和格式……2.让人晕头转向的可视化逻辑，调动艰难的样式、布局、动画，和往往难以统一的风格3.牵一发而动全身的代码结构，就想换个主题色结果开启的全局CSS大冒险……现在，一个开源项目即可搞定上述问题——拖拽式低代码数字可视化平台Go
  • LLM的表征做减法的是什么，自然语言是一个矩阵，怎么进行减法的 ZhangJiQun&MXP 教学2024大模型以及算力2021AIpython计算机视觉人工智能机器学习算法深度学习
    LLM的表征做减法的是什么，自然语言是一个矩阵，怎么进行减法的有个假设：就是最后一个词语融合了前面词语的信息减法操作主要用于提取模型内部表征中的"诚实性"概念向量。具体来说，这是通过对比诚实和不诚实场景下的模型隐藏状态实现的。importtorchfromtransformersimportAutoModelForCausalLM,AutoTokenizer,AutoConfigimportnum
  • Vue.js 过渡 & 动画 lsx202406 开发语言
    Vue.js过渡&动画引言在Web开发中，过渡与动画是提升用户体验的关键元素。Vue.js作为一款流行的前端框架，提供了强大的过渡与动画功能，使得开发者能够轻松实现丰富的交互效果。本文将深入探讨Vue.js中的过渡与动画，包括其原理、应用场景以及实现方法。一、Vue.js过渡原理Vue.js过渡是利用CSS3的transition属性实现的。当Vue.js侦测到数据变化时，会自动触发过渡效果。过渡
  • Vue3 tailwindcss
    1、安装tailwindcsspnpmi-Dtailwindcsspostcssautoprefixer#yarnadd-Dtailwindcsspostcssautoprefixer#npmi-Dtailwindcsspostcssautoprefixer2、创建TailwindCSS配置文件npxtailwindcssinit-ptailwind.config.js/**@type{impor
  • css遗忘的知识2(grid布局，&父类选择器与:has() 讲解) 不断努力的根号七 csscss前端javascript
    ---grid布局1.基础Grid布局定义gird布局和行宽.container{display:grid;grid-template-columns:100px200px300px;/*三列，宽度分别为100px,200px,300px*/grid-template-rows:100px200px;/*两行，高度分别为100px,200px*/}常用单位fr(fractionalunit)：可用
  • 深度学习图像分类数据集—桃子识别分类 AI街潜水的八角 深度学习图像数据集深度学习分类人工智能
    该数据集为图像分类数据集，适用于ResNet、VGG等卷积神经网络，SENet、CBAM等注意力机制相关算法，VisionTransformer等Transformer相关算法。数据集信息介绍：桃子识别分类：['B1','M2','R0','S3']训练数据集总共有6637张图片，每个文件夹单独放一种数据各子文件夹图片统计:·B1:1601张图片·M2:1800张图片·R0:1601张图片·S3:
  • Webpack5 多页面实践
    特性维度单页面应用-SPA多页面统一目录-MPA多页面单独部署-MPA入口数量单个，只有一个HTML文件多个，多个HTML文件多个，多个HTML文件，分别打包输出资源输出结构所有资源输出到统一目录（如js/,css/）所有页面的资源共用js/,css/等目录每页资源放在各自目录（如index/js/,index/css/）公共资源复用高：依赖打入主包或懒加载chunk，资源完全共享中：可通过spl
  • 【AI大模型】LLM模型架构深度解析：BERT vs. GPT vs. T5 我爱一条柴ya 学习AI记录ai人工智能AI编程python
    引言Transformer架构的诞生（Vaswanietal.,2017）彻底改变了自然语言处理（NLP）。在其基础上，BERT、GPT和T5分别代表了三种不同的模型范式，主导了预训练语言模型的演进。理解它们的差异是LLM开发和学习的基石。一、核心架构对比特性BERT(BidirectionalEncoder)GPT(GenerativePre-trainedTransformer)T5(Text
  • Ollama平台里最流行的embedding模型： nomic-embed-text 模型介绍和实践 skywalk8163 人工智能embedding人工智能服务器
    nomic-embed-text模型介绍nomic-embed-text是一个基于SentenceTransformers库的句子嵌入模型，专门用于特征提取和句子相似度计算。该模型在多个任务上表现出色，特别是在分类、检索和聚类任务中。其核心优势在于能够生成高质量的句子嵌入，这些嵌入在语义上非常接近，从而在相似度计算和分类任务中表现优异。之所以选用这个模型，是因为在Ollama网站查找这个模型，发现
  • flink自定义函数 逆风飞翔的小叔 flink入门到精通flink大数据bigdata
    前言在很多情况下，尽管flink提供了丰富的转换算子API可供开发者对数据进行各自处理，比如map()，filter()等，但在实际使用的时候仍然不能满足所有的场景，这时候，就需要开发人员基于常用的转换算子的基础上，做一些自定义函数的处理1、来看一个常用的操作原始待读取的文件核心代码importorg.apache.flink.api.common.functions.FilterFunction
  • 配置Nginx实现静态资源访问 Gappsong874 nginx运维网络安全web安全安全架构运维开发
    Nginx是一款高性能的HTTP和反向代理服务器，常用于处理静态资源请求。通过合理配置，可以显著提升静态资源的访问速度和服务器性能。以下内容将详细介绍如何配置Nginx以实现静态资源的高效访问。基本静态资源配置静态资源通常包括HTML文件、CSS样式表、JavaScript脚本、图片、视频等。Nginx通过简单的配置即可处理这些请求。在Nginx的配置文件中，通常位于/etc/nginx/ngin
  • JQ+vue实现图片拼接（无限套娃版） 小周同学: jsvuejqueryvue.jsjavascriptjquery
    css样式/*css初始化*/*{margin:0;padding:0;}/*去掉li的小圆点*/li{list-style:none;}/*去掉a的下划线*/a{text-decoration:none;}/*搜索框去除边框*/input,button,select{border:0;/*设置背景颜色为透明*/background-color:transparent;/*去掉外轮廓*/outli
  • LLamaFactory 微调Qwen-VL-3B时报错TypeError: argument of type ‘NoneType‘ is not iterable 闲云野鹤01 大模型linux视觉检测transformer
    LLamaFactory微调Qwen-VL-3B时报错如下：TypeError:argumentoftype'NoneType'isnotiterable修改方式如下所示：进入\src\llamafactory文件夹，打开cli.py文件在文件头添加如下语句fromtransformersimportmodeling_utilsifnothasattr(modeling_utils,"ALL_PA
  • （一）OpenCV——噪声去除（降噪）
    高斯滤波器（针对高斯噪声）高斯噪声是指它的概率密度函数服从高斯分布（即正态分布）的一类噪声。常见的高斯噪声包括起伏噪声、宇宙噪声、热噪声和散粒噪声等等。高斯滤波(Gaussianfilter)包含许多种，包括低通、带通和高通等，我们通常图像上说的高斯滤波，指的是高斯模糊(GaussianBlur)，是一种高斯低通滤波，其过滤调图像高频成分（图像细节部分），保留图像低频成分（图像平滑区域），所以对图
  • 从RNN循环神经网络到Transformer注意力机制：解析神经网络架构的华丽蜕变 熊猫钓鱼>_> 神经网络rnntransformer
    1.引言在自然语言处理和序列建模领域，神经网络架构经历了显著的演变。从早期的循环神经网络（RNN）到现代的Transformer架构，这一演变代表了深度学习方法在处理序列数据方面的重大进步。本文将深入比较这两种架构，分析它们的工作原理、优缺点，并通过实验结果展示它们在实际应用中的性能差异。2.循环神经网络（RNN）2.1基本原理循环神经网络是专门为处理序列数据而设计的神经网络架构。RNN的核心思想
  • 前端开发常见问题
    技术文章大纲性能优化问题页面加载速度慢的常见原因及解决方案渲染阻塞资源的处理方法图片与媒体文件优化策略懒加载与代码分割的实现方式浏览器兼容性问题不同浏览器对CSS特性的支持差异JavaScriptAPI的兼容性处理方案Polyfill的使用场景与实现方法自动化测试工具在兼容性测试中的应用响应式设计挑战移动端与桌面端布局适配问题媒体查询的最佳实践方案视口单位与相对单位的正确使用高DPI屏幕的图像处理
  • FFmpeg滤镜相关的重要结构体 melonbo FFMPEGffmpeg
    核心结构体概览FFmpeg滤镜系统由多个关键结构体组成，构成了完整的滤镜处理框架。以下是滤镜系统中最重要的结构体及其相互关系：AVFilterGraph┬─AVFilterContext┬─AVFilter│├─AVFilterLink│└─AVFilterPad└─AVFilterInOut详细结构体分析1.AVFilterGraph（滤镜图容器）功能：管理整个滤镜图的所有组件和状态重要成员：t
  • CSS 中px、em、rem、%、vw、vh、vm、rpx、fr 介绍和区别对比 慧一居士 前端css3css前端
    CSS单位详解：px、em、rem、%、vw、vh、vmin/vmax、rpx、fr以下是各单位的定义、特点、区别及使用场景对比：1.px（像素）定义：绝对单位，表示屏幕上的一个物理像素点。特点：固定尺寸，不受其他因素影响。在高分辨率屏幕上可能显示过小（需配合viewport缩放）。场景：边框、固定尺寸元素（如图标）。示例：.box{width:200px;}/*固定宽度200像素*/2.em（相
  • CSS和CSS3区别对比
    CSS（层叠样式表）与CSS3（CSS的第三个版本）的区别主要体现在功能扩展、语法特性以及应用场景等方面。以下是两者的核心对比：一、核心概念与版本关系CSS：是基础样式表语言，用于分离网页内容与样式，最初发布于1996年（CSS1），后续补充了CSS2（1998年），但功能较为基础，主要关注简单的布局和样式。CSS3：是CSS的最新版本（2005年起制定），向下兼容CSS2，并引入模块化设计（如F
  • wireshark分析以太网帧结构_TCP/IP详解卷1 - wireshark抓包分析 家庭影院
    在初学TCP/IP协议时，会觉得协议是一种很抽象的东西，通过wireshark抓包分析各种协议，可以让抽象变得具体。wireshark抓包wireshar抓包的教程很多，这里就不再重复。参考下图：wireshark抓包wireshark快速get对应filter我们知道wireshark抓到的内容很多，要过滤我们需要的信息就需要设置对应的filter，例如：想要过滤ICMP协议相关的log，直接在
  • 目前主流图像分类模型的详细对比分析 @comefly 闲聊linux运维服务器
    以下是目前主流图像分类模型的详细对比分析，结合性能、架构特点及应用场景进行整理：一、主流模型架构分类与定量对比模型名称架构类型核心特点ImageNetTop-1准确率参数量（百万）计算效率典型应用场景ResNetCNN残差连接解决梯度消失，支持超深网络（如ResNet-152）76.1%25.6中等通用分类、目标检测ViTTransformer将图像分割为patches，用标准Transforme
  • 每天一个前端小知识 Day 28 - Web Workers / 多线程模型在前端中的应用实践 蓝婷儿 前端面试前端
    WebWorkers/多线程模型在前端中的应用实践一、为什么前端需要多线程？单线程JS的瓶颈：浏览器主线程不仅负责执行JS，还要负责：UI渲染（DOM/CSS）用户事件处理（点击、输入）一旦JS执行耗时任务（如大数组处理、加密运算），会阻塞页面响应多线程的意义：✅把计算密集型或IO密集型任务移出主线程，防止“卡死”✅实现离线计算、并发执行、后台数据同步✅提升用户体验、增强系统鲁棒性二、前端中的“线
  • 【深度学习实战】当前三个最佳图像分类模型的代码详解 云博士的AI课堂 大模型技术开发与实践哈佛博后带你玩转机器学习深度学习深度学习人工智能分类模型机器学习TransformerEfficientNetConvNeXt
    下面给出三个在当前图像分类任务中精度表现突出的模型示例，分别基于SwinTransformer、EfficientNet与ConvNeXt。每个模型均包含：训练代码（使用PyTorch）从预训练权重开始微调（也可注释掉预训练选项，从头训练）数据集目录结构：└──dataset_root├──buy#第一类图像└──nobuy#第二类图像随机拆分：80%训练，20%验证每个Epoch输出一次loss
  • 这次是讲解一下条件函数的用法，还有一个简单的示例 言青缘 mysql数据库redis
    我是以普遍的朋友圈做的示例这个可以实现隐藏和显示朋友圈的评论现在我吧具体用法说一下首先要先把页面的大概写出来比如我这个名字我的言论2025-4-30{{is?'展开':'隐藏'}}评论好好好真好太好了然后这是css代码.post-container{width:100%;max-width:600px;margin:0auto;padding:16px;background-color:#fff;
  • vue基础 知还215 vue.js前端javascript
    在vue项目下的src->App.vue中有三个模板1.script是写js代码的地方2.template是写html的地方3.style是写css的地方npmi的作用是加载需要的依赖包
  • PCL | 体素滤波器pcl::VoxelGrid＜＞ Nines～ ROS算法ROSSLAMPCLC++
    文章目录概述一、定义介绍二、功能作用三、使用示例源码：解释：概述  本节详细介绍pcl::VoxelGrid是PointCloudLibrary(PCL)中的一个常用滤波器，用于对点云数据进行体素栅格化（VoxelGridFiltering）。它将点云分割成一个个体素（voxel），并使用这些体素中的点计算出一个代表性的点，从而减少点云的数量，实现降采样的效果。二、功能作用降采样:在处理大规模点云
  • [星球大战]阿纳金的背叛 comsci
          本来杰迪圣殿的长老是不同意让阿纳金接受训练的.........     但是由于政治原因,长老会妥协了...这给邪恶的力量带来了机会     所以......现代的地球联邦接受了这个教训...绝对不让某些年轻人进入学院    
  • 看懂它，你就可以任性的玩耍了！ aijuans JavaScript
              javascript作为前端开发的标配技能，如果不掌握好它的三大特点：1.原型 2.作用域 3. 闭包 ,又怎么可以说你学好了这门语言呢？如果标配的技能都没有撑握好，怎么可以任性的玩耍呢？怎么验证自己学好了以上三个基本点呢，我找到一段不错的代码，稍加改动，如果能够读懂它，那么你就可以任性了。 function jClass(b
  • Java常用工具包 Jodd Kai_Ge javajodd
    Jodd 是一个开源的 Java 工具集， 包含一些实用的工具类和小型框架。简单，却很强大！ 写道 Jodd = Tools + IoC + MVC + DB + AOP + TX + JSON + HTML < 1.5 Mb Jodd 被分成众多模块，按需选择，其中 工具类模块有： jodd-core    &nb
  • SpringMvc下载 120153216 springMVC
    @RequestMapping(value = WebUrlConstant.DOWNLOAD) public void download(HttpServletRequest request,HttpServletResponse response,String fileName) { OutputStream os = null; InputStream is = null;
  • Python 标准异常总结 2002wmj python
    Python标准异常总结 AssertionError 断言语句（assert）失败 AttributeError 尝试访问未知的对象属性 EOFError 用户输入文件末尾标志EOF（Ctrl+d） FloatingPointError 浮点计算错误 GeneratorExit generator.close()方法被调用的时候 ImportError 导入模块失
  • SQL函数返回临时表结构的数据用于查询 357029540 SQL Server
    这两天在做一个查询的SQL，这个SQL的一个条件是通过游标实现另外两张表查询出一个多条数据，这些数据都是INT类型，然后用IN条件进行查询，并且查询这两张表需要通过外部传入参数才能查询出所需数据，于是想到了用SQL函数返回值，并且也这样做了，由于是返回多条数据，所以把查询出来的INT类型值都拼接为了字符串，这时就遇到问题了，在查询SQL中因为条件是INT值，SQL函数的CAST和CONVERST都
  • java 时间格式化 | 比较大小| 时区 个人笔记 7454103 javaeclipsetomcatcMyEclipse
    个人总结！ 不当之处多多包含！ 引用 1.0 如何设置 tomcat 的时区：          位置：(catalina.bat---JAVA_OPTS  下面加上)          set JAVA_OPT
  • 时间获取Clander的用法 adminjun Clander时间
    /**    * 得到几天前的时间    * @param d    * @param day    * @return    */   public static Date getDateBefore(Date d,int day){    Calend
  • JVM初探与设置 aijuans java
    JVM是Java Virtual Machine（Java虚拟机）的缩写，JVM是一种用于计算设备的规范，它是一个虚构出来的计算机，是通过在实际的计算机上仿真模拟各种计算机功能来实现的。Java虚拟机包括一套字节码指令集、一组寄存器、一个栈、一个垃圾回收堆和一个存储方法域。 JVM屏蔽了与具体操作系统平台相关的信息，使Java程序只需生成在Java虚拟机上运行的目标代码（字节码）,就可以在多种平台
  • SQL中ON和WHERE的区别 avords
    SQL中ON和WHERE的区别   数据库在通过连接两张或多张表来返回记录时，都会生成一张中间的临时表，然后再将这张临时表返回给用户。   www.2cto.com   在使用left jion时，on和where条件的区别如下：  1、 on条件是在生成临时表时使用的条件，它不管on中的条件是否为真，都会返回左边表中的记录。 
  • 说说自信 houxinyou 工作生活
    自信的来源分为两种,一种是源于实力,一种源于头脑.实力是一个综合的评定,有自身的能力,能利用的资源等.比如我想去月亮上,要身体素质过硬,还要有飞船等等一系列的东西.这些都属于实力的一部分.而头脑不同,只要你头脑够简单就可以了!同样要上月亮上,你想,我一跳,1米,我多跳几下,跳个几年,应该就到了!什么?你说我会往下掉?你笨呀你!找个东西踩一下不就行了吗?     无论工作还
  • WEBLOGIC事务超时设置 bijian1013 weblogicjta事务超时
            系统中统计数据，由于调用统计过程，执行时间超过了weblogic设置的时间，提示如下错误： 统计数据出错! 原因：The transaction is no longer active - status: 'Rolling Back. [Reason=weblogic.transaction.internal
  • 两年已过去，再看该如何快速融入新团队 bingyingao java互联网融入架构新团队
    偶得的空闲，翻到了两年前的帖子 该如何快速融入一个新团队，有所感触，就记下来，为下一个两年后的今天做参考。     时隔两年半之后的今天，再来看当初的这个博客，别有一番滋味。而我已经于今年三月份离开了当初所在的团队，加入另外的一个项目组，2011年的这篇博客之后的时光，我很好的融入了那个团队，而直到现在和同事们关系都特别好。大家在短短一年半的时间离一起经历了一
  • 【Spark七十七】Spark分析Nginx和Apache的access.log bit1129 apache
    Spark分析Nginx和Apache的access.log，第一个问题是要对Nginx和Apache的access.log文件进行按行解析，按行解析就的方法是正则表达式：   Nginx的access.log解析正则表达式   val PATTERN = """([^ ]*) ([^ ]*) ([^ ]*) (\\[.*\\]) (\&q
  • Erlang patch bookjovi erlang
    Totally five patchs committed to erlang otp, just small patchs. IMO, erlang really is a interesting programming language, I really like its concurrency feature. but the functional programming style
  • log4j日志路径中加入日期 bro_feng javalog4j
    要用log4j使用记录日志，日志路径有每日的日期，文件大小5M新增文件。 实现方式 log4j: <appender name="serviceLog" class="org.apache.log4j.RollingFileAppender"> <param name="Encoding" v
  • 读《研磨设计模式》-代码笔记-桥接模式 bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ /** * 个人觉得关于桥接模式的例子，蜡笔和毛笔这个例子是最贴切的：http://www.cnblogs.com/zhenyulu/articles/67016.html * 笔和颜色是可分离的，蜡笔把两者耦合在一起了：一支蜡笔只有一种
  • windows7下SVN和Eclipse插件安装 chenyu19891124 eclipse插件
    今天花了一天时间弄SVN和Eclipse插件的安装，今天弄好了。svn插件和Eclipse整合有两种方式，一种是直接下载插件包，二种是通过Eclipse在线更新。由于之前Eclipse版本和svn插件版本有差别，始终是没装上。最后在网上找到了适合的版本。所用的环境系统：windows7JDK：1.7svn插件包版本：1.8.16Eclipse：3.7.2工具下载地址：Eclipse下在地址：htt
  • [转帖]工作流引擎设计思路 comsci 设计模式工作应用服务器workflow企业应用
    作为国内的同行，我非常希望在流程设计方面和大家交流，刚发现篇好文(那么好的文章，现在才发现，可惜)，关于流程设计的一些原理，个人觉得本文站得高，看得远，比俺的文章有深度，转载如下 ================================================================================= 自开博以来不断有朋友来探讨工作流引擎该如何
  • Linux 查看内存，CPU及硬盘大小的方法 daizj linuxcpu内存硬盘大小
    一、查看CPU信息的命令 [root@R4 ~]# cat /proc/cpuinfo |grep "model name" && cat /proc/cpuinfo |grep "physical id" model name : Intel(R) Xeon(R) CPU X5450 @ 3.00GHz model name :
  • linux 踢出在线用户 dongwei_6688 linux
    两个步骤： 1.用w命令找到要踢出的用户，比如下面：   [root@localhost ~]# w 18:16:55 up 39 days, 8:27, 3 users, load average: 0.03, 0.03, 0.00 USER TTY FROM LOGIN@ IDLE JCPU PCPU WHAT
  • 放手吧,就像不曾拥有过一样 dcj3sjt126com
    内容提要： 静悠悠编著的《放手吧就像不曾拥有过一样》集结“全球华语世界最舒缓心灵”的精华故事，触碰生命最深层次的感动，献给全世界亿万读者。《放手吧就像不曾拥有过一样》的作者衷心地祝愿每一位读者都给自己一个重新出发的理由，将那些令你痛苦的、扛起的、背负的，一并都放下吧！把憔悴的面容换做一种清淡的微笑，把沉重的步伐调节成春天五线谱上的音符，让自己踏着轻快的节奏，在人生的海面上悠然漂荡，享受宁静与
  • php二进制安全的含义 dcj3sjt126com PHP
    PHP里，有string的概念。 string里，每个字符的大小为byte（与PHP相比，Java的每个字符为Character，是UTF8字符，C语言的每个字符可以在编译时选择）。 byte里，有ASCII代码的字符，例如ABC，123，abc，也有一些特殊字符，例如回车，退格之类的。 特殊字符很多是不能显示的。或者说，他们的显示方式没有标准，例如编码65到哪儿都是字母A，编码97到哪儿都是字符
  • Linux下禁用T440s，X240的一体化触摸板(touchpad) gashero linuxThinkPad触摸板
    自打1月买了Thinkpad T440s就一直很火大，其中最让人恼火的莫过于触摸板。   Thinkpad的经典就包括用了小红点(TrackPoint)。但是小红点只能定位，还是需要鼠标的左右键的。但是自打T440s等开始启用了一体化触摸板，不再有实体的按键了。问题是要是好用也行。   实际使用中，触摸板一堆问题，比如定位有抖动，以及按键时会有飘逸。这就导致了单击经常就
  • graph_dfs hcx2013 Graph
    package edu.xidian.graph; class MyStack { private final int SIZE = 20; private int[] st; private int top; public MyStack() { st = new int[SIZE]; top = -1; } public void push(i
  • Spring4.1新特性——Spring核心部分及其他 jinnianshilongnian spring 4.1
    目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
  • 配置HiveServer2的安全策略之自定义用户名密码验证 liyonghui160com
        具体从网上看   http://doc.mapr.com/display/MapR/Using+HiveServer2#UsingHiveServer2-ConfiguringCustomAuthentication   LDAP Authentication using OpenLDAP Setting
  • 一位30多的程序员生涯经验总结 pda158 编程工作生活咨询
    1.客户在接触到产品之后，才会真正明白自己的需求。 　　这是我在我的第一份工作上面学来的。只有当我们给客户展示产品的时候，他们才会意识到哪些是必须的。给出一个功能性原型设计远远比一张长长的文字表格要好。 2.只要有充足的时间，所有安全防御系统都将失败。 　　安全防御现如今是全世界都在关注的大课题、大挑战。我们必须时时刻刻积极完善它，因为黑客只要有一次成功，就可以彻底打败你。   3.
  • 分布式web服务架构的演变 自由的奴隶 linuxWeb应用服务器互联网
    最开始，由于某些想法，于是在互联网上搭建了一个网站，这个时候甚至有可能主机都是租借的，但由于这篇文章我们只关注架构的演变历程，因此就假设这个时候已经是托管了一台主机，并且有一定的带宽了，这个时候由于网站具备了一定的特色，吸引了部分人访问，逐渐你发现系统的压力越来越高，响应速度越来越慢，而这个时候比较明显的是数据库和应用互相影响，应用出问题了，数据库也很容易出现问题，而数据库出问题的时候，应用也容易
  • 初探Druid连接池之二——慢SQL日志记录 xingsan_zhang 日志连接池druid慢SQL
    由于工作原因，这里先不说连接数据库部分的配置，后面会补上，直接进入慢SQL日志记录。   1.applicationContext.xml中增加如下配置： <bean abstract="true" id="mysql_database" class="com.alibaba.druid.pool.DruidDataSourc
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他