yonglailizhi
yonglailizhi

CSS定位机制普通流

由于没有找到自己认为完整的关于普通流、浮动和绝对定位的中文文章，于是鼓起勇气决定自己来写篇。为此大致啃掉了CSS2.1里的 8 Box model 以及 9 Visual formatting model 。实话说，还真是看得有点头大，呵呵~

文档流，其实标准里根本就没有这个词。如果把文档流直译为英文就是 document flow ，但标准里只有另一个词，叫做普通流( normal flow )，或者称为常规流。但似乎大家更习惯文档流的称呼，因为很多中文翻译的书就是这么来的。比如《CSS Mastery》，英文原书中至始至终都只有普通流 normal flow 这一词，从来没出现过文档流 document flow 。但是中文译本“普通流”和“文档流”却是交替出现的。

什么是普通流？简单说就是元素按照其在 HTML 中的位置顺序决定排布的过程。并且这种过程遵循标准的描述。

为了从不同角度说明，我采集了一些可能冗长、具体或者晦涩的其他人给出的定义：

将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流。 
[email protected]: 普通流是元素在多数情况下呈现在 web 页面上的方式。所有 HTML 都在块框( block boxes，块级元素 )或者行内框( inline boxes，行内元素 )中。 
Rainbo Design: 当浏览器开始渲染 HTML 文档，它从窗口的顶端开始，经过整个文档内容的过程中，分配元素需要的空间。除非文档的尺寸被 CSS 特别的限定，否则浏览器垂直扩展文档来容纳全部的内容。每个新的块级元素渲染为新行。行内元素则按照顺序被水平渲染直到当前行遇到了边界，然后换到下一行垂直渲染。这个过程被成为普通文档流。
可见，把流( flow )理解为流程，完全说的通。普通流即是通常情况下的元素排布和定位流程。

但其实在CSS2.1RC里，普通流的本质是三种定位机制( Positioning schemes )之一，被定义为：

引用:

Normal flow. In CSS 2.1, normal flow includes block formatting of block boxes, inline formatting of inline boxes, relative positioning of block or inline boxes, and positioning of run-in boxes.
这个过程包括了块格式化( block formatting )，行内格式化(inline formatting )，相对定位( relative positioning )，以及 run-in boxes 的定位。似乎和上面那些迥然不同，但是把这些分解开来，仍然是一致的。

另外，9.4 Normal flow下还有一段：

引用:

Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block boxes participate in a block formatting context. Inline boxes participate in an inline formatting context.
这是段描述，不是定义。在普通流中的 Box(框) 属于一种 formatting context(格式化上下文) ，类型可以是 block ，或者是 inline ，但不能同时属于这两者。并且， Block boxes(块框) 在 block formatting context(块格式化上下文) 里格式化， Inline boxes(块内框) 则在 inline formatting context(行内格式化上下文) 里格式化。

我们知道，任何被渲染的元素都属于一个 box ，并且不是 block ，就是 inline 。即使是未被任何元素包裹的文本，根据不同的情况，也会属于匿名的 block boxes 或者 inline boxes。所以上面的描述，即是把所有的元素划分到对应的 formatting context 里。


组合上面的定义，并且姑且先把 formatting context 看做是一种范围限定，那么具体讲，普通流就是这样的过程：

1.在对应的 block formatting context 中，块级元素按照其在HTML中的顺序，在其容器框里从左上角开始，从上到下垂直地依次分配空间、堆砌( stack )，并独占一行，边界紧贴父容器。两相邻元素间的距离由 margin 属性决定，在同一个 block formatting context 中的垂直边界将被重叠( collapse )。并且，除非创建一个新的 block formatting context ，否则块级元素的宽度不受浮动元素的影响(这就是浮动元素能盖在块级元素上面的原因)。

2.在对应的 inline formatting context 中，行内元素从容器的顶端开始，一个接一个地水平排布。水平填充、边框和边距对行内元素有效。但垂直的填充、边框和空白边不影响其高度。一个水平行中的所有 inline box 组成了名为 line box 的矩形区域。 line box 的高度始终容下所有的 inline box ，并只与行高有关。 line box 的宽度受到父容器和浮动元素存在的影响(这就是文本环绕浮动元素)。如果 line box 的宽度小于容器， line box 的水平排布就取决于 text-align 。如果 line box 的宽度大于容器，则截断 line box 并换行在新的 line box 中重新排布元素(截断处不应用 padding 和 margin 值)。如果 line box 无法截断，如单词过长或者指定不换行，则会溢出容器。

3.对这些 block box 和 inline box 进行相对定位，即相对于已排布的位置进行偏移。元素在其中保留原来所占用的空间。

