Lovejulyer
Lovejulyer

《CSS3实战》笔记--弹性盒模型（二）

通过阅读和学习书籍《CSS3实战》总结
《CSS3实战》/成林著.—北京机械工业出版社2011.5

box-flex属性

box-flex属性能够灵活地控制子元素在盒子中的显示空间。注意，显示空间包括子元素的宽度和高度，而不只是子元素所在栏目的宽度，也可以说是子元素在盒子中所占的面积。该属性在弹性布局中非常重要，它解决了传统设计中习惯使用百分比定义弹性布局的弊端。box-flex属性的基本语法：

box-flex:<number>

取值说明：
<number>属性值是一个整数或者小数。当盒子中包含多个定义了box-flex属性的子元素时，浏览器将会把这些子元素的box-flex属性值相加，然后根据他们各自的值占总值的比例来分配盒子剩余的空间。注意，box-flex属性只有在盒子拥有的确定的空间大小之后才能正确解析。在设计中，较稳妥的做法是为了盒子定义具体的width或height属性值。

实战体验：自适应栏目宽度设计

  在传统的网页设计中，如果要把一个栏目分成三栏，比较简单的做法是把三个子元素的宽度都设置为33.3%。这种做法无法把父元素的宽度完全填充，当父元素的宽度足够大的时候，用户会看到未填充的空白区域。但是，如果为子元素设置了固定宽度值，弹性布局会变得更为复杂。如果使用box-flex属性，这个问题就会迎刃而解。

html代码：

<body>
<h1><img src="images/web3_13.gif" /></h1>
<div id="box">
    <!--左侧栏目-->
    <div id="box1"><img src="images/web3_01.gif" /></div>
    <!--中间栏目-->
    <div id="box2">
        <h2><img src="images/web3_02.gif" /></h2>
        <div><img src="images/web3_04.gif" /></div>
        <div><img src="images/web3_05.gif" /></div>
        <div><img src="images/web3_06.gif" /></div>
        <div><img src="images/web3_07.gif" /></div>
    </div>
    <!--右侧栏目-->
    <div id="box3">
        <h2><img src="images/web3_12.gif" /></h2>
        <div><img src="images/web3_08.gif" /></div>
        <div><img src="images/web3_09.gif" /></div>
        <div><img src="images/web3_10.gif" /></div>
        <div><img src="images/web3_11.gif" /></div>
    </div>
</div>
</body>

CSS3代码：

/*这是一个三栏布局的页面，其中左侧栏目的宽度是固定的，而中间和右侧栏目的宽度是弹性的*/
<style> body{ margin:0; padding:0; text-align:center; } h1,h2{margin:2px;} #box{ margin:auto; text-align:left; width:1002px; overflow:hidden; } /*定义box元素盒形显示，并设置子元素水平布置*/ #box{ display:box; display:-moz-box; display:-webkit-box; box-orient:horizontal; -moz-box-orient:horizontal; -webkit-box-orient:horizontal; } /*定义盒子左侧栏目的宽度为固定显示*/ #box1{width:201px;} #box2,#box3{ border:1px solid #CCC; margin:2px; } /*定义盒子内中间栏目的宽度为盒子剩余空间的2/3*/ #box2{ box-flex: 4; -moz-box-flex: 4; -webkit-box-flex: 4; } /*定义盒子内中间栏目的宽度为盒子剩余空间的1/3*/ #box3{ box-flex:2; -moz-box-flex:2; -webkit-box-flex:2; } #box2 div,#box3 div{ display:inline; } </style>

演示效果：

《CSS3实战》笔记--弹性盒模型（二）_第1张图片

弹性空间的实现和分配

  在默认情况下，子元素并不具有弹性，它会竟可能的宽，以便使其所包含的内容可见，并且不会有任何溢出。如果要改变它的尺寸，则可以使用width和height属性来实现，当然也可以使用min-height，min-width，max-height,max-width等属性来限制尺寸。

  当box-flex属性至少大于0时，它会变得富有弹性。当子元素具有弹性时，可以通过下面的方式来改变它的尺寸：

  • 使用width，height，min-height，min-width，max-height,max-width等属性来定义尺寸。

  • 使用盒子的尺寸来限制子元素的弹性尺寸。

  • 借助盒子富余所有空间来限制元素的弹性尺寸。

  如果子元素没有声明大小，那么其尺寸将完全取决于盒子的大小，即子元素的大小等于盒子的大小乘以它的box-flex属性值在所有子元素的box-flex属性值总和中的百分比。使用公式表示如下：

