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

1. 网页布局概述 网页布局的概念是把即将出现在网页中的所有元素进行定位,而CSS网页排版技术有别于传统的网页排版方法,它将页面首先在整体上使用<div>标记进行分块,然后对每个快进行CSS定位以及设置显示效果,最后在每个块中添加相应的内容.利用CSS排版方法更容易地控制页面每个元素的效果,更新也更容易,甚至页面的拓扑结构也可以通过修改相应的CSS属性来重新定位.  2. 盒子模型 盒子模型是CSS控制页面元素的一个重要概念,只有掌握了盒子模型,才能让CSS很好地控制页面上每一个元素,达到我们…

前言 BFC 的概念始于 CSS2,是个蛮古老的 CSS 话题了,网上也到处能搜到 BFC 的介绍,但是都不够简洁.本文系翻译自 Rachel Andrew 女士的博文 Understanding CSS Layout And The Block Formatting Context,内容足够简洁明了. 本文的目的是介绍一些概念,来帮你增强 CSS 码力.如标题所示,这篇文章主要是讲块级格式上下文(BFC,Block Formatting Context).你可能没听过这个术语,但只要你曾经使用…

一. 概述一下理念 bootstrap基于H5开发.提倡移动先行(媒询声明是必须的),对浏览器支持面不是很广. 响应式图片:max-width:100% height:auto; 可以加上:.img-responsive类 排版方面的基本样式为: body的margin为0,背景色为白色,行间距为20/14倍 使用Normalize.css库,使各个浏览器差别最小化 居中容器container有一个最大范围.(最大左右margin为auto,和设备有关)   二. 文字基础排版(全局设置) 1.…

css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(less),开发的效率确实变得越来越高效,但是可能有时候我们还是会对页面布局产生烦恼的情绪,比如:"咦?我想让它显示在这个部位,它一点都不听话啊".很大原因在于我们可能没对css布局这块做一个系统的梳理~,偶然间发现了Learn CSS Layout,在此分享给大家,希望和大家共同提高,另外…

what's BFC? 第一次看到这个名词,我是拒绝的,css什么时候还有这个东西?于是迫不及待的google了一下,才发现原来它无时无刻不在我们的css当中,只不过它并不是一个属性,不需要我们平常使用手写罢了.但是它的重要性确是杠杠的,可以这么说,没有它就就没有什么css布局. BFC,全称 Block Formatting Context,翻译成块级格式化上下文,它就是一个环境,HTML元素在这个环境中按照一定规则进行布局.一个环境中的元素不会影响到其它环境中的布局. 看一大堆文字可能有点抽…

HTML最难的地方来了!这个我反复了很多遍, 包括现在写博客, 也对我自己算是一种温习, 我这块怕是没办法写的很好懂, 因为我自己还不能把我学到的准确通俗易懂的表达出来, 给自己记个笔记, 以后再来一点一点的改, 新手可以看看, 对于初学这块的人应该还是有点帮助的. CSS布局模型 以下全部是个人初学HTML的一点理解, 哪里错了欢迎指正, 我也会改, 因为全程自学, 只能摸着石头过河, 拜托大神们了. CSS布局模型在我看来是和盒模型一样的最核心的概念, 但是布局模型是依托盒模型的, 它并不是…

概述 Web 兴起之后,关于CSS的介绍和学习资料已经铺天盖地. 本文不涉及具体的CSS语法之类的,而是希望从初学者的角度,让没有接触或很少接触CSS的人能快速的了解 CSS 到底是什么以及如何使用. 什么是 CSS 了解一个概念,首先看到的就是它的名字,而往往被忽略的,也是它的名字. CSS (cascading style sheets),可以翻译成中文 层叠样式表 .从名字可以看出: 层叠:说明 样式可以叠加,所以会有优先级 样式表:说明CSS是描述样式的,而且只是个 表 ,不是程序语言,…

原文见博客主站,欢迎大家去评论. 使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为首页上的内容往往可以完全控制.后者适合布局模板,模板中填充的内容你没法控制——比如,在编辑wordpress模板时,你肯定没法考虑每篇博文的长度.这篇博文,就是总结一下怎样使用CSS中的float属性进行布局,其实网上有很多讨论这个话题的文章了,但我觉得都没说到点子…

