发布于2021-09-15 22:19 阅读(328) 评论(0) 点赞(2) 收藏(2)
一、元素类型
css标准文档流:默认的网页从左到右,从上到下的排列方式显示出网页效果
类型:
1.块级元素:(div,p,table……)
a.独占一行
b.可以设置宽度和高度
c.可以设置左右居中(整个块的位置),根据左右外边距进行设置(margin:auto/align:center)
2.行内元素:(a,span,label……)
a.默认排在一行,除非被挤下去
b.不能设置宽高(大小只由内容决定)
c.如果想实现左右居中,必须在其父类的块元素中设置text-align:center.
d.内边距有效果,但上下的paddding不会撑开外面的元素,不被父类div认可
e.margin左右有效果,上下无效果
3. 行内块元素:
a.默认排在一行(img……)
b.可以设置宽度和高度(可以设置标签,也可以只由内容决定)
c.居中参考行内元素的操作
d.padding和margin遵循盒子模型
4.他们之间的相互转换,通过属性display来实现
display:none(隐藏)block(设置为块元素)inline(设置为行内元素)inline-block(行内块元素)
二、布局:
1.浮动:float
代码>float:left(right);
a.元素浮动后,会脱离(丢失)标准文档流,后面的元素会抢占他的位置
b.设置浮动的元素,不能覆盖前面也设置了浮动属性元素的上面,他们按照类似行内元素的形式排列在一行(不等同于行内元素的排列,例如br不能让他们换行)
c.浮动元素不会覆盖住非浮动元素的内容,但是当非浮动元素占据浮动元素原有位置后,为了内容不被遮盖,非浮动元素自身的行距会自动扩大,有可能出现设定的宽高所形成的盒子抢占了浮动元素的位 置,也因此被浮动元素所覆盖了,而内容为了不被遮挡而留在浮动元素的外面
d.如果对当前元素设置clear:both;会导致其承认其他任意元素的非浮动性(但是在其他任意元素的视角中,浮动元素仍然为浮动元素),无论其本身是否浮动,都没有影响
2.定位:position
(偏移量:相对目标位置的移动距离,类似于坐标,可以通过:top,bottom,left,right进行偏移,进而移动元素的位置)
(1)相对定位(relative)
a.top:让原位置在移动后的位置上方,距离x的偏移量(其他也类似)
b.移动后,原位置不会被其他元素抢占,即不会丢失文档流
c.即使移动元素是浮动元素,仍然能够根据原位置进行移动(原位置即是该元素未移动前所在位子,原位置改变,移动后的元素位置也会改变)
d.目标是原位置(元素本身)
(2)绝对定位(absolute)
a.元素会脱离文档流
b.目标是设置了定位属性的父标签,如果父类没有,则继续向上找,直到body(body就算没有设置position,也可以成为定位目标)
c.top等移动属性,同样是相对距离(同相对定位中的a)
d.元素的层级升高,若与其他元素重叠,则会覆盖被重叠元素
(3)固定定位(fixed)
a.脱离文档流
b.目标是整个可视的网页窗口
c.top等移动属性,同样是相对距离(同相对定位中的a)
d.元素的层级升高,若与其他元素重叠,则会覆盖被重叠元素
作者:小猪佩奇身上纹
链接:http://www.qianduanheidong.com/blog/article/192689/17ffc6111afd434ea9ac/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!