weixin_43795761
weixin_43795761

前端进阶Html+css09----BFC模型

1.什么是BFC模型
全称是：Block formatting context（块级格式化上下文），是一个独立的布局环境，不受外界的影响。

2.FC,BFC,IFC
元素在标准流里都属于一个FC（Formatting Context）。
块级元素的布局属于一个BFC（Block formatting context）。例如div/p/h1等 -> BFC布局中盒子
行内级元素的布局属于一个IFC（Inline Formatting Context）。例如img/a/span/i -> IFC布局中

2.哪些情况会创建BFC
根元素(html)
浮动元素(元素的float值不是none)
绝对定位元素(元素的position为absolute或者fixed)
行内块元素(元素的display为inline-block)
表格单元格(元素的display为table-cell，HTML表格单元格默认为该值，表格标题(元素的display为table-caption，HTML表格标题默认为该值)row，tbody，thead，tfoot的默认属性)或inline-table)
overflow计算值(Computed)不为visible的块元素
弹性元素(display为flex或inline-flex元素的直接子元素)
网格元素(display为grid或inline-grid元素的直接子元素)
display值为flow-root的元素

3.BFC的特性
1)在一个BFC中，盒子会从包含块的顶部开始，在垂直方向上会一个挨着一个摆放，可能很多人都对这一点习以为常，但这点是BFC帮助我们实现的。当我们对某个盒子设置一个margin-top的时候，BFC会帮助我们解析，然后会在盒子布局时候给一个上边距
2)在一个BFC中，每个元素的左边缘都会紧贴着包含块的左边缘
3)在同一个BFC中，在垂直方向上，相邻两个盒子的margin会重叠，值取两者中较大的

4.BFC 的作用
创建 BFC 的元素，它的自动高度需要计算浮动元素
创建 BFC 的元素，它的边框盒不会与浮动元素重叠
创建 BFC 的元素，不会和它的子元素进行外边距合并

5.利用BFC特性解决margin重叠问题

 <style>
  .box1{
    width: 100px;
    height: 100px;
    background-color: red;
    margin-bottom: 20px;
  }
  .box2{
    width: 100px;
    height: 100px;
    background-color: burlywood;
    margin-top: 30px;
  }
</style>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>

讲解：这个时候box1和box2都在html这个BFC里面，所以会发生重叠，上下margin取较大的30px;
前端进阶Html+css09----BFC模型_第1张图片
我们应该给box1外面套一层，然后给外层的盒子设置BFC。这时外层盒子和box2处于同一BFC,但box1和box2处于两个不同的BFC。所以不会再发生重叠。

<style>
  .box1{
    width: 100px;
    height: 100px;
    background-color: red;
    margin-bottom: 20px;
  }
  .box2{
    width: 100px;
    height: 100px;
    background-color: burlywood;
    margin-top: 30px;
  }
  .container{
    overflow: hidden;
  }
</style>
<body>
  <div class="container">
    <div class="box1"></div>
  </div>
  <div class="box2"></div>
</body>

前端进阶Html+css09----BFC模型_第2张图片
6.利用BFC特性解决高度塌陷问题
1）如果一个元素的父元素没有设置高，那么父元素的高将由子元素撑开。如下所示：

<style>
  .parent{
    border: 1px solid black;
    background-color: aqua;
  }
  .child{
    height: 50px;
    width: 300px;
    background-color: red;
  }
</style>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>

前端进阶Html+css09----BFC模型_第3张图片
2）如果我们给子元素设置浮动。父元素会出现高度塌陷。

<style>
  .parent{
    border: 1px solid black;
    background-color: aqua;
  }
  .child{
    float: left;
    height: 50px;
    width: 300px;
    background-color: red;
  }
</style>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>

前端进阶Html+css09----BFC模型_第4张图片

这是因为父元素高度计算时，不会加上设置了浮动属性的子元素。