对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方法,是没有去考虑IE的,如果有兼容需要,可以参见这篇文章:http://www.cnblogs.com/Dudy/p/4085292.html.另外,文中的css都是用less书写的,如果看不懂less,可以把我给的demo链接打开,然后在控制台中查看最终的css,或者是点击codepen上的“Vi…

使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为首页上的内容往往可以完全控制.后者适合布局模板,模板中填充的内容你没法控制——比如,在编辑wordpress模板时,你肯定没法考虑每篇博文的长度.这篇博文,就是总结一下怎样使用CSS中的float属性进行布局,其实网上有很多讨论这个话题的文章了,但我觉得都没说到点子上.那就来老生常谈一次吧,CSS之…

CSS布局 ——从display,position, float属性谈起   页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了解的话,很容易出现一些莫名其妙的效果,痛定思痛读了<CSS Mastery>后总结一下. 让我们从基础的CSS知识谈起,相信很多初学者和小弟一样不明白CSS原理,一味追求效果,结果页面漏洞百出,错误匪夷所思,关于盒模型我就不多说了,网上很多,注意一下IE和其他浏览器(W3C规范)的区别就好了. 块…

这几天有点急于求成了,原来每一门技术都像大海,只有深入其中才发现它比看到的更要深广的多. 虽然忙里偷闲的看了HTML5,NODE.JS,JAVASCRIPT核心等许多东西,但是真正掌握的不足十分之一,让我不禁感慨技术的博大精深. 从网上买了几本书,有关于javascript设计模式的,有关于网页前端设计思想的,因为每当基础和实践一段时间后,就会发现有很多东西是思想和模式上的问题. 曾经写html css的时候,都是内联样式,压根不知道维护性,简洁性是什么概念. 后来样式表和html的分离,懵懵懂…

原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverflow上求助.ifaou在帮助我解决我问题的同时,还推荐我阅读一篇有关CSS盒子模型的文章<The CSS Box Model>,阅读之后受益匪浅,才知道自己对盒子模型知识还是如此欠缺.恰逢学期末,项目验收后暂时告一段落,有空闲的时间.于是想把这篇文章翻译出来,一方面再给自己一点挑战和锻炼,另一方…

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

一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐心的直接看最后解答. 1. 我的第一反应: <div style="width:500px;"> <div id="px1" style="float:left; height:100px; width:150px; background-c…

回顾历史,CSS1于1996.12.17发正式版,它是为辅助HTML的展现效果而生的.1998.5.12,CSS2发正式版.随后发修订版CSS2.1,纠正了CSS2中的一些错误.注意从CSS2起,CSS的作用就不是辅助展现了,变为全全负责展现.(注:当年CSS2的勘误表有兴趣可以看看) CSS2.1明确了2个模型,一个是众所周知的盒模型(Box model),CSS1没有盒模型的概念,盒模型的前身在CSS1里叫做面向盒的格式化模型.元素抽象为盒,以盒为对象设计思路清晰多了.CSS3的盒模型丰富了…

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

在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础.下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧. 所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图. 下面,我们需要根据构思图来规划一下页面的布局…

div+css 布局下兼容IE6 IE7 FF常见问题 收藏 所有浏览器 通用 (市面上主要用到的IE6 IE7 FF)height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+height: 100px; IE7.FF 共用 height: 100px !important;一.CSS 兼容 以下两种方法几乎能解决现今所有兼容. 1, !important (不是很推荐,用下面的一种感觉最安全) 随着IE7对!i…

在使用div+css布局时,首先应该根据网页内容进行结构设计,仔细分析和规划你的页面结构,你可能得到类似这样的几块: 页面层容器.页面头部.标志和站点名称.站点导航(主菜单).主页面内容.子菜单.搜索框.页脚(版权和有关法律声明). 通常采用DIV元素来将这些结构定义出来,类似这样: <div id="Container"></div> 页面层容器 <div id="header"></div> 页面头部 <di…

css布局补充一 图片边框问题 注意css布局时img图片标签默认有的浏览器有边框,所以大多时候需要去除图片的边框 CSS各种居中方法 水平居中的text-align:center 和 margin:0 auto 这两种方法都是用来水平居中的,前者是针对父元素进行设置而后者则是对子元素.他们起作用的首要条件是子元素必须没有被float影响,否则一切都是无用功.margin:0 auto也可以被写成margin:0 auto 0 auto.不能理解的童鞋们可以自己去找找关于css缩写的内容. 垂直…

