学电子的非程序猿
学电子的非程序猿

前端学习笔记47-高度塌陷和BFC

前端学习笔记47-高度塌陷和BFC

  • 高度塌陷
  • BFC

浮动本来是用来设置文字环绕的，但是从前面学的可以看到，我们拿浮动来设置布局。这看着很爽，但是也是有一些问题的。

高度塌陷

拿上一个举例，我们把中间的main的高度写死了，还把它的三个子元素的高度写死。但是实际中很多都是没写死的，这样的话如果内容太少或者太多，就不一定会有下图的效果出来。
因此，我们不能把父元素main的大小写死，而是要让他根据子元素来变化。
前端学习笔记47-高度塌陷和BFC_第1张图片
如下面代码，outer的高度没有设置，而是由inner的高度撑开。


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .outer{
      
            border: 10px red solid;
        }
        .inner{
      
            width: 100px;
            height: 100px;
            background-color: #bfa;
        }
    style>
head>
<body>
    <div class="outer">
        <div class="inner">div>
    div>
body>
html>

前端学习笔记47-高度塌陷和BFC_第2张图片
如果我们此时想给outer水平排好几个inner，就需要给inner设置浮动，

        .inner{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            float: left;
        }

前端学习笔记47-高度塌陷和BFC_第3张图片
？？？啥情况
子元素浮动，从文档流脱离了，子元素的高度不再撑开父元素的高度，这就是高度塌陷。
高度塌陷的问题主要不在于影响自己和父元素，它的主要问题是会影响其他的元素。
看代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .outer{
      
            border: 10px red solid;
        }
        .inner{
      
            width: 100px;
            height: 100px;
            background-color: #bfa;
            float: left;
        }
    style>
head>
<body>
    <div class="outer">
        <div class="inner">div>
    div>
    <div style="width: 100px;height: 100px;background-color: yellow;">div>
body>
html>

前端学习笔记47-高度塌陷和BFC_第4张图片
如果没浮动，则黄色的div是在outer垂直下方的，但是inner设置浮动了，outer高度塌陷导致黄色的div也就上去了，这就重叠了。

如果想解决这个问题，很容易想到的就是写死outer的高度，但是这样的话如果子元素内容少，则outer里面的内容就稀疏了，很难看，所以不行。
所以得用BFC来解决问题。

BFC

BFC是块级格式化环境，是CSS的隐含属性。
开启BFC后，元素变成了一个独立的布局区域。
特点：
 1、不会被浮动元素所覆盖
 2、子元素和父元素外边距不会重叠
 3、可以包含浮动的子元素

这里我们用第三个特点来解决问题。

开启BFC的一个特殊方法是设置元素的浮动。
在这里就是给outer设置浮动。

        .outer{
            float: left;
            border: 10px red solid;
        }

前端学习笔记47-高度塌陷和BFC_第5张图片
虽说没有塌陷，但是那个黄色div还是重叠了，且宽度和高度变了。

第二中开启BFC的方法是将元素设置为行内块元素。

        .outer{
            display: inline-block;
            border: 10px red solid;
        }

前端学习笔记47-高度塌陷和BFC_第6张图片
虽然好了点，但是宽度还是改变了，不大行。

第三种开启BFC的方法是将元素的overflow设置为非visible的值。(笔记37里有讲overflow)

        .outer{
            overflow: auto;
            border: 10px red solid;
        }

或

        .outer{
            overflow: hidden;
            border: 10px red solid;
        }

前端学习笔记47-高度塌陷和BFC_第7张图片
比前两种方法好多了。

