定位之~拨云见日

原创 lucialiu 随笔 前端基础学习 653阅读 2017-11-20 23:40:24 举报

本来早在就要写日记的,但跟风双十一后忙着退货耽误了时间o(╥﹏╥)o,淘宝不如写代码!况且现在淘宝都已经开始思考看到的页面怎么用布局实现了(* ̄︶ ̄)~

今天讲了固定定位position:fixed;学了做完练习之后,对定位的运用算是拨云见日了,所以有点嗨森~

**固定定位讲完了,那现在一起复习下三种定位和相对的特性吧~**
    一、**相对定位position:relative;**
        特性:
            1.不影响元素本身的特性;
            2.不脱离文档流(元素移动之后原始位置会被保留);
            3.如果没有设置定位偏移量,对元素本身的特性没有任何影响;
            4.提升层级。

    二、**绝对定位position:absolute;**
        特性:
            1.使内联元素支持设宽高;
            2.块标签没有设宽度的时候内容撑开宽度;
            3.完全脱离文档流;
            4.有定位父级的时候相对定位父级发生偏移,没有定位父级的时候相对document发生偏移;
            5.相对定位一般配合绝对定位使用;
            6.提升层级。

    三、**固定定位position:fixed;**
        特性:
            1.使内联元素支持设宽高;
            2.块元素没有设宽度的时候内容撑开宽度;
            3.完全脱离文档流;
            4.相对document发生偏移;
            5.提升层级;
            6.IE6不支持固定定位。

    四、**三种定位使用的场景:**
        固定定位:
            始终显示在浏览器可视区域某一个固定位置
        相对定位:
            需要提升元素层级
            子孙元素有绝对定位时,与其配合
        绝对定位:
            用在内容中某一个装饰性的区域上                                                                                                                                                  

**今天的课程要求是:**
    1.做下图练习:

定位之~拨云见日
2.背诵定位以及相应的特性。

**做这个练习的时候用到的知识**:
1.盒模型;
2.无序列表(ul的子级只能是li);
3.hover伪类;
4.相对定位relative和绝对定位absolute;
5.透明度opacity;

**今天做题过程中出现的问题**:
    1.浮动父级没有设置高度,忘记清浮动了,导致父级高度塌陷,使用浏览器“审查功能发现错误及时纠正了[要谨记浮动元素的父级一定要清浮动;浮动元素的同级一定要浮动];
    2.右侧新闻列表的图片忘记用a标签包裹(已经写进了伪代码但没有用)[做完之后一定要到网页中去看效果然后做相应的调整]。

以下是我今天的练习代码和效果图【因为新闻图上面要加文字,但老师给的是JPG的图,所以自己用了一张网页下载的图】
**1.html代码**

html 代码

**2.css代码**

css 代码

3.效果图[老师给的图片是JPG格式,不能直接用,就用了自己下载的图哦]

定位之~拨云见日

因为路径是自己的文件路径,没有办法在这里点击查看效果,本来有打算同步文件到百度网盘再找一个路径,但把网盘的路径加到HTML的link路径里面还是没有实现,有知道怎么实现的可以告知下就好了,么么哒~

今天讲固定定位的时候,又涉及到锚点的相关知识,自查对锚点的印象太浅,又复习下整个a超链接的内容
a超链接[anchor],把笔记和整章的内容看了一遍,终于记住了锚点怎么用,明天还得再看一遍,以加深影响

定位之~拨云见日

定位之~拨云见日

定位之~拨云见日

定位之~拨云见日

定位之~拨云见日

评论 ( 10 )
最新评论
lut09010909 2017-11-28 09:46:57 10F



lucialiu 8F 2017-11-27 22:23:50 9F

display:inline-block当然也是可以用的呀,只是麻烦的是要去计算同级排列标签显示时候的空格是多少像素,再来设置,多了个计算的步骤,如果是浮动就省去了计算的步骤。哪种方法自己用的顺手就用哪个就好了呀

zhizhongsen 2017-11-27 13:56:42 8F

为什么一定要清除浮动?我也是刚学没多久,个人也是走了很多弯路,但是经过我的摸索和在工作中的实践,不一定所有div都要将内部的浮动元素完美包裹,一步一清浮动有点过于死板了。毕竟前端是给人看的,在样式一样的条件下不要尝试过多的使用float,或者position定位。例如我经常使用display:inline-block来使列表内容居于一行。这是我的一点经验有什么说的不对的希望各位能指出,共同进步。

esperanza 2017-11-26 23:06:20 7F

哇,妙味的(ง •̀_•́)ง加油

lucialiu 1F 2017-11-22 23:35:28 6F

那是,字不美但很清晰

lucialiu 2F 2017-11-22 23:35:04 5F

可惜是字写得比较丑

lucialiu 3F 2017-11-22 23:34:35 4F

其实工作真的很多呀,人生这么长,也不是一定要做前端,但是想学想做的时候,尽力就好,至少是尽人事。一起加油吧

1342246165 2017-11-22 20:50:47 3F

我只想说前端工作不好找,加油!!!

17317830002 2017-11-22 15:57:08 2F

拨开云雾,玩转定位,笔记做的很到位~

bestime 2017-11-21 08:38:26 1F

这是真笔记