【web前端】CSS笔记小结 定位+网页布局+元素显隐（Day6）

来源：黑马程序员pink老师前端入门教程

目录

I. 定位

​①定位组成

✿定位模式

​

 ✿边偏移

※※静态定位

※※相对定位 relative

※※绝对定位 absolute

※※※※子绝父相

※※※※✿由来

※※※※✿练习

※※固定定位 fixed

​

※※※※固定在版心右侧

※※粘性定位 sticky →说是了解就行

※※总结

※※叠放次序 z-index

​※※拓展

​

II. 案例→淘宝焦点图布局制作

✿题目

✿类名

✿提示

✿效果

✿代码

III. 网页布局总结

IV. 元素的显示和隐藏

✿display显示隐藏

​✿visibility显示隐藏

​✿overflow 溢出显示隐藏

​

※※图解

※※※※visible

​ 

 ※※※※hidden

​

※※※※auto（溢出时加）

​

※※※※scroll（溢不溢都加）

✿总结

​

✿案例

---

I. 定位 ①定位组成

✿定位模式  ✿边偏移

※※静态定位

※※相对定位 relative

  不 脱 标 ！！！

※※绝对定位 absolute

    脱 标 ！！！

※※※※子绝父相

※※※※✿由来

※※※※✿练习

题目

 因为没有他的素材，所以我就自己搞了一个猫猫的hhh 

我的效果→猫猫的图是在网上找的ovo图标是用ps搞的kkk！

 代码

※※固定定位 fixed ※※※※固定在版心右侧

 效果

 代码

※※粘性定位 sticky →说是了解就行

※※总结

※※叠放次序 z-index ※※拓展

※※※※绝对定位的盒子居中

垂直同理→步骤里的 left 换 top 即可 

※※※※特殊特性

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

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

II. 案例→淘宝焦点图布局制作 ✿题目

✿类名

✿提示

※※左箭头（也就是小于号<）→ 用超链接标签a做，< ；

※※右箭头（也就是大于号>）→ 用超链接标签a做，> ；

※※居中写法→ 垂直 — top:50%;margin-top:- a px(a是一半盒高)

                            居中 — left:50%;margin-left:- a px(a是一半盒宽)

✿效果

（自己改了改hhh大体思路和老师是一样的ovo~！这次的猫猫还是网图owo！！）

✿代码

    
    
    
    

    



    
        
         <
         >
        

            

            

            

            

            

        
    

III. 网页布局总结

IV. 元素的显示和隐藏

本质：让一个元素在页面中隐藏或者显示出来

✿display显示隐藏
✿visibility显示隐藏

✿overflow 溢出显示隐藏

※※图解 ※※※※visible    ※※※※hidden ※※※※auto（溢出时加） ※※※※scroll（溢不溢都加）

✿总结 ✿案例

※※题目

※※效果→  free和start 按钮的图片都是网上找的w！

经过前

 

经过后  （鼠标截图截不出来。。凑合看吧qvq ）

※※代码

---

恭喜看到这的小伙伴，你已经完成 CSS第六天的学习了嗷~！

下面进入第七天的学习吧(★ ω ★)→

有用的话就点赞评论收藏嗷！！