网页元素定位的使用和原理

 时间:2024-09-27 21:26:16

制作网页的一些常用的定位的使用

工具/原料

电脑

sublime编译器

浏览器

方法/步骤

1、首先定义两个元素,将其宽度和高度设置相同的正方形

网页元素定位的使用和原理

网页元素定位的使用和原理

2、当对num1的元素使用position为absolute绝对定位的时候,相对于父级元素为绝对定位,距离顶端为200像素,距离左边为100像素,

网页元素定位的使用和原理

网页元素定位的使用和原理

3、根据上面的绝对定位后,元素会脱离文档流,相当于浮动起来而且不会占用空间;当一个元素嵌饷掘迹棂套到另一个元素的时候,并且父元素使用position:rel锾攒揉敫ative/absolute中的一种,子元素使用position:absolute进行定位与上面的效果相同

网页元素定位的使用和原理

网页元素定位的使用和原理

4、在我们上网的时候,会发现一些网站网页的元素不管怎么滑动都一直固定在窗口的位置,那是纛独编竿由固定定位position:fixed;固定定位也与绝对定位一样,脱离文档流

网页元素定位的使用和原理

网页元素定位的使用和原理

5、最后一个是粘贴定位,具有和绝对定位恽但炎杰和固定定位的双重属性,当不符合绝对定位的位置时,在正常的文档流中,一旦符合设置的位置就会脱离文档流,固定定位到所设置的位置

网页元素定位的使用和原理

网页元素定位的使用和原理

网页元素定位的使用和原理

6、还有其他的定位方式,比如浮动,运用多个元素进行布局的时候,有时候元素会不在一行,那么使用float:left/right将元素紧挨在一起,变成一行

网页元素定位的使用和原理

网页元素定位的使用和原理

7、总结:在使用定位的时候,一定要清楚的记得元素之间的层级关系,子元素和父元素的关系才能更好的对网页进行布局

mysql查询语句select用法 查看dota2模型文件 lightroom怎么编辑元数据预设? win一直提示激活怎么办 win提醒升级怎么办 如何做到真正的养生——养生保健指南
热门搜索
巴黎图片 花图片简笔画 春节的图片 雪花梨图片 好看的国产漫画