kim_jin
kim_jin

CSS布局总结--BFC

小知识点（暖场）：
overflow属性：规定当内容溢出元素框时发生的事情。

  • visible:默认值，内容不会被裁减，但是会显示在元素框外
  • hidden：内容会被裁减，其他的内容是不可见的
  • scroll：内容会被裁减，但是浏览器可以显示滚动条来显示余下的内容
  • auto：如果内容被裁减，浏览器会显示滚动条来方便查看余下的内容
  • inherit：规定应该从父元素继承overflow属性的值

display属性：规定元素应该生成框的类型

  • none：此元素不会被显示
  • block：此元素显示为块级元素，元素后面默认有换行符
  • inline：默认。此元素会被显示为行内元素，元素后默认
  • list-item：此元素作为列表显示
  • run-in：此元素会根据上下文作为块级元素或是行内元素显示
  • compact：css值中有compact，不过由于缺乏广泛支持，已删除
  • marker：css值中有marker，不过由于缺乏广泛支持，已删除
  • table：此元素会作为块级表格来显示，表格的前后会带有换行符，类似
    -inline-table：此元素会作为内联表格显示，表格前后没有换行符，类似
  • table-row-group：此元素会作为一个或是多个分组来显示,类似
  • table-header-group: 此元素会作为一个或多个行的分组来显示,类似
  • table-footer-group:此元素会作为一个或多个行的分组来显,类似
  • table-row：此元素会作为一个表格行显示，类似
  • table-column-group：此元素会作为一个或多个列的分组来显，类似
  • table-column：此元素会作为一个单元格列显示，类似
  • table-cell：此元素会作为一个表格单元格显示，类似
    •
    和
  • table-caption：此元素会作为一个表格标题显示，类似
  • inherit：规定应该从父元素继承 display 属性的值。

    • position属性：属性规定元素的定位类型

    • absolute：生成绝对定位，相对于static定位以外的第一个父元素进行定位，元素位置通过left、right、top、bottom属性进行规定
    • fixed：生成绝对定位的元素，相对浏览器的窗口进行定位，元素位置通过left、right、top、bottom属性进行规定
    • relative：生成相对定位的元素，相对于其正常位置进行定位，因此left：20会向元素的左边添加20像素
    • static：默认值，没有定位，元素出现在正常流中（忽略top等属性）
    • inherit：规定从父级继承的position的位置

    BFC简介

    BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level 盒子参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

    BFC的生成

    对于HTML文件来说，只要满足下面CSS声明中的一个就会产生BFC

    • 为根元素
    • float的值不为none
    • overflow值不为visible
    • display的值为inline-block、table-cell、table-caption
    • position的值为fixed、absolute

    创建BFC的约束

    • 生成BFC元素的子元素会一个接一个的进行放置。垂直方向上他们的奇点是一个包含块的顶部，两个相邻子元素之间的垂直距离取决于margin特性，在BFC中相邻的块级元素的外边距会重叠
    • 生成BFC元素的子元素中，每一个子元素做外边距与包含块的左边界相接触，即使是浮动元素也是如此，除非这个子元素也创建一个新的BFC

    详细描述：

    • 内部的盒子会在垂直的方向上一个接一个的放置。
    • 垂直方向上距离由margin决定（属于同一个BFC的两个相邻的box的margin会发生重叠，与方向无关）
    • 每个元素的左边框与包含块的左边界接触（布局为从左到右），浮动元素也是这样的，也就是说BFC中元素不会超出他的包含块，而position为absolute布局的元素可以超出包含块边界。
    • BFC的区域不会和float元素区域重合
    • 计算BFC高度的时候，浮动子元素也要参与到计算中
    • BFC就是页面上面的隔离的独立容器，容器中的子元素不会影响到外面的元素，同时外面的元素也不会影响容器里面的元素。

    BFC的应用

    放置margin的重叠
    在同一个BFC中，两个相邻的Box才会发生重叠与方向没有关系，我们很少可以看到在水平方向的margin的重叠，但是在IE浏览器中，可以设置write-mode来实现水平方向的布局。

    #green{
  margin:10px 10px 10px 10px;
  background:lightgreen;
  height:100px;
  width:100px;
}
#blue{
  margin:10px 10px 10px 10px;
  background:lightblue;
  height:100px;
  width:100px;
}
#red{
  margin:10px 10px 10px 10px;
  background:pink;
  height:100px;
  width:100px;
}
 body {
        writing-mode:tb-rl;
    }

    现在两个盒子之间的margin值是10px而不是我们想象中的20px。

    CSS布局总结--BFC_第1张图片
    margin在水平方向的重叠

    如果我们希望阻止margin重叠的出现，就要将2个元素分别放在一个BFC中即可，但是在在上面的情景中阻止重叠看上去没有什么意义，我们主要将其用在嵌套。

     html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
