太极梦龙
太极梦龙

关于CSS中BFC,浮动以及外边距塌陷的复习总结

1 BFC

BFC(Block Formatting Context):块级格式化上下文,是web页面的可视化CSS渲染的一部分,是快盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域

块级格式化上下文的创建

  • 根元素()
  • 浮动元素(元素的float不为none)
  • 绝对定位元素（元素的 position 为 absolute 或 fixed）
  • 行内块元素（元素的 display 为 inline-block）
  • 表格单元格（元素的 display 为 table-cell）
  • 表格标题（元素的 display 为 table-caption）
  • 匿名表格单元格元素(元素的display为table,inline-table)
  • display 值为 flow-root 的元素（兼容性不好）
  • 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
  • 元素（display 为 grid 或 inline-grid 元素的直接子元素）
  • overflow 值不为 visible 的块元素

上述可以将BFC的创建归为以下几类:

  • html根元素

  • float（不为 none 即可）

    • left
    • right

  • position

    • absolute
    • fixed

  • display

    • inline-block
    • flex,inline-flex,
    • grid,inline-grid
    • table,table-cell,table-caption
    • flow-root

​

  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；

  • 计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算；

  • 浮动盒区域不叠加到BFC上；

  • 浮动定位和清除浮动时只会应用于同一个 BFC 内的元素，浮动不会影响其它 BFC 中元素的布局；

  • 清除浮动只能清除同一 BFC 中在它前面的元素的浮动；

  • 外边距折叠（Margin collapsing）也只会发生在属于同一 BFC 的块级元素之间；

2 高度塌陷和清除浮动

