想搞全栈的前端
想搞全栈的前端

浅析BFC原理及作用

什么是BFC

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

怎么创建BFC

下列方式会创建块格式化上下文：
浅析BFC原理及作用_第1张图片
上面太多了不太好记，主要可以记住以下四种：

  • body 根元素
  • 浮动元素：float 除 none 以外的值
  • 绝对定位元素：position (absolute、fixed)
  • display 为 inline-block、table-cells、flex
  • overflow 除了 visible 以外的值 (hidden、auto、scroll)

BFC 特性

  1. 使 BFC 内部浮动元素不会到处乱跑；
  2. 和浮动元素产生边界。

BFC常见作用

1、阻止外边距折叠

margin塌陷问题：在标准文档流中，块级标签之间竖直方向的margin会以大的为准，这就是margin的塌陷现象。可以用overflow：hidden产生bfc来解决。

<style>
div{
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 100px;
}
style>
<body>
    <div>div>
    <div>div>

浅析BFC原理及作用_第2张图片

从效果上看，因为两个div元素都处于同一个BFC容器下（这里指body元素），所以第一个div的下边距和第二个div的上边距发生了重叠，所以两个盒子之间距离只有100px，而不是200px。

但这不是 CSS 的 bug，我们可以理解为一种规范，如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。

<style>
        .content1,.content2{
            overflow: hidden;
        }
        .div1,.div2 {
            width: 100px;
            height: 100px;
            background: lightblue;
            margin: 100px;
        }
    style>


<body>
    <div class="content1">
        <div class="div1">div>
    div>
    <div class="content2">
        <div class="div2">div>
    div>
body>

浅析BFC原理及作用_第3张图片

2、包含浮动元素

高度塌陷问题，在通常情况下父元素的高度会被子元素撑开，而在这里因为其子元素为浮动元素所以父元素发生了高度坍塌，上下边界重合，这时就可以用BFC来清除浮动了。

<div style="border: 1px solid #000;">
    <div style="width: 100px;height: 100px;background: grey;float: left;">div>
div>

浅析BFC原理及作用_第4张图片
由于容器内元素浮动，脱离了文档流，所以容器只剩下2px的边距高度。如果触发容器的BFC，那么容器将会包裹浮动元素。

<div style="border: 1px solid #000;overflow: hidden">
    <div style="width: 100px;height: 100px;background: grey;float: left;">div>
div>

浅析BFC原理及作用_第5张图片

3、阻止元素被浮动元素覆盖

兄弟div浮动问题：由于左侧块级元素发生了浮动，所以和右侧未发生浮动的块级元素不在同一层内，所以会发生div遮挡问题。可以给右侧元素添加 overflow: hidden，触发BFC来解决遮挡问题。

<div style="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素div>
<div style="width: 200px; height: 200px;background: grey">我是一个没有设置浮动, 
也没有触发 BFC 元素, width: 200px; height:200px; background: grey;div>

浅析BFC原理及作用_第6张图片
这时候其实第二个元素有部分被浮动元素所覆盖，但是文本信息不会被浮动元素所覆盖，如果想避免元素被覆盖，可触发第二个元素的BFC特性，在第二个元素中加入overflow：hidden，就会变成：

<div style="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素div>
<div style="width: 200px; height: 200px;background: grey;overflow:hidden">我是一个没有设置浮动, 
也没有触发 BFC 元素, width: 200px; height:200px; background: grey;div>

浅析BFC原理及作用_第7张图片