.first{
  margin:20px;
  background:lightgreen;
  width:100px;
  height:100px;
}
ul{
  margin:10px;
  background:lightblue;
}
li{
  margin:25px;
}

    

      
    
    • 1
      • 
    
    • 2
      • 
    
    • 3
      •
    CSS布局总结--BFC_第2张图片
    嵌套的margin覆盖问题

    我们发现上面的黄框区域的为25px，也就是说将ul的margin的值覆盖掉了,此时div与ul之间的垂直距离，取div、ul、li三者之间的最大外边距。。我们如果要阻止元素的重叠，就要让url生成BFC即可

     html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
.first{
  margin:20px;
  background:lightgreen;
  width:100px;
  height:100px;
}
ul{
  display: inline-block;
  margin:10px;
  background:lightblue;
}
li{
  margin:25px;
}

    html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
.first{
  margin:20px;
  background:lightgreen;
  border: 2px solid lightgreen;
}
ul{
  overflow:hidden;
  margin:10px;
  background:lightblue;
  width:100px;
  height:200px;
  float: left;
}
li{
  margin:25px;
}
    CSS布局总结--BFC_第3张图片
    BFC的margin不覆盖

    ps：如果为ul设置了border或padding，那元素的margin便会被包含在父元素的盒式模型内，不会与外部div重叠。

    浮动问题
    我们的父元素包含子元素，常见的方式是为父元素设置overflow：hidden或是浮动父级元素，根本原因在于创建BFC元素，子浮动元素也参与了高度的计算，就不会产生高度塌陷的问题，实际上只要让父级元素生成BFC就可以。也就是说浮动元素是会脱离文档流的(绝对定位元素会脱离文档流)。如果一个没有高度或者height是auto的容器的子元素是浮动元素，则该容器的高度是不会被撑开的。
    所以我们解决的代码是

    html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
.first{
  margin:20px;
  background:lightgreen;
  border: 2px solid lightgreen;
  /*这四条代码都可以解决上面的问题*/
  display:inline-block;
  overflow:hidden;
  float: left;
  position:absolute;
}
ul{
  overflow:hidden;
  margin:10px;
  background:lightblue;
  width:100px;
  height:200px;
  float: left;
}
li{
  margin:25px;
}

    多栏布局的实现
    我们在上面已经总结了一条规律：与浮动元素相邻的已生成的BFC的元素不能和浮动元素之间相互覆盖，所以我们利用这个特性作为多栏布局的一种实现方式。

    html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
