可以参考<精通CSS 高级WEB标准解决方案>第三章. 可视化格式模型 可视化格式模型要掌握的3个最重要的CSS概念是 浮动.定位.盒模型. 这些概念控制在页面上安排和显示元素的方式, 形成CSS的基本布局. 主要学习内容: 盒模型的复杂性和特点 如何以及为什么使用外边距 绝对定位和相对定位之间的差异 浮动和清理是如何工作的 1.盒模型概念 盒模型是CSS的基石之一, 它指定元素如何显示以及(在某种程度上)如何相互交互. 页面上的每个元素被看做一个矩形框, 这个框由元素的内容. 内边距. 边框…

概述: 注:加粗斜体字是非常重要的概念,决定着你是不是能看懂那句话,所以不懂的请一定要搜索一下. 页面上的每个元素,都在一个矩形框里.   每个矩形框都是一个盒模型.   每个盒模型都由内容区域(content).边框(border ).内填充(padding)和外边距(margin)组成. 这四个属性都可以独立存在.也就是说,一个盒子可以只有content,也可以只有border,也可以只有padding,也可以只有margin.   (图片来自网络) 关于margin: 可以有负值 Nega…

我们通常设置的宽度和高度,是指盒子模型中内容(content)的宽度和高度.元素的高度,还要加上上下padding和上下border,元素整个盒子的高度还要加上上下margin:宽度类似计算. 注意: 父子元素包含情况下的计算,父亲元素会把儿子元素的整个盒子(包括margin)的大小作为内容. 外边距塌陷(margin collapse),块元素的 top 与 bottom 外边距有时会合并(塌陷)为单个外边距(合并后最大的外边距),这样的现象称之为 外边距塌陷. 一般我们给元素设置背景色不会包…

盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用. 一.css盒子模型概念 CSS css盒子模型 又称框模型 (Box Model) ,包含了元素内容(content).内边距(padding).边框(border).外边距(margin)几个要素.如图: 图中最内部的框是元素的实际内容,也就是元素框,紧挨着元素框外部的是内边距padding,其次是边框(border),然后最…

一.盒子模型(box model) 在HTML文档中的每个元素被描绘为矩形盒子.确定其大小,属性——比如颜色.背景.边框,及其位置是渲染引擎的目标. CSS下这些矩形盒子由标准盒模型描述.这个模型描述元素内容占用空间.盒子有四个边界:外边距边界margin edge, 边框边界border edge, 内边距边界padding edge 与 内容边界content edge. 盒模型的计算有两种:w3c标准盒模型和IE传统盒模型 w3c标准盒模型主要由:magin + border + padd…

#box{ width: 200px; height: 200px; background-color: pink; } 标准盒子模型 box-sizing: content-box; padding 是向外扩的 border 也是向外扩的 怪异盒子模型 box-sizing: border-box; padding 是向内挤的,即不会影响元素的 width 和 height 当 padding 大于一定程度时,就会开始影响 width 和 height border 也是向内挤的,也不会影响元…

原载:Smallni | http://www.smallni.com/collapsing-margin/ 恩,margin叠加一直是个问题,也是我们一直会遇到的问题,很久以前就想把这个知识点整理下,做一个详细的讲解和分析.前一段时间知乎上有人问了这个问题,刚好克军也做了个回答,但回答的不尽其然,并且我做了自己的分析.刚好今天写到自己的博客里,并做一个更详细的探讨. 今天主要介绍的就是:到底神马是外边距叠加?神马情况下外边距会叠加?如何避免外边距叠加? 外边距叠加的定义 请先阅读w3c关于co…

CSS外边距叠加就是margin-collapse,边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距,水平边 距永远不会重合.重叠结果计算规则:①.两个相邻的外边距都是正数时,折叠结果是它们两个之间较大的值.②.两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值.③.两个边距一正一负时,折叠结果是两者相加的和.解决方案:外层元素padding代替内层元素透明边框 border:1px solid transparent;内层元素绝对定位 postion:absolute:外层元…

外边距(Margin)叠加 只有普通文档流中块级元素(块框)的垂直外边距才会发生外边距叠加.行内框.浮动框和绝对定位框之间的外边距不会叠加 两个相邻兄弟块框 父元素与子元素,并 父元素没有内边距或边框时 ,它们的顶和/或底外边距也会发生叠加. 当父元素没有内边距或边框时 当父元素有内边距或边框时 无论子元素是否有内边距或者边框都不会影响叠加 自己的垂直上下外边距叠加 叠加具有组合性,而组合都是上面几种情况的组合,万变不离其中!…

盒子模型 最终元素的总宽度计算公式是这样的: 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距 元素的总高度最终计算公式是这样的: 总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距 外边的点是轮廓…