CSS布局中一个简单的应用BFC的例子

【CSS布局中一个简单的应用BFC的例子】的更多相关文章

CSS布局中一个简单的应用BFC的例子

什么是BFC BFC(Block Formatting Context),简单讲,它是提供了一个独立布局的环境,每个BFC都遵守同一套布局规则.例如,在同一个BFC内,盒子会一个挨着一个的排,相邻盒子的间距是由margin决定且垂直方向的margin会重叠.而float和clear float也只对同一个BFC内的元素有效. 什么情况产生BFC W3C标准中这样描述:Floats, absolutely positioned elements, block containers (such as…

css布局中的各种FC（BFC、IFC、GFC、FFC）

什么是FC?FC(Formatting Context)格式化上下文,其实指的是一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素之间的关系和相互作用. 什么是BFC? BFC(Block Formatting Context)块级格式化上下文,指的是一个独立的块级渲染区域,拥有一套独立的渲染规则,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关.BFC的约束规则: 1.内部的BOX会在垂直方向一个接一个的排列着: 2.属于同一个BFC的两个相邻BOX的marg…

认识和理解css布局中的BFC

认识和理解css布局中的BFC BFC的定义是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. Block Formatting Context 的元素的特点其子元素会一个接一个地放置.垂直方向上他们的起点是一个包含块的顶部,两个相邻的元素之间的垂直距离取决于 'margin' 特性. 相邻的块级元素的垂直边距会折叠(collapse). 每一个元素左外边(margin)与包含块的左边相接触(对于从右到左的格式化,右外边接触右边)…

DIV CSS布局中position属性用法深入探究

本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative(相对)以及absolute(绝对). 如何学习DIV+CSS布局之position属性如果用position属性来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用absolute.定位(position)布局页面说容易非常容易,只需要记住这节课…

DIV CSS布局中绝对定位和浮动用法

转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实现分栏布局有两种方法.第一种方法是使用四种CSS定位选项中的绝对定位,第二种则是使用CSS中的浮动(float)概念. DIV CSS布局中绝对定位和浮动 CSS中,实现分栏布局有两种方法.第一种方法是使用四种CSS定位选项(absolute.static.relative和fixed)中的绝对定位…

DIV+CSS布局中自适应高度的解决方法

div乱跑问题 (文件<DIV+CSS布局中自适应高度的解决方法.rar>) float 是个很危险的东西得小心使用本来有一很好的关于CSS+DIV的论坛不过现在关门了甚是可惜了给段比较好的讲布局的东西给你看看吧反正我看了是受益非浅,希望你能参悟由于是要让站工自已定制,所以开放了HTML以及CSS.JS等代码.但默认的CSS是CSS是不能改的. 在写这个CSS时,我尽量用最少的标签,这样很站对CSS不是很熟的站长也可以定制.另外布局时和写CSS时,总的思想的就是从大的到小…

DIV+CSS布局中主要CSS属性介绍

Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能,最直接解释方法就是能实现表格布局的多列功能. Margin: Margin属性用于设置两个元素之间的距离. Padding: Padding属性用于设置一个元素的边框与其内容的距离. Clear: 使用Float属性设置一行有多个DIV后(多列),最好在下一行开始之前使用Clear属性清楚一下浮动,否则上面…

CSS布局中的水平垂直居中

CSS布局中的水平垂直居中各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于前端开发布局中经常用到的水平垂直居中的总结.第一次写博客,可能会存在有的地方表述不是那么清晰明了还请各位多多见谅. 废话不多说了,下面进入主题:下面的例子父元素div 高600px 宽800px, 子元素div的高400px 宽300px; 知道父元素div的宽和高,子元素在父元素中水平垂直居中…

CSS布局中最小高度的妙用

CSS布局中最小高度的妙用 --最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持BOX的高度为一定,超出就自动向下延伸最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持BOX的高度为一定,超出就自动向下延伸,但到目前为止,只有Opera 和 Mozilla 支持,IE7开始也支持了,但IE7处于测试阶段,等正式版发布到普及需一段也许比较长的时间,除非MS把它捆绑在某个操作系统上,如何在现有基础上(IE6 80-90%),合理.妙用最小高度了? 假定有二个BOX,我们…

python中一个简单的webserver

python中一个简单的webserver 2013-02-24 15:37:49 分类: Python/Ruby 支持多线程的webserver 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 #!/usr/bin/python from SocketServer import ThreadingMixIn from BaseHTTPServer import HTTPServer,BaseHTTPRequestHandler…

分析CSS布局中BFC

1.什么是BFC BFC(Block Formatting Context,块级元素格式化上下文)是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. 通俗讲,BFC就是一种布局方式,在创建了 BFC后,其子元素会一个接一个地放置:盒子们自所在的 containing block 顶部起,水平方向上一个接一个撑满整个宽度,垂直方向上他们的起点是包含块的顶部,两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性.在同一个BFC中…

CSS布局秘籍(1)-任督二脉BFC/IFC

01.CSS布局 1.1.正常布局流(Normal flow) 正常布局流就是不做任何布局控制,按照HTML的顺序(从左到右,从上而下)进行布局排列.网页基于盒子模型进行正常的布局,主要特点: 盒子布局:单个内容的布局,把内容放入盒子,加上盒子三件套(padding.boder.margin). 块盒子纵向布局:块级元素单独一行,按照顺序垂直排列,并按其margin分离. 内联盒子水平布局:内联元素会在一行水平排列,高度.宽度都取决于内容,直到空间不足另起一行(换行).高矮不齐,底部对齐. 边…

(转)div+css 布局经验 - 最简单的 = 最不变形的（原创技巧）

站酷几年了一直饱受其恩泽尤为感激一直想奉献些什么但是苦于水平苦于奔波今天静下心来为大家奉献下自己的div+css 经验 ,以下观点只代表深海个人立场希望为初学者提供一条"捷径". 希望广大网友提出宝贵意见同时不希望将初学的您带入走火入魔的状态! 1 :css (cascading style sheet): 初学者可以下载一本css 2.0 手册大概48小时的时间可以看完试完.至于样式手册上的单词(属性和取值) 多久能背完取决你的努力和英语基础,请注意无论…

div+css 布局经验 - 最简单的 = 最不变形的（原创技巧）

站酷几年了一直饱受其恩泽尤为感激一直想奉献些什么但是苦于水平苦于奔波今天静下心来为大家奉献下自己的div+css 经验 ,以下观点只代表深海个人立场希望为初学者提供一条"捷径". 希望广大网友提出宝贵意见同时不希望将初学的您带入走火入魔的状态! 1 :css (cascading style sheet): 初学者可以下载一本css 2.0 手册大概48小时的时间可以看完试完.至于样式手册上的单词(属性和取值) 多久能背完取决你的努力和英语基础,请注意无论…

css布局中的垂直水平居中对齐

前言我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些div如何垂直居中呢?这篇文章,我总结一下. 固定高宽div垂直居中如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; margin-left:-100px; margin-to…

CSS布局中——导航是非常常见的

导航绝对是页面布局中最常见的,为了不用每次去写,稍微贴个简单的导航模版出来,方便以后使用. <title>CSS菜单</title> <style type="text/css"> *{margin:0px;padding:0px;font-size:12px;} #nav li{float:left; list-style:none;} #nav li a{color:#;text-decoration:none;display:block;wid…

谈CSS布局中HTML标签语义化

很多人都在做前端,当然这里包括很多新手,也许在新手的想法就是在做布局的时候不要用font标签之类的就算是web标准了,这样一来,造成如今网上“div泛滥”,一看源文件,霍,除了div没其他标签了. 这里,我可以很负责的告诉大家,这不叫web标准,这叫“div+css”.名副其实的“div+css”.也许有人会说,我用“div+css”做出来的页面完全表达出设计图的意图,浏览器都兼容,没有任何问题.的确,你这样做出来的页面看起来是没任何问题,注意,这里说的是“看起来没任何问题”,仅此而已. 人是可…

IOS中一个简单的粒子效果实现

1.效果图展示 2.实现思路 1> 首先要实现上面的效果,第一步要处理的就是一个简单的画板,在View上面用鼠标滑动的时候画出线条,这个功能可使用UIBezierPath实现 2> 关于粒子效果的实现,可以创建一个CALayer,然后用CAReplicatorLayer进行复制layer,从而达到粒子效果 3.代码实现 DrawView类的封装与编写 // // DrawView.m // 06-粒子效果 // // Created by xgao on 16/11/24. // Copyri…

一个简单的Spring测试的例子

在做测试的时候我们用到Junit Case,当我们的项目中使用了Sring的时候,我们应该怎么使用spring容器去管理我的测试用例呢?现在我们用一个简单的例子来展示这个过程. 1 首先我们新建一个普通的java项目,引入要使用的几个jar包. spring测试类的要用的jar包: 1.spring-test-3.2.4.RELEASE.jar spring的核心jar包: 1.spring-beans-3.2.4.RELEASE.jar 2.spring-context-3.2.4.RELEA…

Oracle学习笔记：一个简单的行转列例子

一个简单的行列转换例子,原始数据. create table temp_cwh_student ( name ), subject ), score ) ) select * from temp_cwh_student -- 行转列 select name as "姓名", end ) as "语文", end ) as "数学", end ) as "英语", sum(score) as "总分", av…

