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)

  • 移动端城市区县二级联动选择功能实现包 good2know
    本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery
  • MotionLCM 部署优化 踩坑解决bug AI算法网奇 aigc与数字人深度学习宝典文生motion
    目录依赖项windowstorchok：渲染黑白图问题解决：humanml3d：sentence-t5-large下载数据：报错：Nomodulenamed'sentence_transformers'继续报错：fromtransformers.integrationsimportCodeCarbonCallback解决方法：推理相关转mesh：module‘matplotlib.cm‘hasno
  • js操作样式 郝加升
    DOM样式属性和方法：指定的元素，它的style有这么几个属性和方法：cssText：通过这个属性可以访问到元素的特性style设置的属性，并且可以直接赋值设置。removeProperty（属性名称）：从样式中删除给定属性。setProperty（属性名称，值，权重）：可以通过这个方法设置给定样式的同时设置其权重，可以传入”important”或者一个空字符串。获取计算后样式：window.ge
  • 深入理解 Tomcat Wrapper 原理 北漂老男人 Tomcattomcatjava
    深入理解TomcatWrapper原理一、引言在Tomcat的分层容器架构中，Wrapper作为最底层的容器，专门负责管理单个Servlet的生命周期及请求分发。每一个Servlet（包括JSP、Filter等）都对应一个Wrapper。Wrapper是Servlet规范与Tomcat容器实现之间的桥梁，直接关系到请求的分发效率、Servlet的加载与重用、安全隔离等。本文将系统剖析Wrapper
  • [spring6: Mvc-网关]-源码解析
    推荐阅读：[spring6:Mvc-函数式编程]-源码解析GatewayServerMvcAutoConfiguration@AutoConfiguration(after={HttpClientAutoConfiguration.class,RestTemplateAutoConfiguration.class,RestClientAutoConfiguration.class,FilterAu
  • 用代码生成艺术字：设计个性化海报的秘密
    本文围绕“用代码生成艺术字：设计个性化海报的秘密”展开，先概述代码生成艺术字在海报设计中的独特价值，接着介绍常用的代码工具（如HTML、CSS、JavaScript等），详细阐述从构思到实现的完整流程，包括字体样式设计、动态效果添加等，还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势，为设计师提供打造个性化海报的实用指南，助力提升海报设计的独特性与吸引力，符合搜索引擎SEO标准
  • 前端面试每日 3+1 —— 第39天 浪子神剑
    今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么？[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！欢迎在Iss
  • 【Druid】学习笔记 fixAllenSun 学习笔记oracle
    【Druid】学习笔记【一】简介【1】简介【2】数据库连接池（1）能解决的问题（2）使用数据库连接池的好处【3】监控（1）监控信息采集的StatFilter（2）监控不影响性能（3）SQL参数化合并监控（4）执行次数、返回行数、更新行数和并发监控（5）慢查监控（6）Exception监控（7）区间分布（8）内置监控DEMO【4】Druid基本配置参数介绍【5】Druid相比于其他数据库连接池的优点
  • 构建高性能Web应用：深入Spring WebFlux 李多田
    本文还有配套的精品资源，点击获取简介：SpringWebFlux是Spring框架的一部分，支持反应式编程模型，适合高并发和低延迟Web应用。它提供了非阻塞I/O和事件驱动模型，优化了多核处理器资源的使用。SpringWebFlux拥有两种编程模式，核心组件包括WebHandler,RouterFunction,WebFilter,和WebSession。它与高性能服务器集成，并提供反应式HTTP
  • 基于深度学习的目标检测算法综述：从RCNN到YOLOv13，一文看懂十年演进！ 人工智能教程 深度学习目标检测算法人工智能自动驾驶YOLO机器学习
    一、引言：目标检测的十年巨变2012年AlexNet拉开深度学习序幕，2014年RCNN横空出世，目标检测从此进入“深度时代”。十年间，算法从两阶段到单阶段，从Anchor-base到Anchor-free，从CNN到Transformer，从2D到3D，从监督学习到自监督学习，迭代速度之快令人目不暇接。本文将系统梳理基于深度学习的目标检测算法，带你全面了解技术演进、核心思想、代表算法、工业落地与
  • 26. 什么是雪碧图，作用和原理了解吗 yqcoder 前端面试-CSScss前端html
    总结小图合成一张，使用background来使用，减少资源请求一、什么是雪碧图？雪碧图（CSSSprite）是一种前端优化技术，指的是将多个小图标合并成一张大图，通过CSS控制显示其中的某一部分。它常用于网站中图标、按钮等小图较多的场景。二、雪碧图的作用作用说明✅减少HTTP请求次数合并多个图片为一张图，减少请求资源数✅提升页面加载速度尤其在图片较多时效果明显✅避免图片加载闪烁鼠标悬停切换图片时不
  • OpenGL里相机的运动控制 qq_42987967 计算机图形学学习笔记数码相机
    相机的核心构造一个是glm::lookAt函数，一个是glm::perspective函数，本文相机的一切运动都在于如何构建相应的参数传入上述两个函数里。glm::mat4glm::lookAt(glm::vec3const&eye,//相机所在位置glm::vec3const¢er,//要凝视的点glm::vec3const&up//相机上向量);glm::mat4perspective
  • Unity 程序运行一段时间后Game界面出现黑屏的一种情况 zhannghong2003 Unityunity游戏引擎
    经过排查，发现是Camera(相机)的Z轴一直变大导致的黑屏。造成这种情况的原因是代码：VMouseTransform.position=Camera.main.ScreenToWorldPoint(Input.mousePosition)；Camera(相机)设置成为跟随VMouseTransform。所以会出现Z轴逐渐变大的情况，最后导致黑屏。改代码为：Vector2vMouseNeed=Ca
  • 关于前端的性能优化
    性能优化主要涵盖了以下四个方面：(tip:仅代表个人总结，如有不当，还希望看到的大佬多多指示)减少网络请求：合并文件、使用CDN、启用缓存。优化资源加载：代码分割、懒加载、图片压缩。提升渲染性能：减少重绘回流、防抖节流、使用WebWorker。监控和迭代：定期使用工具检测性能，持续优化。一、网络层面优化减少HTTP请求合并文件：将多个CSS或JavaScript文件合并成一个，减少请求次数。使用C
  • C++-coroutines协程 将自定义类型转为awaitable(可等待)类型的两种方法 mrbone11 #Coroutinesc++开发语言协程coroutines
    文章目录前言重载operatorco_await定义promise_type::await_transform函数前言阅读本篇文章时，已经假定你有对协程的基本概念，如果没有，可以阅读我写的这篇协程入门文章我们已经知道，对于co_await\，expression的返回值必须是awaitable类型，即正确实现了如下三个函数：await_readyawait_suspendawait_resume对
  • Grid布局参考资料 kiterumer
    Grid布局张鑫旭-写给自己看的display:grid布局教程阮一峰-CSSGrid网格布局教程在Grid布局中，float，display:inline-block，display:table-cell，vertical-align以及column-*这些属性和声明对grid子项是没有任何作用的。这个可以说是Grid布局中的常识，面试经常会问的，一定要记得。Grid布局则适用于更大规模的布局（
  • 视觉Transformer还有哪些点可以研究？怎么应用？ 计算机视觉工坊 3D视觉从入门到精通学习算法开源
    0.这篇文章干了啥？今天笔者为大家推荐一篇最新的综述，详细总结了Transformer的网络架构、优化策略、发展方向，还会定期更新Github，研究注意力机制的小伙伴一定不要错过。注意机制有助于人类视觉系统有效地分析和理解复杂场景，它能够聚焦于图像的关键区域，同时忽略无关紧要的部分。受此概念启发，注意机制已经被引入到计算机视觉（CV）中，以动态地为图像中的不同区域分配权重。这使得神经网络能够专注于
  • streamline 这是个组合词，能猜出大概意思，组织 董八七
    title:streamlinedate:2018-08-2117:03:19NO_sents:76NO_references:58streamlinestreamlinedstreamlines组织一些流程（process）AlthoughfixedguidelineswouldsimplifyGWASPAsubstantiallybyprovidinganalytictoolsthatstre
  • 解决 Webpack 报错 “No module factory available for dependency type: CssDependency“ 的方法 cmmav33990 webpackrust前端
    这个错误表明Webpack在处理CSS依赖时找不到合适的模块工厂，通常发生在配置不完整或依赖冲突的情况下。以下是详细的解决方案：核心解决方案方案1：安装并配置正确的CSS处理器（最推荐）bashnpminstall--save-devcss-loaderstyle-loader#或使用mini-css-extract-plugin替代style-loadernpminstall--save-dev
  • 50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Pokedex（宝可梦图鉴）
    我们继续50个小项目挑战！——Pokedex组件仓库地址：https://github.com/SunACong/50-vue-projects项目预览地址：https://50-vue-projects.vercel.app/使用Vue3结合PokeAPI来创建一个炫酷的宝可梦图鉴应用。通过这个项目，你将能够浏览前150只宝可梦的信息，包括它们的名字、类型、身高、体重以及能力等。而且，每只宝可梦
  • CSS基础（3） Zzz_睡不醒 css前端html
    CSS背景操作1.多重背景(MultipleBackgrounds)div{background-image:url(image1.png),url(image2.png);background-position:rightbottom,lefttop;background-repeat:no-repeat,repeat;background-size:auto,cover;}background
  • 《博客园精华集》web标准分册第2论筛选结果文章列表
    《博客园精华集》web标准部分筛选结果（共55篇）一个喜欢网页设计的程序员作者：Awen根本不存在DIV+CSS布局这回事作者：CatChen欲练CSS，必先宫IE作者：CatChen你有强迫症吗？作者：CatChenSPAN元素和DIV元素的区别作者：ChrisLiudiv的认识作者：ChrisLiu实时检验您的页面是否符合XHTML标准——使用ValidatorModule作者：Dflying
  • Java过滤器与拦截器深度解析
    目录概述过滤器Filter拦截器Interceptor执行流程图解核心区别对比代码实现示例使用场景最佳实践概述在JavaWeb开发中，过滤器(Filter)和拦截器(Interceptor)是两种重要的请求处理机制。它们都能够对HTTP请求进行预处理和后处理，但在实现方式、执行时机和应用场景上有着显著的区别。关键特征对比表特征过滤器(Filter)拦截器(Interceptor)️基于Servle
  • 【AI大模型：前沿】43、Mamba架构深度解析：为什么它是Transformer最强挑战者？ 无心水 架构transformerMambaMamba架构AI大模型系统开发实战AI大模型高手开发AI大模型系统实战
    Transformer架构自2017年诞生以来，一直是NLP、计算机视觉等领域的“统治级”模型架构。但随着序列长度需求的增长（如128K长文本处理、基因组学超长序列分析），其自注意力机制的O(n2)O(n^2)O(n2)计算复杂度成为难以逾越的瓶颈。2023年底，由AlbertGu和TriDao等人提出的Mamba架构，通过创新的“选择性状态空间模型（SelectiveSSM）”实现了线性复杂度（
  • GAMES202——作业1 实时阴影(ShadowMap，PCF，PCSS)
    目录任务ShadowMapPCFPCSS实现ShadowMapuseShadowMapPCFfindBlockerPCSS结果任务ShadowMap1.在ShadowMaterial.js中需要向Shader传递正确的uLightMVP矩阵，该矩阵参与了第一步从光源处渲染场景从而构造ShadowMap的过程。你需要完成DirectionalLight中的CalcLightMVP(translate
  • Shadow Map ———— PCSS（percentage-closer Soft Shadow） kevin_dust
    ShadowMap————PCSS（percentage-closerSoftShadow）1、PCSS解决了什么问题传统的PCF每一次采样过滤耗费很大（每次都要遍历附近的几个点，虽然用了泊松分布，但还是不可避免），PCSS算法基本解决了该问题（通过动态计算采样范围，使用FindBlocker剔除非阴影点）传统的PCF半影不够逼真…PCSS算法通过计算准确的半影范围解决了4、PCSS的有关你资料：
  • PyQt5窗口背景设置全攻略：三种方法实现精美界面
    QSS样式表法（最常用）特点：声明式语法、支持CSS特性、子控件自动继承样式1.纯色背景设置创建主窗口并设置黄色背景win=QMainWindow()win.setObjectName("MainWindow")win.setStyleSheet("#MainWindow{background-color:yellow}")2.背景图片设置（自适应尺寸）使用border-image实现背景图平铺w
  • [python][flask]flask静态资源
    在Flask中，静态资源（如图片、CSS文件、JavaScript文件等）通常存储在项目的static文件夹中。Flask会自动为静态资源提供服务，使得你可以通过URL访问这些文件。以下是关于Flask中静态资源的使用方法和一些高级配置。1.默认静态文件夹Flask默认会将项目根目录下的static文件夹作为静态资源目录。例如，如果你的项目结构如下：my_flask_app/│├──app.py├
  • 前端面试题 大大。 前端vue.jsjavascript
    HTML5的新特性和CSS3的新特性引入了一系列语义化标签使文档结构更加清晰(header,nav,aside,article,footer,section)，多媒体支持video,audio，Canvas绘图div上下居中对齐的几种方式第一种：flex布局display:flex;justify-content:center;/*水平居中/align-items:center;/垂直居中/第二种
  • Python BeautifulSoup 解析网页按钮元素 PythonAI编程架构实战家 Python人工智能与大数据Python编程之道pythonbeautifulsoup开发语言ai
    PythonBeautifulSoup解析网页按钮元素：从基础原理到工程实践的深度解析关键词BeautifulSoup、HTML解析、按钮元素定位、DOM树遍历、CSS选择器、网络爬虫、前端自动化摘要本文系统解析使用PythonBeautifulSoup库定位和提取网页按钮元素的全流程技术方案。从HTML文档的底层结构出发，结合BeautifulSoup的核心解析机制，覆盖从基础概念到高级工程实践
  • [星球大战]阿纳金的背叛 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其他