你可能感兴趣的:(HTML/CSS)

  • 【Pytest】基础到高级功能的理解使用 卜及中 Python基础pytest学习python开发语言python3.11
    文章目录第一部分：Pytest简介1.1什么是Pytest？1.2Pytest的历史1.3Pytest的核心概念1.4Pytest的特点1.5为什么选择Pytest？第二部分：Pytest的基本使用2.1安装Pytest2.2编写第一个测试用例2.2.1创建一个简单的测试函数2.2.2运行测试2.3测试报告和输出2.3.1简单输出2.3.2显示详细的失败信息2.3.3生成HTML报告2.4组织和运
  • 转帖-在Eclipse中开发JSF ren_z_q JSFEclipseBeanJSPOracle
    (转自http://www.blogjava.net/gaofeng/articles/127842.html作者:Java.net)Eclipse3.3刚刚发布,正在学习JSF,于是使用Eclipse3.3做了一个JSF的Demo,很简单,主要是页面的跳转、组件和Bean的绑定等基础...1、工具准备:Eclipse3.3WTP2.0(最好下载一个all-in-one的版本..省的麻烦)...依
  • 前端构建工具 光影少年 前端软件构建
    前端构建工具是开发现代Web应用时不可或缺的工具，用于优化代码、提升开发效率、以及实现高效的构建和部署。以下是常见的前端构建工具及其作用：1.模块打包工具Webpack特点：功能强大，插件与配置灵活。作用：将模块（JS、CSS、图片等）打包成浏览器可运行的文件。适用场景：中大型项目，需高度自定义。Vite特点：轻量、快速构建，基于ESModules。作用：适合现代框架如Vue、React，热更新速
  • Vue.js如何阻止事件冒泡 JhzDev vue.js前端javascriptVue.Js
    事件冒泡是指当一个元素上的事件被触发时，该事件会从该元素开始向上层元素逐级触发，直至到达文档根节点。在Vue.js中，我们可以使用事件修饰符来阻止事件冒泡。下面我将详细介绍如何在Vue.js中实现事件冒泡的阻止。首先，让我们创建一个简单的Vue.js应用程序，以便演示事件冒泡的问题和解决方案。在HTML中，我们将创建一个包含两个嵌套元素的div，每个元素都绑定了点击事件。当点击内部元素时，我们希望
  • Python爬虫技术 第16节 XPath hummhumm python爬虫开发语言flaskjavamavenjava-ee
    XPath是一种在XML文档中查找信息的语言，尽管XML和HTML在语法上有区别，但XPath同样适用于HTML文档的解析，尤其是在使用如lxml这样的库时。XPath提供了一种强大的方法来定位和提取XML/HTML文档中的元素和属性。XPath基础XPath表达式由路径表达式组成，它们指定了文档中的位置。下面是一些基本的XPath语法：根节点：/表示绝对路径的开始，指向文档的根节点。//表示从当
  • Python Web开发 twc829 Python
    Web开发介绍一、Web开发概述1C/S结构和B/S结构C/S—Client/Server，即客户机/服务器结构B/S—Browse/Server，即浏览器/服务器结构2B/S结构的优势2.1不用通知客户端安装某个软件2.2不用通知客户端升级2.3可轻松地实现跨平台3访问网站过程用户向服务器发起请求，服务器将HTML文件返回给用户，浏览器将HTML文件渲染成用户看到的网站；4分类4.1静态网站用户
  • 高清（200万像素）多灯红外防水枪型网络摄像机 DH-IPC-HFW5200-IRA weixin_30846599 php
    DH-IPC-HFW5200-IRA-0722Ahttp://download.dahuatech.com/instruction_download.php?classOne=3907&classTwo=3912&keyword=DH-IPC-HFW5200-IRA-0722Ahttp://www.dahuatech.com/product_detail-449.html转载于:https://w
  • CSS学习笔记9——定位position green_pine_ CSScss学习笔记前端html
    CSS定位可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子定位组成定位=定位模式+边偏移定位模式用于指定一个元素在文档中的定位方式边偏移决定了该元素的最终位置定位模式通过position属性来设置值语义static静态定位relative相对定位absolute绝对定位fixed固定定位边偏移属性：top、bottom、left、right属性示例描述toptop:
  • 2025年全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！ 白帽安全-黑客4148 网络安全web安全linux密码学CTFpythonddos
    基于入门网络安全/黑客打造的：黑客&网络安全入门&进阶学习资源包目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、SQL注入（7-8天）2、文件上传（7-8天）3、其他漏洞（14-15
  • vue 拖动、缩放容器组件，支持移动端双指缩放和PC端鼠标滚轮缩放 warmbook 笔记vue.js前端html5
    原理本组件基于CSS的transform实现。移动端监听touch事件（单指移动，双指移动+缩放），PC端监听mouse事件（移动）和滚动事件wheel（缩放），更新transform的translateX/translateY/scale值，从而实现缩放、移动。由于transform不会产生重排，因此不节流也可以有很好的性能，用户体验就像德芙，纵享丝滑！鼠标事件比较好理解，记录鼠标按下时的坐标，
  • BabylonJS初学习笔记 Marina-37 学习笔记
    初步接触Babylonjs，由于学习跨度会比较大，所以就做了一些笔记，在此分享出来，希望能够对那些和我一样学习的新人有所帮助。通过Babylon官网学习这个项目主要就是一些基础方法的学习，以静态HTML为主，附带一些个人笔记，持续更新。项目地址：babylon-learn-byDoc:通过babylon官方网站进行学习，创建一些交互式web文件。Babylon官网：https://www.baby
  • 基于 Node.js 的天气查询系统实现(附源码） Kasper0121 node.js
    项目概述这是一个基于Node.js的全栈应用，前端使用原生JavaScript和CSS，后端使用Express框架，通过调用第三方天气API实现天气数据的获取和展示。主要功能默认显示多个主要城市的天气信息支持城市天气搜索响应式布局设计深色主题界面优雅的加载动画技术栈后端：Node.js+Express前端：HTML5+CSS3+JavaScriptHTTP客户端：AxiosAPI：天气API(v1
  • PostgreSQL体系结构 eygle
    原文：https://www.enmotech.com/web/detail/1/764/1.html导读：本文主要从日志文件、参数文件、控制文件、数据文件、redo日志（WAL）、后台进程这六个方面来讨论PostgreSQL的结构。一、引言PostgreSQL是最像Oracle的开源数据库，我们可以拿MySQL和Oracle来比较学习它的体系结构，比较容易理解。本文会讨论pg的如下结构：日志文件
  • c# list排序的三种实现方式 CHCH998 c#排序LIS实现list
    本文转载自：https://www.cnblogs.com/bradwarden/archive/2012/06/19/2554854.html作者：bradwarden转载请注明该声明。用了一段时间的gridview，对gridview实现的排序功能比较好奇，而且利用C#自带的排序方法只能对某一个字段进行排序，今天demo了一下，总结了三种对list排序的方法，并实现动态传递字段名对list进行
  • 详细介绍：如何使用 form-serialize 实现表单数据快速收集 还是鼠鼠 ajax前端javascriptbootstrapwebvscodenode.js
    目录功能概述代码实现1.form-serialize插件源码2.HTML示例代码总结在表单处理过程中，手动提取用户输入的数据可能会显得繁琐且容易出错。form-serialize是一个强大的工具，可以帮助你快速、准确地收集表单中的数据，并将其转换为对象或URL编码字符串，便于后续使用和提交。本教程通过完整代码和详细说明，帮助开发者快速掌握其用法。功能概述form-serialize提供了一种简单而
  • 关于CSS中毛玻璃和滤镜使用总结 计算机软件程序设计 知识科普css
    【1】毛玻璃毛玻璃效果（也称为磨砂玻璃效果）可以通过CSS的backdrop-filter属性来实现。这个属性允许你在背景上应用各种滤镜效果，从而创建出类似磨砂玻璃的效果。这种效果通常用于创建半透明背景下的模糊效果，使得背景图像或颜色变得柔和，同时保持前景内容的清晰可见。示例代码HTML结构CSS毛玻璃效果毛玻璃效果这是一个使用CSS创建的毛玻璃效果。CSS样式body,html{height:1
  • 如何运用python爬虫获取大型资讯类网站文章，并同时导出pdf或word格式文本？ 大懒猫软件 深度学习python网络爬虫自然语言处理
    这里，我们以比较知名的商业新知网站https://www.shangyexinzhi.com/为例进行代码编写，下面进行代码应用思路。第一部分，分析网站结构首先，我们来分析，要使用Python技术分析一个网站的结构，通常可以通过以下步骤实现：获取网站的HTML内容：使用requests库来获取网站的HTML源代码。解析HTML内容：使用BeautifulSoup库来解析HTML，提取网站的结构信息
  • HTML&CSS ：如此优雅丝滑的导航栏，你不看看吗？ 前端Hardy CSShtmlcss前端javascript
    这段代码创建了一个动态的导航栏，通过CSS技术实现了按钮的激活和悬停效果，以及动态背景效果，为页面添加了视觉吸引力和用户交互体验。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信我，我会发送完整的压缩包给你演示效果HTML&CSS公众号关注：前端Hardybody{margin:0;padding:0;background-color:#07
  • Linux上安装类似xshell的终端管理工具 爱学习的狮王 Linux/ShellFinalshell
    Windows版下载地址:http://www.hostbuf.com/downloads/finalshell_install.exeMac版,Linux版安装及教程:http://www.hostbuf.com/t/1059.html一键安装脚本rm-ffinalshell_install_linux.shwgetwww.hostbuf.com/downloads/finalshell_ins
  • React Native 0.77 发布：更强的样式支持与性能优化 前端javascript
    CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读ReactNative0.77正式发布！此次版本带来了多项重要改进，包括样式功能的增强、Android平台的性能优化以及项目模板的升级。这一版本的核心目标是提升开发效率，同时确保在不同平台上的兼容性。接下来，我们来看看这次更新中的亮点内容。主要更新内容✨全新CSS特性支持：新增对display:contents、boxSizing、
  • 参加【2025年春季】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！ 白帽子凯哥 web安全学习安全CTF夺旗赛网络安全
    基于入门网络安全/黑客打造的：黑客&网络安全入门&进阶学习资源包目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、SQL注入（7-8天）2、文件上传（7-8天）3、其他漏洞（14-15
  • 参加【2025年春季】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！ 白帽子凯哥 web安全学习安全CTF夺旗赛网络安全
    基于入门网络安全/黑客打造的：黑客&网络安全入门&进阶学习资源包目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、SQL注入（7-8天）2、文件上传（7-8天）3、其他漏洞（14-15
  • vue项目运行报：SassError: expected selector... 落日弥漫的橘_ 前端vue.jswebpackcss
    SassError:expectedselector错误通常由于Sass或SCSS文件中存在语法错误或选择器缺失，导致Sass编译器无法解析。Sass语法语法中误用深度选择器语法导致以上问题。/deep/和::v-deep都是用于Vue单文件组件（.vue文件）中的样式穿透选择器;/deep/在Sass中并不被支持，如果是在Vue单文件组件中，并且需要穿透样式，可以使用::v-deep代替/dee
  • python爬取自如网房源信息 2401_87368790 python开发语言
    本次爬取自如网房源信息所用到的知识点:requestsget请求lxml解析htmlXpathMongoDB存储正文分析目标站点url:http://hz.ziroom.com/z/nl/z3.html?p=2的p参数控制分页get请求获取单页源码--coding:utf-8--importrequestsimporttimefromrequests.exceptionsimportRequest
  • pygame下载 2401_86461228 pygamepython
    pygame下载先进入pygame官网下载与你python对应的版本，然后解压：https://www.pygame.org/download.shtml然后打开cmd命令输入pipinstallpygame等待执行结束，然后打开python输入代码importpygame再运行，入出现以下情况说明安装成功注：我的python是32位的
  • idea连接mysql weixin_33758863 开发工具
    https://blog.csdn.net/Golden_soft/article/details/80952243转载于:https://www.cnblogs.com/jitipaper/p/10784406.html
  • 虚拟DOM 是三好 web补充javascript前端开发语言
    一、DOM1、DOM的基本概念DOM将网页的结构表示为一个树形结构，其中每个元素、属性和文本都被表示为树中的一个节点。文档节点（DocumentNode）：树的根节点，代表整个HTML文档。元素节点（ElementNode）：代表HTML元素，例如、、等。属性节点（AttributeNode）：代表HTML元素的属性，例如id、class、href等。文本节点（TextNode）：代表HTML元素
  • YOLO 安装 并且命令行指定配置文件 ELI_He999 python人工智能YOLO人工智能深度学习
    pipinstallultralyticssettings.yaml保存到当前目录，data参数yolo命令行指定配置文件{"settings_version":"0.0.6","datasets_dir":"xxxx\\datasets","weights_dir":"xxxx\\weights","runs_dir":"xxxx\\runs","uuid":"xxxx","sync":true
  • CSS 提示工具：优化网页设计，提升用户体验 froginwe11 开发语言
    CSS提示工具：优化网页设计，提升用户体验在网页设计中，CSS（层叠样式表）扮演着至关重要的角色。它不仅能够赋予网页独特的视觉风格，还能够提升用户体验。为了帮助设计师和开发者更高效地使用CSS，各种提示工具应运而生。本文将为您详细介绍CSS提示工具的功能、特点以及如何选择合适的工具，以优化网页设计和提升用户体验。一、CSS提示工具概述CSS提示工具是一种辅助设计师和开发者编写和调试CSS的工具。这
  • 基于JAVA软件技术课程学习系统设计与实现计算机毕业设计源码+数据库+lw文档+系统+部署 小朱科技 学习
    基于JAVA软件技术课程学习系统设计与实现计算机毕业设计源码+数据库+lw文档+系统+部署基于JAVA软件技术课程学习系统设计与实现计算机毕业设计源码+数据库+lw文档+系统+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQ
  • java杨辉三角 3213213333332132 java基础
    package com.algorithm; /** * @Description 杨辉三角 * @author FuJianyong * 2015-1-22上午10:10:59 */ public class YangHui { public static void main(String[] args) { //初始化二维数组长度 int[][] y
  • 《大话重构》之大布局的辛酸历史 白糖_ 重构
    《大话重构》中提到“大布局你伤不起”，如果企图重构一个陈旧的大型系统是有非常大的风险，重构不是想象中那么简单。我目前所在公司正好对产品做了一次“大布局重构”，下面我就分享这个“大布局”项目经验给大家。   背景         公司专注于企业级管理产品软件，企业有大中小之分，在2000年初公司用JSP/Servlet开发了一套针对中
  • 电驴链接在线视频播放源码 dubinwei 源码电驴播放器视频ed2k
    本项目是个搜索电驴（ed2k）链接的应用,借助于磁力视频播放器（官网： http://loveandroid.duapp.com/ 开放平台），可以实现在线播放视频，也可以用迅雷或者其他下载工具下载。 项目源码： http://git.oschina.net/svo/Emule,动态更新。也可从附件中下载。 项目源码依赖于两个库项目，库项目一链接： http://git.oschina.
  • Javascript中函数的toString()方法 周凡杨 JavaScriptjstoStringfunctionobject
    简述     The toString() method returns a string representing the source code of the function.     简译之，Javascript的toString()方法返回一个代表函数源代码的字符串。 句法     function.
  • struts处理自定义异常 g21121 struts
    很多时候我们会用到自定义异常来表示特定的错误情况，自定义异常比较简单，只要分清是运行时异常还是非运行时异常即可，运行时异常不需要捕获，继承自RuntimeException，是由容器自己抛出，例如空指针异常。 非运行时异常继承自Exception，在抛出后需要捕获，例如文件未找到异常。 此处我们用的是非运行时异常，首先定义一个异常LoginException: /** * 类描述：登录相
  • Linux中find常见用法示例 510888780 linux
    Linux中find常见用法示例 ·find   path   -option   [   -print ]   [ -exec   -ok   command ]   {} \; find命令的参数；
  • SpringMVC的各种参数绑定方式 Harry642 springMVC绑定表单
    1. 基本数据类型(以int为例，其他类似)： Controller代码： @RequestMapping("saysth.do") public void test(int count) { } 表单代码： <form action="saysth.do" method="post&q
  • Java 获取Oracle ROWID aijuans javaoracle
    A ROWID is an identification tag unique for each row of an Oracle Database table. The ROWID can be thought of as a virtual column, containing the ID for each row. The oracle.sql.ROWID class i
  • java获取方法的参数名 antlove javajdkparametermethodreflect
    reflect.ClassInformationUtil.java package reflect; import javassist.ClassPool; import javassist.CtClass; import javassist.CtMethod; import javassist.Modifier; import javassist.bytecode.CodeAtt
  • JAVA正则表达式匹配 查找 替换 提取操作 百合不是茶 java正则表达式替换提取查找
    正则表达式的查找;主要是用到String类中的split();       String str;      str.split();方法中传入按照什么规则截取,返回一个String数组   常见的截取规则: str.split("\\.")按照.来截取 str.
  • Java中equals()与hashCode()方法详解 bijian1013 javasetequals()hashCode()
    一.equals()方法详解     equals()方法在object类中定义如下：  public boolean equals(Object obj) { return (this == obj); }    很明显是对两个对象的地址值进行的比较（即比较引用是否相同）。但是我们知道，String 、Math、I
  • 精通Oracle10编程SQL(4)使用SQL语句 bijian1013 oracle数据库plsql
    --工资级别表 create table SALGRADE ( GRADE NUMBER(10), LOSAL NUMBER(10,2), HISAL NUMBER(10,2) ) insert into SALGRADE values(1,0,100); insert into SALGRADE values(2,100,200); inser
  • 【Nginx二】Nginx作为静态文件HTTP服务器 bit1129 HTTP服务器
     Nginx作为静态文件HTTP服务器 在本地系统中创建/data/www目录，存放html文件(包括index.html) 创建/data/images目录，存放imags图片 在主配置文件中添加http指令   http { server { listen 80; server_name
  • kafka获得最新partition offset blackproof kafkapartitionoffset最新
    kafka获得partition下标，需要用到kafka的simpleconsumer   import java.util.ArrayList; import java.util.Collections; import java.util.Date; import java.util.HashMap; import java.util.List; import java.
  • centos 7安装docker两种方式 ronin47
          第一种是采用yum 方式              yum install -y docker           
  • java-60-在O(1)时间删除链表结点 bylijinnan java
    public class DeleteNode_O1_Time { /** * Q 60 在O(1)时间删除链表结点 * 给定链表的头指针和一个结点指针(!!)，在O(1)时间删除该结点 * * Assume the list is: * head->...->nodeToDelete->mNode->nNode->..
  • nginx利用proxy_cache来缓存文件 cfyme cache
    user  zhangy users; worker_processes 10; error_log  /var/vlogs/nginx_error.log  crit; pid        /var/vlogs/nginx.pid; #Specifies the value for ma
  • [JWFD开源工作流]JWFD嵌入式语法分析器负号的使用问题 comsci 嵌入式
        假如我们需要用JWFD的语法分析模块定义一个带负号的方程式，直接在方程式之前添加负号是不正确的，而必须这样做：     string str01 = "a=3.14;b=2.71;c=0;c-((a*a)+(b*b))"     定义一个0整数c,然后用这个整数c去
  • 如何集成支付宝官方文档 dai_lm android
    官方文档下载地址 https://b.alipay.com/order/productDetail.htm?productId=2012120700377310&tabId=4#ps-tabinfo-hash 集成的必要条件 1. 需要有自己的Server接收支付宝的消息 2. 需要先制作app，然后提交支付宝审核，通过后才能集成 调试的时候估计会真的扣款，请注意
  • 应该在什么时候使用Hadoop datamachine hadoop
    原帖地址：http://blog.chinaunix.net/uid-301743-id-3925358.html 存档，某些观点与我不谋而合，过度技术化不可取，且hadoop并非万能。 --------------------------------------------万能的分割线-------------------------------- 有人问我，“你在大数据和Hado
  • 在GridView中对于有外键的字段使用关联模型进行搜索和排序 dcj3sjt126com yii
    在GridView中使用关联模型进行搜索和排序 首先我们有两个模型它们直接有关联: class Author extends CActiveRecord { ... } class Post extends CActiveRecord { ... function relations() { return array( '
  • 使用NSString 的格式化大全 dcj3sjt126com Objective-C
    格式定义The format specifiers supported by the NSString formatting methods and CFString formatting functions follow the IEEE printf specification; the specifiers are summarized in Table 1. Note that you c
  • 使用activeX插件对象object滚动有重影 蕃薯耀 activeX插件滚动有重影
      使用activeX插件对象object滚动有重影   <object style="width:0;" id="abc" classid="CLSID:D3E3970F-2927-9680-BBB4-5D0889909DF6" codebase="activex/OAX339.CAB#
  • SpringMVC4零配置 hanqunfeng springmvc4
    基于Servlet3.0规范和SpringMVC4注解式配置方式，实现零xml配置，弄了个小demo，供交流讨论。     项目说明如下： 1.db.sql是项目中用到的表，数据库使用的是oracle11g 2.该项目使用mvn进行管理，私服为自搭建nexus,项目只用到一个第三方 jar，就是oracle的驱动； 3.默认项目为零配置启动，如果需要更改启动方式，请
  • 《开源框架那点事儿16》：缓存相关代码的演变 j2eetop 开源框架
    问题引入 上次我参与某个大型项目的优化工作，由于系统要求有比较高的TPS，因此就免不了要使用缓冲。 该项目中用的缓冲比较多，有MemCache，有Redis，有的还需要提供二级缓冲，也就是说应用服务器这层也可以设置一些缓冲。 当然去看相关实现代代码的时候，大致是下面的样子。 [java] view plain copy print ? public vo
  • AngularJS浅析 kvhur JavaScript
    概念 AngularJS is a structural framework for dynamic web apps. 了解更多详情请见原文链接：http://www.gbtags.com/gb/share/5726.htm Directive 扩展html，给html添加声明语句，以便实现自己的需求。对于页面中html元素以ng为前缀的属性名称，ng是angular的命名空间
  • 架构师之jdk的bug排查(一)---------------split的点号陷阱 nannan408 split
    1.前言.    jdk1.6的lang包的split方法是有bug的,它不能有效识别A.b.c这种类型,导致截取长度始终是0.而对于其他字符,则无此问题.不知道官方有没有修复这个bug. 2.代码 String[] paths = "object.object2.prop11".split("'"); System.ou
  • 如何对10亿数据量级的mongoDB作高效的全表扫描 quentinXXZ mongodb
      本文链接:  http://quentinXXZ.iteye.com/blog/2149440 一、正常情况下，不应该有这种需求 首先，大家应该有个概念，标题中的这个问题，在大多情况下是一个伪命题，不应该被提出来。要知道，对于一般较大数据量的数据库，全表查询，这种操作一般情况下是不应该出现的，在做正常查询的时候，如果是范围查询，你至少应该要加上limit。 说一下，
  • C语言算法之水仙花数 qiufeihu c算法
    /** * 水仙花数 */ #include <stdio.h> #define N 10 int main() { int x,y,z; for(x=1;x<=N;x++) for(y=0;y<=N;y++) for(z=0;z<=N;z++) if(x*100+y*10+z == x*x*x
  • JSP指令 wyzuomumu jsp
    jsp指令的一般语法格式： <%@ 指令名 属性 =”值 ” %> 常用的三种指令： page,include,taglib page指令语法形式： <%@ page 属性 1=”值 1” 属性 2=”值 2”%> include指令语法形式： <%@include file=”relative url”%> (jsp可以通过 include
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他