HTML入门学习笔记
Posted 春风十里不如写代码
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML入门学习笔记相关的知识，希望对你有一定的参考价值。
一、浮动float
html标签中，有一些标签称为块标签（Block, 如：<p>、<div>），对于这样的标签，如果我们不说明其宽度，它将占满它可以使用的所有横向（水平）空间。即使设置了宽度，它也不会与同属一个父容器其它元素同处一行。
而有一些标签称为行内标签（Inline, 如：<span>、<img>），这样的标签默认会与同属一个父容器的其它元素同处一行。
例子：
<p style="border:1px solid red;">段落一</p>
<p style="border:1px solid green;">段落二</p>
<p style="border:1px solid blue; width:200px;">段落三</p>
<span style="border:1px solid red;">Span1</span>
<span style="border:1px solid green;">Span2</span>读者可能会有疑问，不是说块标签会占满横向空间嘛，怎么3个段落两端和浏览器边框之间还有一段间隙呢?
这是由于默认情况下，<body> 标签会有一点留白，你可以在 <body> 标签中添加样式，如 <body style="margin:0px;>，试试看，是不是没有间隙了?
块标签或行内标签只是针对标签的默认情形而言，我们可以使用样式
display:inline令<p>标签显示为行内标签的样子，同样也可以使用样式display: block令<span>标签显示为块标签的样子。
OK，讲到这里可能有人会记下这样一句话：如果要让元素们同处一行，就把它们的 display 样式属性设置为inline。
可别这样，我们还有更好的办法，上面只是为了插叙一下块标签和行内标签的概念。
把上面例子中的代码修改一下，在每个 <p> 标签的样式中都插入 float: left :
<p style="border:1px solid red;float:left;">段落一</p>
<p style="border:1px solid green;float:left;">段落二</p>
<p style="border:1px solid blue; width:200px;float:left;">段落三</p>正如你看到的，样式属性 float 可以让元素产生”浮动”效果，上面的例子让3个段落都向左浮动，于是它们就一个挨个地”飘”到一起了。当然，也可以设置为向右浮动或不浮动。
二、定位position
1.相对定位
relative：相对于原来位置移动，元素设置此属性之后仍然处在文档流中，不影响其他元素的布局
1.规定元素垂直方向的位置：top：上偏移量；bottom：下偏移量
2.规定元素在水平方向的位置： left：左偏移量；right：右偏移量
2.绝对定位
absolute:元素会脱离文档流，如果设置偏移量，会影响其他元素的位置定位
absolute定位原理剖析：
1.在父元素没有设置相对定位或绝对定位的情况下，元素相对于根元素定位（即html元素）（是父元素没有）。
2.父元素设置了相对定位或绝对定位，元素会相对于离自己最近的设置了相对或绝对定位的父元素进行定位（或者说离自己最近的不是static的父元素进行定位，因为元素默认是static）。补充：网上有人解释为元素会相对于第一个不是static的父元素定位，我觉得这很容易让人产生误解。
总结：
relative：定位是相对于自身位置定位（设置偏移量的时候，会相对于自身所在的位置偏移）。设置了relative的元素仍然处在文档流中，元素的宽高不变，设置偏移量也不会影响其他元素的位置。最外层容器设置为relative定位，在没有设置宽度的情况下，宽度是整个浏览器的宽度。
absolute：定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的，如果没有父元素设置绝对或相对定位，则元素相对于根元素即html元素定位。设置了absolute的元素脱了了文档流，元素在没有设置宽度的情况下，宽度由元素里面的内容决定。脱离后原来的位置相当于是空的，下面的元素会来占据位置。
以上是关于HTML入门学习笔记的主要内容，如果未能解决你的问题，请参考以下文章