完全なノートガイド:
フロントエンド HTML&CSS 学習ノート 1 (Shang Silicon Valley の教育ビデオに基づく)
フロントエンド HTML&CSS 学習ノート 2 (Shang Silicon Valley の教育ビデオに基づく)
フロントエンド HTML&CSS 学習ノート 3 (Shang Silicon Valley の教育に基づく)動画)
フロントエンド HTML&CSS 学習ノート 4 (Shang Silicon Valley のティーチングビデオをベース) ティーチングビデオ)
フロントエンド HTML&CSS 学習ノート 5 (Shang Silicon Valley のティーチングビデオをベース)
フロントエンド HTML&CSS 学習ノート 6 (Shang Silicon Valley のティーチングビデオをベース)シャンシリコンバレーのティーチングビデオ）
フロントエンドHTML&CSS学習ノート7（シャンシリコンバレーのティーチングビデオをもとに）
フロントエンドHTML&CSS学習ノート8（シャンシリコンバレーのティーチングビデオをもとに）
フロントエンドHTML&CSS学習ノート9 (Shang Silicon Valley の教育ビデオに基づく)
第61/2話（身長崩壊問題）
1.高度塌陷是由于父元素高度默认由子元素撑开，然而当子元素设置浮动时，子元素脱离文档流，父元素的高度会失去
2.并且由于父元素的高度塌陷了，其下面的元素都会向上移动，造成页面布局混乱
解决办法：
1.将父元素高度写死，即提前设置好（但这样父元素无法自动适应子元素高度，故不推荐）
2.根据w3c标准，页面中的元素都有一个隐含属性叫做Block Formatting Context,简称BFC,该属性默认关闭
*开启BFC后元素默认有如下特性：
*父元素的垂直外边距不会和子元素的重叠
*开启BFC后的元素不会被浮动元素所覆盖
*开启BFC后的元素可以包含浮动子元素
*开启BFC的方式：
*设置（父）元素浮动：能使父元素被子元素撑开，但会导致父元素宽度丢失，且下面的元素会上升
*设置元素绝对定位：
*设置元素为：inline-block（能使父元素被子元素撑开，下面的元素不会上升，但会同样导致父元素宽度丢失，）
*将元素的overflow设置为一个非visible的值（推荐√），如：overflow:auto;
3.在IE6及以下的浏览器中，不支持BFC,也就是说上面的方法无效，但其同样有一个隐含属性HasLayout，作用类似BFC
*开启HasLayout的方式（最有效的一种）：
*将元素的zoom设置为1，例如：zoom:1;
*zoom表示放大的意思，后面的数值表示将元素放大几倍，但是zoom这个样式只在IE8以下支持，在别的中都无效
4.综上，为了解决高度塌陷问题，通常为元素同时添加以下样式：
overflow:auto;
zoom:1;
第63話（ナビゲーションバー演習）
1.这个练习相当于是前面的一个综合练习，涉及到的知识大致如下：
*利用无序列表，然后在 li 中放超链接
第64話（高次崩壊の最終解決）
1.有时希望清除掉其他元素对当前元素的影响，可以使用clear来完成
2.clear可以用来清除其他元素对当前元素产生的影响
3.可选值：
none：默认值，不清除浮动
left：清除左侧元素对当前元素的影响
right：清除右侧元素对当前元素的影响
both：清除两侧浮动元素对当前元素的影响（谁影响大清除谁）
4.解决高度塌陷的方案二：（w3c推荐，但是会添加多余的结构）
当父元素的某个子元素浮动，造成其父元素高度塌陷时：
可以直接在高度塌陷的父元素的最后加一个空白的div，然后清除浮动对这个div的影响（利用上面提到的clear），使其撑起父元素
5.方案三：（最佳方案，原理和效果同上）
通过after伪类向元素的最后边添加一个空白的块元素，然后对其进行清除浮动，例如：
.clearfix:after{
content:""; //添加一个空内容
display:block; //转换为块元素
clear:both; //清除两侧浮动影响
}
*记住要在每个需要清除浮动的元素的class属性中加一个clearfix，如<div class="box1 clearfix"></div>
但是IE6不支持after伪类，所以上面的方法不行，还是只能通过开启HasLayout，例如：
.clearfix{
zoom:1;
}
*综上：同时加
第65話（ハイ崩壊のあらすじ）
自行复习上述各种方案的原理，实在搞不懂直接用最后一种
第66話（PSの基本操作）
1.主要用来测量网页，利用标尺，矩形框
第67・8話（授業案内ページ）
实操，自己动手
第69話（相対位置決め）
1.定位是指可以将指定元素固定到页面任意位置，通过定位可以任意摆放元素
2.通过position属性设置元素定位
可选值：
static：默认值，元素没有开启定位
relative：开启元素相对定位
absolute：开启元素绝对定位
fixed：开启元素固定定位（也是绝对定位的一种）
3.元素开启相对定位后：
*不设置偏移量时，元素不会发生任何变化
*相对定位是相对于元素在文档流中原来的位置进行定位
*相对定位的元素不会脱离文档流
*相对定位会使元素提升一个层级（比如说碰到覆盖情况的时候，会是该元素覆盖别的元素）
*相对定位不会改变元素的性质，块还是块，内联还是内联
4.当元素开启了定位后，可以通过left,right,top,bottom四个属性值来设置元素偏移量
通常只需要使用两个偏移量就可以对元素实现定位，例如在样式中：
.box2{
position:relative;
left: 10px;
top: 10px;
}
70話（絶対位置決め）
1.元素开启绝对定位后：
*不设置偏移量时，元素不会发生任何变化
*开启绝对定位会使元素脱离文档流
*绝对定位会使元素提升一个层级（比如说碰到覆盖情况的时候，会是该元素覆盖别的元素）
*绝对定位会改变元素的性质，内联变块元素，块元素宽度和高度默认被内容撑开
*绝对定位是相对于离他最近的开启了定位的祖先元素进行定位
（一般情况下，开启了子元素的绝对定位都会同时开启其父元素的相对定位）
如果祖先元素都没有开启定位，则默认相对于浏览器窗口进行定位
2.当元素开启了定位后，可以通过left,right,top,bottom四个属性值来设置元素偏移量
通常只需要使用两个偏移量就可以对元素实现定位，例如在样式中：
.box2{
position:absolute;
left: 10px;
top: 10px;
}