盒模型、浮动和定位是CSS中最重要的三个概念。它们共同决定了一个元素在页面中以怎样的形式进行排布与显示。

一、盒模型

　　1. 定义

　　　　盒模型是CSS的核心概念。一个页面中，所有的元素（不管他最终显示是圆形、矩形还是三角形）都被看作一个矩形盒子，这个盒子包含了内容区、内边距、边框和外边距。

图1. CSS盒模型

　　　　我们可以把它想象成现实世界中网购的快递盒子，外边距就是这个盒子离其他盒子的距离，边框就是这个盒子的材料，内边距就是内层缓震的泡沫，而内容区自然就是你网购的物品。但难以理解的是CSS的盒模型与现实生活中的快递盒子对宽高的定义不同。人对快递盒子的宽高定义包括了盒子材料本身，而在CSS中，盒模型的width和height属性描述的是内容区的宽高，不包括内边距和边框。只要理解了盒模型与现实生活中盒子的联系与区别，那么盒模型很快就能为我们所用。

　　2. 属性

　　　　以上提出这个问题我们也可以通过定义一个盒子的box-sizing属性来解决。box-sizing默认为content-box，可以修改为border-box来保证CSS中的盒模型width和height也把内边距和边框包含进来。这种计算宽高的方式比原来更加直观，因为它更贴近现实生活。

　　　　还有一个问题是属性大小的百分比定义。因为编写CSS代码时，高度属性一般不会定义，而通过内容的多少来自适应规定高度（保证了内容不会无端消失）。因此，除了高度的百分比与包含盒子的高度有关以外，其他的长度使用百分比都根据包含盒子的宽度来计算（包括垂直方向上的padding-top、padding-bottom、margin-top和margin-bottom）。

　　3. 包含盒子

　　　　补充以上的概念，什么是包含盒子？当定义像 position: absolute 这种使盒子脱离文档流的属性以后，包含盒子就变成了 <html></html> ，其他状态下，包含盒子都为直接的父元素。

二、可见的格式化模型

　　了解了盒模型以后，我们可以来观察如何来格式化和定位一个盒模型了。我们常提到“块级元素”“行级元素”，实际上是这些元素以“块盒子”和“行内盒子”的模型存在，通过调整display属性可以切换一个元素是行级还是块级。块盒子沿垂直方向堆叠；行盒子沿水平方向堆叠，不够位置了才换行。我们都知道块盒子可以自由设置宽高，行内盒子设置宽高无效。同时，比如我们在HTML中写入的有实际内容的文字也会组成DOM节点（像 <strong>、<em> 这种标签也同样），它们是“行盒子”，只能通过line-height属性来调整高度。总而言之，我们只需要关注①块盒子的宽高可自由定义；②行内盒子的宽高无效；③行盒子只能定义“line-height”调整高度，这三点基础就足够了。

三、margin塌陷（margin折叠）

　　常规的盒子中有一种机制是margin折叠，这经常给我们布局网页带来困扰：在垂直方向上，两个外边距相遇时，会折叠成两个中较大的一个外边距（外部盒子与内部盒子的外边距也同样会折叠）。遇到这种情况怎么解决呢，答案是用一些黑客写法：定义一个细小的透明border，它的属性为 border: 1px solid transparent; ，这样肉眼看不出，外边距也不会折叠到一起。又或者直接使用padding取代margin，不会产生折叠。

四、浮动

　　浮动会使盒子脱离正常的文档流，但它被设计出来的目的原本是为了让文本可以环绕图片，因此跟 position: absolute 它们又有些许差别。

五、浮动闭合清除原理

　　由于浮动的元素不会在文档中占有位置，因此它的高度不会把装载它的（不是浮动盒子的）父盒子撑开。有时候我们需要阻止行盒子环绕在浮动盒子外面，CSS为我们提供了clear属性。它的值有left、right、both和none，用来指定这个行盒子的哪一侧不能紧挨着浮动盒子。因此要想清除浮动闭合，我们又可以用一个黑客写法，利用一个空div，设置它的clear为both，这样这个空的div就左右两侧都不会贴着这个浮动的盒子。同时，设置这个div为 display: block ，这个空div的宽度是默认和父盒子同样宽的，因此它会紧贴在浮动盒子的下方。由于这个div是在文档中占有空间的，因此父盒子就会被撑开。具体的代码如下：

 .outer {

     border: 1px solid black;

 }

 .inner1 {

     float: left;

     background: greenyellow;

     width: 50px;

     height: 30px;

 }

 .outer::after {

     content: '';

     display: block;

     clear: both;

 }
 <div class="outer">

     <div class="inner1">

         Hello world

     </div>

 </div>

六、其他新式CSS布局模块

　　1. 弹性盒子布局模块（Flexible Box Layout Module）

　　　　Flexbox是它的简称，它支持对子元素水平垂直布局，可以设置子元素的大小、间距和对齐方式，此外可以调整使子元素渲染到页面的顺序跟HTML顺序不同。

　　2. 网格布局模块（Grid Layout）

　　　　网格布局实现了源代码次序的完全分离，从内容结构和个别模块的表现中抽象出网格系统。网格系统的目标是取代落后的浮动和定位元素布局方式。

　　3. 多栏布局（Multi-column Layout Module）

　　　　多栏布局可以实现我们常提到的“瀑布流”，浏览器会自动根据可用宽度进行调整。

