Web开发基础（二）：CSS框模型（Box Model）、定位与浮动

CSS的决定的HTML标签特性

HTML的标签，可以简单分为三类

类别	特性
内联元素/行级元素（inline） 等	内容决定元素占位大小 默认不可以通过CSS改变宽高
块级元素（block） 等	独占一行 默认可以通过CSS改变宽高
行级块元素（inline-block） 如	内容决定占位大小 可以通过CSS改变宽高

实际上，标签的这些特性还是由CSS隐式决定

任何一个标签都有一个隐式的CSS属性 display
行级元素、块级元素、行级块元素的 display 属性默认取值分别为 inline、block、inline-block
改变该属性即可以改变该标签的默认特性
也就是说设置内联标签的 display 属性为block时，该标签里的内容就独占一行且可以用CSS设置宽高，，诸如此类

所有 inline 的元素（包括行级块元素），都具有文字属性，元素与元素间可用空白符产生空白，也就是说不使用空格符，元素间就不会有空隙

---

CSS 框模型 (Box Model)

先引入一个文档流的概念：文档流，标准文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下地流式排列

通常标签会自带很多属性，比如 padding、margin 等，
这些属性值往往不是我们想要考虑的，或者把标签定义为其他功能
可以使用通配符选择器，初始化所有标签

*{
	padding:0;
	margin:0;
}

通配符权重为0，再定义其他样式时无需考虑优先级，方便，所以使用它初始化标签

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式

margin、border、padding、element（height + weight）

如下图所示

框模型的元素占位大小的计算方式如下

内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边
外边距可以是负值，而且在很多情况下都要使用负值的外边距

大多数浏览器中，元素的背景是内容、内边距和边框区的背景，不包括外边距
将 border 的颜色设置为 transparent 时，border 就可以作为额外的内边距使用，而且在需要时可以使其可见

垂直外边距合并
当两个外边距相遇时将合并为一个外边距，并且取大值

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并

甚至有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并。

只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并

---

CSS 定位 (Positioning)

CSS有三种基本的定位机制：普通流、浮动和绝对定位

---

CSS 定位 (position) 属性允许对元素进行定位
position 属性会影响元素框的生成方式，它有四种取值

取值	效果
static	元素框正常生成，作为文档流的一部分
relative	元素框相对于原起点偏移某个距离
absolute	元素框不再在文档流中占据位置 元素相对于最近的父级元素定位， 如果没有，相对于其最初包含块定位， 且生成一个块级框
fixed	包含块为视窗本身的absolute

---

CSS浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止
浮动元素不在文档流中


框1脱离文档流，挡住了框2

如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。
如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”。。。好XX的感觉

浮动框旁边的行框被缩短，从而给浮动框留出空间，行框会围绕浮动框

使用clear属性清除元素某侧受到的浮动效果

---

2019/5/16