3）解决方案：创建BFC盒子
方案一：给父元素加上overflow:不为visible的属性。这是父元素为BFC,如下所示：
前端进阶Html+css09----BFC模型_第5张图片
方案二：父元素，display属性为inline-block、table-cell、table-caption、flex、inline-flex。
方案三：父元素，position属性为absolute或fixed的时候。
方案四：父元素，float不为none。

你可能感兴趣的:(前端,html,css)

  • 某易云音乐获取 我愿与你相伴 python爬取教程python
    importosimportrequestsfromlxmlimportetreeheaders={'User-Agent':'Mozilla/5.0(WindowsNT10.0;Win64;x64)AppleWebKit/537.36(KHTML,likeGecko)Chrome/121.0.0.0Safari/537.36','Cookie':'_iuqxldmzr_=32;WEVNSM=1.
  • Python爬虫实战：高效解析OpenGraph协议数据 Python爬虫项目 python爬虫开发语言宽度优先音视频json
    OpenGraph协议简介OpenGraph协议是由Facebook于2010年推出的一种网页元数据标准，旨在使任何网页都能成为社交图中的丰富对象。通过在网页的部分添加特定的标签，网站所有者可以控制内容在社交媒体上分享时的呈现方式。OpenGraph协议的核心元数据包括：html这些标签不仅被Facebook使用，也被Twitter、LinkedIn、WhatsApp等主流社交平台广泛支持。据统计
  • B/S架构系统角色与对应协议详解 步行cgn JavaWeb架构
    B/S架构系统角色与对应协议详解一、核心角色及协议映射系统角色主要职责关键协议协议作用说明浏览器用户交互界面HTTP/HTTPS应用层通信基础(Browser)发送请求/渲染响应WebSocket全双工实时通信执行前端逻辑WebRTC点对点音视频传输DNS域名解析--------------------------------------------------------------------
  • v-text 和 v-html 都是用于数据绑定的指令，但它们在处理内容和安全性上有显著区别。
    在Vue.js中，v-text和v-html都是用于数据绑定的指令，但它们在处理内容和安全性上有显著区别。以下是详细说明和注意事项：1.v-text指令作用：将数据以纯文本形式插入到元素中（相当于设置元素的textContent属性）。语法：等价于：{{message}}特点：自动转义HTML标签（例如会变成文本<script>）防止XSS攻击（跨站脚本攻击）覆盖元素内原有的所有内容示
  • 鸿蒙与web混合开发双向通信 屿筱 鸿蒙HarmonyOS5
    鸿蒙与web混合开发双向通信用runJavaScript和registerJavaScriptProxywebentry/src/main/resources/rawfile/1.html混合开发打开相册//直接写js代码functionchangeImg(){//1.获取img这个元素constimg=document.querySelector('img')//2.修改元素的属性img.src
  • layui+express CMS管理系统 May# layuiexpresshtml
    该项目主要技术：html，css，js，echart，express，mysql，jquery，layui，swiper展示类网站，属于服务端渲染项目。该网站包含管理端，实现基本增删改查功能。用户端可查看页面，属于展示类网站。管理端页面如下：<
  • springboot+vue生态系统的气象数据可视化平台Java+python-计算机毕业设计
    目录功能和技术介绍具体实现截图开发核心技术：开发环境开发步骤编译运行核心代码部分展示系统设计详细视频演示可行性论证软件测试源码获取功能和技术介绍该系统基于浏览器的方式进行访问，采用springboot集成快速开发框架，前端使用vue方式，基于es5的语法，开发工具IntelliJIDEAx64，因为该开发工具，内嵌了Tomcat服务运行机制，可不用单独下载Tomcatserver服务器。由于考虑到
  • 2019-05-16 海牙kyogre
    前端优化动画性能之requestAnimationFrame@(技术分享)在前端做动画很多人第一人的反应是用定时器，比如setInterval、setTimeout，除此之外css3可以使用transition和animation来实现。而编写动画循环的关键是要知道延迟时间多长合适。一方面，循环间隔必须足够短，这样才能让不同的动画效果显得平滑流畅；另一方面，循环间隔还要足够长，这样才能确保浏览器有
  • 如何使用爬虫简单的爬取一个网页的静态前端代码
    什么是爬虫？Python爬虫是一种使用Python语言编写的程序，用于自动访问网页并提取所需信息。它通常用于网络数据抓取、数据挖掘和信息收集。Python爬虫可以模拟浏览器行为，向服务器发送请求并接收响应数据，然后解析这些数据以获取有用的信息。爬虫的基本原理（流程）发送请求：爬虫向目标网站的服务器发送HTTP请求（通常是GET请求）。获取响应：服务器返回网页的HTML内容。解析内容：爬虫解析HTM
  • [Python] -项目实战8- 构建一个简单的 Todo List Web 应用（Flask） 踏雪无痕老爷子 Pythonpython开发语言
    一、为什么选Flask？轻量上手快：仅需几行代码就能跑一个可用的Web应用。灵活扩展：可接入数据库、身份认证、前端框架等。教育性强：涵盖前后端交互基础，适合入门全栈开发。二、项目结构建议flask_todo/├──app.py├──templates/│└──index.html├──static/│└──style.css├──todo.db└──requirements.txtapp.py：后
  • B/S 架构通信原理详解 步行cgn JavaWeb架构
    B/S架构通信原理详解一、核心架构Browser/Server（浏览器/服务器）模型：前端：浏览器作为统一客户端（Chrome/Firefox/Edge等）后端：服务器处理业务逻辑+数据存储（Nginx/Apache/Tomcat等）通信协议：基于HTTP/HTTPS的请求-响应模型二、完整通信流程sequenceDiagramparticipant用户participant浏览器particip
  • 2014年最具人气国外WORDPRESS主题 weixin_34355715 php前端uxViewUI
    在国外，WrodPress这个博客系统极为受欢迎，使用WordPress来建站可以降低很多成本，另外还能以十分便宜的价格获得一个漂亮的WP网站模板。今天向大家分享来自Themeforest2014年最具人气的高级WrodPress主题，这些主题无论是设计还是技术上，都是目前最新最流行的。比如CSS3、扁平化、响应式设计、全屏视频背景、视差滚动特效等等。本次分享的WP主题实用性非常不错，流行的设计+
  • 推客系统小程序开发实战：2025年技术架构与实现细节 wx_qutudy java推客小程序开发推客系统
    引言在电商生态竞争日益激烈的2025年，推客系统作为私域流量运营的核心工具，其技术实现效率与合规性已成为企业增长的关键指标。本文基于实际开发经验，深度解析推客系统小程序的技术选型、架构设计与核心功能实现，旨在为开发者提供可复用的技术方案。一、技术选型：多端统一开发框架的深度实践1.1前端框架选型对比在2025年主流框架对比中，Taro3.6.31展现出显著优势：跨平台能力：支持微信/支付宝/百度小
  • CSS 样式设计：背景、字体与边框渐变详解 前端呆猿 css前端
    一、CSS背景渐变CSS背景渐变是现代网页设计中常用的技术，可以创建平滑的颜色过渡效果，替代传统的静态背景图像。1.线性渐变(LinearGradient).element{background:linear-gradient(toright,#ff7e5f,#feb47b);}方向参数：toright、toleft、tobottom、totop，或角度如45deg可以添加多个颜色节点：linea
  • IM即时通讯源码/im源码基于uniapp框架从0开始设计搭建在线聊天系统 宠友信息 uni-appmysqlspringbootjava小程序
    文章目录前言一、确定技术栈二、数据库设计：1.引入库2.使用SpringBoot创建后端项目3.实现WebSocket通信：3.1创建WebSocket配置类：3.2创建ChatWebSocketHandler类：3.3前端WebSocket连接与通信：总结前言随着人社交产品的不断发展，即时通讯聊天这门技术也越来越重要，很多人都开启了学习通讯技术，本文就介绍了即时通讯的基础内容。一、确定技术栈在开
  • 用项目说话：我的React博客构建成果与经验复盘 Pan Zonghui 移动端react项目总结react.js前端前端框架
    这是一个基于React19+TypeScript+Vite构建的现代化博客系统，采用了最新的前端技术栈和工程化实践。项目不仅实现了完整的博客功能，更在架构设计、性能优化、开发体验等方面体现了企业级应用的标准。成品展示个人博客链接地址：https://pzhdv.cnpc端页面展示首页分类页面关于我文章详情页面移动端技术栈选择与分层设计技术栈选择核心框架与工具React19.1.0:最新版本的Rea
  • CSS定位属性全解析 代码的余温 css前端
    CSS的position属性用于定义元素在文档中的定位方式，其属性值及作用如下：1.static（默认值）作用：元素遵循正常文档流，忽略top、right、bottom、left和z-index属性。特点：✓元素按源码顺序自然排列。✓无法通过方向属性调整位置。.element{position:static;}2.relative（相对定位）作用：元素相对于自身原位置进行偏移，原空间保留。特点：✓
  • 从零开发推客小程序系统：完整技术方案与实战经验 wx_ywyy6798 小程序推客小程序开发推客系统开发微信小程序推客小程序推客系统推客分销系统开发
    一、推客小程序的市场价值社交电商爆发式增长背景推客模式的优势：低成本获客、用户裂变小程序作为推客系统载体的天然优势二、技术架构设计text1.前端技术栈：-微信小程序原生开发/uni-app跨平台方案-自定义分享组件开发-可视化数据看板实现2.后端技术选型：-Node.js/PHP/JavaSpringBoot等后端框架对比-高性能分销关系链存储方案-佣金结算系统的设计要点3.数据库设计：-用户层
  • R语言 绘制散点图 Ora_ge R语音
    ［转自：http://blog.sina.com.cn/s/blog_69ffa1f90101siek.html］函数。简单地说，把一些R语句（赋值、计算或其他操作步骤）包装起来并给它一个名称，这就是函数。我们前面接触过的getClass(),class(),head(),rep(),cbind(),rbind()等都是函数。显示（打印）对象也有函数print()，但R有更简单的方法：输入对象名（
  • 数字图像处理（三：图像如果当作矩阵，那加减乘除处理了矩阵，那图像咋变）：从LED冬奥会、奥运会及春晚等等大屏，到手机小屏，快来挖一挖里面都有什么
    数字图像处理（三）一、（准备工作：咋玩，用什么玩具）图像以矩阵形式存储，那矩阵一变、图像立刻跟着变？1.Python+JupyterNotebook/Lab+库(NumPy,OpenCV,Matplotlib,scikit-image)2.MATLAB+ImageProcessingToolbox3.JavaScript+HTML5Canvas+浏览器4.专业的图像处理软件(带脚本/插件功能)二、
  • XSS介绍及利用 0x00dream 常见漏洞webjavascript
    XSS——跨站脚本攻击XSS介绍及利用**XSS的三种类型****构造xss脚本****自动化XSS——BeEF**XSS介绍及利用1、XSS介绍XSS（crosssitescripting）跨站脚本攻击，恶意攻击者往web页面里插入恶意script代码，当用户浏览该页面时，代码就会被执行2、XSS原理在HTML中常用到字符实体，对常用到的字符实体没有进行转译，导致完整的标签出现，在可输入的文本框
  • springboot-mybatis-MySQL-集成 张_皮皮 springbootmybatismavenspringbootmybatisidea
    这也是我第一次搭建springboot-mybatis的项目环境，记录一下。我是用IntelliJIDEA，你可以创建maven项目，也可以直接创建spring项目，最终的项目结构如下，这里说明下，resources下面的mappers里面是存放mybatis的SQL映射文件，static下面存放前端静态资源文件，如js,css等，template下存放前端模板文件，本项目使用的freemarke
  • GitLab系列2 GitLab Workhorse weixin_34326558 git运维前端ViewUI
    GitLabWorkhorse上一回介绍了GitLab的基础功能和架构，但还没具体讲解用户的请求是怎么被处理的，只是将各个组件的功能职责介绍了一遍，本节将简单介绍gitlab-workhorse的功能首先回顾一下：GitLab利用Nginx将前端的http/https请求代理至gitlab-workhorse，gitlab-workhorse再将请求转发至UnicornWeb服务器。默认情况下gi
  • 题解 | #使用join查询找出没有分类的电影id以及名称# 愤怒的小青春 java
    58同城java后端一面凉经主流的哈希算法有哪几种？帮闺蜜们找靠谱男票hc多多光彩积云是什么企业，查不到有用信息太抽象了！培训班装公司招聘阿里巴巴前端暑期实习——无语八面挂怎么写自我介绍|自我介绍保姆级教学灵犀互娱客户端一面面经(求过啊)24找运维实习，这简历可行吗拓竹科技测试开发面经（25届暑期实习）分享一波攒了整个秋招的NLP算法岗面经腾讯广告暑期实习面试1、JVM垃圾回收机制2、syncho
  • 深入理解浏览器解析机制和XSS向量编码 lq_ioi_pl xss前端编码
    URL编码"javascript:alert(1)"---->%6a%61%76%61%73%63%72%69%70%74:%61%6c%65%72%74%28%31%29aaa-------浏览器解析不了。页面识别在url解码之前，在识别标签和属性的时候还没解码，页面就不认识这串编码，不会把它们当作JS代码执行页面识别的时候，已经进行HTML实体解码，变成了aaaaa浏览器会识别它为可执行JS代
  • XSS Game Earnestfu xss前端
    hugoserver--bind0.0.0.0--baseURLhttp://192.168.239.128:1313/MaSpaghet!spaghet.innerHTML=(newURL(location).searchParams.get('somebody')||"Somebody")+"TouchaMaSpaghet!"没有什么过滤，直接输入就行payload：http://192.16
  • 【hc多多】华为25届实习生招聘 （东莞、北京、成都、西安） 2301_78234743 java
    被面试官羞辱。。。快手—Java日常实习组内急招智谱华章前端一面凉经pdd你真是饿了......2024年4月最新腾讯后端校招实习面经概答：面面俱到的考察千亿元宇宙市场，Soul、映客的新动力学3个月后端了嵌入式简历制作简历优化荣耀错过面试是不是没约面机会了？微众银行25届暑期实习招聘正式启动！荣耀错过面试是不是没约面机会了？成都经纬恒润CE视景仿真部成都经纬恒润CE视景仿真部软件实习生是做什么的
  • XSS的介绍 lq_ioi_pl xss前端
    目录XSS的原理反射型XSSDOM型XSS存储型XSS常见的XSSPayloadXSS的原理XSS全称跨站脚本(CrossSiteScripting)，为避免与层叠样式表(CascadingStyleSheets,CSS)的缩写混淆，故缩写为XSS。这是一种将任意Javascript代码插入到其他Web用户页面中执行以达到攻击目的的漏洞。攻击者利用浏览器的动态展示数据功能，在HTML页面里嵌入恶意
  • Netty集群方案详解与实战(Zookeeper + Redis + RabbitMQ) 懂得节能嘛. 网络编程zookeeperredisrabbitmq
    一、背景二、Netty单体架构的优缺点优点缺点三、Netty集群架构的优缺点优点缺点四、适用场景对比五、Netty单体架构代码实现六、Netty集群架构方案实现方案一、Nginx负载均衡实现集群(较为简单)Nginx配置前端连接方式方案二、Nacos+Gateway（结合SpringCloud生态）Netty服务gateway网关服务前端连接方式方案三、Zookeeper+Redis+Rabbit
  • 001双双-文案课第七次作业 双双执行力财富流教练
    作业要求：竞品分析做一个手机的竞品分析至于选择哪两款产品出于什么目的进行分析，需要按照韩老白老师今天讲的四个步骤来对比机型：iPhoneXvs坚果R1iPhoneXvs坚果R1参考资料：iPhoneX参数：http://product.pconline.com.cn/mobile/apple/1048848_detail.html坚果R1参数：http://product.pconline.com
  • 统一思想认识 永夜-极光 思想
    1.统一思想认识的基础,才能有的放矢  原因:    总有一种描述事物的方式最贴近本质,最容易让人理解.    如何让教育更轻松,在于找到最适合学生的方式.          难点在于,如何模拟对方的思维基础选择合适的方式.   &
  • Joda Time使用笔记 bylijinnan javajoda time
    Joda Time的介绍可以参考这篇文章： http://www.ibm.com/developerworks/cn/java/j-jodatime.html 工作中也常常用到Joda Time，为了避免每次使用都查API，记录一下常用的用法：     /** * DateTime变化（增减） */ @Tes
  • FileUtils API eksliang FileUtilsFileUtils API
    转载请出自出处：http://eksliang.iteye.com/blog/2217374 一、概述 这是一个Java操作文件的常用库，是Apache对java的IO包的封装，这里面有两个非常核心的类FilenameUtils跟FileUtils，其中FilenameUtils是对文件名操作的封装;FileUtils是文件封装，开发中对文件的操作，几乎都可以在这个框架里面找到。 非常的好用。
  • 各种新兴技术 不懂事的小屁孩 技术
    1:gradle Gradle 是以 Groovy 语言为基础，面向Java应用为主。基于DSL（领域特定语言）语法的自动化构建工具。 现在构建系统常用到maven工具，现在有更容易上手的gradle， 搭建java环境: http://www.ibm.com/developerworks/cn/opensource/os-cn-gradle/ 搭建android环境： http://m
  • tomcat6的https双向认证 酷的飞上天空 tomcat6
    1.生成服务器端证书 keytool -genkey -keyalg RSA -dname "cn=localhost,ou=sango,o=none,l=china,st=beijing,c=cn" -alias server -keypass password -keystore server.jks -storepass password -validity 36
  • 托管虚拟桌面市场势不可挡 蓝儿唯美
    用户还需要冗余的数据中心，dinCloud的高级副总裁兼首席营销官Ali Din指出。该公司转售一个MSP可以让用户登录并管理和提供服务的用于DaaS的云自动化控制台，提供服务或者MSP也可以自己来控制。 在某些情况下，MSP会在dinCloud的云服务上进行服务分层，如监控和补丁管理。 MSP的利润空间将根据其参与的程度而有所不同，Din说。 “我们有一些合作伙伴负责将我们推荐给客户作为个
  • spring学习——xml文件的配置 a-john spring
    在Spring的学习中，对于其xml文件的配置是必不可少的。在Spring的多种装配Bean的方式中，采用XML配置也是最常见的。以下是一个简单的XML配置文件： <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.or
  • HDU 4342 History repeat itself 模拟 aijuans 模拟
    来源：http://acm.hdu.edu.cn/showproblem.php?pid=4342 题意：首先让求第几个非平方数，然后求从1到该数之间的每个sqrt(i)的下取整的和。 思路：一个简单的模拟题目，但是由于数据范围大，需要用__int64。我们可以首先把平方数筛选出来，假如让求第n个非平方数的话，看n前面有多少个平方数，假设有x个，则第n个非平方数就是n+x。注意两种特殊情况，即
  • java中最常用jar包的用途 asia007 java
    java中最常用jar包的用途 jar包用途axis.jarSOAP引擎包commons-discovery-0.2.jar用来发现、查找和实现可插入式接口，提供一些一般类实例化、单件的生命周期管理的常用方法.jaxrpc.jarAxis运行所需要的组件包saaj.jar创建到端点的点到点连接的方法、创建并处理SOAP消息和附件的方法，以及接收和处理SOAP错误的方法.  w
  • ajax获取Struts框架中的json编码异常和Struts中的主控制器异常的解决办法 百合不是茶 jsjson编码返回异常
    一:ajax获取自定义Struts框架中的json编码  出现以下 问题:       1,强制flush输出  json编码打印在首页 2, 不强制flush js会解析json 打印出来的是错误的jsp页面   却没有跳转到错误页面 3,  ajax中的dataType的json 改为text 会
  • JUnit使用的设计模式 bijian1013 java设计模式JUnit
    JUnit源代码涉及使用了大量设计模式 1、模板方法模式（Template Method）         定义一个操作中的算法骨架，而将一些步骤延伸到子类中去，使得子类可以不改变一个算法的结构，即可重新定义该算法的某些特定步骤。这里需要复用的是算法的结构，也就是步骤，而步骤的实现可以在子类中完成。   
  • Linux常用命令（摘录） sunjing crondchkconfig
    chkconfig --list   查看linux所有服务 chkconfig --add servicename 添加linux服务 netstat -apn | grep 8080  查看端口占用 env 查看所有环境变量 echo $JAVA_HOME 查看JAVA_HOME环境变量   安装编译器 yum install -y gcc
  • 【Hadoop一】Hadoop伪集群环境搭建 bit1129 hadoop
     结合网上多份文档，不断反复的修正hadoop启动和运行过程中出现的问题，终于把Hadoop2.5.2伪分布式安装起来，跑通了wordcount例子。Hadoop的安装复杂性的体现之一是，Hadoop的安装文档非常多，但是能一个文档走下来的少之又少，尤其是Hadoop不同版本的配置差异非常的大。Hadoop2.5.2于前两天发布，但是它的配置跟2.5.0，2.5.1没有分别。 &nb
  • Anychart图表系列五之事件监听 白糖_ chart
    创建图表事件监听非常简单：首先是通过addEventListener('监听类型',js监听方法)添加事件监听，然后在js监听方法中定义具体监听逻辑。 以钻取操作为例，当用户点击图表某一个point的时候弹出point的name和value，代码如下： <script> //创建AnyChart var chart = new AnyChart(); //添加钻取操作&quo
  • Web前端相关段子 braveCS web前端
    Web标准：结构、样式和行为分离   使用语义化标签 0）标签的语义：使用有良好语义的标签，能够很好地实现自我解释，方便搜索引擎理解网页结构，抓取重要内容。去样式后也会根据浏览器的默认样式很好的组织网页内容，具有很好的可读性，从而实现对特殊终端的兼容。 1）div和span是没有语义的：只是分别用作块级元素和行内元素的区域分隔符。当页面内标签无法满足设计需求时，才会适当添加div
  • 编程之美-24点游戏 bylijinnan 编程之美
    import java.util.ArrayList; import java.util.Arrays; import java.util.HashSet; import java.util.List; import java.util.Random; import java.util.Set; public class PointGame { /**编程之美
  • 主页面子页面传值总结 chengxuyuancsdn 总结
    1、showModalDialog returnValue是javascript中html的window对象的属性,目的是返回窗口值,当用window.showModalDialog函数打开一个IE的模式窗口时,用于返回窗口的值 主界面 var sonValue=window.showModalDialog("son.jsp"); 子界面 window.retu
  • [网络与经济]互联网+的含义 comsci 互联网+
          互联网+后面是一个人的名字 = 网络控制系统       互联网+你的名字 =  网络个人数据库       每日提示:如果人觉得不舒服,千万不要外出到处走动,就呆在床上,玩玩手游,更不能够去开车,现在交通状况不
  • oracle 创建视图 with check option daizj 视图vieworalce
    我们来看下面的例子： create or replace view testview as select empno,ename from emp where ename like ‘M%’ with check option; 这里我们创建了一个视图，并使用了with check option来限制了视图。 然后我们来看一下视图包含的结果： select * from testv
  • ToastPlugin插件在cordova3.3下使用 dibov Cordova
        自己开发的Todos应用，想实现“ 再按一次返回键退出程序 ”的功能，采用网上的ToastPlugins插件，发现代码或文章基本都是老版本，运行问题比较多。折腾了好久才弄好。下面吧基于cordova3.3下的ToastPlugins相关代码共享。       ToastPlugin.java package&nbs
  • C语言22个系统函数 dcj3sjt126com cfunction
    C语言系统函数一、数学函数下列函数存放在math.h头文件中Double floor(double num) 求出不大于num的最大数。Double fmod(x, y) 求整数x/y的余数。Double frexp(num, exp); double num; int *exp; 将num分为数字部分（尾数）x和 以2位的指数部分n，即num=x*2n，指数n存放在exp指向的变量中，返回x。D
  • 开发一个类的流程 dcj3sjt126com 开发
    本人近日根据自己的开发经验总结了一个类的开发流程。这个流程适用于单独开发的构件，并不适用于对一个项目中的系统对象开发。开发出的类可以存入私人类库，供以后复用。   以下是开发流程： 1. 明确类的功能，抽象出类的大概结构 2. 初步设想类的接口 3. 类名设计（驼峰式命名） 4. 属性设置(权限设置) 判断某些变量是否有必要作为成员属
  • java 并发 shuizhaosi888 java 并发
    能够写出高伸缩性的并发是一门艺术   在JAVA SE5中新增了3个包 java.util.concurrent java.util.concurrent.atomic java.util.concurrent.locks 在java的内存模型中，类的实例字段、静态字段和构成数组的对象元素都会被多个线程所共享，局部变量与方法参数都是线程私有的，不会被共享。
  • Spring Security（11）——匿名认证 234390216 Spring SecurityROLE_ANNOYMOUS匿名
    匿名认证 目录 1.1     配置 1.2     AuthenticationTrustResolver          对于匿名访问的用户，Spring Security支持为其建立一个匿名的AnonymousAuthenticat
  • NODEJS项目实践0.2[ express,ajax通信...] 逐行分析JS源代码 Ajaxnodejsexpress
      一、前言         通过上节学习，我们已经        ubuntu系统搭建了一个可以访问的nodejs系统，并做了nginx转发。本节原要做web端服务 及 mongodb的存取，但写着写着，web端就
  • 在Struts2 的Action中怎样获取表单提交上来的多个checkbox的值 lhbthanks javahtmlstrutscheckbox
    第一种方法：获取结果String类型 在 Action 中获得的是一个 String 型数据，每一个被选中的 checkbox 的 value 被拼接在一起，每个值之间以逗号隔开(,)。 所以在 Action 中定义一个跟 checkbox 的 name 同名的属性来接收这些被选中的 checkbox 的 value 即可。 以下是实现的代码： 前台 HTML 代码：
  • 003.Kafka基本概念 nweiren hadoopkafka
    Kafka基本概念：Topic、Partition、Message、Producer、Broker、Consumer。 Topic：             消息源（Message）的分类。 Partition：             Topic物理上的分组，一
  • Linux环境下安装JDK roadrunners jdklinux
    1、准备工作 创建JDK的安装目录： mkdir -p /usr/java/   下载JDK，找到适合自己系统的JDK版本进行下载： http://www.oracle.com/technetwork/java/javase/downloads/index.html   把JDK安装包下载到/usr/java/目录，然后进行解压： tar -zxvf jre-7
  • Linux忘记root密码的解决思路 tomcat_oracle linux
    1：使用同版本的linux启动系统，chroot到忘记密码的根分区passwd改密码 　　2：grub启动菜单中加入init=/bin/bash进入系统，不过这时挂载的是只读分区。根据系统的分区情况进一步判断. 　　3: grub启动菜单中加入 single以单用户进入系统. 　　4:用以上方法mount到根分区把/etc/passwd中的root密码去除 　　例如: 　　ro
  • 跨浏览器 HTML5 postMessage 方法以及 message 事件模拟实现 xueyou jsonpjquery框架UIhtml5
    postMessage 是 HTML5 新方法，它可以实现跨域窗口之间通讯。到目前为止，只有 IE8+, Firefox 3, Opera 9, Chrome 3和 Safari 4 支持，而本篇文章主要讲述 postMessage 方法与 message 事件跨浏览器实现。postMessage 方法 JSONP 技术不一样，前者是前端擅长跨域文档数据即时通讯，后者擅长针对跨域服务端数据通讯，p
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他