你可能感兴趣的:(小白前端学习,html,css)

  • 浅谈流媒体技术在无线网络中的应用 chenjie19891104 流媒体技术网络流媒体服务器服务器interneth.264路由器
    原文地址：http://info.broadcast.hc360.com/2009/10/100913135646.shtml流媒体即媒体内容通过数据网络传送到客户端的同时，在客户端播放的一种机制。流媒体技术首先出现在固定网络通信中，在网络上传送音视频等多媒体信息的方法主要采用下载和流式两种传送方式。对于下载方式而言，由于大文件往往需要大量的存储容量，同时受到网络带宽的限制，下载常常会花数分钟甚至
  • ip地址怎么改 IP属地怎么改成自己想要的地区 xxtzaaa tcp/ip网络网络协议
    你会改IP地址吗？你觉得改IP地址难吗？自从去年各大平台开始显示IP属地后，几乎每天都有人来问我们怎么改IP地址，而我们作为一家IP代理服务商，可以说天天都在和IP打交道，对这一块自然是了如指掌，下面我就来教大家三种改IP地址的方法。第一种方法：使用代理IP软件这是现在最为常用的一种方法，很简单，下载，兔子软件配置好以后，就可以随心所欲的一键切换IP了，放心，都有使用教程的，小白也能一看就会。第二
  • 宝塔面板申请SSL安全证书一直显示“待域名确认”？如何处理解决？ 青云网运维 宝塔面板教程WordPress教程
    现在越来越多的站点加入到https的大军中来了，主要还是有很多免费的SSL证书可以申请，还有很多平台可以帮助我们一键申请域名证书，比如宝塔面板就支持这样的操作（运维大神可以右上角关闭了，我们小白喜欢用面板），如果还有不了解宝塔面板怎么使用的小伙伴，可以看下我总结的系列教程，保证从新手变老鸟：【宝塔面板精选教程汇总】宝塔面板教程（1）基于云服务器搭建宝塔面板教程最全详解宝塔面板教程（2）宝塔面板添加
  • dnspod动态解析linux,NAS折腾记 篇一：五分钟搞定威联通DNSPOD动态域名解析-简单教程+问题解决... 芒果绵绵冰 dnspod动态解析linux
    NAS折腾记篇一：五分钟搞定威联通DNSPOD动态域名解析-简单教程+问题解决2021-01-1321:04:4814点赞156收藏28评论新人值友一枚，第一次发贴，请大家多多支持！2020年双11，因为每天都会打开张大妈看看，经过太多值友PO文轮番轰炸，终于下手了一台威联通NAS。从一开始完全搞不清状况的新人小白(存储池，卷，威联通的太多术证让人傻傻分不清)，到现在基本上把自己的NAS折腾得七七
  • 基于QT的电子木鱼小游戏(C/C++) 今天你debug了嘛？ qtqtc语言c++
    文章目录前言今年最火爆的解压小游戏电子木鱼，现在许多软件都上架了这个小程序。我在网上看了一下基本上都是用py和Java写的，所以我用QT重新写了一下，作为小白练手项目非常适合一、界面展示二、功能模块1)木鱼缩放2)功德+1显示3)音乐4)自动5)延时6)完整代码前言今年最火爆的解压小游戏电子木鱼，现在许多软件都上架了这个小程序。我在网上看了一下基本上都是用py和Java写的，所以我用QT重新写了一
  • Python3小白基础入门 | 学习笔记 查理养殖场 编程语言笔记学习笔记python
    一、输入输出1、读入字符串str=input()print(str)2、读入整数数字a=int(input())print(a)print(type(a))#type()输出变量类型3、格式化输出+直接拼接：name="Lihua"age=24print("Hello"+name+",youare"+str(age)+"yearsold")%：name="Lihua"age=24print("He
  • 前端面试100问！！ 一只松 javascriptes6
    面试造火箭，工作拧螺丝！在技术圈毕竟只有百分之一的人能进入BAT，百分之九九的小伙伴只能在普通公司做这普通的事情，厌烦哪些标题党，我们抛开那些高大上的台词，回归到面试的本质。本课程帮助小伙伴们快速梳理知识，不会涉及到具体的很细节的知识点，关注面试本身。公司一般会从以下5个方面考察一个人的能力，本课程的100问是总结了最近2-3年常问的面试题，适合初中级前端工程师。1、HTML(5)和CSS3方面1
  • AI 进阶指南：携手DeepSeek从小白到行业先锋的跃迁之路 轻口味 大模型实战人工智能deepseek大模型
    AI进阶指南：携手DeepSeek从小白到行业先锋的跃迁之路在当今数字化浪潮汹涌澎湃的时代，人工智能（AI）宛如一颗璀璨的明星，照亮了各个领域的创新与发展道路。然而，面对AI这一庞大而复杂的体系，许多人往往感到迷茫无措，不知自己处于何种水平，更不知如何迈向更高的层次。尤其是DeepSeek的出圈，AI的热度更加火爆。无论是普通用户还是AI从业者也变得很迷茫，不知如何应对AI的崛起。本文将依据AI应
  • nuxt常用组件库html-validator应用解析 垣宇 vue.js
    html-validator主要用于自动验证nuxt服务器呈现的HTML(SSR和SSG)，以检测可能导致水合错误的HTML常见问题，有助于减少水合错误，检测常见的可访问性错误。安装npxnuxi@latestmoduleaddhtml-validator配置若自动更新nuxt.config.ts配置文件失败，可手动添加下面代码:nuxt3defineNuxtConfig({modules:['@
  • 前端面试题---2022 每日一小知识 前端htmlnpmvscodenode.js
    *集大成之面试题，我们不做面试题的创作者，只做面试题的搬运工（侵必删）〇理论一个完整的URL解析过程1用户输入URL地址。2对URL地址进行DNS域名解获得IP地址。3建立TCP连接（三次握手）。4浏览器向web服务器发送一个HTTP请求报文。5服务器返回HTTP响应报文给客户端。6关闭TCP连接（四次挥手）。7浏览器解析文档资源并渲染页面。解析过程：浏览器解析的资源（html，svg,Xhtml
  • 大白话html第五章HTML5 新增表单元素和属性 IT木昜 大白话htmlhtmlhtml5前端
    大白话html第五章HTML5新增表单元素和属性HTML5给表单带来了很多新的小伙伴，让我们收集用户信息变得更方便、更智能。新增表单元素：这个就像一个自带日历的小框框，用户可以直接在里面选择日期，不用手动输入。你的生日：：专门用来收集用户邮箱地址的，浏览器会自动检查用户输入的是不是一个合法的邮箱格式。你的邮箱：：当你需要用户输入网址的时候，用这个标签。浏览器会检查输入的是不是一个合法的网址。你的网
  • 深入探索CSS：从基础到高级，解锁网页设计的无限可能 斯~内克 csscss前端
    CSS（层叠样式表）是现代网页设计中不可或缺的一部分，它不仅决定了网页的外观和风格，还极大地影响了用户体验和交互效果。从简单的文本样式到复杂的布局设计，CSS的灵活性和强大功能使其成为前端开发的核心技术之一。本文将从CSS的基础概念出发，逐步深入到高级应用，带你全面了解CSS的魅力和实用性。一、CSS简介：网页设计的基石CSS是一种用于描述HTML或XML文档外观和格式的样式表语言。它的主要作用是
  • 终极指南：styled-components 深度解析与实战对比 ox0080 #北漂+滴滴出行WebVIP激励styled-comCSS
    一、CSS-in-JS革命：现代Web样式新范式1.1传统CSS的三大痛点全局污染：class命名冲突导致"样式战争"状态隔离：动态样式需要操作DOM类名架构割裂：样式文件与组件逻辑分离//传统CSS的典型问题实例//Button.css.btn{background:blue;}//全局作用域//App.css.btn{padding:10px;}//意外覆盖1.2CSS-in-JS的核心优势真
  • 前端：HTML 00&00 前端前端html
    HTML（超文本标记语言，HyperTextMarkupLanguage）是构建网页的标准标记语言。它被广泛用于创建和设计网页内容，使得文本、图像、链接、表格等元素能够在浏览器中以结构化的形式展示。以下是HTML的详细介绍：1.HTML的基本结构HTML文档通常由一系列嵌套的元素和标签构成，具有以下基本结构：      文档标题  欢迎使用HTML！  这是一个段落。``：声明文档类型，告知浏览器
  • 【大数据】es ElasticSearch常用操作：查询与聚合篇 roshy 大数据
    0说明基于es5.4和es5.6，列举的是个人工作中经常用到的查询（只是工作中使用的是JavaAPI），如果需要看完整的，可以参考官方相关文档https://www.elastic.co/guide/en/elasticsearch/reference/5.4/search.html。1查询先使用一个快速入门来引入，然后后面列出的各种查询都是用得比较多的（在我的工作环境是这样），其它没怎么用的这里
  • 前端必知必会-Vue动画Animations-Transition ‘name‘ 属性 编程岁月 前端vue.jsjavascript
    文章目录Transition'name'属性Transition‘name’属性如果您有多个组件，但您希望至少一个组件具有不同的动画，则需要为组件指定不同的名称以区分它们。我们可以使用name属性选择组件的名称，这也会更改过渡类的名称，以便我们可以为该组件设置不同的CSS动画规则。如果过渡名称属性值设置为‘swirl’，则自动可用的类现在将以‘swirl-’而不是‘v-’开头：swirl-ente
  • 【Jenkins】个人向-Jenkinsfile如何写 luojiaao 汽车软件开发-工具链jenkins运维
    官方参考：https://www.jenkins.io/doc/book/pipeline/syntax/PipelineUtilitySteps插件：https://birdbook.com.cn/ops/ci/jenkins/plugins/pipeline%20utility%20steps.html常用环境变量含义表达式备注params，传入参数传入参数params.都可以用env.来访问
  • python数据分析之爬虫基础：爬虫介绍以及urllib详解 web13765607643 python数据分析爬虫
    前言在数据分析中，爬虫有着很大作用，可以自动爬取网页中提取的大量的数据，比如从电商网站手机商品信息，为市场分析提供数据基础。也可以补充数据集、检测动态变化等一系列作用。可以说在数据分析中有着相当大的作用！页面结构介绍这里主要介绍HTML的一些简单结构，需要一点前端的知识，可以根据情况直接跳过。Title姓名年龄性别张三18男铁锅炖大鹅小鸡炖蘑菇锅包肉奖励自己睡觉起床读书学习爬虫相关概念1、爬虫的概
  • java计算机毕业设计企业销售管理系统源代码+数据库+系统+lw文档 今晚的月亮真好看 java开发语言
    java计算机毕业设计企业销售管理系统源代码+数据库+系统+lw文档java计算机毕业设计企业销售管理系统源代码+数据库+系统+lw文档本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码地址：https://p
  • VUE实现日历记录事件 yu_zheng5163 vue.jsjavascriptecmascript
    el-calendarHTML代码段可以根据自己的需要显示内容，样式-1?'lar-is-selected':'lar-no-selected'"@click="holidayUpdate(data,date)">班-1&&queryDate.indexOf(data.day)!=-1"style="color:#f73131">休 -1?'color:#F73131;text-alig
  • HTML---css选择器 lh_freak htmlcss前端
    CSS指层叠样式表，是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，CSS文件扩展名为.css。使用CSS我们可以大大提升网页开发的工作效率！插入样式表的方法有三种:外部样式(Externalstylesheet)内部样式(Internalstylesheet)内联样式(Inlinestyle)内联样式（行内样式）hello样式直接写入到本元素标签中
  • Vue打包（webpack）缓存 歌歌的前端学习之路 vue.jswebpack前端
    解决方法：1、修改vue.config.js文件constTimestamp=newDate().getTime();module.exports=defineConfig({configureWebpack{output:{filename:`[name].${Timestamp}.js`,chunkFilename:`[name].${Timestamp}.js`},},css:{extrac
  • HTML+CSS学习笔记 潘越越 学习笔记
    目录一、emmet语法二、常用html标签使用方法：三、常用CSS样式css样式设计具体引入方式1.关于border边框的设计2.关于text文本内容的管理3.关于盒模型的分类以及position属性：4.background属性的使用5.实现样式转变持续更新……首先，整体了解有关HTML和CSS的使用，主要是为了搭建静态页面有关HTML5所需要掌握的框架：React+Reactnativeuni
  • 小波变换网文精粹：小波变换教程(十三) iteye_9380
    小波变换网文精粹：小波变换教程(十三)原文：ROBIPOLIKAR.THEENGINEER'SULTIMATEGUIDETOWAVELETANALYSIS：TheWaveletTutorial网址：http://users.rowan.edu/~polikar/WAVELETS/WTtutorial.html译文转自：http://blog.163.com/renfengyuee@126/blog
  • webpack基础配置 吃杠碰小鸡 前端前端工具库webpack前端javascript
    文章目录一、默认入口和默认出口二、资源配置三、输出文件3.1多文件入口3.2HtmlWebpackPlugin插件四、环境4.1环境变量4.2热更新五、代码分离5.1公共模块5.2懒加载5.3预获取/预加载模块六、缓存七、TreeShaking八、公共路径webpack是一个用于现代JavaScript应用程序的静态模块打包工具，在许多项目中都有应用，但是往往平台搭建以后很少去修改配置，熟悉基础配
  • Recat学习 freelb 学习webpackjavascriptreactjs
    Recatv17.x项目开发框架搭建1.创建React项目2.暴露配置文件方法一方法二3.支持less4.支持scss/sass5.安装element-ui6.路由导航（常规使用）编译出错错误一错误二错误三错误四8.Serve插件（查看打包运行效果）安装typescript支持1.创建React项目为了加速npm下载速度，先把npm设置为淘宝镜像地址。npmconfigsetregistryhtt
  • 有关SOA 的学习材料 DanielQChen 技术讨论IBM技术soaibmweb
    SOAfromIBMforBusinessPartnershttp://www-304.ibm.com/jct09002c/isv/soa/index.htmlSOAdesign&developmenthttp://www-306.ibm.com/software/info/developer/solutions/soadev/index.jspNewtoSOAandWebserviceshttp
  • Kubernetes 从零开始：手把手教你玩转容器编排王者！ Leaton Lee kubernetes容器
    引言：为什么Kubernetes如此重要？在微服务架构盛行的今天，容器化和编排技术已经成为现代应用部署的核心。而Kubernetes（简称k8s），作为容器编排领域的“扛把子”，几乎成了每个开发者和技术团队的必修课。无论你是刚接触容器技术的小白，还是有一定经验的开发者，Kubernetes的学习曲线都堪称陡峭。本文将从零开始，手把手带你一步步掌握Kubernetes的核心概念、安装配置、常用组件以
  • 生成网页链接二维码 小雨滴答滴答 html5javascript
    生成二维码#qrcode{margin-top:20px;}生成网页链接二维码生成二维码functiongenerateQRCode(){consturl=document.getElementById('urlInput').value;constqrcodeDiv=document.getElementById('qrcode');//清空之前的二维码qrcodeDiv.innerHTML='
  • WPS 加载项开发说明 金山办公开发者 JSAPI二次开发javascript
    WPS加载项结构WPS加载项由自定义功能区和网页两部分组成。自定义功能区只需要一个配置文件，对应WPS加载项目录中的ribbon.xml文件；网页部分负责执行自定义功能区对应的逻辑功能。因为不需要显示网页，所以省略了HTML文件，并用main.js来引入所有的外部JavaScript文件；在这些JavaScript文件中通常包含了一系列用JavaScript实现的函数，这些函数与自定义功能区的功能
  • Java实现的基于模板的网页结构化信息精准抽取组件：HtmlExtractor yangshangchuan 信息抽取HtmlExtractor精准抽取信息采集
    HtmlExtractor是一个Java实现的基于模板的网页结构化信息精准抽取组件，本身并不包含爬虫功能，但可被爬虫或其他程序调用以便更精准地对网页结构化信息进行抽取。   HtmlExtractor是为大规模分布式环境设计的，采用主从架构，主节点负责维护抽取规则，从节点向主节点请求抽取规则，当抽取规则发生变化，主节点主动通知从节点，从而能实现抽取规则变化之后的实时动态生效。 如
  • java编程思想 -- 多态 百合不是茶 java多态详解
    一: 向上转型和向下转型 面向对象中的转型只会发生在有继承关系的子类和父类中（接口的实现也包括在这里）。父类：人    子类：男人向上转型： Person p = new Man() ; //向上转型不需要强制类型转化向下转型： Man man =
  • [自动数据处理]稳扎稳打,逐步形成自有ADP系统体系 comsci dp
          对于国内的IT行业来讲,虽然我们已经有了"两弹一星",在局部领域形成了自己独有的技术特征,并初步摆脱了国外的控制...但是前面的路还很长....       首先是我们的自动数据处理系统还无法处理很多高级工程...中等规模的拓扑分析系统也没有完成,更加复杂的
  • storm 自定义 日志文件 商人shang stormclusterlogback
    Storm中的日志级级别默认为INFO，并且，日志文件是根据worker号来进行区分的，这样，同一个log文件中的信息不一定是一个业务的，这样就会有以下两个需求出现： 1. 想要进行一些调试信息的输出 2. 调试信息或者业务日志信息想要输出到一些固定的文件中   不要怕，不要烦恼，其实Storm已经提供了这样的支持，可以通过自定义logback 下的 cluster.xml 来输
  • Extjs3 SpringMVC使用 @RequestBody 标签问题记录 21jhf
    springMVC使用 @RequestBody(required = false) UserVO userInfo 传递json对象数据，往往会出现http 415，400,500等错误，总结一下需要使用ajax提交json数据才行，ajax提交使用proxy，参数为jsonData，不能为params；另外，需要设置Content-type属性为json，代码如下： （由于使用了父类aaa
  • 一些排错方法 文强chu 方法
    1、java.lang.IllegalStateException: Class invariant violation at org.apache.log4j.LogManager.getLoggerRepository(LogManager.java:199)at org.apache.log4j.LogManager.getLogger(LogManager.java:228) at o
  • Swing中文件恢复我觉得很难 小桔子 swing
           我那个草了！老大怎么回事，怎么做项目评估的？只会说相信你可以做的，试一下，有的是时间！        用java开发一个图文处理工具，类似word，任意位置插入、拖动、删除图片以及文本等。文本框、流程图等，数据保存数据库，其余可保存pdf格式。ok,姐姐千辛万苦，
  • php 文件操作 aichenglong PHP读取文件写入文件
    1 写入文件 @$fp=fopen("$DOCUMENT_ROOT/order.txt", "ab"); if(!$fp){ echo "open file error" ; exit; } $outputstring="date:"." \t tire:".$tire."
  • MySQL的btree索引和hash索引的区别 AILIKES 数据结构mysql算法
    Hash 索引结构的特殊性，其 检索效率非常高，索引的检索可以一次定位，不像B-Tree 索引需要从根节点到枝节点，最后才能访问到页节点这样多次的IO访问，所以 Hash 索引的查询效率要远高于 B-Tree 索引。     可能很多人又有疑问了，既然 Hash 索引的效率要比 B-Tree 高很多，为什么大家不都用 Hash 索引而还要使用 B-Tree 索引呢
  • JAVA的抽象--- 接口 --实现 百合不是茶
    抽象 接口 实现接口   //抽象 类 ,方法   //定义一个公共抽象的类 ,并在类中定义一个抽象的方法体 抽象的定义使用abstract   abstract class A 定义一个抽象类 例如： //定义一个基类 public abstract class A{     //抽象类不能用来实例化，只能用来继承 //
  • JS变量作用域实例 bijian1013 作用域
    <script> var scope='hello'; function a(){ console.log(scope); //undefined var scope='world'; console.log(scope); //world console.log(b);
  • TDD实践（二） bijian1013 javaTDD
    实践题目：分解质因数 Step1： 单元测试： package com.bijian.study.factor.test; import java.util.Arrays; import junit.framework.Assert; import org.junit.Before; import org.junit.Test; import com.bijian.
  • [MongoDB学习笔记一]MongoDB主从复制 bit1129 mongodb
    MongoDB称为分布式数据库，主要原因是1.基于副本集的数据备份， 2.基于切片的数据扩容。副本集解决数据的读写性能问题，切片解决了MongoDB的数据扩容问题。   事实上，MongoDB提供了主从复制和副本复制两种备份方式，在MongoDB的主从复制和副本复制集群环境中，只有一台作为主服务器，另外一台或者多台服务器作为从服务器。 本文介绍MongoDB的主从复制模式，需要指明
  • 【HBase五】Java API操作HBase bit1129 hbase
    import java.io.IOException; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hbase.HBaseConfiguration; import org.apache.hadoop.hbase.HColumnDescriptor; import org.apache.ha
  • python调用zabbix api接口实时展示数据 ronin47
    zabbix api接口来进行展示。经过思考之后，计划获取如下内容：     1、  获得认证密钥     2、  获取zabbix所有的主机组     3、  获取单个组下的所有主机     4、  获取某个主机下的所有监控项  
  • jsp取得绝对路径 byalias 绝对路径
    在JavaWeb开发中，常使用绝对路径的方式来引入JavaScript和CSS文件，这样可以避免因为目录变动导致引入文件找不到的情况，常用的做法如下： 一、使用${pageContext.request.contextPath} 　　代码” ${pageContext.request.contextPath}”的作用是取出部署的应用程序名，这样不管如何部署，所用路径都是正确的。
  • Java定时任务调度：用ExecutorService取代Timer bylijinnan java
    《Java并发编程实战》一书提到的用ExecutorService取代Java Timer有几个理由，我认为其中最重要的理由是： 如果TimerTask抛出未检查的异常，Timer将会产生无法预料的行为。Timer线程并不捕获异常，所以 TimerTask抛出的未检查的异常会终止timer线程。这种情况下，Timer也不会再重新恢复线程的执行了;它错误的认为整个Timer都被取消了。此时，已经被
  • SQL 优化原则 chicony sql
    一、问题的提出 　在应用系统开发初期，由于开发数据库数据比较少，对于查询SQL语句，复杂视图的的编写等体会不出SQL语句各种写法的性能优劣，但是如果将应用系统提交实际应用后，随着数据库中数据的增加，系统的响应速度就成为目前系统需要解决的最主要的问题之一。系统优化中一个很重要的方面就是SQL语句的优化。对于海量数据，劣质SQL语句和优质SQL语句之间的速度差别可以达到上百倍，可见对于一个系统
  • java 线程弹球小游戏 CrazyMizzz java游戏
    最近java学到线程，于是做了一个线程弹球的小游戏，不过还没完善 这里是提纲 1.线程弹球游戏实现 1.实现界面需要使用哪些API类 JFrame JPanel JButton FlowLayout Graphics2D Thread Color ActionListener ActionEvent MouseListener Mouse
  • hadoop jps出现process information unavailable提示解决办法 daizj hadoopjps
    hadoop jps出现process information unavailable提示解决办法   jps时出现如下信息： 3019 -- process information unavailable3053 -- process information unavailable2985 -- process information unavailable2917 --
  • PHP图片水印缩放类实现 dcj3sjt126com PHP
    <?php class Image{ private $path; function __construct($path='./'){ $this->path=rtrim($path,'/').'/'; } //水印函数，参数：背景图，水印图，位置，前缀,TMD透明度 public function water($b,$l,$pos
  • IOS控件学习：UILabel常用属性与用法 dcj3sjt126com iosUILabel
    参考网站： http://shijue.me/show_text/521c396a8ddf876566000007 http://www.tuicool.com/articles/zquENb http://blog.csdn.net/a451493485/article/details/9454695 http://wiki.eoe.cn/page/iOS_pptl_artile_281
  • 完全手动建立maven骨架 eksliang javaeclipseWeb
    建一个 JAVA 项目 ： mvn archetype:create -DgroupId=com.demo -DartifactId=App [-Dversion=0.0.1-SNAPSHOT] [-Dpackaging=jar] 建一个 web 项目 ： mvn archetype:create -DgroupId=com.demo -DartifactId=web-a
  • 配置清单 gengzg 配置
    1、修改grub启动的内核版本 vi /boot/grub/grub.conf 将default 0改为1 拷贝mt7601Usta.ko到/lib文件夹 拷贝RT2870STA.dat到 /etc/Wireless/RT2870STA/文件夹 拷贝wifiscan到bin文件夹，chmod 775 /bin/wifiscan 拷贝wifiget.sh到bin文件夹，chm
  • Windows端口被占用处理方法 huqiji windows
    以下文章主要以80端口号为例，如果想知道其他的端口号也可以使用该方法..........................1、在windows下如何查看80端口占用情况?是被哪个进程占用?如何终止等.        这里主要是用到windows下的DOS工具,点击"开始"--"运行",输入&
  • 开源ckplayer 网页播放器， 跨平台(html5, mobile)，flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 ！ 天梯梦 mobile
    CKplayer，其全称为超酷flv播放器，它是一款用于网页上播放视频的软件，支持的格式有：http协议上的flv,f4v,mp4格式，同时支持rtmp视频流格 式播放，此播放器的特点在于用户可以自己定义播放器的风格，诸如播放/暂停按钮，静音按钮，全屏按钮都是以外部图片接口形式调用，用户根据自己的需要制作 出播放器风格所需要使用的各个按钮图片然后替换掉原始风格里相应的图片就可以制作出自己的风格了，
  • 简单工厂设计模式 hm4123660 java工厂设计模式简单工厂模式
           简单工厂模式（Simple Factory Pattern）属于类的创新型模式，又叫静态工厂方法模式。是通过专门定义一个类来负责创建其他类的实例，被创建的实例通常都具有共同的父类。简单工厂模式是由一个工厂对象决定创建出哪一种产品类的实例。简单工厂模式是工厂模式家族中最简单实用的模式，可以理解为是不同工厂模式的一个特殊实现。
  • maven笔记 zhb8015 maven
    跳过测试阶段： mvn package -DskipTests 临时性跳过测试代码的编译： mvn package -Dmaven.test.skip=true   maven.test.skip同时控制maven-compiler-plugin和maven-surefire-plugin两个插件的行为，即跳过编译，又跳过测试。   指定测试类 mvn test
  • 非mapreduce生成Hfile，然后导入hbase当中 Stark_Summer maphbasereduceHfilepath实例
    最近一个群友的boss让研究hbase，让hbase的入库速度达到5w+/s，这可愁死了，4台个人电脑组成的集群，多线程入库调了好久，速度也才1w左右，都没有达到理想的那种速度，然后就想到了这种方式，但是网上多是用mapreduce来实现入库，而现在的需求是实时入库，不生成文件了，所以就只能自己用代码实现了，但是网上查了很多资料都没有查到，最后在一个网友的指引下，看了源码，最后找到了生成Hfile
  • jsp web tomcat 编码问题 王新春 tomcatjsppageEncode
    今天配置jsp项目在tomcat上，windows上正常，而linux上显示乱码，最后定位原因为tomcat 的server.xml 文件的配置，添加 URIEncoding 属性： <Connector port="8080" protocol="HTTP/1.1" connectionTi
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他