.left{
  background:pink;
  float: left;
  width:180px;
}
.center{
  background:lightyellow;
  overflow:hidden;      
}
.right{
  background: lightblue;
  width:180px;
  float:right;
}

    
    
    
      
            .left{
        background:pink;
        float: left;
        width:180px;
      }
      
    
    
    
    
    
       
            .right{
        background:lightblue;
        width:180px;
        float:right;
      }
      
    
    
    
    
    
    
         .center{
      background:lightyellow;
      overflow:hidden;
      height:116px;
      }
    BFC多栏布局样式

    这种布局的特点在于左右两栏宽度固定，中间栏可以根据浏览器宽度自适应。

    你可能感兴趣的:(CSS布局总结--BFC)

    • OC语言多界面传值五大方式 Magnetic_h iosui学习objective-c开发语言
      前言在完成暑假仿写项目时，遇到了许多需要用到多界面传值的地方，这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值，简单地说就是通过访问后一个视图控制器的属性来为它赋值，通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt
    • 水平垂直居中的几种方法（总结） 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
    • 【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数 广龙宇 一起学Rust#Rust设计模式rust设计模式开发语言
      提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分
    • 关于提高复杂业务逻辑代码可读性的思考 编程经验分享 开发经验java数据库开发语言
      目录前言需求场景常规写法拆分方法领域对象总结前言实际工作中大部分时间都是在写业务逻辑，一般都是三层架构，表示层（Controller）接收客户端请求，并对入参做检验，业务逻辑层（Service）负责处理业务逻辑，一般开发都是在这一层中写具体的业务逻辑。数据访问层（Dao）是直接和数据库交互的，用于查数据给业务逻辑层，或者是将业务逻辑层处理后的数据写入数据库。简单的增删改查接口不用多说，基本上写好一
    • 拥有断舍离的心态，过精简生活--《断舍离》读书笔记 爱吃丸子的小樱桃
      不知不觉间房间里的东西越来越多，虽然摆放整齐，但也时常会觉得空间逼仄，令人心生烦闷。抱着断舍离的态度，我开始阅读《断舍离》这本书，希望从书中能找到一些有效的方法，帮助我实现空间、物品上的断舍离。《断舍离》是日本作家山下英子通过自己的经历、思考和实践总结而成的，整体内涵也从刚开始的私人生活哲学的“断舍离”升华成了“人生实践哲学”，接着又成为每个人都能实行的“改变人生的断舍离”，从“哲学”逐渐升华成“
    • 关于城市旅游的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：做与用户的交互行为文章目录前端学习路线
    • 每日算法&面试题，大厂特训二十八天——第二十天（树） 肥学 ⚡算法题⚡面试题每日精进java算法数据结构
      目录标题导读算法特训二十八天面试题点击直接资料领取导读肥友们为了更好的去帮助新同学适应算法和面试题，最近我们开始进行专项突击一步一步来。上一期我们完成了动态规划二十一天现在我们进行下一项对各类算法进行二十八天的一个小总结。还在等什么快来一起肥学进行二十八天挑战吧！！特别介绍小白练手专栏，适合刚入手的新人欢迎订阅编程小白进阶python有趣练手项目里面包括了像《机器人尬聊》《恶搞程序》这样的有趣文章
    • 阶段总结反思 轻争
      马上就要进入10月份了，今天做一下前段时间的总结和反思。前段时间，日更、英语、健身、护肤坚持的比较好。阅读、书法坚持的不好。1.中间被迫停更半个多月，其余时间一直在坚持日更挑战。偶尔也有不想写的时候，就做一下摘抄。因为阅读（输入）没跟上来，所以写作（输出）质量有待进一步加强。2.英语做到了一周至少学习5天，每次不少于30分钟，但是小班课没有跟上更新速度，下一步要争取利用零碎时间补听小班课。3.减肥
    • 【华为OD技术面试真题 - 技术面】- python八股文真题题库（4) 算法大师 华为od面试python
      华为OD面试真题精选专栏：华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选**1.Python中的`with`**用途和功能自动资源管理示例：文件操作上下文管理协议示例代码工作流程解析优点2.\_\_new\_\_和**\_\_init\_\_**区别__new____init__区别总结3.**切片（Slicing）操作**基本切片语法
    • Python爬虫解析工具之xpath使用详解 eqa11 python爬虫开发语言
      文章目录Python爬虫解析工具之xpath使用详解一、引言二、环境准备1、插件安装2、依赖库安装三、xpath语法详解1、路径表达式2、通配符3、谓语4、常用函数四、xpath在Python代码中的使用1、文档树的创建2、使用xpath表达式3、获取元素内容和属性五、总结Python爬虫解析工具之xpath使用详解一、引言在Python爬虫开发中，数据提取是一个至关重要的环节。xpath作为一门
    • 主题升华随机抽总结 木棉咕噜
      昨天晚上在火山灿教练那里抽了主题升华最后一关。一共抽了两个故事，现总结如下。第一个故事是《并不是你想象的那样》。主题一：有时候，面对别人一些貌似不合常情的行为，不要轻易的指责他，也许背后有我们所不知道的原因。在这一个主题里面，刚开始的时候，我没有加上貌似二字。所以就没有改动之后这么精准。主题二：有时候我们对他人善意的行为，可能会给我们带来一些意外的回报。主题三：面对同样一件事，因为不同的人看待问题
    • 【无标题】达瓦达瓦 JhonKI 考研
      博客主页：https://blog.csdn.net/2301_779549673欢迎点赞收藏⭐留言如有错误敬请指正！本文由JohnKi原创，首发于CSDN未来很长，值得我们全力奔赴更美好的生活✨文章目录前言111️‍111❤️111111111111111总结111前言111骗骗流量券，嘿嘿111111111111111111111111111️‍111❤️111111111111111总结11
    • 上图为是否色发 JhonKI 考研
      博客主页：https://blog.csdn.net/2301_779549673欢迎点赞收藏⭐留言如有错误敬请指正！本文由JohnKi原创，首发于CSDN未来很长，值得我们全力奔赴更美好的生活✨文章目录前言111️‍111❤️111111111111111总结111前言111骗骗流量券，嘿嘿111111111111111111111111111️‍111❤️111111111111111总结11
    • 143234234123432 JhonKI 考研
      博客主页：https://blog.csdn.net/2301_779549673欢迎点赞收藏⭐留言如有错误敬请指正！本文由JohnKi原创，首发于CSDN未来很长，值得我们全力奔赴更美好的生活✨文章目录前言111️‍111❤️111111111111111总结111前言111骗骗流量券，嘿嘿111111111111111111111111111️‍111❤️111111111111111总结11
    • 1分钟解决 -bash: mvn: command not found，在Centos 7中安装Maven Energet!c 开发语言
      1分钟解决-bash:mvn:commandnotfound，在Centos7中安装Maven检查Java环境1下载Maven2解压Maven3配置环境变量4验证安装5常见问题与注意事项6总结检查Java环境Maven依赖Java环境，请确保系统已经安装了Java并配置了环境变量。可以通过以下命令检查：java-version如果未安装，请先安装Java。1下载Maven从官网下载：前往Apach
    • CentOS的根目录下，/bin 和 /sbin 用途和权限 Energet!c Linux日常centoslinux运维
      CentOS的根目录下，/bin和/sbin用途和权限一、/bin(Binary)二、/sbin(SystemBinary)三、总结在CentOS的根目录下，/bin和/sbin目录有不同的用途和权限一、/bin(Binary)用途:存放系统的基本命令，这些命令对所有用户都是可用的。例如：ls、cp、mv、rm等。权限:普通用户和系统管理员都可以使用这些命令。二、/sbin(SystemBinar
    • linux 发展史 种树的猴子 内核java操作系统linux大数据
      linux发展史说明此前对linux认识模糊一知半解，近期通过学习将自己对于linux的发展总结一下方便大家日后的学习。那Linux是目前一款非常火热的开源操作系统，可是linux是什么时候出现的，又是因为什么样的原因被开发出来的呢。以下将对linux的发展历程进行详细的讲解。目录一、Linux发展背景二、UINIX的诞生三、UNIX的重要分支-BSD的诞生四、Minix的诞生五、GNU与Free
    • 又到年末 伊人微语
      今天，工作群里，各个部门开始提醒老师们上交各种期末总结资料，才蓦然感觉这个学期已接近尾声，才意识到2022即将过去，新的一年的脚步声已经越来越近不由得生阳一些感慨。年纪大了，感觉到每个日子都是“倏”地一声就过去了，来不及思量，来不及回顾，一年就这么过去了。我常常想，为什么会有这样的感觉呢？年轻时候的每一天是24小时，现在的每一天也不曾少过一分钟，为什么就会感觉到它的脚步越来越快呢？后来我想明白了，
    • 大都会资本BMAN的2018年终总结 非线性思考
      1投资的本质是认知变现赚钱=足够的认知*高效的的变现。2投资的三大基石策略:提升认知高效变现知行合一3如果你亏钱了要么是认知的问题，要么是变现的问题，要么而是知行合一的问题。4投资需要知行合一，很简单的道理，却拦住了很多高手，是因为认知和行动中间还隔着人性。顶级的高手能把自己从贪嗔痴中抽离出来，顶级高手没有人性，只有原则。5如果你玩的是空气币，就不要幻想拿着它改变世界，那是你套出了幻觉，眼光放短一
    • 2024.9.6 Python，华为笔试题总结，字符串格式化，字符串操作，广度优先搜索解决公司组织绩效互评问题，无向图 RaidenQ python华为leetcode算法力扣广度优先无向图
      1.字符串格式化name="Alice"age=30formatted_string="Name:{},Age:{}".format(name,age)print(formatted_string)或者name="Alice"age=30formatted_string=f"Name:{name},Age:{age}"print(formatted_string)2.网络健康检查第一行有两个整数m
    • android 更改窗口的层次,浮窗开发之窗口层级 Ms.Bu android更改窗口的层次
      最近在项目中遇到了这样的需求：需要在特定的其他应用之上悬浮自己的UI交互(拖动、输入等复杂的UI交互)，和九游的浮窗类似，不过我们的比九游的体验更好，我们越过了很多授权的限制。浮窗效果很多人都知道如何去实现一个简单的浮窗，但是却很少有人去深入的研究背后的流程机制，由于项目中浮窗交互比较复杂，遇到了些坑查看了很多资料，故总结浮窗涉及到的知识点：窗口层级关系(浮窗是如何“浮”的)？浮窗有哪些限制，如何
    • Python入门之Lesson2:Python基础语法 小熊同学哦 Python入门课程python开发语言算法数据结构青少年编程
      目录前言一.介绍1.变量和数据类型2.常见运算符3.输入输出4.条件语句5.循环结构二.练习三.总结前言欢迎来到《Python入门》系列博客的第二课。在上一课中，我们了解了Python的安装及运行环境的配置。在这一课中，我们将深入学习Python的基础语法，这是编写Python代码的根基。通过本节内容的学习，你将掌握变量、数据类型、运算符、输入输出、条件语句等Python编程的基础知识。一.介绍1
    • Android应用性能优化 轻口味 Android
      Android手机由于其本身的后台机制和硬件特点，性能上一直被诟病，所以软件开发者对软件本身的性能优化就显得尤为重要；本文将对Android开发过程中性能优化的各个方面做一个回顾与总结。Cache优化ListView缓存：ListView中有一个回收器，Item滑出界面的时候View会回收到这里，需要显示新的Item的时候，就尽量重用回收器里面的View；每次在getView函数中inflate新
    • 高考后该不该给孩子买电脑，什么情况能买？什么情况不能买？ 寻求改变
      我知道家长们很担心，怕买了电脑小孩沉迷游戏，耽误了学业，也不利于身体健康。对于准大学生来说，基本上在18岁左右，也不算小了，但在很多父母眼里，依旧是个小孩子。数据显示，这种情况是有发生的，大学生约70%的电脑主要被用于玩网络游戏，如果没有养成一个用良好的习惯，对孩子影响是非常大的。我总结为三买，三不买。最近有看到群里很多家长再问，小孩上大学该不该给他买电脑，要买和不买两种观点的家长都有，那么哪种情
    • 放松的一天 4da9b7687fa0
      20190325总结起床07:20图片发自App睡觉:23:00天气:晴今日任务清单学习·信息·阅读•水滴阅读Day40Alice’sAdventuresinWonderlandChapter6.2图片发自App•BBC跟读训练营Day24图片发自App图片发自App图片发自App•潘多拉口语训练营Day6Wow.Whatabigboy!•文化知识学习今日无•阅读时间地狱健康·饮食·锻炼•饮食目标
    • 4 大低成本娱乐方式: 小说, 音乐, 视频, 电子游戏 穷人小水滴 娱乐音视频低成本小说游戏
      穷人如何获得快乐?小说,音乐,视频,游戏,本文简单盘点一下这4大低成本(安全)娱乐方式.这里是穷人小水滴,专注于穷人友好型低成本技术.(本文为58号作品.)目录1娱乐方式1.1小说(网络小说)1.2音乐1.3视频(b站)1.4游戏(电子游戏/计算机软件)2低成本:一只手机即可3总结与展望1娱乐方式这几种,也可以说是艺术的具体形式.更专业的说,(娱乐)是劳动力再生产的重要组成部分.使人放松,获得快乐
    • 计算机网络八股总结 Petrichorzncu 八股总结计算机网络笔记
      这里写目录标题网络模型划分（五层和七层）及每一层的功能五层网络模型七层网络模型（OSI模型）==三次握手和四次挥手具体过程及原因==三次握手四次挥手TCP/IP协议组成==UDP协议与TCP/IP协议的区别==Http协议相关知识网络地址，子网掩码等相关计算网络模型划分（五层和七层）及每一层的功能五层网络模型应用层：负责处理网络应用程序，如电子邮件、文件传输和网页浏览。主要协议包括HTTP、FTP
    • 【树一线性代数】005入门 Owlet_woodBird 算法
      Index本文稍后补全，推荐阅读：https://blog.csdn.net/weixin_60702024/article/details/141874376分析实现总结本文稍后补全，推荐阅读：https://blog.csdn.net/weixin_60702024/article/details/141874376已知非空二叉树T的结点值均为正整数，采用顺序存储方式保存，数据结构定义如下:t
    • 今天是总结 薛帅
      今天来个最后一天的总结。为什么要学习写作技巧呢？就如同建房子，如果想要住的安全、舒服，我们要先打地基，建房子的框架，这样才能随意的装修。那么我们要怎么建好才能建好写作的地基呢？1走直路，少弯路01利他：能够给别人带来价值。02吸引：吸住读者的眼球。03打动：打动人心，引起共鸣。04说服：用数据说话。05刻意：通过有意识的训练。06修改：好的文章至上修改10遍。07模仿：10万+的文章必有成功的道理
    • VMware Workstation 11 或者 VMware Player 7安装MAC OS X 10.10 Yosemite iwindyforest vmwaremac os10.10workstationplayer
      最近尝试了下VMware下安装MacOS 系统， 安装过程中发现网上可供参考的文章都是VMware Workstation 10以下， MacOS X 10.9以下的文章， 只能提供大概的思路， 但是实际安装起来由于版本问题， 走了不少弯路， 所以我尝试写以下总结， 希望能给有兴趣安装OSX的人提供一点帮助。     写在前面的话： 其实安装好后发现， 由于我的th
    • 关于《基于模型驱动的B/S在线开发平台》源代码开源的疑虑？ deathwknight JavaScriptjava框架
      本人从学习Java开发到现在已有10年整，从一个要自学 java买成javascript的小菜鸟，成长为只会java和javascript语言的老菜鸟（个人邮箱：[email protected]） 一路走来，跌跌撞撞。用自己的三年多业余时间，瞎搞一个小东西（基于模型驱动的B/S在线开发平台，非MVC框架、非代码生成）。希望与大家一起分享，同时有许些疑虑，希望有人可以交流下 平台
    • 如何把maven项目转成web项目 Kai_Ge mavenMyEclipse
      创建Web工程，使用eclipse ee创建maven web工程 1.右键项目,选择Project Facets,点击Convert to faceted from 2.更改Dynamic Web Module的Version为2.5.(3.0为Java7的,Tomcat6不支持). 如果提示错误,可能需要在Java Compiler设置Compiler compl
    • 主管？？？ Array_06 工作
      转载：http://www.blogjava.net/fastzch/archive/2010/11/25/339054.html 很久以前跟同事参加的培训，同事整理得很详细，必须得转！ 前段时间，公司有组织中高阶主管及其培养干部进行了为期三天的管理训练培训。三天的课程下来，虽然内容较多，因对老师三天来的课程内容深有感触，故借着整理学习心得的机会，将三天来的培训课程做了一个
    • python内置函数大全 2002wmj python
      最近一直在看python的document，打算在基础方面重点看一下python的keyword、Build-in Function、Build-in Constants、Build-in Types、Build-in Exception这四个方面，其实在看的时候发现整个《The Python Standard Library》章节都是很不错的，其中描述了很多不错的主题。先把Build-in Fu
    • JSP页面通过JQUERY合并行 357029540 JavaScriptjquery
      在写程序的过程中我们难免会遇到在页面上合并单元行的情况，如图所示 如果对于会的同学可能很简单，但是对没有思路的同学来说还是比较麻烦的，提供一下用JQUERY实现的参考代码 function mergeCell(){         var trs = $("#table tr"); &nb
    • Java基础 冰天百华 java基础
      学习函数式编程 package base; import java.text.DecimalFormat; public class Main { public static void main(String[] args) { // Integer a = 4; // Double aa = (double)a / 100000; // Decimal
    • unix时间戳相互转换 adminjun 转换unix时间戳
      如何在不同编程语言中获取现在的Unix时间戳(Unix timestamp)？ Java time JavaScript Math.round(new Date().getTime()/1000) getTime()返回数值的单位是毫秒 Microsoft .NET / C# epoch = (DateTime.Now.ToUniversalTime().Ticks - 62135
    • 作为一个合格程序员该做的事 aijuans 程序员
      作为一个合格程序员每天该做的事 1、总结自己一天任务的完成情况 最好的方式是写工作日志，把自己今天完成了什么事情，遇见了什么问题都记录下来，日后翻看好处多多 2、考虑自己明天应该做的主要工作 把明天要做的事情列出来，并按照优先级排列，第二天应该把自己效率最高的时间分配给最重要的工作 3、考虑自己一天工作中失误的地方，并想出避免下一次再犯的方法 出错不要紧，最重
    • 由html5视频播放引发的总结 ayaoxinchao html5视频video
      前言   项目中存在视频播放的功能，前期设计是以flash播放器播放视频的。但是现在由于需要兼容苹果的设备，必须采用html5的方式来播放视频。我就出于兴趣对html5播放视频做了简单的了解，不了解不知道，水真是很深。本文所记录的知识一些浅尝辄止的知识，说起来很惭愧。   视频结构   本该直接介绍html5的<video>的，但鉴于本人对视频
    • 解决httpclient访问自签名https报javax.net.ssl.SSLHandshakeException: sun.security.validat bewithme httpclient
           如果你构建了一个https协议的站点，而此站点的安全证书并不是合法的第三方证书颁发机构所签发，那么你用httpclient去访问此站点会报如下错误   javax.net.ssl.SSLHandshakeException: sun.security.validator.ValidatorException: PKIX path bu
    • Jedis连接池的入门级使用 bijian1013 redisredis数据库jedis
      Jedis连接池操作步骤如下：         a.获取Jedis实例需要从JedisPool中获取；         b.用完Jedis实例需要返还给JedisPool；         c.如果Jedis在使用过程中出错，则也需要还给JedisPool； packag
    • 变与不变 bingyingao 不变变亲情永恒
      变与不变    周末骑车转到了五年前租住的小区，曾经最爱吃的西北面馆、江西水饺、手工拉面早已不在，    各种店铺都换了好几茬，这些是变的。    三年前还很流行的一款手机在今天看起来已经落后的不像样子。    三年前还运行的好好的一家公司，今天也已经不复存在。    一座座高楼拔地而起，
    • 【Scala十】Scala核心四：集合框架之List bit1129 scala
      Spark的RDD作为一个分布式不可变的数据集合，它提供的转换操作，很多是借鉴于Scala的集合框架提供的一些函数，因此，有必要对Scala的集合进行详细的了解   1. 泛型集合都是协变的，对于List而言，如果B是A的子类，那么List[B]也是List[A]的子类，即可以把List[B]的实例赋值给List[A]变量   2. 给变量赋值(注意val关键字，a，b
    • Nested Functions in C bookjovi cclosure
        Nested Functions 又称closure，属于functional language中的概念，一直以为C中是不支持closure的，现在看来我错了，不过C标准中是不支持的，而GCC支持。   既然GCC支持了closure，那么 lexical scoping自然也支持了，同时在C中label也是可以在nested functions中自由跳转的
    • Java-Collections Framework学习与总结-WeakHashMap BrokenDreams Collections
              总结这个类之前，首先看一下Java引用的相关知识。Java的引用分为四种：强引用、软引用、弱引用和虚引用。         强引用：就是常见的代码中的引用，如Object o = new Object();存在强引用的对象不会被垃圾收集
    • 读《研磨设计模式》-代码笔记-解释器模式-Interpret bylijinnan java设计模式
      声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * 解释器（Interpreter）模式的意图是可以按照自己定义的组合规则集合来组合可执行对象 * * 代码示例实现XML里面1.读取单个元素的值 2.读取单个属性的值 * 多
    • After Effects操作&快捷键 cherishLC After Effects
      1、快捷键官方文档 中文版：https://helpx.adobe.com/cn/after-effects/using/keyboard-shortcuts-reference.html 英文版：https://helpx.adobe.com/after-effects/using/keyboard-shortcuts-reference.html 2、常用快捷键
    • Maven 常用命令 crabdave maven
      Maven 常用命令   mvn archetype:generate mvn install mvn clean mvn clean complie mvn clean test mvn clean install mvn clean package mvn test mvn package mvn site   mvn dependency:res
    • shell bad substitution daizj shell脚本
      #!/bin/sh /data/script/common/run_cmd.exp 192.168.13.168 "impala-shell -islave4 -q 'insert OVERWRITE table imeis.${tableName} select ${selectFields}, ds, fnv_hash(concat(cast(ds as string), im
    • Java SE 第二讲（原生数据类型 Primitive Data Type） dcj3sjt126com java
      Java SE  第二讲： 1.   Windows: notepad, editplus, ultraedit, gvim Linux: vi, vim, gedit 2.   Java 中的数据类型分为两大类： 1）原生数据类型  （Primitive Data Type） 2）引用类型（对象类型）  （R
    • CGridView中实现批量删除 dcj3sjt126com PHPyii
      1，CGridView中的columns添加 array( 'selectableRows' => 2, 'footer' => '<button type="button" onclick="GetCheckbox();" style=&
    • Java中泛型的各种使用 dyy_gusi java泛型
      Java中的泛型的使用：1.普通的泛型使用 在使用类的时候后面的<>中的类型就是我们确定的类型。 public class MyClass1<T> {//此处定义的泛型是T private T var; public T getVar() { return var; } public void setVa
    • Web开发技术十年发展历程 gcq511120594 Web浏览器数据挖掘
      回顾web开发技术这十年发展历程： Ajax 03年的时候我上六年级，那时候网吧刚在小县城的角落萌生。传奇，大话西游第一代网游一时风靡。我抱着试一试的心态给了网吧老板两块钱想申请个号玩玩，然后接下来的一个小时我一直在，注，册，账，号。 彼时网吧用的512k的带宽，注册的时候，填了一堆信息，提交，页面跳转，嘣，”您填写的信息有误，请重填”。然后跳转回注册页面，以此循环。我现在时常想，如果当时a
    • openSession()与getCurrentSession()区别： hetongfei javaDAOHibernate
      来自 http://blog.csdn.net/dy511/article/details/6166134 1.getCurrentSession创建的session会和绑定到当前线程,而openSession不会。 2. getCurrentSession创建的线程会在事务回滚或事物提交后自动关闭,而openSession必须手动关闭。 这里getCurrentSession本地事务(本地
    • 第一章 安装Nginx+Lua开发环境 jinnianshilongnian nginxluaopenresty
      首先我们选择使用OpenResty，其是由Nginx核心加很多第三方模块组成，其最大的亮点是默认集成了Lua开发环境，使得Nginx可以作为一个Web Server使用。借助于Nginx的事件驱动模型和非阻塞IO，可以实现高性能的Web应用程序。而且OpenResty提供了大量组件如Mysql、Redis、Memcached等等，使在Nginx上开发Web应用更方便更简单。目前在京东如实时价格、秒
    • HSQLDB In-Process方式访问内存数据库 liyonghui160com
          HSQLDB一大特色就是能够在内存中建立数据库，当然它也能将这些内存数据库保存到文件中以便实现真正的持久化。   先睹为快！   下面是一个In-Process方式访问内存数据库的代码示例：     下面代码需要引入hsqldb.jar包 （hsqldb-2.2.8）   import java.s
    • Java线程的5个使用技巧 pda158 java数据结构
      Java线程有哪些不太为人所知的技巧与用法？ 　　萝卜白菜各有所爱。像我就喜欢Java。学无止境，这也是我喜欢它的一个原因。日常 工作中你所用到的工具，通常都有些你从来没有了解过的东西，比方说某个方法或者是一些有趣的用法。比如说线程。没错，就是线程。或者确切说是Thread这个类。当我们在构建高可扩展性系统的时候，通常会面临各种各样的并发编程的问题，不过我们现在所要讲的可能会略有不同。
    • 开发资源大整合：编程语言篇——JavaScript（1） shoothao JavaScript
      概述：本系列的资源整合来自于github中各个领域的大牛，来收藏你感兴趣的东西吧。     程序包管理器   管理javascript库并提供对这些库的快速使用与打包的服务。 Bower - 用于web的程序包管理。 component - 用于客户端的程序包管理，构建更好的web应用程序。 spm - 全新的静态的文件包管
    • 避免使用终结函数 vahoa.ma javajvmC++
      终结函数（finalizer）通常是不可预测的，常常也是很危险的，一般情况下不是必要的。使用终结函数会导致不稳定的行为、更差的性能，以及带来移植性问题。不要把终结函数当做C++中的析构函数（destructors）的对应物。       我自己总结了一下这一条的综合性结论是这样的： 1）在涉及使用资源，使用完毕后要释放资源的情形下，首先要用一个显示的方