weixin_30532759
weixin_30532759

CSS高度塌陷问题解决方案

高度塌陷的存在：原因分析
 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>title>
 6         <style type="text/css">
 7             
 8             .box1{
 9                 /*为box1设置一个边框*/
10                 border: 10px red solid;
11                 
12             }
13             
14             .box2{
15                 width: 100px;
16                 height: 100px;
17                 background-color: blue;
18                 
19                 /*
20                  * 在文档流中，父元素的高度默认是被子元素撑开的，
21                  *     也就是子元素多高，父元素就多高。
22                  * 但是当为子元素设置浮动以后，子元素会完全脱离文档流，
23                  *     此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
24                  *     由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。
25                  * 
26                  * 所以在开发中一定要避免出现高度塌陷的问题,
27                  *     我们可以将父元素的高度写死，以避免塌陷的问题出现，
28                  *     但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。
29                  */
30                 
31                 /*为子元素设置向左浮动*/
32                 float: left;
33             }
34             
35             .box3{
36                  height: 100px;
37                  background-color: yellow;
38             }
39             
40         style>
41     head>
42     <body>
43         
44         <div class="box1">
45             <div class="box2">div>
46         div>
47         
48         <div class="box3">div>
49         
50     body>
51 html>

 

 1 // 高度塌陷的解决方案一
 2 
 3 DOCTYPE html>
 4 <html>
 5     <head>
 6         <meta charset="utf-8" />
 7         <title>title>
 8         <style type="text/css">
 9             
10             .box1{
11                 border: 10px red solid;
12                 /*
13                  * 根据W3C的标准，在页面中元素都一个隐含的属性叫做Block Formatting Context
14                  *     简称BFC，该属性可以设置打开或者关闭，默认是关闭的。
15                  * 当开启元素的BFC以后，元素将会具有如下的特性：
16                  *     1.父元素的垂直外边距不会和子元素重叠    
17                  *     2.开启BFC的元素不会被浮动元素所覆盖
18                  *     3.开启BFC的元素可以包含浮动的子元素
19                  * 
20                  * 如何开启元素的BFC
21                  *     1.设置元素浮动
22                  *         - 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失
23                  *             而且使用这种方式也会导致下边的元素上移，不能解决问题
24                  *     2.设置元素绝对定位
25                  *     3.设置元素为inline-block
26                  *         - 可以解决问题，但是会导致宽度丢失，不推荐使用这种方式
27                  *     4.将元素的overflow设置为一个非visible的值
28                  *     
29                  * 推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。    
30                  */
31                 
32                 /*overflow: hidden;*/
33                 
34                 /*
35                  *但是在IE6及以下的浏览器中并不支持BFC，所以使用这种方式不能兼容IE6。
36                  * 在IE6中虽然没有BFC，但是具有另一个隐含的属性叫做hasLayout，
37                  * 该属性的作用和BFC类似，所在IE6浏览器可以通过开hasLayout来解决该问题
38                  * 开启方式很多，我们直接使用一种副作用最小的：
39                  *     直接将元素的zoom设置为1即可
40                  * 
41                  */
42                 
43                 /*
44                  * zoom表示放大的意思，后边跟着一个数值，写几就将元素放大几倍
45                  * zoom:1表示不放大元素，但是通过该样式可以开启hasLayout
46                  * zoom这个样式，只在IE中支持，其他浏览器都不支持
47                  */
48                 zoom:1;
49                 overflow: hidden;
50                 
51             }
52             
53             .box2{
54                 width: 100px;
55                 height: 100px;
56                 background-color: blue;
57                 float: left;
58                 
59             }
60             
61             .box3{
62                  height: 100px;
63                  background-color: yellow;
64             }
65             
66         style>
67     head>
68     <body>
69         
70         <div class="box1">
71             <div class="box2">div>
72         div>
73         
74         <div class="box3">div>
75         
76     body>
77 html>

 

 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>title>
 6         <style type="text/css">
 7             
 8             .box1{
 9                 border: 1px solid red;
10             }
11             
12             .box2{
13                 width: 100px;
14                 height: 100px;
15                 background-color: blue;
16                 
17                 float: left;
18             }
19             
20             /*
21              * 解决高度塌陷方案二：
22              *     可以直接在高度塌陷的父元素的最后，添加一个空白的div，
23              *     由于这个div并没有浮动，所以他是可以撑开父元素的高度的，
24              *     然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，
25              *     基本没有副作用
26              * 
27              * 使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。
28              */
29             .clear{
30                 clear: both;
31             }
32             
33         style>
34     head>
35     <body>
36         <div class="box1">
37             <div class="box2">div>
38             <div class="clear">div>
39         div>
40     body>
41 html>

 

 

 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>title>
 6         <style type="text/css">
 7             
 8             .box1{
 9                 border: 1px solid red;
10             }
11             
12             .box2{
13                 width: 100px;
14                 height: 100px;
15                 background-color: blue;
16                 
17                 float: left;
18             }
19             
20             /*通过after伪类，选中box1的后边*/
21             /*
22              * 可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，
23              *     这样做和添加一个div的原理一样，可以达到一个相同的效果，
24              *     而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用
25              */
26             .clearfix:after{
27                 /*添加一个内容*/
28                 content: "";
29                 /*转换为一个块元素*/
30                 display: block;
31                 /*清除两侧的浮动*/
32                 clear: both;
33             }
34             
35             /*
36              * 在IE6中不支持after伪类,
37              *     所以在IE6中还需要使用hasLayout来处理
38              */
39             .clearfix{
40                 zoom:1;
41             }
42             
43             
44         style>
45     head>
46     <body>
47         <div class="box1">
48             <div class="box2">div>
49         div>
50     body>
51 html>

 