总结：我们介绍了盒模型，内外边距、宽高会如何影响盒子的大小，了解了块盒子、行盒子、行内盒子、浮动盒子等区别。我们还学习了如何解决margin塌陷的问题，懂得了清除浮动闭合的原理。

林大妈的CSS知识清单（二）可见格式化模型（内含margin塌陷与浮动闭合的解决方案）的更多相关文章

  1. 林大妈的CSS知识清单（一）添加样式

    回顾CSS选择符,学习接入样式的更多方式. 一.选择符 1. 种类 ① 类型选择符:直接的HTML标签名,例如: body.p.div 等: ② 后代选择符:空格,例如: div p 选择div中的所 ...

  2. 林大妈的JavaScript基础知识（三）：JavaScript编程（3）原型

    在一般的编程语言中,我们使用继承来复用代码,做成良好的数据结构.而在JavaScript中,我们使用原型来实现以上的需求.由于JavaScript专注于对象而摒弃了类,我们要明白原型和继承的确是有差异 ...

  3. WEBBASE篇： 第五篇， CSS知识3

    CSS知识3 框模型: 一,外边距(上文) 二, 内边距    1,什么是内边距? 内边距就是内容与元素边缘之间的距离: 注: 内边距会扩大元素边框内所占的区域的 语法: padding: 四个方向的 ...

  4. WEBBASE篇： 第四篇， CSS知识2

    CSS知识2 一, 尺寸 与 边框 CSS单位 1,尺寸单位:(1)px 像素   (2)%   (3) in 英寸  lin = 2.54cm (4)pt 磅 1pt = 1/72in    ppi ...

  5. WEBBASE篇： 第三篇， CSS知识1

    第三篇, CSS知识1 一,CSS 介绍 CSS: Cascading Style Sheets ---样式表 HTML: 搭建网页结构: CSS: 在网页结构基础上进行网页的美化: 二,CSS的使用 ...

  6. css进阶之二：flex弹性布局

    布局模式是指一个盒子与其兄弟.祖先盒的关系决定其尺寸与位置的算法.css2.1中定义了四种布局模式,分别是块布局.行内布局.表格布局.以及定位布局.css3引入了新的布局模式Flexbox布局,灵活度 ...

  7. 【springboot】给你一份Spring Boot知识清单

    目录: 一.抛砖引玉:探索Spring IoC容器 1.1.Spring IoC容器 1.2.Spring容器扩展机制 二.夯实基础:JavaConfig与常见Annotation 2.1.JavaC ...

  8. CSS知识回顾--读《CSS 那些事儿》笔记

    由于之前有了解过CSS的相关知识,有了一定的基础,所以读起<CSS 那些事儿>不是很有难度,况且我现在读起来时,CSS3和HTML5比较流行,这里只是记录一些CSS知识记录,不做详细铺开, ...

  9. CSS标签选择器(二)

    一.CSS选择器概述 1.1.CSS功能 CSS语言具有两个基本功能:匹配和渲染 当浏览器在解析CSS样式时,首先应该确定哪些元素需要渲染,即匹配哪些HTML元素,这个操作由CSS样式中的选择器负责标 ...

随机推荐

  1. PHP批量写入数据、批量删除数据

    批量插入可以参考$sql = "insert into data (id,ip,data)  values ";for($i=0;$i<100;$i++){$sqls[]=& ...

  2. Oracle CDC (Change Data Capture)更新数据捕获——Asynchronous HotLog Mode（附带简单的kettle任务实现数据同步）

    Performing Asynchronous HotLog Publishing Step 1   Source Database DBA: Set the database initializat ...

  3. java程序引用别的jar包打包方法

    参考文章:http://www.cnblogs.com/lanxuezaipiao/p/3291641.html 目前亲测:eclipse打包: 1.不需要手动写mainfest.inf 先利用ecl ...

  4. java.lang.reflect.Method.getAnnotation()方法示例【通过反射获取到方法对象再获取方法对象上的注解信息】

    转: java.lang.reflect.Method.getAnnotation()方法示例 java.lang.reflect.Method.getAnnotation(Class <T&g ...

  5. C2B电商三种主要模式的分析_数据分析师

    C2B电商三种主要模式的分析_数据分析师 在过去的一年中电商领域血雨腥风,尤其是天猫.京东.苏宁.当当.易讯等B2C电商打得不亦乐乎.而随着B2C领域竞争进入白热化阶段,C2B模式也在天猫" ...

  6. nodeslector使用

    问题: node节点挂了一个, 无法切换到另一个node上 解决: .指定了 nodeslector .设置了下面: hostNetwork: true dnsPolicy: ClusterFirst ...

  7. mysql innodb阻塞分析

    http://blog.csdn.net/hw_libo/article/details/39080809

  8. Hibernate三种状态：瞬时状态、持久化状态、离线状态

    三种状态及相互转化 瞬时状态(transient):刚new出来一个对象,还没有被保存到数据库中 持久化状态(persistent):已经被保存到数据库中或刚从数据库中取得 离线状态(detached ...

  9. java数据结构之LinkedHashMap

    一.LinkedHashMap源码注释 public class LinkedHashMap<K,V> extends HashMap<K,V> implements Map& ...

  10. 《精通并发与Netty》学习笔记（04 - Google Protobuf介绍）

    一 .Google Protobuf 介绍 protobuf是google团队开发的用于高效存储和读取结构化数据的工具,是Google的编解码技术,在业界十分流行,通过代码生成工具可以生成不同语言版本 ...