说了一堆东西，其实就只是在说如何排布元素而已。那些都非常容易理解，除了一个概念—— formatting context 。

什么是 formatting context ？ context 总是解释为上下文环境，那么格式化上下文就应该是指格式化时的前后关系。

然而对此，标准里没有更多的定义和解释。

虽然 mozilla developer center 上没有关于 inline formatting context 的资料，但是却有关于 block formatting context 的描述：一个 block formatting context 是web页面可视化CSS渲染的一个部分，是一块 block boxes 排布以及 float 元素相互作用的区域。
用自己的话简言之，那是一个作用范围。可以把它理解成是一个独立的容器，并且这个容器的里box的布局，与这个容器外的毫不相干。

下面的这些情况，都会创建一个新的 block formatting context：

根元素 
浮动或绝对定位的元素 
display 值为 inline-blocks ， table-cell 或 table-caption 
overflow 值为非 visible
虽然标准里没有提到根元素会创建新的 block formatting context ，但是mozilla提到了，并且这也解释了初始的一个上下文环境的建立。

这里有个建立( establishes )的概念，这个概念和建立容器块( containing block )的概念类似。比如，A是B父元素，当B被渲染时其位置和大小会参照一个容器块，这个容器块是由其父元素A建立的。是的，有点简单问题复杂化。虽然实质上父元素就是子元素的容器，但是过程中间却有个建立( establishes )的概念。并且这个创建的概念被应用于其他作用范围，包括 block formatting context 。

想想我们平常在做的事情。当一个父元素因为子元素浮动而导致高度为0的时候，也许我们会习惯的加上这样的规则：

overflow:hidden;zoom:1; 。

overflow:hidden 不正是创建了一个新的 block formatting context 吗？那么 zoom:1 是怎么回事？这不得不提到 IE 私有的 hasLayout ，一个和 block formatting context 行为相仿的IE特产。对于 hasLayout ，本文不做讨论。可以阅读那篇有名的 On having layout ，中文版由 old9 翻译过，但是链接似乎暂时挂掉了，所以可以看看蓝色理想上转载的版本。

这就是为什么浮动元素总是容纳浮动元素的原因——浮动元素创建了新的 block formatting context，其内部的布局不在和外部有关。比如内部的浮动清除不会再影响到外部，并且内部的浮动对于外部而言也是不可见的。这也是为什么《精通CSS》会说 “应用值为 hidden 或 auto 的 overflow 属性会自动地清理任何浮动元素” 的原因。同时，这也是为什么有的时候必须用清除浮动而不是设置overflow来使父容器容纳浮动元素，因为 “设置框的overflow属性会影响它的表现”。

 

举个实际当中的常见例子，比如垂直边距叠加问题：

代码:

<html>
    <head></head>
    <body>
        <div id="A" style="background:gray;margin-top:20px;">
            <div id="B" style="margin-top:10px;">
                我有10px m-t
            </div>
        </div>
    </body>
</html>
如果在现代的浏览器里运行，那么 B 的10px上边距将会和父元素 A 的20px上边距重叠起来，从而看起来就好像 B 没有上边距一样。就像前面说的那样，同一个 block formatting context 中的垂直边界将被重叠。那么不同 block formatting context 呢？

这种情况，如果不想加边框( border:1px solid transparent; )解决的话，那么就需要 A 建立一个新的 block formatting context 将 B 包裹起来，那么 A 的上边距和 B 的上边距就毫不相干了。可以用浮动，也可以加 overflow ，这要看具体情况。

代码:

<html>
    <head></head>
    <body>
        <div id="A" style="background:gray;margin-top:20px;overflow:auto;">
            <div id="B" style="margin-top:10px;">
                我有10px m-t
            </div>
        </div>
    </body>
</html>
再一个例子，回头看下上面过程里这样的一句：除非创建一个新的 block formatting context ，否则块级元素的布局不受浮动元素的影响。

这是造成元素重叠的原因。比如下面的代码：

代码:

<html>
    <head></head>
    <body>
        <div id="A" style="background:gray;overflow:auto;">
            <div id="B" style="background:green;margin:10px 10px 0 0;float:right;">
                浮动元素m_10_10_0_0
            </div>
            <div id="C" style="background:red;">
                普通流块
            </div>
        </div>
    </body>
</html>
普通流块 C 在容器 A 里排布的时候，并不受浮动元素的影响，甚至当浮动元素 B 不存在。但是如果 C 创建了新的 block formatting context ，那么，普通流块c就会像 line box 一样受到浮动元素存在的影响而缩小。

代码:

