前端学习笔记三CSS盒模型和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定位

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的所有页面都用了这个技术，证据找到了哈哈哈：