前端学习笔记三CSS盒模型和CSS定位

这两天次要学习了 CSS 盒模型和 CSS 定位。学习笔记如下：

盒模型也叫框模型，构造如下：
W3school 的翻译很好，把 margin 和 padding 翻译成外边距和内边距，防止引起混同。以下是对盒模型中构造的介绍：

1.padding 内边距：可依照上，右，下，左的程序别离设置，也能够通过 top，right，bottom，left 设置。不能够为负值，能够应用 px，em，ex，cm，百分比作为单位。
注：em 为元素的字体高度 The height of the element’s font，如以后对行内文本的字体尺寸未被人为设置，则绝对于浏览器的默认字体尺寸。
Ex 为字母 x 的高度（The height of the letter “x”）。此高度通常为字体尺寸的一半。如以后对行内文本的字体尺寸未被人为设置，则绝对于浏览器的默认字体尺寸。

如果用百分比作为单位，百分比数值是绝对于父元素的 width 计算的。例如如果段落的父元素是 div 元素，则 padding 的百分比数值依照 div 的 width 计算。

2.border 边框：
边框绘制在元素的背景之上。
1）Border-style 是最重要的一个属性。因为如果没有这个属性，就没有边框。
一个边框能够定义多个款式，依照上右下左程序。（也能够 border-left-style 这样指定某个边）例：

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

二者等价，然而 left 要放在前面，否则会被前一条设置四条边的属性笼罩掉。
2）边框的宽度能够用 border-width 指定。也能够用上右下左程序，也能够指定单条边的宽度（和上文 style 的规定一样）。
十分重要：肯定要输出 border-style 属性！否则该属性默认为 none，宽度无论为多少，都是视为 0（不存在边框）。
3）边框的色彩：border-color。规定同上两个。
Transparent 为通明色。实用于有 style 和 width 的通明边框。

Tips：以上三个边框属性的值：

解释：
1）只输出一个值，则四条边都是这个值；
2）输出两个值，则第一个是高低，第二个是左右；
3）输出三个值，则第一个是上，第二个是左右，第三个是下；
4）输出四个值，则是上右下左。

3.margin 外边框
默认值是 0，然而浏览器会提供预约的款式。（即段落高低的空行）
外边距合并：简略来说，就是两条相邻的外边距（包含空元素的高低外边框），如果之间没有任何内边距或是边框的话，便会产生合并。（这也是一串间断的段落两头，段与段之间距离并不大的起因之一）

CSS 定位相干内容的语言表述有些简单，所以本章大多数笔记间接 copy 了 W3Cschool 的 CSS 教程中“CSS 定位”章节的内容。有些用本人的语言加工了一下，更加艰深，不便看懂。

CSS 为定位和浮动提供了一些属性，利用这些属性，能够建设列式布局，将布局的一部分与另一部分重叠，还能够实现已经通常须要应用多个表格能力实现的工作。
定位的根本思维很简略，它容许你定义元素框绝对于其失常地位应该呈现的地位，或者绝对于父元素、另一个元素甚至浏览器窗口自身的地位。

对于框（box，即盒）：
div、h1 或 p 元素经常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相同，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
您能够应用 display 属性扭转生成的框的类型。这意味着，通过将 display 属性设置为 block，能够让行内元素（比方 < a > 元素）体现得像块级元素一样。还能够通过把 display 设置为 none，让生成的元素基本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。
然而在一种状况下，即便没有进行显式定义，也会创立块级元素。这种状况产生在把一些文本增加到一个块级元素（比方 div）的结尾。即便没有把这些文本定义为段落，它也会被当作段落看待：

<div>
some text
<p>Some more text.</p>
</div>

在这种状况下，这个框称为无名块框，因为它不与专门定义的元素相关联。
块级元素的文本行也会产生相似的状况。假如有一个蕴含三行文本的段落。每行文本造成一个无名框。无奈间接对无名块或行框利用款式，因为没有能够利用款式的中央（留神，行框和行内框是两个概念）。然而，这有助于了解在屏幕上看到的所有货色都造成某种框。

CSS 定位机制：
CSS 有三种根本的定位机制：一般流、浮动和相对定位。
除非专门指定，否则所有框都在一般流中定位。也就是说，一般流中的元素的地位由元素在 (X)HTML 中的地位决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中程度安排。能够应用程度内边距、边框和外边距调整它们的间距。然而，垂直内边距、边框和外边距不影响行内框的高度。由一行造成的程度框称为行框（Line Box），行框的高度总是足以包容它蕴含的所有行内框。不过，设置行高能够减少这个框的高度。
以下是定位中用到的属性：

Position 属性（即抉择定位机制）：
Static：元素框失常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创立一个或多个行框，置于其父元素中。（简略来说，就是不论前面的上下左右数值如何，元素地位依照默认值不变）
Relative：元素框依据输出的上下左右数值，偏移某个间隔，并放弃其未定位前的形态。它本来所占的空间仍保留。
Absolute：元素框从文档流齐全删除，并依据输出的上下左右地位，从新绝对于其蕴含块进行定位。元素定位后将生成一个块级框，而不管原来它在失常流中生成何种类型的框。
Fixed：元素框地位跟上述的 absolute 比拟像，不过其蕴含块是视窗自身。

tips：绝对定位是一般流定位模型的一部分，因为元素的地位是绝对于它在一般流中的地位被调整的

其余属性：
overflow 属性：当元素中的内容超出给定时的宽度和高度时，如何显示内容。默认值为 visible（内容会出现在元素框之外），其余可选值包含：
scroll 为左边固定显示滚动条。
auto 为依据内容长短判断是否显示滚动条。
hidden 为不显示超出的的内容。
Clip 属性：设置元素的性质。
Vertical-align：设置元素的垂直对齐形式。
z-index 属性：元素的高低重叠关系。默认为 0，数字越大越靠上。

CSS 浮动定位：
浮动的框能够向左或向右挪动，直到它的外边缘碰到蕴含框或另一个浮动框的边框为止。
浮动框不在文档的一般流中，因而文档的一般流中的块框体现得就像浮动框不存在一样。
不过有的内容浮动元素不会笼罩掉：（见 CSDN 上其他同学的解答）
1. 浮动元素不会笼罩文字内容
2. 浮动元素不会笼罩图片内容
（因为图片自身也属于文本，能够把图片看做是一个非凡的文字）
3. 浮动元素不会笼罩表单元素
（输入框、单选按钮、复选框、按钮、下拉抉择框等）
对于相干内容能够看 segmenfault 下面其他同学对于这方面的问题
浮动定位中比拟重要的 clear 属性：
Clear 属性的值能够是 left，right，both，none，inherit。这个值代表“该框的哪个方向不能挨着浮动框”。

问题：如果一个块中所有元素都进行浮动了，则这个 div 会是空的，不占空间。
解决办法 1：增加一个新的 div，并且设置 clear。例：

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {float: left;}

.news p {float: right;}

.clear {clear: both;}

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>

办法 2：间接把该容器 div 也给浮动了。例：

.news {
  background-color: gray;
  border: solid 1px black;
  float: left;
  }


.news img {float: left;}

.news p {float: right;}

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

这种状况下，为了避免下一个元素被这个浮动元素影响，就须要把整个页面全副浮动，而后在页脚中进行 clear。W3Cschool 的所有页面都用了这个技术，证据找到了哈哈哈：