前端初学,正糊涂与定位position阶段

原创 lucialiu 随笔 前端基础学习 1051阅读 2017-11-19 14:40:00 举报

之前的学习的日记在博客园,每天登陆都要重置迷密码,到今天终于重置密码也登陆不进去了,还是换个更好的平台记录和像前辈们请教前端的知识吧~
从开始什么都不懂到学到定位position之前,都觉得非常顺心,每天都痴迷觉得很有趣,写好老师给的每一个练习就有一种冬日沐浴阳光的心情,到定位就突然有点迷糊了,不知道要怎么把定位用好.用float就像是坐飞机特别便利,用position就像是踩高跷分分钟不知所以然,特别小心翼翼。
因为被position刺激到差点就得了练习恐惧症,但想做并且已经喜欢的事情是不能轻易放弃的,那先看看周末小练习的原图吧:

看到图之后首先想到:
1.盒模型的计算;
2.无序列表(一定要先清除默认样式);
3.用浮动让内容块元素标签在一行显示{
float浮动的特性:
a.块元素在一行显示;
b.内联元素支持宽高的设置;
c.没有设置宽度的时候内容撑开宽度;
d.脱离文档流(所以一定要记得清除浮动的高度塌陷问题);
e.阻止margin叠压和传递的问题;
清除浮动塌陷的办法:
a.给浮动元素的父级元素设高度;
b.在浮动元素的父级元素结束标签之前加空标签,并对其加样式clear:both;
c.给浮动元素的父级元素加样式display:inline-block;
b.在浮动元素的父级元素结束标签之前加<br clear="all">;
d.父级元素也一起浮动;
e.在浮动元素的父级元素加after伪节点;
};
4.用到相对定位和绝对定位。{
position;relative的特性:
a.不影响元素本身的特性;
b.不使元素脱离文档流(元素位移之后原始的位置会被保留下来);
c.如果没有定位偏移量。对元素本身没有任何影响;
d.提升层级。
position;absolute的特性:
a.使元素完全脱离文档流;
b.是内联元素支持宽高的设置;
c.块元素标签内容撑开宽度;
d.如果有定位父级 那相对定位父级发生偏移,没有定位父级就相对document发生偏移;
e.相对定位一般都是配合绝对定位使用;
f.提升层级。
}

html 代码

css 代码

做这个作业遇到的问题:
1.头部导航条的上面那个hoverc出现的橘色横线是嵌套了一个div写的,因为不熟练定位,写完都不知道是否恰当,等老师明天将练习的时候需要额外注意听,如图


2.主内容区域知识“生活服务”导航的内容,但是因为写的时候一直莫名担心position哪里会出错,取名的时候没有注意,最后就没有再写默认和悬停的状态, “生活服务”导航的内容应该默认display:none;“生活服务”hover时候display:block;
3.懒人洗衣机文字显示在图片上的那块写的时候想着直接用a标签去套,那么鼠标无论点到图片那块区域都可以点击,但是写进去才想起来内联元素是不能嵌套块元素标签的,就赶紧改了;
4.对 .nav-item 写伪类清浮动的时候写after伪类写错了,检查元素半天找不到问题,之后才发现没有写:after,(给自己翻了个白眼)

前端初学,正糊涂与定位position阶段

总结:
学路漫漫,注意细节,不急不躁,一步一个脚印,加油哟

评论 ( 19 )
最新评论
zhengke 2017-11-26 21:29:09 19F

感觉这个前端网突然被你们霸占了。看这练习和笔记也是多多老师的学生吧?

番茄_o 4F 2017-11-23 11:31:52 18F

我也想问他们这个问题- -

lucialiu 14F 2017-11-22 23:38:34 17F

但是图片的路径不对,本来尝试过,后来路径错了就塌陷了

lucialiu 15F 2017-11-22 23:37:42 16F

是在学校学的哦,这样比较系统,氛围比较好

hugeannex 13F 2017-11-21 12:00:40 15F

同感,应该是哪的教程 。

weijundong 2017-11-21 09:16:24 14F

把样式表和html放一起就可以预览效果了,看了你们一群人过来,全都这样分开

lzh2740128806 10F 2017-11-21 08:48:45 13F

网站首页好几个人总是学习进度一致,练习浮动时都发浮动,练习定位是都发定位

lucialiu 2F 2017-11-20 23:48:11 12F

希望可以坚持下去,写随笔也可以加深知识点的记忆呢,顺便记录自己的成长

lucialiu 3F 2017-11-20 23:47:33 11F

还请多多指教哦

lucialiu 4F 2017-11-20 23:47:16 10F

你说的是谁呢亲

lucialiu 5F 2017-11-20 23:46:54 9F

并不是的哦亲

lucialiu 6F 2017-11-20 23:46:37 8F

谢谢你哦~现在才发现我的练习图没有上传成功

lucialiu 6F 2017-11-20 23:46:08 7F

好尴尬,作业练习竟然没有加进去

17317830002 2017-11-20 21:12:13 6F

写的很漂亮哦~

nyy3723 2017-11-20 09:37:12 5F

不会是达内的吧

lzh2740128806 2017-11-20 09:19:42 4F

你们这好几个发定位练习的都是一个班的吧

hugeannex 2017-11-19 16:51:43 2F

开始文笔不错。
一年之后,发现这种太简单了,太无聊了。。。

moxiao 2017-11-19 14:42:39 1F

给你点个赞!