对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.另外,文中的css都是用less书写的,如果看不懂less,可以把我给的demo链接打开,然后在控制台中查看最终的css,或者是点击codepen上的"View Compiled"按钮,可以查看编译后的css 先看一张图,这是去年cssConf大会时阿里的 @寒冬winter 老师放出来的: 如图所示,CSS布局是可以分为几大块的: 盒子内部的布局 文本的布局…

深入css布局(2) - 定位与浮动      在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识. 上篇文章我们讲完了css布局中盒模型和元素分类的相关知识,同时介绍了box-sizing和行框.这篇我们继续... 一.定位与浮动 上篇我们讲解了不同类型元素的特点,我们可以随意的排列组合他们来达到我们想要的效果.但是他们都是基于一个二维平面的,如果我们想在布局中有遮挡,重叠之类的更丰富效果,我…

深入css布局(1)-- 盒模型 & 元素分类     " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识." 首先来列下大纲 盒模型 IE盒模型 W3C盒模型 box-sizing 元素的分类 块级元素 行内元素 行内块级元素 行框 定位与浮动 文档流 包含块 浮动清除 margin问题 格式化上下文(formatting context) BFC.IFC.FFC.GFC…

前端开发周报:CSS 布局方式与JavaScript动画库 1.常见 CSS 布局方式详见: 一些常见的 CSS 布局方式梳理,涉及 Flex 布局.Grid 布局.圣杯布局.双飞翼布局等.http://cherryblog.site/common-CSS-layout.html 2.几种 JavaScript 动画库推荐JavaScript 库对设计师和开发人员来说,都是非常有用的工具.它们可以为你的网站添加一些超级强大的功能,给用户带来更好的体验.http://www.tuicool.com…

布局初步 所谓布局,其实是指的将网页内容以一定的方式放到合适的位置上去. 布局的基本步骤: 1, 将“当前版面”以视觉上界限明显的方式进行划分若干个区块,划分只用两种方式: a) 上下结构:此时,只要使用若干个盒子,自然就是上下结构,无需其他设置. b) 左右结构:此时使用若干个盒子,并进行相应的浮动,通常的模式: i. 2个盒子:一左一右 ii. 3个盒子:两左一右或两右一左,或一边倒. iii. 更多盒子:通常一边倒. 浮动解释 浮动就像水中的气泡,会“网上浮” 更形象的比喻:大家(所有标签…

学习内容 标准文档流 流动模型(flow model) 浮动模型(float model) CSS基本布局 能力目标 理解标准文档流 使用流动模型实现页面布局 使用浮动模型实现页面布局 掌握常用CSS布局 本章简介 上一章节讲解了盒子模型以及页面元素定位,理解了绝对定位.相对定位.包含块三者之间的关系以及应用场合.例如:绝对定位的页面元素会脱离标准文档流,通过指定的坐标位置进行定位:相对定位则不脱离标准文档流,只是相对于元素原有的位置进行偏移,不挤压其他页面元素.设计师可以通过定位盒子来完成基本…

前言: 布局是WEB开发一个重要的课题,进入XHTML/CSS后,使用TABLE布局的方式逐渐淡出,CSS布局以众多优点成为主流,本文将介绍40个基于CSS的web布局的资源和教程.文章的出处在http://www.noupe.com/css/css-layouts-40-tutorials-tips-demos-and-best-practices.html.文中的不少的例子在一本经典的CSS书籍<CCS: The Missing Manual, 2nd Edition>中都可以找到,据我所…

1. display属性 display是CSS布局的第一站,它控制一个元素以什么“身份”出现在页面布局当中.它的值有很多个,常用的有block,inline,inline-block,table,none.如果你想把一个元素放在页面中,它的display需不需要重新设置是很重要的第一步.   2. 什么时候用width,什么时候用max-width   从我的角度看,理解了这两者有什么区别,也许你就能很容易的去选择该用哪个,因为它们的区别还是挺大的.     - width:给元素设定一个绝对…