子元素的尺寸=盒子的尺寸*子元素的box-flex属性值/所有子元素的box-flex属性值的和

  如果一个或多个子元素声明了具体的尺寸，那么其大小将计入其中，余下的弹性盒子将按照上面的原则分享剩余的可利用空间。

  由于受内部图片大小的支撑，导致子元素的空间总是大于盒子的 富余空间，这时将出现解析异常。

  box-flex属性对子元素的布局影响

HTML代码：

<body>
<h1><img src="images/web3_13.gif" /></h1>
<div id="box">
    <!--左侧栏目-->
    <div id="box1"><img src="images/web3_01.gif" /></div>
    <!--中间栏目-->
    <div id="box2"></div>
    <!--右侧栏目-->  
    <div id="box3"></div>       
</div>
</body>
  • 中间和右侧各占一半剩余的空间
    CSS3代码：
#box2{ box-flex: 2; -moz-box-flex: 2; -webkit-box-flex: 2; background:#CCF; }
#box3{ box-flex: 2; -moz-box-flex: 2; -webkit-box-flex: 2; background:#FC0; }

演示效果：

《CSS3实战》笔记--弹性盒模型（二）_第2张图片

  • 中栏占1/5的空余空间，右栏占4/5空余的空间
    CSS3代码：
#box2{ box-flex: 0.5; -moz-box-flex: 0.5; -webkit-box-flex: 0.5; background:#CCF; }
#box3{ box-flex: 2; -moz-box-flex: 2; -webkit-box-flex: 2; background:#FC0; }

演示效果：

《CSS3实战》笔记--弹性盒模型（二）_第3张图片

  • 中间弹性显示，占据所有空余空间，右栏固定大
    CSS3代码：
#box2{ box-flex: 0.5; -moz-box-flex: 0.5; -webkit-box-flex: 0.5; background:#CCF; }
#box3{ width:196px; background:url(images/web3_03.gif) no-repeat; }

演示效果：

《CSS3实战》笔记--弹性盒模型（二）_第4张图片

  • 中栏失去弹性（当设置为0或者复制时），收缩显示为一条线，右栏自动左移
    CSS代码：
#box2{ box-flex: 0; -moz-box-flex: 0; -webkit-box-flex: 0; background:#CCF; }
#box3{ width:196px; background:url(images/web3_03.gif) no-repeat; }

演示效果：

《CSS3实战》笔记--弹性盒模型（二）_第5张图片