<html>
    <head></head>
    <body>
        <div id="A" style="background:gray;overflow:auto;">
            <div id="B" style="background:green;margin:10px 10px 0 0;float:right;">
                浮动元素m_10_10_0_0
            </div>
            <div id="C" style="background:red;overflow:auto;">
                普通流块
            </div>
        </div>
    </body>
</html>
关于浮动和 block formatting context ，brunildo.org 上有一份不错的参考。

说了这么多了，其实概念仍然可以很简单。普通流仅仅只是一种定位的机制。而flow本身在标准里也可以作为一个动词，就如同按顺序一个个的拿出HTML元素然后放到页面上一般。只是要注意一下 formatting context 的概念，特别是 block formatting context ，因为其影响更大(包括边距重叠、浮动清除、元素重叠等)。

 原文：http://www.swordair.com/blog/2010/08/415 

你可能感兴趣的:(html,浏览器,css,IE,Blog)

  • Flutter基础（项目1结构）
    123lib/├──api/#网络请求层├──common/#公共类、常量、工具函数├──models/#数据模型├──providers/#状态管理（Provider/Riverpod）├──routes/#⭐路由集中管理（核心）│└──app_routes.dart#路由配置入口├──views/#⭐页面文件（一个页面一个.dart）│├──home_page.dart│├──detail_p
  • ServiceImpl注入多个baseMapper实例报错 缘来是庄 java
    1、项目启动报错FieldbaseMapperincom.baomidou.mybatisplus.extension.service.impl.ServiceImplrequiredasinglebean,but2werefound:-xxxMapper:definedinfile[D:\xxxMapper.class]-xxxxMapper:definedinfile[D:\xxxxMappe
  • AD20学习笔记——BOM表输出 Fz@ EDA学习学习笔记
    BOM表输出脚本链接GitHub上-lianlian33/InteractiveHtmlBomForAD网盘链接链接：https://pan.baidu.com/s/1uGpwDyWKNgzghY5EH1Aj8A?pwd=72tx提取码：72tx1、下载文件并解压2、复制文件路径3、将脚本导入AD①点击设置中的ScriptingSystem中的GlobalProjects，选择从文件夹安装。②粘贴
  • Qt控件库：QCustomPlot 大白萝卜不紧张 qtqtqcustomplot
    曲线添加#includeQCustomPlot*plot=newQCustomPlot(this);//创建曲线对象，创建时就已经添加QCPGraph*graph=plot->addGraph();//设置曲线的x和y数据QVectorx={1,2,3,4,5};QVectory={1,4,9,16,25};graph->setData(x,y);背景//设置背景颜色QLinearGradient
  • Linux离线安装mysql 为你奋斗！ 开发环境软件安装androidadb
    Linux离线安装mysql(centos7)1、下载MySQL2、使用xshell文件传输工具，上传到Linux服务器3、安装前准备4、安装MySQL5、Navicat连接测试1、下载MySQLhttps://dev.mysql.com/downloads/mysql/5.7.html#downloads2、使用xshell文件传输工具，上传到Linux服务器在/usr/local文件夹下创建m
  • SpringAI系列 - MCP篇（二） - MCP Server Boot Starter 罗小爬EX SpringAISpringAIMCP
    目录一、MCPJavaSDKMCPClientMCPServer二、SpringAIMcp集成三、SpringAIMCPBootStater四、spring-ai-starter-mcp-server-webmvc集成示例4.1集成Tools4.2集成Resources4.3集成Prompts4.4监听MCPClient端Roots变更通知五、通过SSE连接MCPServer六、通过STDIO连接
  • 说说自己Python 代码优化实践 chilavert318 大数据linux运维python
    今年上半年在外省做一个大数据相关的项目，在review项目组成员的代码时，发现一段处理大数据集的模块存在明显性能瓶颈：10万条数据的清洗流程耗时近20分钟，CPU占用率却始终在30%以下。深入分析后发现，看似简洁的Python代码背后，隐藏着诸多可以优化的细节——这并非个例，我们的程序在追求代码可读性时，往往忽略了Python特有的性能陷阱。今天抽点时间，从我实践中的代码就python开发，从内存
  • 一个简单测试Deepseek吞吐量的脚本,国内环境可跑 谢平康 深度学习pytorch人工智能
    一个简单测试Deepseek吞吐量的脚本,这里用DeepSeek-R1-Distill-Qwen-32B,支持单卡409024G可跑,具体看你的硬件情况做调整,理论支持所有的模型,看你需要,可以修改模型名称,重点是pip使用国内的源,模型下载用阿里的ModelScope,无障碍下载,使用.最后可以生成一个txt与html报表.前提是你安装了python与python-venv,你可以不用venv来
  • Redis（十五）Bitmap、Hyperloglog、GEO案例、布隆过滤器 Lucky_Turtle Javaredis面试数据库
    文章目录面试题常见统计类型聚合统计排序统计二值统计基数统计Hyperloglog专有名词UV（UniqueVisitor）独立访客PV（PageView）页面浏览量DAU（DailyActiveUser）日活跃用户量MAU（MonthlyActiveUser）需求原理亿级UV的Redis统计方案GEO面试题命令GEOADD获取某位置的经纬度GEOPOS返回坐标的Geohash表示GEOHASH两个
  • 【原创】【4】【辅助工具】基于视觉模型+FFmpeg+MoviePy实现短视频自动化二次编辑+多赛道 三块钱0794 ffmpeg音视频自动化
    主要功能目录选择-浏览选择包含视频的目录智能扫描-自动递归扫描所有视频文件️赛道管理-从文件夹名自动获取赛道或手动指定实时进度-显示扫描和导入的实时进度双数据库-支持SQLite（推荐）和MySQL重复检测-自动跳过已存在的视频文件使用场景示例假设您的视频目录结构是：D:\短视频\├──外国人系列\│├──1.mp4│├──2.mp4│└──3.mov├──美食系列\│├──美食1.mp4│└──
  • 大模型——Obsidian加Cursor就是最强个人AI知识库 不二人生 大模型人工智能爬虫大模型Obsidiancursor
    大模型——Obsidian加Cursor就是最强个人AI知识库这几天因为看到了Obsidian的浏览器剪藏插件的强大（这个下节讲）所以开始玩Obsidian，想要搞一个符合自己要求的本地知识库再加上AI的加持。也装了几个Obsidian的AI插件，结果发现配置非常复杂，体验不太行，想要顺畅使用的话得看文档，甚至还有看文档都无法结局的恶性Bug，我得搜Github其他人的问题才能搞定。这些插件的作用
  • python-拆解sklearn中决策树 weixin_41177022 scikit-learn决策树python机器学习编程
    获取树结构实体对scikit-learn中DecisionTreeClassifier/Regressor的实例调用.tree_属性可以得到树结构。参考sklearn的决策树的官方说明sklearn.tree.DecisionTreeClassifier（不过里面说的help(sklearn.tree._tree.Tree)似乎不管用）获取决策树基本信息node总数可以用model.tree_.n
  • 如何设计一款现代化风格的博客主题程序呢？ LeleBlog - 现代化Typecho博客主题 独立开发者阿乐 原创深度学习人工智能算法源代码管理学习方法技术美术
    文章目录LeleBlog-Typecho主题目录主题介绍✨主题特性主题架构安装教程使用指南主题设置基本设置首页设置公告设置界面元素侧边栏设置生日倒计时社交链接友情链接与信息文章编辑兼容插件❓常见问题配套主题插件更多干货1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请“点赞”“✍️评论”“收藏”一键三连哦！LeleBlog-Typecho主题一款为Typecho开发的现代化、功能丰富的博客主题
  • GTID（Global Transaction Identifier，全局事务标识符）：MySQL 主从复制的核心机制 心灵星图 运维mysql数据库
    GTID（GlobalTransactionIdentifier，全局事务标识符）是MySQL数据库在主从复制中引入的核心机制，用于唯一标识全局事务，简化复制管理和故障转移流程。其核心概念与工作机制如下：一、GTID的定义与组成基本结构GTID由两部分构成：source_id:transaction_id。source_id：即MySQL实例的唯一标识server_uuid（首次启动时生成，存储在
  • 第 5 部分 - 关系与超链接 API pythondjango
    目前我们API中的关系是通过使用主键来表示的。在教程的这一部分中，我们将通过使用超链接来代替主键，从而提高API的内聚性和可发现性。为我们的API根创建一个端点现在我们已经有了"snippets"和"users"的端点，但我们没有一个单一的API入口点。为了创建一个入口点，我们将使用一个普通的基于函数的视图以及我们之前介绍的@api_view装饰器。在你的snippets/views.py中添加：
  • 第 3 部分 - 类视图 pythondjango
    我们也可以使用类视图，而不是基于函数的视图来编写API视图。我们会看到，这是一种强大的模式，允许我们重用通用功能，并有助于我们保持代码的简洁性。我们将从重构views.py中的根视图为类视图开始。fromsnippets.modelsimportSnippetfromsnippets.serializersimportSnippetSerializerfromdjango.httpimportHt
  • 第 4 部分 - 认证与权限 pythondjango
    目前我们的API对于谁能编辑或删除代码片段没有任何限制。我们希望实现更高级的行为以确保：代码片段始终与创建者相关联。只有经过身份验证的用户才能创建片段。只有片段的创建者才能更新或删除它。未经过身份验证的请求应具有完全的只读访问权限。向模型中添加信息我们将在Snippet模型类中做一些更改。首先，让我们添加几个字段。其中的一个字段将用于表示创建代码片段的用户。另一个字段将用于存储代码的高亮HTML表
  • Definition of a Requirement workflower 软件需求软件工程需求分析敏捷流程开发语言
    IEEE给出的需求定义Firstofall,whatismeantbyarequirement?HereisatypicaldefinitiondrawnfromIEEE-STD-1220-1998(IEEE1998):Requirement:astatementthatidentifiesaproductorprocessoperational,functional,ordesigncharac
  • Django项目前后端类型中，用户注册功能实现笔记（第一部分） 后端django
    用户注册前端逻辑为了学会使用Vue.js的双向绑定实现用户的交互和页面局部刷新效果。1.用户注册页面绑定Vue数据1.准备div盒子标签......2.register.html绑定内容：变量、事件、错误提示等{{csrf_input}}用户名:[[error_name_message]]密码:请输入8-20位的密码确认密码:两次输入的密码不一致号:[[error_mobile_message]]
  • DevEco Studio3.1报错：预览器使用报错，显示Prepare previewer Reource faileD和Build task failed. Open the Run window Ailerx 鸿蒙harmonyos华为webapp
    对于刚下载DevEcoStudio3.0的小伙伴，不知道有没有遇到这种情况：previewlog：显示：Buildtaskfailed.OpentheRunwindowtoviewdetails.网上搜了好久，终于找到解决办法了，具体解决方法是：打开设置，构建，执行，部署下面的Hvigor，然后，关掉最下面那个就好了：
  • React - 错误边界（Error boundary） 风轻轻~ #React__基础react.js
    React-错误边界（Errorboundary）一.理解二.使用1.使用方式2.使用案例错误边界：https://zh-hans.reactjs.org/docs/error-boundaries.html一.理解部分UI的JavaScript错误不应该导致整个应用崩溃，为了解决这个问题，React16引入了一个新的概念——错误边界。错误边界是一种React组件，这种组件可以捕获发生在其子组件树
  • React Error Boundary Happy_Ariel react.jsjavascript前端
    ReactErrorBoundaryimport*asReactfrom'react';import{Component}from'react';import{createRoot}from'react-dom/client';functionrenderWithError(){thrownewError('error');}functionA(){return{renderWithError()
  • Tailwind CSS自定义用法 TE-茶叶蛋 面试复习系列csscss前端
    文章目录前言✅一、集成TailwindCSS到React项目1.安装依赖2.配置`tailwind.config.js`3.创建全局样式文件（如`src/index.css`）@tailwindbase;@tailwindcomponents;@tailwindutilities;4.在`main.tsx`或`main.jsx`中引入样式✅二、自定义样式方式汇总1.`theme.extend`自定
  • 我的世界1.20.1forge模组开发进阶教程——Geckolib动画实体（3） lemon_sjdk java我的世界模组开发
    注意：本章涉及大量的geckolib底层代码，补充讲解了上一节没讲的，如果看不懂请去学习JavaGeoEntity////Sourcecoderecreatedfroma.classfilebyIntelliJIDEA//(poweredbyFernFlowerdecompiler)//packagesoftware.bernie.geckolib.animatable;importjavax
  • Java 期末复习（四） 四谎真好看 javaeclipse
    1.创建一个标识有“关闭”按钮的语句是（）A.TextFieldb=newTextField(“关闭”);B.Lableb=newLable(“关闭”);C.Checkboxb=newCheckbox(“关闭”);D.Buttonb=newButton(“关闭”);解：①根据英语单词的意思来选择就行，Button类是专用于创建可点击的按钮控件。②TextField是输入框的意思，Lable是只读文
  • Python爬虫实战：研究Bleach库相关技术 ylfhpy 爬虫项目实战python爬虫php开发语言Bleach
    1.引言在大数据时代，网络内容采集已成为信息获取的重要手段。Python凭借其丰富的爬虫库（如Requests、Scrapy）和灵活的数据处理能力，成为网页爬虫开发的首选语言。然而，从互联网获取的内容往往包含恶意脚本、不安全标签等安全隐患，直接使用可能导致XSS(跨站脚本攻击)、数据泄露等风险。Bleach作为专业的HTML净化库，通过白名单机制提供了可靠的内容安全过滤方案。本文将结合实际案例，详
  • Python爬虫实战：研究untangle库相关技术 ylfhpy 爬虫项目实战python爬虫php开发语言untangle
    1.引言在大数据时代，网络数据已成为重要的信息资源。XML和HTML作为互联网上最常用的数据表示格式，广泛应用于API接口、网站结构和数据交换等场景。Python凭借其丰富的爬虫库（如Requests、Scrapy）和灵活的数据处理能力，成为网络数据采集的首选语言。然而，从复杂的XML/HTML文档中提取结构化数据仍然面临诸多挑战，如文档结构多样性、动态内容渲染和数据格式转换等问题。Untangl
  • JavaScript基础-常见网页特效案例 咖啡の猫 javascript开发语言ecmascript
    一、前言在前端开发中，实现网页特效（如轮播图、下拉菜单、Tab切换、拖拽效果等）是提升用户体验和页面交互性的关键手段之一。这些特效不仅能增强用户对网站的粘性，也是衡量一个前端开发者能力的重要标准。JavaScript是实现网页特效的核心技术之一，结合HTML和CSS，可以轻松构建丰富的交互效果。本文将带你深入了解：常见网页特效的实现原理；如何使用原生JavaScript实现经典特效；每个案例附带完
  • JavaScript基础-触屏事件 咖啡の猫 javascript开发语言ecmascript
    一、前言随着移动端设备的普及，网页不仅要适配PC浏览器，更要兼容手机和平板等触摸设备。传统的鼠标事件（如click、mousedown等）在触控操作中存在一定的延迟和局限性，因此JavaScript提供了专门用于处理触摸操作的API——触屏事件（TouchEvents）。本文将带你深入了解：触屏事件的基本概念；常见的触屏事件类型（touchstart、touchmove、touchend等）；如何
  • 临床试验评价指标解析 qq_34062333 临床试验统计学
    一、主要疗效终点1.1生存类终点1.1.1总生存期(OS)定义：随机至全因死亡的时间统计方法：Kaplan-Meier,Cox模型优势/局限：金标准，无测量偏倚；但需大样本长随访1.1.2无进展生存期(PFS)定义：随机至疾病进展/死亡的时间统计方法：同上优势/局限：敏感、不受后续治疗影响；但评估易受主观性干扰1.1.3客观缓解率(ORR)定义：肿瘤缩小≥30%的患者比例(RECIST标准)统计方
  • SQL的各种连接查询 xieke90 UNION ALLUNION外连接内连接JOIN
    一、内连接   概念：内连接就是使用比较运算符根据每个表共有的列的值匹配两个表中的行。                 内连接（join 或者inner join ）       SQL语法：       select * fron
  • java编程思想--复用类 百合不是茶 java继承代理组合final类
          复用类看着标题都不知道是什么,再加上java编程思想翻译的比价难懂,所以知道现在才看这本软件界的奇书   一:组合语法:就是将对象的引用放到新类中即可     代码:     package com.wj.reuse; /** * * @author Administrator 组
  • [开源与生态系统]国产CPU的生态系统 comsci cpu
          计算机要从娃娃抓起...而孩子最喜欢玩游戏....       要让国产CPU在国内市场形成自己的生态系统和产业链,国家和企业就不能够忘记游戏这个非常关键的环节....       投入一些资金和资源,人力和政策,让游
  • JVM内存区域划分Eden Space、Survivor Space、Tenured Gen，Perm Gen解释 商人shang jvm内存
    jvm区域总体分两类，heap区和非heap区。heap区又分：Eden Space（伊甸园）、Survivor Space(幸存者区)、Tenured Gen（老年代-养老区）。 非heap区又分：Code Cache(代码缓存区)、Perm Gen（永久代）、Jvm Stack(java虚拟机栈)、Local Method Statck(本地方法栈)。 HotSpot虚拟机GC算法采用分代收
  • 页面上调用 QQ oloz qq
    <A href="tencent://message/?uin=707321921&amp;Site=有事Q我&amp;Menu=yes">   <img style="border:0px;" src=http://wpa.qq.com/pa?p=1:707321921:1></a>
  • 一些问题 文强chu 问题
    1.eclipse 导出 doc  出现“The Javadoc command does not exist.” javadoc command 选择 jdk/bin/javadoc.exe 2.tomcate 配置 web 项目 ..... SQL:3.mysql  * 必须得放前面 否则  select&nbs
  • 生活没有安全感 小桔子 生活孤独安全感
           圈子好小，身边朋友没几个，交心的更是少之又少。在深圳，除了男朋友，没几个亲密的人。不知不觉男朋友成了唯一的依靠，毫不夸张的说，业余生活的全部。现在感情好，也很幸福的。但是说不准难免人心会变嘛，不发生什么大家都乐融融，发生什么很难处理。我想说如果不幸被分手(无论原因如何)，生活难免变化很大，在深圳，我没交心的朋友。明
  • php 基础语法 aichenglong php 基本语法
    1 .1 php变量必须以$开头 <?php $a=” b”; echo ?> 1 .2 php基本数据库类型 Integer  float/double Boolean string 1 .3 复合数据类型 数组array和对象 object 1 .4 特殊数据类型  null 资源类型(resource)    $co
  • mybatis tools 配置详解 AILIKES mybatis
    MyBatis Generator中文文档 MyBatis Generator中文文档地址： http://generator.sturgeon.mopaas.com/ 该中文文档由于尽可能和原文内容一致，所以有些地方如果不熟悉，看中文版的文档的也会有一定的障碍，所以本章根据该中文文档以及实际应用，使用通俗的语言来讲解详细的配置。 本文使用Markdown进行编辑，但是博客显示效
  • 继承与多态的探讨 百合不是茶 JAVA面向对象 继承 对象
    继承 extends   多态 继承是面向对象最经常使用的特征之一：继承语法是通过继承发、基类的域和方法 //继承就是从现有的类中生成一个新的类，这个新类拥有现有类的所有extends是使用继承的关键字：     在A类中定义属性和方法； class A{ //定义属性 int age； //定义方法 public void go
  • JS的undefined与null的实例 bijian1013 JavaScriptJavaScript
    <form name="theform" id="theform"> </form> <script language="javascript"> var a alert(typeof(b)); //这里提示undefined if(theform.datas
  • TDD实践（一） bijian1013 java敏捷TDD
    一.TDD概述         TDD：测试驱动开发，它的基本思想就是在开发功能代码之前，先编写测试代码。也就是说在明确要开发某个功能后，首先思考如何对这个功能进行测试，并完成测试代码的编写，然后编写相关的代码满足这些测试用例。然后循环进行添加其他功能，直到完全部功能的开发。     
  • [Maven学习笔记十]Maven Profile与资源文件过滤器 bit1129 maven
    什么是Maven Profile Maven Profile的含义是针对编译打包环境和编译打包目的配置定制，可以在不同的环境上选择相应的配置，例如DB信息，可以根据是为开发环境编译打包，还是为生产环境编译打包，动态的选择正确的DB配置信息   Profile的激活机制 1.Profile可以手工激活，比如在Intellij Idea的Maven Project视图中可以选择一个P
  • 【Hive八】Hive用户自定义生成表函数(UDTF) bit1129 hive
    1. 什么是UDTF   UDTF，是User Defined Table-Generating Functions，一眼看上去，貌似是用户自定义生成表函数，这个生成表不应该理解为生成了一个HQL Table， 貌似更应该理解为生成了类似关系表的二维行数据集   2. 如何实现UDTF 继承org.apache.hadoop.hive.ql.udf.generic
  • tfs restful api 加auth 2.0认计 ronin47
    　　目前思考如何给tfs的ngx-tfs api增加安全性。有如下两点： 　　一是基于客户端的ip设置。这个比较容易实现。 　　二是基于OAuth2.0认证，这个需要lua，实现起来相对于一来说，有些难度。 　　现在重点介绍第二种方法实现思路。 　　 前言：我们使用Nginx的Lua中间件建立了OAuth2认证和授权层。如果你也有此打算，阅读下面的文档，实现自动化并获得收益。SeatGe
  • jdk环境变量配置 byalias javajdk
    进行java开发，首先要安装jdk，安装了jdk后还要进行环境变量配置： 1、下载jdk（http://java.sun.com/javase/downloads/index.jsp），我下载的版本是：jdk-7u79-windows-x64.exe 2、安装jdk-7u79-windows-x64.exe 3、配置环境变量：右击"计算机"-->&quo
  • 《代码大全》表驱动法-Table Driven Approach-2 bylijinnan java
    package com.ljn.base; import java.io.BufferedReader; import java.io.FileInputStream; import java.io.InputStreamReader; import java.util.ArrayList; import java.util.Collections; import java.uti
  • SQL 数值四舍五入 小数点后保留2位 chicony 四舍五入
    1.round() 函数是四舍五入用，第一个参数是我们要被操作的数据，第二个参数是设置我们四舍五入之后小数点后显示几位。 2.numeric 函数的2个参数，第一个表示数据长度，第二个参数表示小数点后位数。 例如： 　　select   cast(round(12.5,2)   as   numeric(5,2))  
  • c++运算符重载 CrazyMizzz C++
    一、加+，减-，乘*，除/ 的运算符重载 Rational operator*(const Rational &x) const{ return Rational(x.a * this->a); } 在这里只写乘法的，加减除的写法类似 二、<<输出,>>输入的运算符重载      &nb
  • hive DDL语法汇总 daizj hive修改列DDL修改表
    hive DDL语法汇总 １、对表重命名 hive> ALTER TABLE table_name RENAME TO new_table_name;   2、修改表备注 hive> ALTER TABLE table_name SET TBLPROPERTIES ('comment' = new_comm
  • jbox使用说明 dcj3sjt126com Web
    参考网址：http://www.kudystudio.com/jbox/jbox-demo.html jBox v2.3 beta [ 点击下载]  技术交流QQGroup：172543951 100521167 [2011-11-11] jBox v2.3 正式版 - [调整&修复] IE6下有iframe或页面有active、applet控件
  • UISegmentedControl 开发笔记 dcj3sjt126com
      //    typedef NS_ENUM(NSInteger, UISegmentedControlStyle) {     //        UISegmentedControlStylePlain,     // large plain   &
  • Slick生成表映射文件 ekian scala
    Scala添加SLICK进行数据库操作，需在sbt文件上添加slick-codegen包 "com.typesafe.slick" %% "slick-codegen" % slickVersion 因为我是连接SQL Server数据库，还需添加slick-extensions，jtds包 "com.typesa
  • ES-TEST gengzg test
    package com.MarkNum; import java.io.IOException; import java.util.Date; import java.util.HashMap; import java.util.Map; import javax.servlet.ServletException; import javax.servlet.annotation
  • 为何外键不再推荐使用 hugh.wang mysqlDB
    表的关联，是一种逻辑关系，并不需要进行物理上的“硬关联”，而且你所期望的关联，其实只是其数据上存在一定的联系而已，而这种联系实际上是在设计之初就定义好的固有逻辑。 在业务代码中实现的时候，只要按照设计之初的这种固有关联逻辑来处理数据即可，并不需要在数据库层面进行“硬关联”，因为在数据库层面通过使用外键的方式进行“硬关联”，会带来很多额外的资源消耗来进行一致性和完整性校验，即使很多时候我们并不
  • 领域驱动设计 julyflame VODAO设计模式DTOpo
    概念： VO（View Object）：视图对象，用于展示层，它的作用是把某个指定页面（或组件）的所有数据封装起来。 DTO（Data Transfer Object）：数据传输对象，这个概念来源于J2EE的设计模式，原来的目的是为了EJB的分布式应用提供粗粒度的数据实体，以减少分布式调用的次数，从而提高分布式调用的性能和降低网络负载，但在这里，我泛指用于展示层与服务层之间的数据传输对
  • 单例设计模式 hm4123660 javaSingleton单例设计模式懒汉式饿汉式
           单例模式是一种常用的软件设计模式。在它的核心结构中只包含一个被称为单例类的特殊类。通过单例模式可以保证系统中一个类只有一个实例而且该实例易于外界访问，从而方便对实例个数的控制并节约系统源。如果希望在系统中某个类的对象只能存在一个，单例模式是最好的解决方案。      &nb
  • logback zhb8015 loglogback
    一、logback的介绍      Logback是由log4j创始人设计的又一个开源日志组件。logback当前分成三个模块：logback-core,logback- classic和logback-access。logback-core是其它两个模块的基础模块。logback-classic是log4j的一个 改良版本。此外logback-class
  • 整合Kafka到Spark Streaming——代码示例和挑战 Stark_Summer sparkstormzookeeperPARALLELISMprocessing
    作者Michael G. Noll是瑞士的一位工程师和研究员，效力于Verisign，是Verisign实验室的大规模数据分析基础设施（基础Hadoop）的技术主管。本文，Michael详细的演示了如何将Kafka整合到Spark Streaming中。 期间， Michael还提到了将Kafka整合到 Spark Streaming中的一些现状，非常值得阅读，虽然有一些信息在Spark 1.2版
  • spring-master-slave-commondao 王新春 DAOspringdataSourceslavemaster
    互联网的web项目，都有个特点：请求的并发量高，其中请求最耗时的db操作，又是系统优化的重中之重。 为此，往往搭建 db的 一主多从库的 数据库架构。作为web的DAO层，要保证针对主库进行写操作，对多个从库进行读操作。当然在一些请求中，为了避免主从复制的延迟导致的数据不一致性，部分的读操作也要到主库上。（这种需求一般通过业务垂直分开，比如下单业务的代码所部署的机器，读去应该也要从主库读取数
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他