css布局中的BFC

1.BFC的区域会与float的元素区域重叠 2.计算BFC的高度时,浮动子元素也参与计算 3.BFC就是页面上的一个隔离的独立容器,容器里面的子元素是不会影响到外面的元素 4.BFC意为"块级格式化上下文" 答案:1 解析: BFC全称"Block Formatting Context", 中文为"块级格式化上下文". BFC元素特性表现原则就是,内部子元素再怎么翻江倒海,翻云覆雨都不会影响外部的元素.所以,避免marg…

CSS布局中浮动问题的四种解决方案

一.起因: 子盒子设置浮动之后效果: 由此可见,蓝色的盒子设置浮动之后,因为脱离了标准文档流,它撑不起父盒子的高度,导致父盒子高度塌陷.如果网页中出现了这种问题,会导致我们整个网页的布局紊乱二.解决方案: 父盒子设置固定高度内墙法伪元素清除法 overflow:hidden (1)父盒子设置固定高度虽然,给父盒子设置了固定高度能暂时解决我们的问题,但是它的使用不灵活,如果未来子盒子的高度需求发生了改变(网页的多处地方),那么我们得手动需要更改父盒子的高度.后期不易维护. 应用:网页中盒子…

CSS布局中的问题

1. 高度自适应的问题 1. 一个元素是否可以使用百分比显示,取决于它的父级元素,所以如果需要给此元素设置100%,那么需要先给父元素设置高100%. 2. 一级元素的父元素是body,所以如果我们想让高度100%的话,那就给body设置高100%,但是又因为body的父元素是html,所以我们同时也要给html高设置成100%. 2. 什么是盒模型就是每个盒子都由内容(content).填充(padding).边框(border).边界(margin) 3. 上下margin叠加的由来 cs…

