浅析BFC布局的概念以及作用】的更多相关文章

BFC的概念以及作用 BFC的定义: (Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干. 我们常说的文档流其实分为==定位流.浮动流和普通流==三种.而普通流其实就是指BFC中的FC. FC是formatting context的首字母缩写,直译过来是格式化上下文,它是页面中的一块渲染区域,有一套渲染规则,决定…
1. 什么是BFC BFC(block formatting context):简单来说,BFC 就是一种属性,这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用. 中文译为块级格式化上下文.是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. 在进行盒子元素布局的时候,BFC提供了一个环境,在这个环境中按照一定规则进行布局不会影响到其它环境中的布局.比如浮动元素会形成BFC,浮动元素内部子元素的主要受该浮动元素影响,两个浮动元素…
这几天都没有写博客,自己的懒惰又要跑出来了,发觉不能再这样下去了,不然就什么都不想干了,然后将之前已经写得差不多的博客重新检视了一遍.这篇博客已经写得挺久的了,但是一直没有发布,现在补充了一些,也让自己回顾了一下BFC布局. BFC的全称是block formatting context(块级格式上下文), 它是指一个独立的块级渲染区域,该区域拥有一套渲染规则来约束块级盒子的布局,并且与区域外部无关.那么怎样才能触发BFC呢? 一.根元素 二.float的值为left或right 三.overf…
css是网页的外衣,好不好看全凭css样式,而布局是css中比较重要的部分,下面来分析一下常见的几种布局. 流动模型 流动模型是网页布局的默认模式,也是最常见的布局模式,他有两个特点: 1.块状元素都在所处包含元素内自上而下按顺序垂直延伸分布.常见的块状元素有:div,p,ul,ol,h1~h6,address等 2.内联元素都会在所处包含元素内从左到右水平分布显示.常见的内联元素有:a,span,img,input,textarea等 浮动模型 浮动模型是指使用css将块状元素定义为浮动.用法…
PO BO VO DTO POJO DAO 概念及其作用(附转换图) 博客分类: java javadaovopojobo        J2EE开发中大量的专业缩略语很是让人迷惑, 特别是对于刚毕业的新人来说更是摸不清头脑.若与公司大牛谈技术人家出口就是PO VO BO DTO POJO DAO 等,让新人们无比仰慕大牛.    为了让新人快速成为牛人,今天我详细的为大家介绍这些专业名词.   企业级项目实战(带源码)地址:  http://zz563143188.iteye.com/blog…
大家可能对memcached这种产品早有了解,或者已经应用在自己的网站中了,但是也有一些朋友从来都没有听说过或者使用过.这都没什么关系,本文旨在从各个角度综合的介绍这种产品,尽量深入浅出,如果能对您现在或以后的工作有所帮助,笔者将感到无比荣幸. Memcached概念.作用.运行原理.特性.不足简单梳理(1) Memcached下载安装.NET对Memcached进行CRUD操作(2) Memcached存Session数据.访问安全性.使用场景总结(3) 一.Memcached 概念 官方解释…
BFC,全称为(Block formatting context).按照我的理解是我们在某一条件下会触发BFC布局,会产生一定的效果. Block Formatting Contexts翻译为:块级元素格式化上下文.它决定了块级元素如何对它的内容进行布局,以及与其他元素的关系和相互作用. 其中块级元素可以理解为父级元素,内容即是子元素,子元素也为块元素,其他元素指的是与内容同级别的兄弟元素,相互作用指的是BFC里的元素与外面的元素不会发生影响. 而触发BFC的条件是: 1.float的值不为no…
IOC的概念和作用 控制反转(IoC:Inversion of Control)把创建对象的权利转交给框架(框架的重要特征),并非面向对象的专用术语. 它包含依赖注入(DI:Dependency Injection ) 2.1程序的耦合 2.2 利用工厂模式解耦注意事项 2.3理解控制反转设计模式 控制反转(IoC:Inversion of Control)把创建对象的权利转交给框架(框架的重要特征),并非面向对象的专用术语. 它包含依赖注入(DI:Dependency Injection )…
在了解什么是BFC之前,首先得明白什么是Box , Formatting Context (一个决定如何渲染文档的容器)的概念 Box: CSS布局的基本单位 Box是 CSS 布局的对象和基本单位, 直观点来说, 就是一个页面是由很多个 Box组成的, 元素的类型和display属性, 决定这个BOX的类型, 不同类型的BOX, 会参与不同的Formatting Context, 因此BOX内的元素会以不同的方式渲染, 其盒子的类型分别为: block-level box:display 属性…
一.常见定位方案 二.BFC 概念 BFC 即 Block Formatting Contexts (块级格式化上下文),它属于上述定位方案的普通流. 它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干. 通俗一点来讲,可以把 BFC 理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部. 三.BFC 布局规则 内部的Box会在垂直方向,一个接一个地放置: Box垂直方向的距离由m…
1.概念,全称是block format context,块级格式化上下文 2.触发条件 根元素 float属性不为none position为absolute或fixed display为inline-block, table-cell, table-caption, flex, inline-flex overflow不为visible 3.应用场景 自适应两栏布局 <style> body { width: 300px; position: relative; } .aside { wi…
本文链接:https://blog.csdn.net/riddle1981/article/details/52126522…
写这篇博客的初衷其实是在解决浮动的时候看到的这个方法,就想着BFC是什么,为什么可以清除浮动.结果不看不知道,一看越看越不明白,潜下心来研究看看,总结一下学习心得. 1.BFC是什么 BFC就是Box Formatting Context的简称,直译为"块级格式化上下文". 1.1 Box是css布局的基本单位 Box是CSS布局的对象和基本单位,元素的类型和display特性,决定了Box的类型,不同类型的盒子决定了页面不同的布局形式 block-level box:display…
Flex基本概念: 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis).主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end:交叉轴的开始位置叫做cross start,结束位置叫做cross end. flex容器中的每个单元块被称作flex item,其实flex布局的属性虽然分为父级容器的属性和子级容器的属性,但是其实所有的效果都是作用在子级容器上的,只不过父级容器的属性作用的是子集容器整体或者说是所有的子级容器.…
原文链接:http://jeoff.blog.51cto.com/186264/88517/ POJO = pure old java object or plain ordinary java object or what ever. PO = persisent object 持久对象 就是说在一些Object/Relation Mapping工具中,能够做到维护数据库表记录的persisent object完全是一个符合Java Bean规范的纯Java对象,没有增加别的属性和方法.全都是…
J2EE开发中大量的专业缩略语很是让人迷惑,尤其是跟一些高手讨论问题的时候,三分钟就被人家满口的专业术语喷晕了,PO VO BO DTO POJO DAO,一大堆的就来了(听过老罗对这种现象的批判的朋友会会心一笑). 首先声明偶也不是什么高手,以下总结都是自己的体会.不对之处请您多指教. PO:persistant object持久对象 最形象的理解就是一个PO就是数据库中的一条记录.好处是可以把一条记录作为一个对象处理,可以方便的转为其它对象. BO:business object业务对象 主…
BFC:Block Formatting Contexts–块级元素格式化上下文 1.BFC定义 它决定了块级元素如何对它的内容进行布局,以及与其它元素的关系和相互作用 关键词解释: 块级元素:父级(是一个块元素) 内容:子元素(是一个块元素) 其它元素:与内容同级别的兄弟元素 相互作用:BFC里的元素与外面的元素不会发生影响 2.BFC触发方式 2.BFC的布局规则 3.普通文档流布局规则 4.代码演示 <!DOCTYPE html> <html> <head> &l…
来源:http://www.blogjava.net/vip01/archive/2013/05/25/92430.html J2EE开发中大量的专业缩略语很是让人迷惑,尤其是跟一些高手讨论问题的时候,三分钟就被人家满口的专业术语喷晕了,PO VO BO DTO POJO DAO,一大堆的就来了(听过老罗对这种现象的批判的朋友会会心一笑). 首先声明偶也不是什么高手,以下总结都是自己的体会.不对之处请您多指教. PO:persistant object持久对象 最形象的理解就是一个PO就是数据库…
概念 能够添加到 Java 源代码的语法元数据.类.方法.变量.参数.包都可以被注解,可用来将信息元数据与程序元素进行关联.Annotation 中文常译为“注解”. 作用 标记,用于告诉编译器一些信息 编译时动态处理,如动态生成代码 运行时动态处理,如得到注解信息 这里的三个作用实际对应着@Retention三种值分别表示的 Annotation 自定义注解 @interface来声明一个注解 自定义注解的过程就像在定义一个接口一样,注解中是可以增加属性,为一个注解增加属性就像在为一个接口定义…
J2EE开发中大量的专业缩略语很是让人迷惑,尤其是跟一些高手讨论问题的时候,三分钟就被人家满口的专业术语喷晕了,PO VO BO DTO POJO DAO,一大堆的就来了(听过老罗对这种现象的批判的朋友会会心一笑). 首先声明偶也不是什么高手,以下总结都是自己的体会.不对之处请您多指教. PO:persistant object持久对象最形象的理解就是一个PO就是数据库中的一条记录.好处是可以把一条记录作为一个对象处理,可以方便的转为其它对象. BO:business object业务对象主要作…
J2EE开发中大量的专业缩略语很是让人迷惑,尤其是跟一些高手讨论问题的时候,三分钟就被人家满口的专业术语喷晕了,PO VO BO DTO POJO DAO,一大堆的就来了(听过老罗对这种现象的批判的朋友会会心一笑). 首先声明偶也不是什么高手,以下总结都是自己的体会.不对之处请您多指教. PO:persistant object持久对象 最形象的理解就是一个PO就是数据库中的一条记录.好处是可以把一条记录作为一个对象处理,可以方便的转为其它对象. BO:business object业务对象 主…
概念:MAC地址就是在媒体接入层上使用的地址,也叫物理地址.硬件地址或链路地址,其被固化在适配器的ROM中. 可见MAC地址实际上就是适配器地址或适配器标识符.当某台计算机使用某块适配器后,适配器上的标识符就成为该计算机的MAC地址.MAC地址长度为6字节(48比特),由IEEE的注册管理结构RA进行管理分配. 作用:MAC地址是计算机的唯一标识,在数据链路层中,交换机通过识别MAC地址进行数据包的传输.…
Annotation的概念: 能够添加到 Java 源代码的语法元数据.类.方法.变量.参数.包都可以被注解,可用来将信息元数据与程序元素进行关联.Annotation 中文常译为“注解”. 从JDK5.0 开始,java增加了对元数据(MetaData)的支持,也就是Annotation(注解). Annotation其实就是代码里的特殊标记,这些标记可以在编译,类加载,运行时被读取,并执行相应的处理.通过使用Annotation,程序员可以在不改变原有逻辑的情况下,在源文件中嵌入一些补充信息…
PO(bean.entity等命名): Persistant Object持久对象,数据库表中的记录在java对象中的显示状态 最形象的理解就是一个PO就是数据库中的一条记录. 好处是可以把一条记录作为一个对象处理,可以方便的转为其它对象. BO(service.manager.business等命名): Business Object业务对象 主要作用是把业务逻辑封装为一个对象.这个对象可以包括一个或多个其它的对象. 形象描述为一个对象的形为和动作,当然也有涉及到基它对象的一些形为和动作.比如…
一:程序之间的耦合及解决 耦合性(Coupling):也叫耦合度,是对模块间关联程度的度量.耦合的强弱取决于模块间接口的复杂性.调用模块的方式以及通过界面传送数据的多少.模块间的耦合度是指模块之间的依赖关系,包括控制关系.调用关系.数据传递关系.模块间联系越多,其耦合性越强,同时表明其独立性越差( 降低耦合性,可以提高其独立性).耦合性存在于各个领域,而非软件设计中独有的. 在软件工程中,耦合指的就是就是对象之间的依赖性.对象之间的耦合越高,维护成本越高.因此对象的设计应使类和构件之间的耦合最小…
一.函数是用来帮助我们封装.调用代码的最方便的工具! 二.函数的创建方法有三种: 三.函数的创建方式有3种,调用方式也不是单一的,调用方式有4种!      1.作为一个函数去调用 函数名+();(函数作为全局对象调用,会使this的值成为全局对象,使用window对象作为一个变量,容易造成程序崩溃!)       2.函数作为方法调用:(函数作为对象的方法调用,会使this的值成为对象的本身!)      我们举例说明: 3.使用构造函数调用函数:(构造函数中的this没有任何值) 4.作为函…
引用http://www.jb51.net/article/51892.htm 很多新手刚开始学习python的时候经常会看到python 中__name__ = \'__main__\' 这样的代码,可能很多新手一开始学习的时候都比较疑惑,python 中__name__ = '__main__' 的作用,到底干嘛的? 有句话经典的概括了这段代码的意义: “Make a script both importable and executable” 意思就是说让你写的脚本模块既可以导入到别的模块…
上节对整个布局模型进行了概述,这节先谈一下布局模型的几个属性. z-index属性 该属性是检索或设置对象的层叠顺序,默认值为auto,遵循其父对象的定位. 并级的对象,该属性的值越大,则被层叠在最上面,如两个对象的属性该值相同,则依据文档流的顺序,先写的将会被覆盖,必须定义对象的position属性值为relative,absolute或fixed,该值才会生效. top,right,bottom,left 这四个属性均表示对象的相对偏移量,默认值为auto,同样需要定义position属性的…
原文链接:http://www.jb51.net/article/51892.htm 举例说明解释的非常清楚,应该是看到的类似博文里面最简单的一篇: 这篇文章主要介绍了python 中__name__ = '__main__' 的作用,对于初学者来说很有帮助,需要的朋友可以参考下   很多新手刚开始学习python的时候经常会看到python 中__name__ = \'__main__\' 这样的代码,可能很多新手一开始学习的时候都比较疑惑,python 中__name__ = '__main…
范式:英文名称是 Normal Form,它是英国人 E.F.Codd(关系数据库的老祖宗)在上个世纪70年代提出关系数据库模型后总结出来的,范式是关系数据库理论的基础,也是我们在设计数据库结构过程中所要遵循的规则和指导方法.目前有迹可寻的共有8种范式,依次是:1NF,2NF,3NF,BCNF,4NF,5NF,DKNF,6NF.通常所用到的只是前三个范式,即:第一范式(1NF),第二范式(2NF),第三范式(3NF). 下面就简单介绍下这三个范式. ◆ 第一范式(1NF):强调的是列的原子性,即…