【前端BFC布局学习】的更多相关文章

前端BFC布局学习

BFC,全称为(Block formatting context).按照我的理解是我们在某一条件下会触发BFC布局,会产生一定的效果. Block Formatting Contexts翻译为:块级元素格式化上下文.它决定了块级元素如何对它的内容进行布局,以及与其他元素的关系和相互作用. 其中块级元素可以理解为父级元素,内容即是子元素,子元素也为块元素,其他元素指的是与内容同级别的兄弟元素,相互作用指的是BFC里的元素与外面的元素不会发生影响. 而触发BFC的条件是: 1.float的值不为no…

浅析前端BFC布局

一.常见定位方案 二.BFC 概念 BFC 即 Block Formatting Contexts (块级格式化上下文),它属于上述定位方案的普通流. 它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干. 通俗一点来讲,可以把 BFC 理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部. 三.BFC 布局规则 内部的Box会在垂直方向,一个接一个地放置: Box垂直方向的距离由m…

android前端开发 布局学习

元素背景设置 -------------------------------- Android中shape中的属性大全 http://www.oschina.net/question/166763_34833 ****************************************** 元素位置设置 --------------------------------- 第13章.布局Layouts之RelativeLayout相对布局(从零开始学Android) http://blog.c…

前端flex布局学习笔记

flex布局,即为弹性布局,其为盒模型提供最大的灵活性,任何一个容器都可以指定为flex布局. eg:.box{ display:flex: } 行内元素也可以使用flex布局. 注意:设置flex布局后,子元素的float.clear和vertical-align属性将会失效. 采用flex布局: 元素:称为flex容器,他的所有子元素自动成为容器成员,称为flex项目, 容器默认存在两根轴,水平的主轴(main axis)和垂直的交叉轴(cross axis)主轴的开始位置(与边框的交叉点)…

CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化

一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运行平台还存在差异.屏幕分辨率不一样,大小不一样,比例不一样.兼容性主要考虑三方面: 1).CSS兼容2).JavaScript兼容3).HTML兼容 这三类也是前端的主要组成部分,都存在一定的兼容性问题,知己知彼,百战百胜,我们先了解浏览器的发动机—内核. 多年前我们一直为IE6兼容烦恼,为它没少加…

CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案

一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运行平台还存在差异.屏幕分辨率不一样,大小不一样,比例不一样.兼容性主要可以分类为: 1).CSS兼容2).JavaScript兼容3).HTML兼容 这三类也是前端的主要组成部分,都存在一定的兼容性问题,知己知彼,百战百胜,我们先了解浏览器的发动机—内核. 多年前我们一直为IE6兼容烦恼,为它没少加…

CSS3与页面布局学习总结（四）——页面布局大全BFC、定位、浮动、7种垂直居中方法

目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z-index属性 2.6.菜单 2.7.:target伪类 三.浮动 3.1.float取值 3.2.float的特性 3.3.清除浮动 3.3.1.清除外部浮动 3.3.2.清除内部浮动 四.多种居中办法 4.1.块标签自身水平居中 4.2.块标签内对齐 4.3.垂直居中方法一 4.4.垂直居中方法…

（转载）CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法

目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z-index属性 2.6.菜单 2.7.:target伪类 三.浮动 3.1.float取值 3.2.float的特性 3.3.清除浮动 3.3.1.清除外部浮动 3.3.2.清除内部浮动 四.多种居中办法 4.1.块标签自身水平居中 4.2.块标签内对齐 4.3.垂直居中方法一 4.4.垂直居中方法…

CSS3与页面布局学习总结（四）——页面布局大全

一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能如下: 1.1.1.向上移动 当多个元素同时从标准流中脱离开来时,如果前一个元素的宽度为100%宽度,后面的元素通过负边距可以实现上移.当负的边距超过自身的宽度将上移,只要没有超过自身宽度就不会上移,示例如下: <!DOCTYPE html> <html> <head> &…

BFC布局

这几天都没有写博客,自己的懒惰又要跑出来了,发觉不能再这样下去了,不然就什么都不想干了,然后将之前已经写得差不多的博客重新检视了一遍.这篇博客已经写得挺久的了,但是一直没有发布,现在补充了一些,也让自己回顾了一下BFC布局. BFC的全称是block formatting context(块级格式上下文), 它是指一个独立的块级渲染区域,该区域拥有一套渲染规则来约束块级盒子的布局,并且与区域外部无关.那么怎样才能触发BFC呢? 一.根元素 二.float的值为left或right 三.overf…