css布局中关于块状元素和行内元素的区分

这两天在准备实习的面试和笔试,准备复习一下这些基础的概念,避免自己处于一种仅脑袋理解嘴巴不能表述出来的状态. 块状元素和行内元素的概念是在css页面布局这个地方出现.主要是将html标签按照一定的特性分成2类:块状元素和行内元素(内联元素). 首先概念上理解一下: 块状元素: 块状元素(Block element),字面理解就是一个方块嘛,它一般是其它元素的容器元素,可以容纳块状元素和行内元素,它默认是不会和其它元素同一行的,即相当于两个块状元素写一块是垂直布局的.最常用块状元素是div和p…

css布局中的百分比布局

1.在说到百分比是前,先简单了解下基本的单位英寸(inch) :in 1 in=2.54cm厘米(centimeter):cm毫米(millimeter):mm磅(point):pt 1pt=1/72 in皮卡(pica):pc 1pc==12 pt像素(pixel unit):px 1px=0.75 pt相对长度单位(相对于当前对象内文本的字体尺寸):em 1em=16pxCSS3新增的一个相对单位root em: rem 1rem=16px 注意:如果是定位的元素,则是相对最近的定位父级元…

关于css布局中，inline-block元素间隙的处理方法

关于inline-block元素间隙的处理参考橱窗外的小孩,原文链接https://www.cnblogs.com/showcase/p/10469361.html 如下,两个inline-block之间,会产生默认的间隙.原因是因为元素被当成行内元素排版的时候,元素之间的空白符(空格.回车换行等)都会被浏览器处理,根据white-space的处理方式(默认是normal,合并多余空白),原来HTML代码中的回车换行被转成一个空白符,所以元素之间就出现了空隙.这些元素之间的间距会随着字体的大小…

CSS+DIV 设计一个简单的个人网页界面

*{ margin:0px; padding:0px; } body{ background:#e5e6d0; } #header,#menu,#banner,#main,#footer{ margin:0px auto; width:1200px; } #header{ height:100px; background:#F0FFFF; } #header h1{ float:left; margin-top:20px; } #header h1 a{ /*margin:0px auto;可以…