css盒模型研究
css的盒模型一直是一个重点和难点，最近由后端的学习转到前端，觉得有必要深入研究一下css的盒模型。
1.万物皆盒子
我们必须要有一个理念，在html的世界里，万物皆盒子，那就是任何一个html元素都是一个盒模型。比如一个div，一个标题，一个段落。他们本质上都是一个盒模型。
2.盒模型的结构
如下所示。
注意它的宽度和高度指的是它元素的宽度和高度。元素到边框之间的区域叫做padding(内边距），边框在往外扩展的区域就叫做外边界。外边界就是整个盒模型能到达的最遥远的地方，也是保证其他的盒子不会侵袭这个盒子的边界线。
有几个点需要注意：
a.首先分析盒模型，要找准你分析的对象，比如一个div对象。上图中所有盒模型的所有术语（width,heghit，padding）都是针对该盒模型而言的。这时候你就不要去管它旁边的，或者它内部的其他元素。只需要分析这个对象就好了。
b.width和height指的是元素的宽度和高度，确切的说，应该是这个盒模型的元素可以使用的宽度和高度，事实上，它里面的元素可能并没有所规定的高度和宽度那么大，也有可能超出这个范围。但是在IE浏览器中，这个高度和宽度是内容区+内边距+边框的距离。我们可以通过box-sizing:border-box;来设置一个盒子是采用IE的模式来计算宽高。
c.background-color或者背景图像所填充的区域是包含元素+内边距的内容。利用这点我们可以来做一些实验。
d.边框和外边距之间的内容默认是透明的。
以上便是一个盒模型的所有元素。下面我们先来看一个例子，对盒模型有个直观的了解。
<body>
<div id="box1">
<h1>a box</h1>
</div>
</body>
其css代码如下
* {
margin:;
padding:;
}
#box1 {
background-color: #C6F08C;
padding: 5px;
color: white;
margin: 5px;
width: 300px;
height: 300px;
}
因为有些浏览器默认会提供margin和padding，为了方便我们试验观察，这里我们先强制设为0，如上面的第一个css所示。运行上述的代码以后，我们看到页面展示的内容是这样的。
从这里你看不出什么东西，这时候可以利用google的f12,观察html元素。选中div id=“box1”这个元素，这时候将展示出他的盒模型，如下图所示。
你可以尝试勾选上图中box1的css元素，观察右侧html页面的实际变化，比如，当我们将padding:5px这个元素不选中以后，盒模型变成如下所示。
如果你自己操作，仔细观察，就会很明显的发现，划掉padding以后，这个box1的背景颜色的长度和宽度变小了，因为background包含的是element+padding，现在没有了padding，总的面积就减少了。另外一个变化是内容“a box"变得紧贴着边沿。同样是因为padding变为0了。元素和边框之间没有其他东西了。
读者可以在尝试划掉margin，就会发现整个盒模型紧贴着浏览器的边沿，如下所示。
我们继续做实验，把padding依然设为5，而把margin设为-10.看看这时候页面的样式。
我们发现浏览器的边沿侵占进了box1这个盒子的边沿（上边沿和下边沿），造成我们只看得到a box这行字的部分，事实上，box1的边框内部（包含padding和元素）是没有任何改变的，只是因为margin变为-10，则它的领地位置变得是从边框往里缩进了10个像素，也就是说放在它前后左右的其他盒子(如果没有盒子的话，就是浏览器的边沿）都可以侵占到它bordern内10个像素。
我们可以得出如下结论：
a.padding是针对box的元素而言的，它指代的是内部元素与边框之间的区域。
b.margin则是针对于其他的box而言的，它表示边框能到的最远位置，也是其他的盒子能接触该盒子的极限位置。
3.盒子中的盒子
经过上面篇幅的介绍，我们大概知道了盒模型的主要元素。现在我们在google浏览器中将目标定位在box1中的h1元素。按照任何对象都是一个盒子的理论，这也是一个盒子。我们来看一下它的布局。
我们看到，h1这个盒子，它的长X宽是300X42。margin和padding都是0.因为box1的长宽为300X300.所以整个h1到外边界的部分最大也就是300X300.我们可以做个试验，设置h1的padding和margin。
可以看到这时候的h1的element+padding+margin才是300.证明了我们的猜想：子盒子的外边界能到的最大地方就是父盒子的元素所规定的长宽。
4.盒子与盒子
再新建一个盒子，box2,其css如下所示。
#box2 {
background-color: blue;
width: 300px;
height: 300px;
padding: 5px;
}
观察到上面的css，我们没有设置box2的margin，来看看效果。
因为box2没有设置margin，所以它的左侧是紧挨着浏览器边缘的。但是由于box1设置了margin，所以box1和box2接壤的地方是有5px的空间隔离的。
我们设置一下box2的margin，设为5px，再看看效果。
我们发现，两个box的margin折叠了，也就是说box1的下外边距+box2的上外边距并不是5+5=10，而是只有5.事实上，假如我们将其中一方的margin设置得比另一方大，则会取大的那一方为准。如下所示。
不仅在兄弟盒子之间会发生折叠，父子盒子之间也会。比如说box4是box3的子元素，两者都设置了margin，并且box3没有设置padding和border，那么box3和box4的top margin将会重合，box3与兄弟盒子之间的top margin为box3与box4之间较大者。
#box3 {
background-color: yellow;
width: 300px;
height : 300px;
height: 300px;
margin:5px;
/* padding:5px; */
}
#box4 {
background-color: green;
width: 200px;
height: 200px;
margin:50px;
}
上述的css的效果如下。可以看到除了top margin,box4其他的方面都可以按照我们对盒子的原本理解来解释。不管的左、右，下外边距都是相对于box3的element来说的。（box3的element为300X300，box3的外边距设置为50，所以实际的box4的元素为200X200.）。但是如你所见，box4上外边距跟box3重合了，他共同跟外部盒子的上外边距为两者中的大者（50px）,而box3的左右下外边距依然是5px.
而一旦设置了box3的上内边距，则上述的折叠现象将不复存在。如下图所示。
外边距的折叠只发生在普通的块之间的垂直位置上，行内框、浮动框或绝对定位之间的外边距不会折叠的，比如说当一个盒子被标注成float的时候。如下所示。
可以发现两个盒子之间的margin为5+5=10了。
外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。
PS:当margin-left和margin-right都设为auto的时候，框将在父容器中自动居中。
总得来说，关于css的盒模型，要多去实践，才能发现其中的规律。
css盒模型研究的更多相关文章
- 尖刀出鞘的display常用属性及css盒模型深入研究
一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-bloc ...
- 【前端盲点】DOM事件流论证CSS盒模型是否具有厚度
前言 很久没有扯淡了,我们今天来扯淡吧. 我今天思考了一个问题,我们页面的dom树到底是如何渲染的,而CSS盒模型与javascript是否有联系,于是便想到一个问题: CSS的盒模型具有厚度么??? ...
- [k]css盒模型
box-sizing : content-box || border-box || inherit 1.content-box:此值为其默认值.元素的宽度/高度(width/height)等于元素边 ...
- 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案
概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...
- CSS盒模型
CSS盒模型是CSS 可视化格式化系统的基石,它是理解样式表如何工作的核心概念.盒模型用于元素定位和页面布局.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘 ...
- 第 16 章 CSS 盒模型[下]
学习要点: 1.元素可见性 2.元素盒类型 3.元素的浮动 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一．元素可见性 使用 vis ...
- 第 16 章 CSS 盒模型[上]
学习要点: 1.元素尺寸 2.元素内边距 3.元素外边距 4.处理溢出 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一．元素尺寸 C ...
- 7.css盒模型
所谓的盒模型,其实就是把元素当成盒子,元素里的文本就是盒子里的东西. 而根据元素的特效,其盒模型的特效也不同,下面是一些总结: 1.块级元素(区块) 所谓块级元素,就是能够设置元素尺寸.有隔离其他元素 ...
- css盒模型和块级、行内元素深入理解
盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成,需要了解的朋友可以深入参考下 一.CSS盒模型 盒 ...
随机推荐
- 分布式缓存之Ehcache与terracotta - Terracotta服务器概念篇
1.介绍 Terracotta服务器为Terracotta产品提供分布式数据平台.Terracotta服务器集群被称为Terracotta服务器阵列(TSA).Terracotta服务器阵列可以从单个 ...
- 二维，多维数组排序array_multisort()函数的使用
对于数组的排序,很很多方法:随便百度了一下 sort() - 以升序对数组排序 rsort() - 以降序对数组排序 asort() - 根据值,以升序对关联数组进行排序 ksort() - 根据键, ...
- 异常:This application has no explicit mapping for /error, so you are seeing this as a fallback.
出现这个异常说明了跳转页面的url无对应的值. 原因1: Application启动类的位置不对.要将Application类放在最外侧,即包含所有子包 原因:spring-boot会自动加载启动类所 ...
- debug断点调试
debug断点调试 1,虫子启动2,F6 执行断点的下一步,下一个语句 F5 进入方法 F8 执行到结束 查看表达式的值:选中查看的表达式,接着按 ctrl ...
- 人体姿态的相似性评价基于OpenCV实现最近邻分类KNN K-Nearest Neighbors
最近学习了人体姿态的相似性评价.需要用到KNN来统计与当前姿态相似的k个姿态信息. 假设我们已经有了矩阵W和给定的测试样本姿态Xi,需要寻找与Xi相似的几个姿态,来估计当前Xi的姿态标签. //knn ...
- ES6这些就够了
刚开始用vue或者react,很多时候我们都会把ES6这个大兄弟加入我们的技术栈中.但是ES6那么多那么多特性,我们需要全部都掌握吗?秉着二八原则,掌握好常用的,有用的这个可以让我们快速起飞. 接下来 ...
- pyhton 关于 configparser 配置 模块 实践使用中碰到的坑
今天做一个ATM的练习,想要用configparser模块,写一个配置文件,存放用户信息. 结果状况连连,叫苦不迭. 我用configparser模块,想要对配置文件,进行读.写.改.查 功能. 其中 ...
- Python---初识堡垒机
在学习堡垒机之前,我们需要首先了解下Python的paramiko模块,该模块机遇SSH用于连接远程服务器并执行相关操作. SSHClient 用于连接远程服务器并执行基本命令 基于用户名密码连接: ...
- AngularJS 控制器通信
指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式 基于event传播的方式 service的方式 基于scope继承的方式 最简单的让控制器之间进行通信的方法是通过scope的继承 ...
- day2-Python基本数据类型介绍
百度云连接 链接:https://pan.baidu.com/s/1hsGQx7m 密码:u07q