CSSpart5

案例：学成在线网页总结

实际开发中不会直接用连接a而是用li包含链接（li+a）的做法

别忘记丢掉px像素单位！！！

记得转换行内块元素 display：block

制作网页之前分区 根据分好的区确定块需要什么容器

---

一、定位

可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

定位=定位模式+边偏移

定位模式用于指定一个元素在文档中的定位方式。边便宜则决定了该元素的最终位置。

1.定位模式

position

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

边偏移

top	top：80px	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	bottom：80px	底部偏移量，定义元素相对于其父元素下边线的距离
left	left：80px	左侧偏移量，定义元素相对于其父元素左边线的距离
right	right：80px	右侧偏移量，定义元素相对于其父元素右边线的距离

 1.相对定位

元素在移动位置的时候是相对于它原来的位置来说的

position：relative；

• 相对于自己原来的位置移动的。top：100px；即向下移动100px，顶端与之前相比差了100px
• 保留原来的位置，别的盒子不能占

2.绝对定位（重点）

移动位置的时候相对于祖先元素

position：absolute；

• 如果没有祖先元素或祖先元素没定位则以浏览器为准定位
• 如果祖先元素有定位（相对、绝对、固定），则以最近一级的有定位祖先元素为参考移动位置
• 不再占有原先的位置（脱标）

3.子绝父相（超级重要）

子级是绝对定位的话父级要用相对定位

• 子级绝对定位不会占位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子
• 父盒子需要加定位权限盒子在父盒子内显示
• 父盒子布局是需要占位置因此只能是相对定位

4.固定定位

固定到浏览器可视区的位置。页面滚动时候它不动。

position：fixed；

• 以浏览器的可视窗口为参照点移动
• 不随着滚动条滚动
• 固定定位不占有原先的位置

5.固定在版心右侧位置

小算法：

• 让固定定位的盒子left：50%，走到浏览器（版心）的一半位置
• 让固定定位的盒子margin-left：版心宽度一半距离，多走版心宽度的一半

6.粘性定位

相对定位和固定定位的混合（在一定范围内滚动后消失 然后滚出范围后又出现）

position：sticky；top：10px；（距离顶部10px的时候开始固定）

• 以浏览器的可视窗口为参照点移动元素
• 粘性定位占有原先的位置
• 必须添加top、left、right、bottom其中一个才生效

总结

•  是否占有原先位置（是否脱标）
• 以谁为基准点移动位置
• 子绝父相！！！！！

7.定位叠放次序

定位布局时盒子重叠，用此控制盒子的前后次序（z轴）

z-index：1；

• 数值为正负数0，默认auto，数值越大盒子越靠上
• 值相同时后来者居上
• 数值后面没有单位
• 只有定位盒子才有z-index属性，标准流和浮动没有。

8.定位拓展

（1）绝对定位盒子居中

加了绝对定位的盒子不能通过margin：0 auto；水平居中

position：absolute；

• left：50%
• margin-left：盒子自身宽度的一半

（2）定位特性

绝对定位和固定定位类似浮动

• 行内元素添加绝对或者固定定位可以直接设置高度和宽度
• 块级元素添加绝对或者固定定位如果不给宽度高度，默认大小是内容的大小

（3）脱标的盒子不会触发外边距塌陷

浮动、绝对、固定都不会触发外边距合并的问题。

（4）绝对（固定）定位会完全压住盒子

浮动元素不同智慧压住它下面标准流的盒子，但是不会压住标准流盒子里面的文字（图片）

但是绝对（固定）定位会压住下面标准流所有的内容

二、网页布局

 

三、元素的显示与隐藏

1.display显示隐藏

display：none；隐藏对象（用的最多）

display：block；除了转换块级元素之外，还有显示元素的意思

display隐藏元素后不再占有原来的位置。

2.visibility显示隐藏

visibility：visible；元素可视

visibility：hidden；元素隐藏

隐藏元素后继续占有原来的位置。

3.overflow溢出显示隐藏

overflow：visible；不剪切

overflow：auto；在需要时剪切内容并添加滚动条

overflow：hidden；剪切

overflow：scroll；总是显示滚动条（不管有没有溢出）

一般我们会隐藏溢出内容，但是有定位的盒子慎用overflow：hidden 因为会隐藏多余部分。