高度坍塌是指父元素本来应该包括子元素的高度，但是实际上父元素比子元素的高度要小。

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .container {
     
        margin-left: 50px;
        background: red;
      }
      .box1 {
     
        float: left;
        width: 200px;
        height: 200px;
        background-color: blue;
      }
      .box2 {
     
        width: 400px;
        height: 100px;
        background: cyan;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
  </body>
</html>

关于CSS中BFC,浮动以及外边距塌陷的复习总结_第1张图片

1、box1 浮动之后，父元素的高度就坍塌了，解决办法是让父元素触发 BFC ，这样 BFC 内的元素就无法影响到外面了，给 container 加上 overflow: auto; 即可。加上之后变成这样了。

关于CSS中BFC,浮动以及外边距塌陷的复习总结_第2张图片

2、也可以通过给 container 添加 ::after 伪元素，清除左右浮动来防止坍塌。

.container::after {
     
  content: "";
  display: block; /* 不能少 */
  clear: left;
}

3、还可以通过在父元素的最后添加一个块级元素并清除浮动。

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div style="clear: both;"></div>
</div>

4、图中有另外一个问题是 box2 被 box1 盖住了一部分，这是因为 box1 浮动起来了，显然只需要清除浮动即可。使用 BFC 清除，对应的规则是 浮动盒区域不叠加到BFC上，给 box2 添加 overflow: auto; 之后显示正常。

关于CSS中BFC,浮动以及外边距塌陷的复习总结_第3张图片

5、同样我们也可以通过 clear:both; 来清除浮动，只需要给 box2 添加 clear: both;，但是效果和 BFC 清除有点不一样，因为 clear: both; 表示元素下移清除左右浮动。

关于CSS中BFC,浮动以及外边距塌陷的复习总结_第4张图片

3 外边距折叠

块级元素的上外边距和下外边距有时会合并（或折叠）为一个外边距，其大小取其中的最大者，这种行为称为外边距折叠（margin collapsing），有时也翻译为外边距合并。注意浮动元素和绝对定位元素的外边距不会折叠。

外边距折叠的基本情况：

相邻元素之间 毗邻的两个元素之间的外边距会折叠（除非后一个元素需要清除之前的浮动）

父元素与其第一个或最后一个子元素之间 如果在父元素与其第一个子元素之间不存在边框、内边距、行内内容，也没有创建块格式化上下文、或者清除浮动将两者的 margin-top 分开；或者在父元素与其最后一个子元素之间不存在边框、内边距、行内内容、height、min-height、max-height 将两者的 margin-bottom 分开，那么这两对外边距之间会产生折叠。此时子元素的外边距会“溢出”到父元素的外面。

去除外边距折叠的一点方法总结:

  1. 父元素添加边框(border)；

  2. 父元素添加内边距(padding)；

  3. 父子元素之间存在行内元素 匿名元素；

  4. 父子元素之间存在触发 BFC 的元素（插入一个 display: flex 的块级元素）；

  5. 父元素触发 BFC（overflow: auto; 等）；

外边距折叠的一些规则

  • 即使某一外边距为 0，这些规则仍然适用。因此就算父元素的外边距是 0，第一个或最后一个子元素的外边距仍然会“溢出”到父元素的外面。

  • 如果参与折叠的外边距中包含负值，折叠后的外边距的值为最大的正边距与最小的负边距（即绝对值最大的负边距）的和。

  • 如果所有参与折叠的外边距都为负，折叠后的外边距的值为最小的负边距的值。这一规则适用于相邻元素和嵌套元素。

例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .container {
     
        background-color: deeppink;
      }
      .child {
     
      }
      div {
     
        background-color: cyan;
      }
      body {
     
        margin: 0;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="container" style="margin-top: 10px;">
      <div class="child" style="margin-top: 50px;">word</div>
    </div>
  </body>
</html>

由于外边距折叠且外边距都为正，所以取大的 50px

1、给 container 添加 border，成功去除折叠。

.container {
     
  background-color: deeppink;
  border: 1px solid #000000;
}

2、给父元素增加 padding，正常了。

.container {
     
  background-color: deeppink;
  padding: 1px;
}

3、给父子元素之间添加内联或者匿名元素，添加一个  ，去除折叠了，但是新增的元素会占据额外的空间，所以不推荐。

<div class="container" style="margin-top: 10px;">
  &nbsp;
  <div class="child" style="margin-top: 50px;">word</div>
</div>

4、父子元素之间添加触发了 BFC 的元素，正常了。

<div class="container" style="margin-top: 10px;">
  <div style="display: flex;"></div>
  <div class="child" style="margin-top: 50px;">word</div>
</div>

5、父元素触发 BFC，正常了。

参考文章:https://juejin.im/post/5dcfe71fe51d453d824ae3c1

你可能感兴趣的:(前端笔记,知识点,CSS,CSS,BFC,知识点)

  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • webpack图片等资源的处理 dmengmeng
    需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
  • ARM驱动学习之5 LEDS驱动 JT灬新一 嵌入式C底层arm开发学习单片机
    ARM驱动学习之5LEDS驱动知识点：•linuxGPIO申请函数和赋值函数–gpio_request–gpio_set_value•三星平台配置GPIO函数–s3c_gpio_cfgpin•GPIO配置输出模式的宏变量–S3C_GPIO_OUTPUT注意点：DRIVER_NAME和DEVICE_NAME匹配。实现步骤：1.加入需要的头文件：//Linux平台的gpio头文件#include//三
  • C++菜鸟教程 - 从入门到精通 第二节 DreamByte c++
    一.上节课的补充(数据类型)1.前言继上节课,我们主要讲解了输入,输出和运算符,我们现在来补充一下数据类型的知识上节课遗漏了这个知识点,非常的抱歉顺便说一下,博主要上高中了,更新会慢,2-4周更新一次对了,正好赶上中秋节,小编跟大家说一句:中秋节快乐!2.int类型上节课,我们其实只用了int类型int类型,是整数类型,它们存贮的是整数,不能存小数(浮点数)定义变量的方式很简单inta;//定义一
  • 学习“论语”-第59天 春峰轩
    12.14子张问政。子曰：“居之无倦，行之以忠。”子张问为政之道。孔子说：“在位尽职不懈怠，执行政令要忠诚。”12.15子曰：“博学于文，约之以礼，亦可以弗畔矣夫！”孔子说：“君子广泛地学习文献，并且用礼节约束自己，也就不会离经叛道了。”12.16子曰：“君子成人之美，不成人之恶。小人反是。”孔子说：“君子成全别人的好事，而不助长别人的坏处。小人则与此相反行事。”知识点:“成人之美，不成人之恶”贯
  • nosql数据库技术与应用知识点 皆过客，揽星河 NoSQLnosql数据库大数据数据分析数据结构非关系型数据库
    Nosql知识回顾大数据处理流程数据采集(flume、爬虫、传感器)数据存储(本门课程NoSQL所处的阶段)Hdfs、MongoDB、HBase等数据清洗(入仓)Hive等数据处理、分析(Spark、Flink等)数据可视化数据挖掘、机器学习应用(Python、SparkMLlib等)大数据时代存储的挑战(三高)高并发(同一时间很多人访问)高扩展(要求随时根据需求扩展存储)高效率(要求读写速度快)
  • 2021-07-31 比峰
    七月的最后一天，过了今天，就是八月，心脏在颤抖……昨天两点半才睡，一直在以两倍的语速的听之前的课程，虽然隔得时间不长，但是很多知识点已经忘了差不多了，为了让自己能够掌握的稍微全面一点，还是磨刀不误砍柴工的比较好。正因为晚上睡得晚，今天一上午的状态都不好，也可能因为上午都是待在家里，所以多数时间自己是在补觉。既然太累，那就睡觉吧，总比浪费时间的好。下午到咖啡馆做题，一道差错更正一下子让自己的实力暴露
  • 你可能遗漏的一些C#/.NET/.NET Core知识点 追逐时光者 C#.NETDotNetGuide编程指南c#.net.netcoremicrosoft
    前言在这个快速发展的技术世界中，时常会有一些重要的知识点、信息或细节被忽略或遗漏。《C#/.NET/.NETCore拾遗补漏》专栏我们将探讨一些可能被忽略或遗漏的重要知识点、信息或细节，以帮助大家更全面地了解这些技术栈的特性和发展方向。拾遗补漏GitHub开源地址https://github.com/YSGStudyHards/DotNetGuide/blob/main/docs/DotNet/D
  • android 更改窗口的层次,浮窗开发之窗口层级 Ms.Bu android更改窗口的层次
    最近在项目中遇到了这样的需求：需要在特定的其他应用之上悬浮自己的UI交互(拖动、输入等复杂的UI交互)，和九游的浮窗类似，不过我们的比九游的体验更好，我们越过了很多授权的限制。浮窗效果很多人都知道如何去实现一个简单的浮窗，但是却很少有人去深入的研究背后的流程机制，由于项目中浮窗交互比较复杂，遇到了些坑查看了很多资料，故总结浮窗涉及到的知识点：窗口层级关系(浮窗是如何“浮”的)？浮窗有哪些限制，如何
  • 阅读《认知觉醒》读书笔记 就看看书
    本周阅读了周岭的《认知觉醒开启自我改变的原动力》，启发较多，故做读书笔记一则，留待学习。全书共八章，讲述了大脑、潜意识、元认知、专注力、学习力、行动力、情绪力及成本最低的成长之道。具体描述了大脑、焦虑、耐心、模糊、感性、元认知、自控力、专注力、情绪专注、学习专注、匹配、深度、关联、体系、打卡、反馈、休息、清晰、傻瓜、行动、心智宽带、单一视角、游戏心态、早起、冥想、阅读、写作、运动等相关知识点。大脑
  • Spring MVC 全面指南：从入门到精通的详细解析 一杯梅子酱 技术栈学习springmvcjava
    引言：SpringMVC，作为Spring框架的一个重要模块，为构建Web应用提供了强大的功能和灵活性。无论是初学者还是有一定经验的开发者，掌握SpringMVC都将显著提升你的Web开发技能。本文旨在为初学者提供一个全面且易于理解的学习路径，通过详细的知识点分析和实际案例，帮助你快速上手SpringMVC，让学习过程既深刻又高效。一、SpringMVC简介1.1什么是SpringMVC？Spri
  • Python编程 - 函数进阶 易辰君 Python核心编程python开发语言
    目录前言一、函数参数的高级用法（一）缺省参数（二）命名参数（三）不定长参数二、拆包（一）函数返回值拆包（二）通过星号拆包（三）总结三、匿名函数（一）函数定义（二）使用匿名函数四、递归函数（一）简介（二）基本结构（三）简单示例（四）优缺点总结前言上篇文章主要了解了函数基础，如何定义函数，函数种类以及局部变量和全局变量的差异等，接下来就讲解python函数较为进阶的知识点，若有任何想法欢迎一起沟通讨论
  • Golang语言基础知识点总结 最帅猪猪侠 golang开发语言后端
    Golang语言基础知识点小总结1.go语言有两大类型：值类型：数值类型，bool，string，数组，struct结构体变量直接存储值，内存通常在栈中分配,修改值,不会对源对象产生影响引用类型：指针，slice切片，管道chan，map，interface变量存储的是一个地址，这个地址对应的空间才真正存储数据值，内存通常在堆上分配，当没有任何变量引用这个地址时，该地址对应的数据空间就成为一个垃圾
  • 《HTML 与 CSS—— 响应式设计》 陈在天box htmlcss前端
    一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
  • 教师资格证常考的5个知识点 a3cb74a20840
    知识点1：教育与人的发展(5规律、4因素、3动因)五大规律：顺序性—循序渐进阶段性—不搞“一刀切”不平衡性—抓关键期互补性—扬长避短个别差异性—因材施教考点精华：1.举例子对应五大规律;2.每个规律的教学启示;3规律特点。四大因素：遗传(地位：物质前提、可能性)环境(地位：多种可能、现实性)学校教育(主导)个人主观能动性(动力、决定)三大动因：内发论(1.孟子：性善论;2.弗洛伊德：性本能)外铄论
  • 2019-02-26 一枚_铜钱
    今天是实习第一节课，昨天已经和同学们交流过了，对于新老师，让学生适当地了解你是很有必要的。这第一节课嘛，孩子们表现也还可以大部分孩子都是很认真听讲的，也有几个上课会说话。但是我觉得孩子们对知识点的掌握速度还是很慢的，有的地方讲很多遍还是不太懂的样子。当然我自己可能也要反省，重点地方一定要明明白白告诉大家。明天切正题要快，要让学生读题，要让学生多写多练。话要尽量说得少，但句句在点子上，还得全面。下午
  • html+css网页设计 旅游网站首页1个页面 html+css+js网页设计 htmlcss旅游
    html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
  • css设置当字数超过限制后以省略号（...）显示 周bro css前端vuecss3html经验分享
    1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • 怎么才能做一个好老师 尘埃不确定
    厉害的老师也许不用提前准备什么，随场发挥就可以讲的很好。也许要系统地教授，还是最好准备一个大纲，每节课需要备课；只有提前准备，在讲的时候，效率才会提高，也容易讲明白知识点。每个学生对知识技能的掌握都不一样，有针对性地教学，可能会有好的效果。今天重新组装用QQ飞控的教练机，费了好大劲，虽然自己对这套东西比较熟悉，但时间长了会忘记很多东西，教大家的时候，其实是共同学习。
  • 2020-02-15 蔡卡
    我是蔡卡，爱看日漫和美剧，一眨眼就成了爸爸，喜欢孩子的我总想给孩子最好的，于是开始了我的探索之旅。不爱看书的我开始认真看书和参与各种团体，通过自我学习以及思想的碰撞从而形成自己的知识体系。分享才能更好的提升，生活中每遇到一个困难，都需要我们用所学的知识点去解决。我的使命:让更多家庭的孩子不因地域和阶层导致认知以及成长上的差距更大。__________________________________
  • css2中的透明 琪33
    .out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}
  • Nginx从入门到实践(三) 听你讲故事啊
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • 前端知识点 ZhangTao_zata 前端javascriptcss
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
  • Hadoop架构 henan程序媛 hadoop大数据分布式
    一、案列分析1.1案例概述现在已经进入了大数据(BigData)时代，数以万计用户的互联网服务时时刻刻都在产生大量的交互，要处理的数据量实在是太大了，以传统的数据库技术等其他手段根本无法应对数据处理的实时性、有效性的需求。HDFS顺应时代出现，在解决大数据存储和计算方面有很多的优势。1.2案列前置知识点1.什么是大数据大数据是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的大量数据集合，
  • Python精选200Tips：121-125 AnFany Python200+Tipspython开发语言
    Spendyourtimeonself-improvement121Requests-简化的HTTP请求处理发送GET请求发送POST请求发送PUT请求发送DELETE请求会话管理处理超时文件上传122BeautifulSoup-网页解析和抓取解析HTML和XML文档查找单个标签查找多个标签使用CSS选择器查找标签提取文本修改文档内容删除标签处理XML文档123Scrapy-强大的网络爬虫框架示例
  • 前端CSS面试常见题 剑亦未配妥 前端面试前端css面试
    边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
  • 深入浅出Java Annotation(元注解和自定义注解） Josh_Persistence Java Annotation元注解自定义注解
    一、基本概述     　　 Annontation是Java5开始引入的新特征。中文名称一般叫注解。它提供了一种安全的类似注释的机制，用来将任何的信息或元数据（metadata）与程序元素（类、方法、成员变量等）进行关联。   　　更通俗的意思是为程序的元素（类、方法、成员变量）加上更直观更明了的说明，这些说明信息是与程序的业务逻辑无关，并且是供指定的工具或
  • mysql优化特定类型的查询 annan211 java工作mysql
    本节所介绍的查询优化的技巧都是和特定版本相关的，所以对于未来mysql的版本未必适用。 1 优化count查询 对于count这个函数的网上的大部分资料都是错误的或者是理解的都是一知半解的。在做优化之前我们先来看看 真正的count()函数的作用到底是什么。 count()是一个特殊的函数，有两种非常不同的作用，他可以统计某个列值的数量，也可以统计行数。 在统
  • MAC下安装多版本JDK和切换几种方式 棋子chessman jdk
    环境： MAC AIR,OS X 10.10,64位   历史： 过去 Mac 上的 Java 都是由 Apple 自己提供，只支持到 Java 6，并且OS X 10.7 开始系统并不自带（而是可选安装）（原自带的是1.6）。 后来 Apple 加入 OpenJDK 继续支持 Java 6，而 Java 7 将由 Oracle 负责提供。   在终端中输入jav
  • javaScript （1） Array_06 JavaScriptjava浏览器
    JavaScript 1、运算符 　　运算符就是完成操作的一系列符号，它有七类： 　　赋值运算符（=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=）、算术运算符(+,-,*,/,++,--,%)、比较运算符(>,<,<=,>=,==,===,!=,!==)、逻辑运算符(||,&&,!)、条件运算(?:)、位
  • 国内顶级代码分享网站 袁潇含 javajdkoracle.netPHP
           现在国内很多开源网站感觉都是为了利益而做的                  当然利益是肯定的,否则谁也不会免费的去做网站      &
  • Elasticsearch、MongoDB和Hadoop比较 随意而生 mongodbhadoop搜索引擎
      IT界在过去几年中出现了一个有趣的现象。很多新的技术出现并立即拥抱了“大数据”。稍微老一点的技术也会将大数据添进自己的特性，避免落大部队太远，我们看到了不同技术之间的边际的模糊化。假如你有诸如Elasticsearch或者Solr这样的搜索引擎，它们存储着JSON文档，MongoDB存着JSON文档，或者一堆JSON文档存放在一个Hadoop集群的HDFS中。你可以使用这三种配
  • mac os 系统科研软件总结 张亚雄 mac os
    1.1 Microsoft Office for Mac 2011      大客户版，自行搜索。      1.2 Latex （MacTex）:      系统环境：https://tug.org/mactex/     &nb
  • Maven实战（四）生命周期 AdyZhang maven
    1. 三套生命周期     Maven拥有三套相互独立的生命周期，它们分别为clean，default和site。 每个生命周期包含一些阶段，这些阶段是有顺序的，并且后面的阶段依赖于前面的阶段，用户和Maven最直接的交互方式就是调用这些生命周期阶段。 以clean生命周期为例，它包含的阶段有pre-clean, clean 和 post
  • Linux下Jenkins迁移 aijuans Jenkins
    1. 将Jenkins程序目录copy过去      源程序在/export/data/tomcatRoot/ofctest-jenkins.jd.com下面            tar -cvzf jenkins.tar.gz ofctest-jenkins.jd.com &
  • request.getInputStream()只能获取一次的问题 ayaoxinchao requestInputstream
    问题：在使用HTTP协议实现应用间接口通信时，服务端读取客户端请求过来的数据，会用到request.getInputStream()，第一次读取的时候可以读取到数据，但是接下来的读取操作都读取不到数据   原因： 1. 一个InputStream对象在被读取完成后，将无法被再次读取，始终返回-1； 2. InputStream并没有实现reset方法（可以重
  • 数据库SQL优化大总结之 百万级数据库优化方案 BigBird2012 SQL优化
    网上关于SQL优化的教程很多，但是比较杂乱。近日有空整理了一下，写出来跟大家分享一下，其中有错误和不足的地方，还请大家纠正补充。 这篇文章我花费了大量的时间查找资料、修改、排版，希望大家阅读之后，感觉好的话推荐给更多的人，让更多的人看到、纠正以及补充。 1.对查询进行优化，要尽量避免全表扫描，首先应考虑在 where 及 order by 涉及的列上建立索引。 2.应尽量避免在 where
  • jsonObject的使用 bijian1013 javajson
            在项目中难免会用java处理json格式的数据，因此封装了一个JSONUtil工具类。 JSONUtil.java package com.bijian.json.study; import java.util.ArrayList; import java.util.Date; import java.util.HashMap;
  • [Zookeeper学习笔记之六]Zookeeper源代码分析之Zookeeper.WatchRegistration bit1129 zookeeper
    Zookeeper类是Zookeeper提供给用户访问Zookeeper service的主要API，它包含了如下几个内部类     首先分析它的内部类，从WatchRegistration开始，为指定的znode path注册一个Watcher，   /** * Register a watcher for a particular p
  • 【Scala十三】Scala核心七：部分应用函数 bit1129 scala
    何为部分应用函数？ Partially applied function: A function that’s used in an expression and that misses some of its arguments.For instance, if function f has type Int => Int => Int, then f and f(1) are p
  • Tomcat Error listenerStart 终极大法 ronin47 tomcat
    Tomcat报的错太含糊了，什么错都没报出来，只提示了Error listenerStart。为了调试，我们要获得更详细的日志。可以在WEB-INF/classes目录下新建一个文件叫logging.properties，内容如下 Java代码  handlers = org.apache.juli.FileHandler, java.util.logging.ConsoleHa
  • 不用加减符号实现加减法 BrokenDreams 实现
            今天有群友发了一个问题，要求不用加减符号(包括负号)来实现加减法。         分析一下，先看最简单的情况，假设1+1，按二进制算的话结果是10，可以看到从右往左的第一位变为0，第二位由于进位变为1。    
  • 读《研磨设计模式》-代码笔记-状态模式-State bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ /* 当一个对象的内在状态改变时允许改变其行为，这个对象看起来像是改变了其类 状态模式主要解决的是当控制一个对象状态的条件表达式过于复杂时的情况 把状态的判断逻辑转移到表示不同状态的一系列类中，可以把复杂的判断逻辑简化 如果在
  • CUDA程序block和thread超出硬件允许值时的异常 cherishLC CUDA
    调用CUDA的核函数时指定block 和 thread大小，该大小可以是dim3类型的（三维数组），只用一维时可以是usigned int型的。 以下程序验证了当block或thread大小超出硬件允许值时会产生异常！！！GPU根本不会执行运算！！！ 所以验证结果的正确性很重要！！！ 在VS中创建CUDA项目会有一个模板，里面有更详细的状态验证。 以下程序在K5000GPU上跑的。
  • 诡异的超长时间GC问题定位 chenchao051 jvmcmsGChbaseswap
    HBase的GC策略采用PawNew+CMS, 这是大众化的配置，ParNew经常会出现停顿时间特别长的情况，有时候甚至长到令人发指的地步，例如请看如下日志： 2012-10-17T05:54:54.293+0800: 739594.224: [GC 739606.508: [ParNew: 996800K->110720K(996800K), 178.8826900 secs] 3700
  • maven环境快速搭建 daizj 安装mavne环境配置
    一 下载maven 安装maven之前，要先安装jdk及配置JAVA_HOME环境变量。这个安装和配置java环境不用多说。 maven下载地址：http://maven.apache.org/download.html，目前最新的是这个apache-maven-3.2.5-bin.zip，然后解压在任意位置，最好地址中不要带中文字符，这个做java 的都知道，地址中出现中文会出现很多
  • PHP网站安全，避免PHP网站受到攻击的方法 dcj3sjt126com PHP
    对于PHP网站安全主要存在这样几种攻击方式:1、命令注入(Command Injection)2、eval注入(Eval Injection)3、客户端脚本攻击(Script Insertion)4、跨网站脚本攻击(Cross Site Scripting, XSS)5、SQL注入攻击(SQL injection)6、跨网站请求伪造攻击(Cross Site Request Forgerie
  • yii中给CGridView设置默认的排序根据时间倒序的方法 dcj3sjt126com GridView
    public function searchWithRelated() {         $criteria = new CDbCriteria;         $criteria->together = true; //without th
  • Java集合对象和数组对象的转换 dyy_gusi java集合
        在开发中，我们经常需要将集合对象（List，Set）转换为数组对象，或者将数组对象转换为集合对象。Java提供了相互转换的工具，但是我们使用的时候需要注意，不能乱用滥用。 1、数组对象转换为集合对象     最暴力的方式是new一个集合对象，然后遍历数组，依次将数组中的元素放入到新的集合中，但是这样做显然过
  • nginx同一主机部署多个应用 geeksun nginx
    近日有一需求，需要在一台主机上用nginx部署2个php应用，分别是wordpress和wiki，探索了半天，终于部署好了，下面把过程记录下来。 1.   在nginx下创建vhosts目录，用以放置vhost文件。 mkdir vhosts   2.   修改nginx.conf的配置， 在http节点增加下面内容设置，用来包含vhosts里的配置文件 #
  • ubuntu添加admin权限的用户账号 hongtoushizi ubuntuuseradd
    ubuntu创建账号的方式通常用到两种：useradd 和adduser . 本人尝试了useradd方法，步骤如下： 1:useradd    使用useradd时，如果后面不加任何参数的话，如：sudo useradd sysadm 创建出来的用户将是默认的三无用户：无home directory ,无密码,无系统shell。 顾应该如下操作：  
  • 第五章 常用Lua开发库2-JSON库、编码转换、字符串处理 jinnianshilongnian nginxlua
      JSON库   在进行数据传输时JSON格式目前应用广泛，因此从Lua对象与JSON字符串之间相互转换是一个非常常见的功能；目前Lua也有几个JSON库，本人用过cjson、dkjson。其中cjson的语法严格（比如unicode \u0020\u7eaf），要求符合规范否则会解析失败（如\u002），而dkjson相对宽松，当然也可以通过修改cjson的源码来完成
  • Spring定时器配置的两种实现方式OpenSymphony Quartz和java Timer详解 yaerfeng1989 timerquartz定时器
    原创整理不易，转载请注明出处：Spring定时器配置的两种实现方式OpenSymphony Quartz和java Timer详解 代码下载地址：http://www.zuidaima.com/share/1772648445103104.htm 有两种流行Spring定时器配置：Java的Timer类和OpenSymphony的Quartz。 1.Java Timer定时 首先继承jav
  • Linux下df与du两个命令的差别？ pda158 linux
    　一、df显示文件系统的使用情况，与du比較，就是更全盘化。 　　最经常使用的就是 df -T，显示文件系统的使用情况并显示文件系统的类型。 　　举比例如以下： 　　[root@localhost ~]# df -T 　　Filesystem                   Type &n
  • [转]SQLite的工具类 ---- 通过反射把Cursor封装到VO对象 ctfzh VOandroidsqlite反射Cursor
    在写DAO层时，觉得从Cursor里一个一个的取出字段值再装到VO(值对象)里太麻烦了，就写了一个工具类，用到了反射，可以把查询记录的值装到对应的VO里，也可以生成该VO的List。   使用时需要注意： 考虑到Android的性能问题，VO没有使用Setter和Getter，而是直接用public的属性。 表中的字段名需要和VO的属性名一样，要是不一样就得在查询的SQL中
  • 该学习笔记用到的Employee表 vipbooks oraclesql工作
        这是我在学习Oracle是用到的Employee表，在该笔记中用到的就是这张表，大家可以用它来学习和练习。 drop table Employee; -- 员工信息表 create table Employee( -- 员工编号 EmpNo number(3) primary key, -- 姓
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他