转载于:https://www.cnblogs.com/fuck1/p/7441327.html

你可能感兴趣的:(CSS高度塌陷问题解决方案)

  • 水平垂直居中的几种方法（总结） LJ小番茄 CSS_玄学语言htmljavascript前端csscss3
    1.使用flexbox的justify-content和align-items.parent{display:flex;justify-content:center;/*水平居中*/align-items:center;/*垂直居中*/height:100vh;/*需要指定高度*/}2.使用grid的place-items:center.parent{display:grid;place-item
  • Pyecharts数据可视化大屏：打造沉浸式数据分析体验 我的运维人生 信息可视化数据分析数据挖掘运维开发技术共享
    Pyecharts数据可视化大屏：打造沉浸式数据分析体验在当今这个数据驱动的时代，如何将海量数据以直观、生动的方式展现出来，成为了数据分析师和企业决策者关注的焦点。Pyecharts，作为一款基于Python的开源数据可视化库，凭借其丰富的图表类型、灵活的配置选项以及高度的定制化能力，成为了构建数据可视化大屏的理想选择。本文将深入探讨如何利用Pyecharts打造数据可视化大屏，并通过实际代码案例
  • 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
  • 一比一复刻手表哪里可以买到？推荐三个可靠渠道 腕表世界
    在我国，提及一比一复刻手表，人们总是充满好奇与争议。这种高度仿真的复刻手表，凭借其精湛的工艺、时尚的设计，以及与正品相差无几的质感，深受一部分消费者的喜爱。但与此同时，其背后的侵权争议也一直不断。那么，究竟哪里可以买到这些令人心动的一比一复刻手表呢？腕表咨询微信：10428850一、何为一比一复刻手表？一比一复刻手表，指的是严格按照正版手表的设计、尺寸和工艺制作的仿制品。这些手表在材质、外观、功能
  • 母亲节如何做小红书营销 美橙传媒
    小红书的一举一动引起了外界的高度关注。通过爆款笔记和流行话题，我们可以看到“干货”类型的内容在小红书中偏向实用的生活经验共享和生活指南非常受欢迎。根据运营社的分析，这种现象是由小红书用户心智和内容社区背后机制共同决定的。首先，小红书将使用“强搜索”逻辑为用户提供特定的“搜索场景”。在“我必须这样生活”中，大量使用了满足小红书站用户喜好和需求的内容。内容社区自制的高质量内容也吸引了寻找营销新途径的品
  • 快节奏 地方天圆
    现在生活都是快节奏，使人来不及品味生活中的酸甜苦辣。交通、通讯、办公条件的高度发达，缩短了距离，节省了时间，提高了效率，但同时也使人成为缺少思考的动物，成为流水线上的一道工序。人人都有干不完的活、接不完的电话、参加不完的应酬。工作，急匆匆；办事，急匆匆；走路，急匆匆；吃饭，急匆匆；走亲串友，急匆匆；就连说话、甚至睡觉也都是急匆匆。快节奏的环境，使我们养成了快节奏的思维、习惯、心态，很难静下心来，认
  • 父母教育孩子的方式，将影响孩子一生 树英教育
    为什么有些孩子总是充满自信与快乐？独立、有主见又坚强？而有些孩子却自卑、胆怯，软弱又过度依赖父母？为什么有些孩子总是健康、阳光又富于创造力？而有些孩子却悲观、孤僻又思想空乏？一个孩子的行为取决于孩子的思想，思想取决于环境和自己的认知，认知取决于教育。父母是孩子人生中的第一位教育者，父母养育孩子的方式，将决定他们人生的高度，影响他们的一生。网络图，侵权即删优秀的父母就像园丁，既要浇水施肥，又要修剪杂
  • 《HTML 与 CSS—— 响应式设计》 陈在天box htmlcss前端
    一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
  • 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，点击
  • ansible的安装、使用 ytym00
    简介高度模块化，调用特定的模块，完成特定的任务，基于Yaml，来完成批量任务的模板化，来支持playbook。基于Python语言实现，主要使用Paramiko、PyYAML和JinJa2三个关键模块，部署简单(agentless)，主从模式，支持自定义模块，支持playbook，幂等性：允许重复执行N次，没有变化时，只会执行第一次。特点：1、Configuration(cfengine,chef
  • 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动画的优缺点优点：灵活度、可控性、性能
  • 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
  • Hadoop 傲雪凌霜，松柏长青 后端大数据hadoop大数据分布式
    ApacheHadoop是一个开源的分布式计算框架，主要用于处理海量数据集。它具有高度的可扩展性、容错性和高效的分布式存储与计算能力。Hadoop核心由四个主要模块组成，分别是HDFS（分布式文件系统）、MapReduce（分布式计算框架）、YARN（资源管理）和HadoopCommon（公共工具和库）。1.HDFS（HadoopDistributedFileSystem）HDFS是Hadoop生
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • python之pyecharts制作可视化数据大屏 cesske 大数据
    文章目录前言一、安装Pyecharts二、创建Pyecharts图表三、设计大屏布局四、实时数据更新五、部署和展示总结前言使用Pyecharts制作可视化数据大屏是一个复杂但有趣的过程，因为Pyecharts本身是一个用于生成Echarts图表的Python库，而Echarts是由百度开发的一个开源可视化库，支持丰富的图表类型和高度自定义。然而，Pyecharts本身并不直接提供“大屏”的解决方案
  • 日更十七：习惯与惯性 相谈寒
    这两个词有百分之五十相似之处，另外百分之五十决定了人生的高度。习惯需要养成，费时费力，而惯性则几乎什么也不用做。前者是推动力，后者是被动行为，我们要学会把前者变成后者。我们习惯于让自己沉醉于惯性，这是人生最可怕也最容易养成的习惯。我们利用惯性维持自己的好习惯，这是世界上最有用的惯性。日更是一个不太难养成的习惯，却因为常有杂事会阻挡惯性。
  • 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子
  • 使用游戏盾就可以保证游戏不被攻击吗？ 德迅云安全小李 游戏网络服务器安全网络安全
    游戏服务器不管是个人的还是企业的，被攻击都是，很常见的，在所难免的。特别是游戏新上线时，都要承受的住哪些外来压力，玩家突然猛增，被攻击等等。如果承受不住可能会直接宣布游戏倒闭。这里我们一起来说说怎么用游戏盾防御游戏服务器。首先我们要了解的一点是，什么是"游戏盾"游戏盾是针对游戏行业所推出的高度可定制的网络安全解决方案，除了能针对大型DDoS攻击（T级别）进行有效防御外，还能彻底解决游戏行业特有的T
  • 计算机视觉中，Pooling的作用 Wils0nEdwards 计算机视觉人工智能
    在计算机视觉中，Pooling（池化）是一种常见的操作，主要用于卷积神经网络（CNN）中。它通过对特征图进行下采样，减少数据的空间维度，同时保留重要的特征信息。Pooling的作用可以归纳为以下几个方面：1.降低计算复杂度与内存需求Pooling操作通过对特征图进行下采样，减少了特征图的空间分辨率（例如，高度和宽度）。这意味着网络需要处理的数据量会减少，从而降低了计算量和内存需求。这对大型神经网络
  • 爬虫技术抓取网站数据 Bearjumpingcandy 爬虫
    爬虫技术是一种自动化获取网站数据的技术，它可以模拟人类浏览器的行为，访问网页并提取所需的信息。以下是爬虫技术抓取网站数据的一般步骤：发起HTTP请求：爬虫首先会发送HTTP请求到目标网站，获取网页的内容。解析HTML：获取到网页内容后，爬虫会使用HTML解析器解析HTML代码，提取出需要的数据。数据提取：通过使用XPath、CSS选择器或正则表达式等工具，爬虫可以从HTML中提取出所需的数据，如文
  • 假期平安 大钧
    国庆七天小长假在蒙蒙细雨中，迎来了尾声，看着班主任在群里报平安的回复，心里踏实了许多。每到放假我们是如临大敌，精神也高度紧张起来。放假前的全体教师会议上，校领导传达上级关于假期安全工作的会议、文件精神，进行重大节庆安全教育培训，进行安全检查，一个关键词那就是“确保安全”。大课间的全体学生集会上，邀请法制副校长进校园，对师生进行法制安全教育培训，反复强调各种安全事宜。小长假前的下午，各班围绕假期安全
  • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
    前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
  • 【LeetCode 算法笔记】84. 柱状图中最大的矩形 Sardar_ 算法leetcode笔记
    目录问题描述暴力求解：栈问题描述给定n个非负整数，用来表示柱状图中各个柱子的高度。每个柱子彼此相邻，且宽度为1。求在该柱状图中，能够勾勒出来的矩形的最大面积。示例1:输入：heights=[2,1,5,6,2,3]输出：10解释：最大的矩形为图中红色区域，面积为10示例2：输入：heights=[2,4]输出：4提示：1int:area=0n=len(heights)foriinrange(n):
  • HTML中"bgcolor"与"background-color"的区别 Sardar_ html
    bgcolor只是标签属性，而backgroud更多作为css的样式属性。它们俩大多数情况下效果完全相同。但在标签下效果不同。不支持bgcolor属性，只能用style标签添加CSS样式。作为table的属性而言：HelloWorld!和HelloWorld!效果完全相同。作为body属性而言：效果完全相同。不过个人推荐统一用CSS样式进行控制，把style统一放到.css文件中。backgrou
  • Nginx负载均衡 510888780 nginx应用服务器
    Nginx负载均衡一些基础知识: nginx 的 upstream目前支持 4 种方式的分配 1)、轮询（默认）       每个请求按时间顺序逐一分配到不同的后端服务器，如果后端服务器down掉，能自动剔除。 2)、weight       指定轮询几率，weight和访问比率成正比
  • RedHat 6.4 安装 rabbitmq bylijinnan erlangrabbitmqredhat
    在 linux 下安装软件就是折腾，首先是测试机不能上外网要找运维开通，开通后发现测试机的 yum 不能使用于是又要配置 yum 源，最后安装 rabbitmq 时也尝试了两种方法最后才安装成功 机器版本： [root@redhat1 rabbitmq]# lsb_release LSB Version: :base-4.0-amd64:base-4.0-noarch:core
  • FilenameUtils工具类 eksliang FilenameUtilscommon-io
    转载请出自出处：http://eksliang.iteye.com/blog/2217081 一、概述 这是一个Java操作文件的常用库，是Apache对java的IO包的封装，这里面有两个非常核心的类FilenameUtils跟FileUtils，其中FilenameUtils是对文件名操作的封装;FileUtils是文件封装，开发中对文件的操作，几乎都可以在这个框架里面找到。 非常的好用。
  • xml文件解析SAX 不懂事的小屁孩 xml
    xml文件解析:xml文件解析有四种方式， 1.DOM生成和解析XML文档(SAX是基于事件流的解析) 2.SAX生成和解析XML文档(基于XML文档树结构的解析) 3.DOM4J生成和解析XML文档 4.JDOM生成和解析XML 本文章用第一种方法进行解析，使用android常用的DefaultHandler import org.xml.sax.Attributes;
  • 通过定时任务执行mysql的定期删除和新建分区，此处是按日分区 酷的飞上天空 mysql
    使用python脚本作为命令脚本，linux的定时任务来每天定时执行 #!/usr/bin/python # -*- coding: utf8 -*- import pymysql import datetime import calendar #要分区的表 table_name = 'my_table' #连接数据库的信息 host,user,passwd,db =
  • 如何搭建数据湖架构？听听专家的意见 蓝儿唯美 架构
    Edo Interactive在几年前遇到一个大问题：公司使用交易数据来帮助零售商和餐馆进行个性化促销，但其数据仓库没有足够时间去处理所有的信用卡和借记卡交易数据  “我们要花费27小时来处理每日的数据量，”Edo主管基础设施和信息系统的高级副总裁Tim Garnto说道：“所以在2013年，我们放弃了现有的基于PostgreSQL的关系型数据库系统，使用了Hadoop集群作为公司的数
  • spring学习——控制反转与依赖注入 a-john spring
           控制反转（Inversion of Control，英文缩写为IoC）是一个重要的面向对象编程的法则来削减计算机程序的耦合问题，也是轻量级的Spring框架的核心。 控制反转一般分为两种类型，依赖注入（Dependency Injection，简称DI）和依赖查找（Dependency Lookup）。依赖注入应用比较广泛。  
  • 用spool+unixshell生成文本文件的方法 aijuans xshell
    例如我们把scott.dept表生成文本文件的语句写成dept.sql,内容如下: 　　set pages 50000; 　　set lines 200; 　　set trims on; 　　set heading off; 　　spool /oracle_backup/log/test/dept.lst; 　　select deptno||','||dname||','||loc
  • 1、基础--名词解析(OOA/OOD/OOP) asia007 学习基础知识
    OOA:Object-Oriented Analysis（面向对象分析方法） 是在一个系统的开发过程中进行了系统业务调查以后，按照面向对象的思想来分析问题。OOA与结构化分析有较大的区别。OOA所强调的是在系统调查资料的基础上，针对OO方法所需要的素材进行的归类分析和整理，而不是对管理业务现状和方法的分析。 　　OOA（面向对象的分析）模型由5个层次（主题层、对象类层、结构层、属性层和服务层）
  • 浅谈java转成json编码格式技术 百合不是茶 json编码java转成json编码
    json编码;是一个轻量级的数据存储和传输的语言       在java中需要引入json相关的包,引包方式在工程的lib下就可以了   JSON与JAVA数据的转换（JSON 即 JavaScript Object Natation，它是一种轻量级的数据交换格式，非   常适合于服务器与 JavaScript 之间的数据的交
  • web.xml之Spring配置(基于Spring+Struts+Ibatis) bijian1013 javaweb.xmlSSIspring配置
    指定Spring配置文件位置 <context-param> <param-name>contextConfigLocation</param-name> <param-value> /WEB-INF/spring-dao-bean.xml,/WEB-INF/spring-resources.xml, /WEB-INF/
  • Installing SonarQube（Fail to download libraries from server） sunjing InstallSonar
    1.  Download and unzip the SonarQube distribution 2.  Starting the Web Server The default port is "9000" and the context path is "/". These values can be changed in &l
  • 【MongoDB学习笔记十一】Mongo副本集基本的增删查 bit1129 mongodb
    一、创建复本集   假设mongod,mongo已经配置在系统路径变量上，启动三个命令行窗口，分别执行如下命令：   mongod --port 27017 --dbpath data1 --replSet rs0 mongod --port 27018 --dbpath data2 --replSet rs0 mongod --port 27019 -
  • Anychart图表系列二之执行Flash和HTML5渲染 白糖_ Flash
    今天介绍Anychart的Flash和HTML5渲染功能   HTML5 Anychart从6.0第一个版本起，已经逐渐开始支持各种图的HTML5渲染效果了，也就是说即使你没有安装Flash插件，只要浏览器支持HTML5，也能看到Anychart的图形（不过这些是需要做一些配置的）。 这里要提醒下大家，Anychart6.0版本对HTML5的支持还不算很成熟，目前还处于
  • Laravel版本更新异常4.2.8-> 4.2.9 Declaration of ... CompilerEngine ... should be compa bozch laravel
    昨天在为了把laravel升级到最新的版本，突然之间就出现了如下错误： ErrorException thrown with message "Declaration of Illuminate\View\Engines\CompilerEngine::handleViewException() should be compatible with Illuminate\View\Eng
  • 编程之美-NIM游戏分析-石头总数为奇数时如何保证先动手者必胜 bylijinnan 编程之美
    import java.util.Arrays; import java.util.Random; public class Nim { /**编程之美 NIM游戏分析 问题： 有N块石头和两个玩家A和B，玩家A先将石头随机分成若干堆，然后按照BABA...的顺序不断轮流取石头， 能将剩下的石头一次取光的玩家获胜，每次取石头时，每个玩家只能从若干堆石头中任选一堆，
  • lunce创建索引及简单查询 chengxuyuancsdn 查询创建索引lunce
    import java.io.File; import java.io.IOException; import org.apache.lucene.analysis.Analyzer; import org.apache.lucene.analysis.standard.StandardAnalyzer; import org.apache.lucene.document.Docume
  • [IT与投资]坚持独立自主的研究核心技术 comsci it
           和别人合作开发某项产品....如果互相之间的技术水平不同,那么这种合作很难进行,一般都会成为强者控制弱者的方法和手段.....        所以弱者,在遇到技术难题的时候,最好不要一开始就去寻求强者的帮助,因为在我们这颗星球上,生物都有一种控制其
  • flashback transaction闪回事务查询 daizj oraclesql闪回事务
       闪回事务查询有别于闪回查询的特点有以下3个： （1）其正常工作不但需要利用撤销数据，还需要事先启用最小补充日志。 （2）返回的结果不是以前的“旧”数据，而是能够将当前数据修改为以前的样子的撤销SQL（Undo SQL）语句。 （3）集中地在名为flashback_transaction_query表上查询，而不是在各个表上通过“as of”或“vers
  • Java I/O之FilenameFilter类列举出指定路径下某个扩展名的文件 游其是你 FilenameFilter
    这是一个FilenameFilter类用法的例子，实现的列举出“c:\\folder“路径下所有以“.jpg”扩展名的文件。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
  • C语言学习五函数，函数的前置声明以及如何在软件开发中合理的设计函数来解决实际问题 dcj3sjt126com c
    # include <stdio.h> int f(void) //括号中的void表示该函数不能接受数据，int表示返回的类型为int类型 { return 10; //向主调函数返回10 } void g(void) //函数名前面的void表示该函数没有返回值 { //return 10; //error 与第8行行首的void相矛盾 } in
  • 今天在测试环境使用yum安装，遇到一个问题： Error: Cannot retrieve metalink for repository: epel. Pl dcj3sjt126com centos
    今天在测试环境使用yum安装，遇到一个问题： Error: Cannot retrieve metalink for repository: epel. Please verify its path and try again   处理很简单，修改文件“/etc/yum.repos.d/epel.repo”， 将baseurl的注释取消， mirrorlist注释掉。即可。 &n
  • 单例模式 shuizhaosi888 单例模式
    单例模式      懒汉式 public class RunMain { /** * 私有构造 */ private RunMain() { } /** * 内部类，用于占位，只有 */ private static class SingletonRunMain { priv
  • Spring Security（09）——Filter 234390216 Spring Security
    Filter 目录 1.1     Filter顺序 1.2     添加Filter到FilterChain 1.3     DelegatingFilterProxy 1.4     FilterChainProxy 1.5
  • 公司项目NODEJS实践0.1 逐行分析JS源代码 mongodbnginxubuntunodejs
      一、前言         前端如何独立用nodeJs实现一个简单的注册、登录功能，是不是只用nodejs+sql就可以了？其实是可以实现，但离实际应用还有距离，那要怎么做才是实际可用的。         网上有很多nod
  • java.lang.Math liuhaibo_ljf javaMathlang
    System.out.println(Math.PI); System.out.println(Math.abs(1.2)); System.out.println(Math.abs(1.2)); System.out.println(Math.abs(1)); System.out.println(Math.abs(111111111)); System.out.println(Mat
  • linux下时间同步 nonobaba ntp
    今天在linux下做hbase集群的时候，发现hmaster启动成功了，但是用hbase命令进入shell的时候报了一个错误  PleaseHoldException: Master is initializing，查看了日志，大致意思是说master和slave时间不同步，没办法，只好找一种手动同步一下，后来发现一共部署了10来台机器，手动同步偏差又比较大，所以还是从网上找现成的解决方
  • ZooKeeper3.4.6的集群部署 roadrunners zookeeper集群部署
    ZooKeeper是Apache的一个开源项目，在分布式服务中应用比较广泛。它主要用来解决分布式应用中经常遇到的一些数据管理问题，如：统一命名服务、状态同步、集群管理、配置文件管理、同步锁、队列等。这里主要讲集群中ZooKeeper的部署。   1、准备工作 我们准备3台机器做ZooKeeper集群，分别在3台机器上创建ZooKeeper需要的目录。   数据存储目录
  • Java高效读取大文件 tomcat_oracle java
    　　读取文件行的标准方式是在内存中读取，Guava 和Apache Commons IO都提供了如下所示快速读取文件行的方法： 　　Files.readLines(new File(path), Charsets.UTF_8); 　　FileUtils.readLines(new File(path)); 　　这种方法带来的问题是文件的所有行都被存放在内存中，当文件足够大时很快就会导致
  • 微信支付api返回的xml转换为Map的方法 xu3508620 xmlmap微信api
    举例如下： <xml>    <return_code><![CDATA[SUCCESS]]></return_code>    <return_msg><![CDATA[OK]]></return_msg>    <appid><
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他