Learn HTML&CSS the hard way VII

文档流的概念指什么？有哪种方式可以让元素脱离文档流?

---

文档流就是普通流，没有定位浮动什么样式的最开始的那一个层面，文档自上而下，从左到右按顺序排列。

浮动，绝对定位可以脱离文档流。

有几种定位方式，分别是如何实现定位的，使用场景如何？

---

static         默认的定位方式，使元素存在于文档流中，可以不写

absolute    绝对定位，使元素脱离文档流，并且按照top left right bottom属性布置位置，相对   于static以外的第一个父元素定位

relative      相对定位，不脱离当前流，同样可以使用top等属性定位，不过是相对于自己

fixed          同绝对定位，脱离文档流，不同的是会固定在窗口中，不随页面滑动

absolute, relative, fixed 偏移的参考点分别是什么

---

absolute 参考的是除static定位外的第一个有定位的父元素，如果父元素们都没有定位则参考根节点

relative   参考自身

fixed      参考浏览器窗口

z-index 有什么作用? 如何使用?

---

用于判断脱离文档流的元素们的优先级，数字越大优先级越高

z-index:1;

position:relative和负margin都可以使元素位置发生偏移?二者有什么区别

---

都可以产生偏移，但是负margin会放弃之前占有的空间，而相对定位仍然占有之前的空间

如何让一个固定宽高的元素在页面上垂直水平居中?

---

position:absolute;

left:50%;

top:50%;

margin-left:-halfpx;

margin-right:-halfpx;

浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?

---

1.块排成一排

2.内联元素支持宽高

3.浮动元素自动变为块元素

对其他浮动元素：先浮动的永远不会被后浮动的超过，浮动元素不会重叠

对普通元素：可能会覆盖普通元素，使文档流中的元素发生偏移

对文字：文字会跟随围绕浮动元素

清除浮动指什么? 如何清除浮动?

---

清除元素左右两侧存在的浮动元素

clear:both/right/left;

代码

---

CODE

CODE2

花了两个多小时终于把页面写完了，自己有值得表扬和批评的地方。

表扬的地方是认真了一些，放在以前，很多对不齐的地方可能就用像素值调整一下就过去了，这回按百分比来的，在各种浏览器窗口里都应该是居中的，算是经得起考验。

该批评的是，这点东西自己几个月前就做过一遍，没想到这次还是卡了这么久，而且第二道三角形的题目开始完全没思路，只能参考同学的代码，发现大家这两道题都使用了：after和：before这两个伪类，虽然这两个类在task10的任务视频中并没有提及过。不知道大家是怎么想到用这个方法的。也许后面的视频中会出现？记得之前好像有一节答疑课老师似乎讲过这俩的用法，不过当时还没做到这个任务，印象不深，有时间好好温习一遍，不过第二道题，除了使用伪类，完全采用定位的方法应该也是可行的，不过坐标计算会相当麻烦吧。

其实还有一个小问题，就是在设置header的时候，没有采用百分比设置，而是使用的相对定位，这里不使用绝对定位，让nav存在于heade的50%位置然后用负margin微调的方法是因为，一旦对header定位，图片和list的位置就会乱了，不知道怎么修改过来，所以采用了像素的方法。