重头学习html5+css3系列笔记（8）

学成在线实例

头部制作

导航栏注意点：
实际开发中，不会直接用链接a，而是用li包含链接（li+a）的做法
原因：

1. li+a语义更清晰，说明这是有条理的列表型内容
2. 如果直接用a，搜索引擎容易辨别有堆砌关键字的嫌疑，有被降权的风险，从而影响网页排名

搜索块
是一个表单和按钮组合，因为他们都是行内块元素，会导致中间有缝隙，最终无法按照预先的尺寸装下，所以要为其添加浮动，这样会自动清除缝隙

一些小感悟

最终的体会就是，先将整体内容进行纵向分区，然后各个击破，在每个小分区里可能还会继续细分，然后由小到大一步步的完成整个分区，进而完成整个页面
接着通过浮动，内外边距等将每个区块放在对应的位置（有了大致位置后可能还需要微调），这时候就会出现之前pink老师提到的各种隐藏的问题，比如因为加了内边距盒子撑大，第一个盒子加了外边距引起高度塌陷等问题，应该静下心来好好解决。
最后就是改变区块内的内容，比如字体颜色，大小，背景，图片等等

分块是最常用的是div，但是不能一味的全部都使用div标签，要尽量使内容有语义比如h标签标签，列表标签等，这些都是块标签，分区的同时又使文本更加语义化。

定位

浮动可以使无缝隙的元素横向排列，但对元素可以在块内自由移动到某个位置却无能为力，这时候就用到了定位
定位可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中的某个位置，并且可以压住其他盒子

定位=定位模式+边偏移

定位模式

 position: 属性值

项目	Value
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

静态定位static

静态定位是元素的默认定位方式，无定位的意思。
即静态定位是按照标准流的方式摆放位置，它没有位偏移

相对定位relative

相对定位是元素在移动位置时，相对于他原来的位置来偏移的（自恋型）
原来在标准流的位置继续占有，后面的元素仍然以标准流的方式对待他（即该元素不会像浮动元素一样脱标）

绝对定位absolute

绝对定位是元素在移动位置时，相对于他祖先元素来偏移的（拼爹型？）

1. 如果没有祖先元素或祖先元素未定位，则以浏览器为准进行定位（document文档）
2. 如果祖先元素有定位（相对，绝对，固定定位），则会以最近一级的有定位的祖先元素为参考点移动位置
3. 绝对定位不再占有原来的位置（脱标）

绝对定位的盒子居中

加了绝对定位的盒子不能通过margin：0 auto实现水平居中。可以采用下列方法（类似于fixed居于版心右侧的方法，下面会讲到，即将外边距与边偏移配合使用）

1. left:50%
2. margin-left: -盒子宽度的一半

子绝父相

子级是绝对定位，父级要用相对定位

1. 子级绝对定位，不会占有位置，可以放到父盒子里边任何一个地方，不会影响其他兄弟元素
2. 父盒子需要加定位限制盒子在父盒子内显示
3. 父盒子需要占有位置，因此父亲只能是相对定位。
   如轮播图中的布局

当然，还可能有需要子绝父绝的时候，即都不需要占有空间

固定定位fixed

固定定位是元素固定于浏览器可视区（可以看到的区域，比如右上角减号还可以调整）的位置。主要使用场景：可以在浏览器页面滚动时元素位置不会改变。

1. 以浏览器的可视窗口为参考点移动元素，跟父元素没有关系
2. 不随滚动条的滚动而移动
3. 固定定位不占有原先的位置

固定定位小技巧：固定在版心的右侧位置

1. 让固定的盒子left：50%，走到浏览器可视区（也可以看做版心）的一半位置。
2. 让固定的盒子margin-left：版心宽度一半距离，或多一点。
   在这个过程中我尝试了只用%或px，但是在缩放时固定的盒子还是会远离版心，只用%时，缩小会改变版心的大小（因为版心的单位是px），但%的大小不会改变（对应的都是可视区的宽度，而可视区宽度不变）；
   只有px时，因为他是相对于边的距离，在缩小过程中也会变小，自然就会远离版心了。
   然后使用这种方法，其实是将其参考点移动到了版心中央，然后其外边距因为也是px单位，就会和版心的宽度同比例的减小（好聪明！）

粘性定位sticky

可以认为是相对定位和固定定位的混合。

1. 以浏览器的可视窗口为参考点移动元素（固定定位特点）
2. 粘性定位占有原先的位置（相对定位特点）
3. 必须添加top bottom right left其中一个才有效

设置属性后，元素还会在原来的位置，只有拉动滚动条，在要超过设定值的时候，便会固定定位，相当于设置了一个边界，超过边界就会变成固定定位

但是该定位兼容性一般不好，该效果可以通过js实现。

边偏移

边偏移就是定位的盒子最终的位置，有top bottom left right四种属性（只有定位才会有这四种属性）
例如：

 top: 10px;

代表元素相对于参考位置上边线的距离是10px
固定定位时
当写成绝对单位px时，屏幕缩放会改变其与参考位置的距离（px*缩放比例），如果改成相对单位如百分号，则缩放时距离不会变（永远是相对距离，如20%，可视区域面积没有改变，则其20%的大小也不会变）

定位叠放次序z-index

在使用布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序（z是z轴的意思）

 z-index: 1;

数值可以是正整数，0或负整数，默认是auto，数值越大，盒子越靠上
如果属性值相同，则按照书写顺序，后来居上
只有定位的元素才有该属性。

定位的特殊性

绝对定位，固定定位也和浮动类似。

1. 行内元素添加绝对定位和固定定位后，可以直接设置高度和宽度。
2. 块级元素添加绝对定位或相对定位后，如果不给宽度和高度时，则会变成内容的大小
   （个人理解就是定位和浮动都会将元素的宽度高度置为最小值，同时允许你设定元素的宽度高度，即不在按照标准流的那一套规则来了）
3. 浮动元素，绝对定位，固定定位不会触发外边距合并的问题了，其实还是脱标的原理。
4. 浮动元素只会压住他下面标准流的盒子（即由于该元素浮动脱标后后边元素代替了其位置的盒子），但是不会压住下面盒子的文字，图片。但是绝对定位或相对定位会压住下面标准流所有的内容。
   浮动之所以不会压住文字，因为其最初的目的就是为了做出文字环绕效果
5. 如果一个元素既有左又有右属性，或既有上又有下，则优先会左和上。