你可能感兴趣的:(css3)

  • 实现网页中CSS图片3D旋转效果 Kiki-2189
    本文还有配套的精品资源，点击获取简介：CSS是一种用于定义文档呈现方式的技术，通过CSS3的3D转换功能，能够在二维平面上展示三维对象，让网页元素具有立体感。本文详细介绍了实现CSS图片3D旋转效果所需的CSS属性，如transform,perspective,transition,以及:hover选择器，并提供了一个简单的代码示例。同时，文章也提到了兼容性问题以及提供回退方案的重要性。1.CSS
  • css3 圆形水波纹特效 程序媛之博客 css3前端css
    需求描述：需要制作一个动画，特效从圆心开始往外扩散，然后又往回收。效果图：实现代码：.circle{width:100rpx;height:100rpx;background-color:#FF4C4C;border-radius:50%;/*圆形*/box-shadow:inset00010rpxrgba(255,255,255,0.5),/*内阴影，初始半透明圆*/inset00020rpxr
  • 【CSS】CSS3媒体查询全攻略 Vesper63 前端CSScsscss3媒体
    媒体查询教程媒体查询(MediaQueries)是CSS3中引入的强大功能，允许内容根据设备特性(如屏幕尺寸、分辨率、方向等)进行自适应调整。以下是媒体查询的详细教程：基本语法@mediamediatypeand(mediafeature){/*CSS规则*/}常用媒体类型all-所有设备(默认)screen-电脑屏幕、平板、智能手机等print-打印机和打印预览speech-屏幕阅读器等发声设备
  • H5新增的标签 YiLin_Classics web前端html前端csscss3
    H5新增的内容语义化标签增强型表单增强表单中的新增属性CSS3的选择器语义化标签H5新增的语义化标签有：1）header--------头部区域2）footer----------尾部区域3）section--------主体区域4）main----------主要区域内容5）article--------独立文章区域6）aside--------侧边栏7）nav----------导航区域8）f
  • H5在小程序领域的地图应用开发指南 小程序开发2020 小程序开发宝典小程序ai
    H5在小程序领域的地图应用开发指南关键词：H5、小程序、地图应用开发、JavaScript、HTML5、CSS3、API摘要：本文围绕H5在小程序领域的地图应用开发展开，详细阐述了相关的背景知识、核心概念、算法原理、数学模型、实战案例、应用场景、工具资源等内容。通过逐步分析推理，为开发者提供了全面且深入的开发指南，助力开发者掌握H5在小程序中开发地图应用的技术和方法，应对开发过程中的各种挑战。1.
  • CSS3 3D 转换介绍 半点寒12W csscss33d前端
    CSS3中的3D转换提供了一种在二维屏幕上呈现三维效果的方式，主要包括translate3d、rotate3d、scale3d等转换函数，下面来详细介绍：1.3D转换的基本概念坐标系在CSS3的3D空间中，使用的是右手坐标系。X轴是水平方向（从左到右为正方向），Y轴是垂直方向（从上到下为正方向），Z轴是垂直于屏幕的方向（从屏幕外指向屏幕内为正方向）。容器属性-perspective这个属性用于设置
  • 前端开发：Javascript 与 CSS3 动画的融合 前端视界 前端艺匠馆javascriptcss3开发语言ai
    前端开发：Javascript与CSS3动画的融合关键词：JavaScript、CSS3动画、前端开发、动画性能、事件驱动、硬件加速、浏览器兼容摘要：本文深入探讨JavaScript与CSS3动画的融合技术，解析两者在前端动画领域的优势互补机制。通过对比分析基础动画原理，揭示事件驱动、状态控制、性能优化的核心逻辑，结合具体代码案例演示交互动画实现方案。详细讲解硬件加速原理、浏览器渲染机制、数学缓动
  • GitHub OAuth 认证示例 ZHOU_CAMP flaskreactgithubflaskreact
    GitHub链接：github_auth流程图功能特性✅GitHubOAuth认证✅获取用户基本信息✅显示用户的GitHub仓库列表✅安全的会话管理✅响应式用户界面技术栈后端Flask-PythonWeb框架Flask-CORS-跨域资源共享Requests-HTTP库Session-会话管理前端React-用户界面库ReactRouter-路由管理Axios-HTTP客户端CSS3-样式设计项目
  • 前端开发者必须要掌握的技术栈及学习建议，都是干货 老猿阿浪 前端学习前端
    作为前端开发者，必须要掌握的技术栈非常的广泛，但总体脉络不变，以下是当前前端开发的核心技术分类和学习建议，按优先级和重要性排序如下（都是干货）：一、基础三件套（必学）HTML5语义化标签、表单验证、WebAccessibility（无障碍访问）Canvas/SVG、音视频嵌入CSS3盒模型、Flex/Grid布局、响应式设计（媒体查询）动画（Transition/Animation）、变量（CSS
  • CSS3 背景裁剪：background-clip 的创意用法 大厂前端小白菜 Ccss3前端cssai
    CSS3背景裁剪：background-clip的创意用法关键词：CSS3、background-clip、背景裁剪、文字背景、创意设计、盒子模型、浏览器兼容性摘要：CSS3的background-clip是一个能“裁剪背景画布”的神奇属性。它能精准控制背景的显示范围，从传统的边框、内边距、内容区域，到更前沿的“文字轮廓裁剪”，为网页设计带来了无限可能。本文将从基础原理到创意实战，用“剪窗花”的比
  • jquery和CSS3圆形倒计时特效 yt94832 jquerycss3前端
    这是一款jquery和CSS3圆形倒计时特效。该特效使用CSS对页面进行布局，生成用于倒计时的圆环，然后通过jquery代码来控制圆环的倒计时进度。预览下载使用方法在页面中引入下面的文件。HTML结构MinSec开始停止初始化插件letcircle=document.getElementById('cls');lettotal;letstart=$('#start');start.click(()
  • 3_CSS3 渐变 --[CSS3 进阶之路] 桃园码工 CSS3进阶之路css3前端cssCSS3渐变
    CSS3引入了渐变（gradients），它允许在两个或多个指定的颜色之间显示平滑的过渡。CSS3支持两种类型的渐变：线性渐变（LinearGradients）：颜色沿着一条线性路径变化，可以是水平、垂直或者对角线方向。径向渐变（RadialGradients）：颜色从一个起点开始向外扩散，形成圆形或者椭圆形的渐变效果。线性渐变线性渐变-从上到下这里有一个简单的CSS3线性渐变的例子，它从上到下应
  • 前端 CSS3 背景渐变的高级技巧 大厂前端小白菜 前端css3cssai
    前端CSS3背景渐变的高级技巧关键词：CSS3、背景渐变、线性渐变、径向渐变、重复渐变、混合模式、动画效果摘要：本文将深入探讨CSS3背景渐变的高级应用技巧，从基础语法到复杂实现，涵盖线性渐变、径向渐变、重复渐变等多种渐变类型。我们将通过详细的代码示例和视觉效果分析，展示如何创建令人惊艳的渐变效果，包括渐变动画、混合模式应用以及响应式设计中的渐变技巧。文章还将介绍最新的CSS渐变特性，帮助前端开发
  • CSS3 背景渐变的方向与角度调整 大厂前端小白菜 前端开发实战css3前端cssai
    CSS3背景渐变的方向与角度调整关键词：CSS3、背景渐变、方向调整、角度调整、线性渐变、径向渐变摘要：本文深入探讨了CSS3背景渐变的方向与角度调整相关技术。首先介绍了CSS3背景渐变的背景知识，包括目的、适用读者、文档结构和相关术语。接着详细阐述了线性渐变和径向渐变的核心概念、原理及架构，通过Mermaid流程图和文本示意图进行清晰展示。在算法原理部分，使用Python模拟CSS3渐变效果来解
  • 《深度剖析：SCSS中混入（Mixin）为浏览器前缀赋能》
    不同的浏览器，如同性格迥异的守门人，对CSS样式的理解和呈现各有标准。在CSS新特性尚未成为行业共识前，各浏览器厂商会以独特的前缀标注自家版本，这就好比不同地区对同一事物的称呼差异，看似表达相同，实则形式大相径庭。例如，当我们试图用CSS3的动画效果为网页增添灵动气息时，不同浏览器却要求用不同的“咒语”才能生效。在Chrome和Safari中，需要使用“-webkit-”开头的属性；Firefox
  • HTML5+CSS3小实例：文本背景扫光效果 艾恩小灰灰 HTML+CSS+JS小实例css3html5css前端html
    实例：文本背景扫光效果技术栈：HTML+CSS效果：源码：【html】<head
  • css3 卡片亮光_纯css3实现的文字亮光特效 Denis Wang css3卡片亮光
    今天给大家分享一款纯css3实现的文字亮光特效。这款特效文字上一道亮光逐渐扫过文字。效果非常漂亮。一起看下效果：实现的代码。html代码：Shinycss3代码：body{background:#111;}.shiny{color:#F5C21B;background:-webkit-gradient(linear,lefttop,leftbottom,from(#F5C21B),to(#D170
  • CSS3雷达扫描效果
    CSS3雷达扫描效果https://www.bootstrapmb.com/item/14840要创建一个CSS3的雷达扫描效果，我们可以使用CSS的动画（@keyframes）和transform属性。以下是一个简单的示例，展示了如何创建一个类似雷达扫描的动画效果：HTML:html雷达扫描效果CSS(styles.css):cssbody{display:flex;justify-conten
  • CSS3 图片扫光/辉光 福州司马懿 #CSS3动画扫光辉光
    扫光的原理主要是在图片上增加一层，用作扫光，然后添加背景颜色并倾斜一定的角度。动画是左右移动，因此就形成了扫光效果。流光/扫光效果:root{--stream-effect-width:25em;--stream-effect-height:10em;--stream-mask-width:25%;--stream-mask-skew-deg:45deg;--stream-mask-skew-y:
  • 基础篇12—CSS3中displex:flex弹性盒布局详解 言程序plus CSS从入门到精通css3css前端
    前言：长久以来，CSS布局中唯一可靠且跨浏览器兼容的创建工具只有float和position。这两个工具大部分情况下都很好使，但是在某些方面它们具有一定的局限性，让人难以完成任务。以下简单的布局需求是难以或不可能用这样的工具（float和position）方便且灵活的实现的：
  • 探索现代 Web 开发：从 HTML5 到 Vue.js 的全栈之旅 Thanks_ks IT洞察集Web开发HTML5CSS3JavaScriptVue.js前端开发全栈实战
    在当今快速发展的互联网时代，Web开发已经成为构建数字世界的重要基石。无论是企业级应用、社交媒体平台，还是个人博客和电商平台，Web技术都在背后默默支撑着这些系统的运行。随着前端技术的不断演进，开发者们已经不再局限于传统的静态页面开发，而是转向更加动态、交互性强的应用程序开发。本文将带您踏上一段从基础到实战的旅程，深入探讨现代Web开发的核心技术，包括HTML5、CSS3、JavaScript以及
  • css flex shrink,CSS3 flex-shrink属性用法详解 泳培帮Go游泳 cssflexshrink
    下面本文章来给各位介绍一下CSS3flex-shrink使用方法，希望例子能帮助到各位。flex-grow控制flexcontainer有多余空间的时候怎么分配，默认值为0，即所有的flexitems都不分配。flex-shrink1则控制flexcontainer空间不足以包含flexitems时，flexitems怎样缩小所占空间，来防止溢出container。其默认值为1，flexitems
  • 一文搞懂什么是 PostCSS
    一文搞懂什么是PostCSS在Web应用开发中，CSS代码的编写是重要的一部分。CSS规范从最初的CSS1到现在的CSS3，再到CSS规范的下一步版本，规范本身一直在不断的发展演化之中。这给开发人员带来了效率上的提高。不过与其他Web领域的规范相似的处境是，CSS规范在浏览器兼容性方面一直存在各种各样的问题。不同浏览器在CSS规范的实现方面的进度也存在很大差异。另外，CSS规范本身的发展速度与社区
  • 【CSS性能优化技巧】 AmyGeng123 css性能优化前端
    CSS性能优化技巧加载时性能优化项1.使用标签代替@import2.压缩CSS3.css单一样式4.建立公共样式类5.合并css文件减少http请求6.使用0而不是0px6.避免使用!Important7.使用CSS代替图片实现一些特效8.SVG代替图片9.避免使用通配*规则10.不要去用标签限定ID或者类选择符11.减少css嵌套，加速css解析12.充分利用css继承属性，减少代码量13.使用
  • 【css3】画‘百分比圆’
    ellipsis.circle{width:120px;height:120px;position:relative;margin:19pxauto10pxauto;border-radius:50%;background:#19ce6a;}.pie_left,.pie_right{width:120px;height:120px;position:absolute;top:0;left:0;}.
  • CSS3 @Media 媒体查询 fullstack_lth CSScsshtml5
    CSS3媒体类型值描述all用于所有媒体类型设备。print用于打印机。screen用于计算机屏幕、平板电脑、智能手机等等。speech用于大声“读出”页面的屏幕阅读器。CSS@media规则@media规则在媒体查询中用于为不同的媒体类型/设备应用不同的样式。媒体查询可用于检查许多事情，诸如：视口的宽度和高度设备的宽度和高度方向（手机或平板电脑处于横屏还是竖屏模式？）分辨率使用媒体查询是一种流行
  • 深入理解 React 样式方案 aiguangyuan React前端开发React
    React的样式方案较多，在应用开发初期，开发者需要根据项目业务具体情况选择对应样式方案。React样式方案主要有：1.内联样式2.modulecss3.cssinjs4.tailwindcss这些方案中，均有各自的优势和缺点。1.方案优劣势1.内联样式:简单直观，适合动态样式和小型项目，但复用性差，功能有限；2.CSSModules:提供局部作用域，支持所有CSS功能，适合中大型项目，但配置复杂
  • 第四章、初识CSS3 （0基础，学HTML) 新晋肖码农 csscss3前端html5媒体笔记
    第四章、初识CSS3目录第四章、初识CSS31.学习目标2.CSS的概念3.CSS的优势4.CSS的基本语法4.1语法结构4.2style标签5.CSS样式5.1行内样式5.2内部样式表5.3外部样式表5.3.1链接外部样式表5.3.2导入外部样式表6.CSS基本选择器6.1标签选择器6.2类选择器6.3ID选择器7.CSS的高级选择器7.1层次选择器7.2后代选择器7.3子选择器7.4相邻兄弟选
  • 构建仿淘宝电商网站HTML代码实战教程
    本文还有配套的精品资源，点击获取简介：本项目重点介绍如何使用HTML5构建电子商务平台的网页设计和前端开发，涵盖响应式布局、新特性应用、页面元素设计、CSS3样式设计、JavaScript交互、响应式设计、Web性能优化、无障碍性、SEO优化和数据交互等方面。通过研究提供的仿淘宝网站HTML代码实例，学习如何将这些技术应用于实际项目中，提高前端开发技能。1.网页布局实践1.1网页布局的重要性网页布
  • html和css画梯形背景,CSS-实战-梯形背景导航 日化渠道解决方案 html和css画梯形背景
    1、实现效果梯形背景图导航，如下图。由于导航条文字多少不固定，因此面临的挑战是，当文字内容增加时，中间的背景宽度自动拉伸。CSS3的出现实现这样的效果相对变的容易，本文使用背景图定位的知识，加上CSS其他知识。介绍CSS2实现这样效果的一种思路。梯形背景导航2、总体实现思路(1)准备背景图注意图片，一定是透明背景格式的，可以另存为下图。透明背景图(2)创建A标签嵌套B标签的导航菜单测试(3)设置A
  • LeetCode[Math] - #66 Plus One Cwind javaLeetCode题解AlgorithmMath
    原题链接：#66 Plus One   要求： 给定一个用数字数组表示的非负整数，如num1 = {1, 2, 3, 9}, num2 = {9, 9}等，给这个数加上1。 注意： 1. 数字的较高位存在数组的头上，即num1表示数字1239 2. 每一位（数组中的每个元素）的取值范围为0~9   难度：简单   分析： 题目比较简单，只须从数组
  • JQuery中$.ajax()方法参数详解 AILIKES JavaScriptjsonpjqueryAjaxjson
    url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。 type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和    delete也可以使用，但仅部分浏览器支持。 timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局
  • JConsole & JVisualVM远程监视Webphere服务器JVM Kai_Ge JVisualVMJConsoleWebphere
        JConsole是JDK里自带的一个工具，可以监测Java程序运行时所有对象的申请、释放等动作，将内存管理的所有信息进行统计、分析、可视化。我们可以根据这些信息判断程序是否有内存泄漏问题。 　　使用JConsole工具来分析WAS的JVM问题，需要进行相关的配置。 　　首先我们看WAS服务器端的配置. 　　1、登录was控制台https://10.4.119.18
  • 自定义annotation 120153216 annotation
    Java annotation 自定义注释@interface的用法 一、什么是注释      说起注释，得先提一提什么是元数据(metadata)。所谓元数据就是数据的数据。也就是说，元数据是描述数据的。就象数据表中的字段一样，每个字段描述了这个字段下的数据的含义。而J2SE5.0中提供的注释就是java源代码的元数据，也就是说注释是描述java源
  • CentOS 5/6.X 使用 EPEL YUM源 2002wmj centos
    CentOS 6.X 安装使用EPEL YUM源1. 查看操作系统版本[root@node1 ~]# uname -a Linux node1.test.com 2.6.32-358.el6.x86_64 #1 SMP Fri Feb 22 00:31:26 UTC 2013 x86_64 x86_64 x86_64 GNU/Linux [root@node1 ~]#
  • 在SQLSERVER中查找缺失和无用的索引SQL 357029540 SQL Server
    --缺失的索引 SELECT  avg_total_user_cost * avg_user_impact * ( user_scans + user_seeks ) AS PossibleImprovement ,          last_user_seek ,    
  • Spring3 MVC 笔记（二） —json+rest优化 7454103 Spring3 MVC
    接上次的 spring mvc 注解的一些详细信息！                          其实也是一些个人的学习笔记  呵呵！
  • 替换“\”的时候报错Unexpected internal error near index 1 \ ^ adminjun java“\替换”
    发现还是有些东西没有刻子脑子里,,过段时间就没什么概念了,所以贴出来...以免再忘...   在拆分字符串时遇到通过 \ 来拆分，可是用所以想通过转义 \\ 来拆分的时候会报异常   public class Main {          /*
  • POJ 1035 Spell checker(哈希表) aijuans 暴力求解--哈希表
    /* 题意：输入字典，然后输入单词，判断字典中是否出现过该单词，或者是否进行删除、添加、替换操作，如果是，则输出对应的字典中的单词 要求按照输入时候的排名输出 题解：建立两个哈希表。一个存储字典和输入字典中单词的排名，一个进行最后输出的判重 */ #include <iostream> //#define using namespace std; const int HASH =
  • 通过原型实现javascript Array的去重、最大值和最小值 ayaoxinchao JavaScriptarrayprototype
    用原型函数（prototype）可以定义一些很方便的自定义函数，实现各种自定义功能。本次主要是实现了Array的去重、获取最大值和最小值。 实现代码如下：   <script type="text/javascript"> Array.prototype.unique = function() { var a = {}; var le
  • UIWebView实现https双向认证请求 bewithme UIWebViewhttpsObjective-C
              什么是HTTPS双向认证我已在先前的博文 ASIHTTPRequest实现https双向认证请求 中有讲述，不理解的读者可以先复习一下。本文是用UIWebView来实现对需要客户端证书验证的服务请求，网上有些文章中有涉及到此内容，但都只言片语，没有讲完全，更没有完整的代码，让人困扰不已。但是此知
  • NoSQL数据库之Redis数据库管理(Redis高级应用之事务处理、持久化操作、pub_sub、虚拟内存) bijian1013 redis数据库NoSQL
    3.事务处理         Redis对事务的支持目前不比较简单。Redis只能保证一个client发起的事务中的命令可以连续的执行，而中间不会插入其他client的命令。当一个client在一个连接中发出multi命令时，这个连接会进入一个事务上下文，该连接后续的命令不会立即执行，而是先放到一个队列中，当执行exec命令时，redis会顺序的执行队列中
  • 各数据库分页sql备忘 bingyingao oraclesql分页
    ORACLE 下面这个效率很低 SELECT * FROM ( SELECT A.*, ROWNUM RN FROM (SELECT * FROM IPAY_RCD_FS_RETURN order by id desc) A ) WHERE RN <20; 下面这个效率很高 SELECT A.*, ROWNUM RN FROM (SELECT * FROM IPAY_RCD_
  • 【Scala七】Scala核心一：函数 bit1129 scala
    1. 如果函数体只有一行代码，则可以不用写{},比如 def print(x: Int) = println(x) 一行上的多条语句用分号隔开，则只有第一句属于方法体，例如   def printWithValue(x: Int) : String= println(x); "ABC"   上面的代码报错，因为，printWithValue的方法
  • 了解GHC的factorial编译过程 bookjovi haskell
    GHC相对其他主流语言的编译器或解释器还是比较复杂的，一部分原因是haskell本身的设计就不易于实现compiler，如lazy特性，static typed，类型推导等。 关于GHC的内部实现有篇文章说的挺好，这里，文中在RTS一节中详细说了haskell的concurrent实现，里面提到了green thread，如果熟悉Go语言的话就会发现，ghc的concurrent实现和Go有点类
  • Java-Collections Framework学习与总结-LinkedHashMap BrokenDreams LinkedHashMap
            前面总结了java.util.HashMap，了解了其内部由散列表实现，每个桶内是一个单向链表。那有没有双向链表的实现呢？双向链表的实现会具备什么特性呢？来看一下HashMap的一个子类——java.util.LinkedHashMap。       
  • 读《研磨设计模式》-代码笔记-抽象工厂模式-Abstract Factory bylijinnan abstract
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * Abstract Factory Pattern * 抽象工厂模式的目的是： * 通过在抽象工厂里面定义一组产品接口，方便地切换“产品簇” * 这些接口是相关或者相依赖的
  • 压暗面部高光 cherishLC PS
    方法一、压暗高光&重新着色 当皮肤很油又使用闪光灯时，很容易在面部形成高光区域。 下面讲一下我今天处理高光区域的心得： 皮肤可以分为纹理和色彩两个属性。其中纹理主要由亮度通道（Lab模式的L通道）决定，色彩则由a、b通道确定。 处理思路为在保持高光区域纹理的情况下，对高光区域着色。具体步骤为：降低高光区域的整体的亮度，再进行着色。 如果想简化步骤，可以只进行着色（参看下面的步骤1
  • Java VisualVM监控远程JVM crabdave visualvm
    Java VisualVM监控远程JVM    JDK1.6开始自带的VisualVM就是不错的监控工具. 这个工具就在JAVA_HOME\bin\目录下的jvisualvm.exe, 双击这个文件就能看到界面   通过JMX连接远程机器, 需要经过下面的配置: 1. 修改远程机器JDK配置文件 (我这里远程机器是linux).    
  • Saiku去掉登录模块 daizj saiku登录olapBI
    1、修改applicationContext-saiku-webapp.xml <security:intercept-url pattern="/rest/**" access="IS_AUTHENTICATED_ANONYMOUSLY" />  <security:intercept-url pattern=&qu
  • 浅析 Flex中的Focus dsjt htmlFlexFlash
    关键字：focus、 setFocus、 IFocusManager、KeyboardEvent 焦点、设置焦点、获得焦点、键盘事件 一、无焦点的困扰——组件监听不到键盘事件 原因：只有获得焦点的组件（确切说是InteractiveObject）才能监听到键盘事件的目标阶段；键盘事件（flash.events.KeyboardEvent）参与冒泡阶段，所以焦点组件的父项（以及它爸
  • Yii全局函数使用 dcj3sjt126com yii
    由于YII致力于完美的整合第三方库，它并没有定义任何全局函数。yii中的每一个应用都需要全类别和对象范围。例如，Yii::app()->user;Yii::app()->params['name'];等等。我们可以自行设定全局函数，使得代码看起来更加简洁易用。(原文地址) 我们可以保存在globals.php在protected目录下。然后，在入口脚本index.php的，我们包括在
  • 设计模式之单例模式二（解决无序写入的问题） come_for_dream 单例模式volatile乱序执行双重检验锁
                    在上篇文章中我们使用了双重检验锁的方式避免懒汉式单例模式下由于多线程造成的实例被多次创建的问题，但是因为由于JVM为了使得处理器内部的运算单元能充分利用，处理器可能会对输入代码进行乱序执行（Out Of Order Execute）优化，处理器会在计算之后将乱序执行的结果进行重组，保证该
  • 程序员从初级到高级的蜕变 gcq511120594 框架工作PHPandroidhtml5
    软件开发是一个奇怪的行业，市场远远供不应求。这是一个已经存在多年的问题，而且随着时间的流逝，愈演愈烈。 我们严重缺乏能够满足需求的人才。这个行业相当年轻。大多数软件项目是失败的。几乎所有的项目都会超出预算。我们解决问题的最佳指导方针可以归结为——“用一些通用方法去解决问题，当然这些方法常常不管用，于是，唯一能做的就是不断地尝试，逐个看看是否奏效”。 现在我们把淫浸代码时间超过3年的开发人员称为
  • Reverse Linked List hcx2013 list
    Reverse a singly linked list.   /** * Definition for singly-linked list. * public class ListNode { * int val; * ListNode next; * ListNode(int x) { val = x; } * } */ p
  • Spring4.1新特性——数据库集成测试 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
  • C# Ajax上传图片同时生成微缩图(附Demo) liyonghui160com
        1.Ajax无刷新上传图片,详情请阅我的这篇文章。（jquery + c# ashx）         2.C#位图处理  System.Drawing。         3.最新demo支持IE7,IE8,Fir
  • Java list三种遍历方法性能比较 pda158 java
    从c/c++语言转向java开发，学习java语言list遍历的三种方法，顺便测试各种遍历方法的性能，测试方法为在ArrayList中插入1千万条记录，然后遍历ArrayList，发现了一个奇怪的现象，测试代码例如以下： package com.hisense.tiger.list; import java.util.ArrayList; import java.util.Iterator;
  • 300个涵盖IT各方面的免费资源（上）——商业与市场篇 shoothao seo商业与市场IT资源免费资源
    A.网站模板+logo+服务器主机+发票生成 HTML5 UP:响应式的HTML5和CSS3网站模板。 Bootswatch:免费的Bootstrap主题。 Templated:收集了845个免费的CSS和HTML5网站模板。 Wordpress.org|Wordpress.com:可免费创建你的新网站。 Strikingly:关注领域中免费无限的移动优
  • localStorage、sessionStorage uule localStorage
    W3School 例子   HTML5 提供了两种在客户端存储数据的新方法： localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储   之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他