盒模型、浮动和定位是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. 解决WAMP Server与IIS端口冲突问题

    版本前提: 腾讯云服务器 windows server 2012 R2 WampServer3.10  64bit 有两种思路 一.修改wamp端口 文件位置   C:\wamp64\bin\apac ...

  2. Python类call函数的作用

    call函数可以把类变成函数来调用call方法 class Demo(): def __init__(self, name): self.name = name def __call__(self): ...

  3. 一百零四：CMS系统之修改邮箱界面

    在base.css中加一个全局的css控制宽度 .form-container{ width: 300px;} 视图 class ResetEmailView(views.MethodView): d ...

  4. PyQt5中QTableWidget设置列宽大小的几种方式

    我们在使用QTableWidget的时候,经常会出现列宽大小和我们想象不一致的情况,如下图: 内容不能完全显示,需要手动调整列宽才能显示完全. 还有如下图: 因此需要我们擅于调整列宽为我们所使用,现将 ...

  5. c++ STL之map

    map内部自建一颗红黑树(一 种非严格意义上的平衡二叉树),这颗树具有对数据自动排序的功能,所以在map内部所有的数据都是有序的,map中的元素是自动按Key升序排序,所以不能对map用sort函数: ...

  6. LVS系列一、LVS集群-NAT模式

    一. 集群概述 1. 什么是集群? 一组各自相互独立且又相互依赖的,通过高速网络互联的计算机组成的一个计算机组, 以单一的系统模式加以管理, 为用户提供服务, 对用户来说, 用户只会认为对方是一个服务 ...

  7. Python中使用第三方库xlrd来写入Excel文件示例

    Python中使用第三方库xlrd来写入Excel文件示例 这一篇文章就来介绍下,如何来写Excel,写Excel我们需要使用第三方库xlwt,和xlrd一样,xlrd表示read xls,xlwt表 ...

  8. linux定时脚本：删除linux/HDFS上过期文件

    一.定时删除linux上定时的文件 显示20分钟前的文件 -exec ls -l {} \; 删除20分钟前的文件 -exec rm {} \; 显示20天前的文件 -exec ls -l {} \; ...

  9. 并查集 --cogs456 岛国

    题目链接:http://cogs.pro:8081/cogs/problem/problem.php?pid=pNyNQiqge 思路: 基础是并查集,将两个相邻的岛算作一个集合,每次若合并成功,则N ...

  10. Eslint常用命令

    Eslint常用命令 自动修复(针对整个项目) npm run lint -- --fix 运行如上命令,eslint 会自动修复一些简单的错误. 全局安装 npm install -g eslint ...