实训中学到的HTML基础知识(3)
发布日期:2021-06-29 02:31:31
浏览次数:3
分类:技术文章
本文共 559 字,大约阅读时间需要 1 分钟。
今天是实训的第四天,正式上课的第三天,今天学习的是HTML中的盒子模型和CSS中的position定位,因为盒子模型在上一篇文章介绍过了,今天就稍微补充一下,重点是position。
一、盒子模型(margin、padding和border)
这是上一篇文章中的盒子模型,关于盒子模型我的理解是:border是一个边框,padding(内边距)是这个边框到相片的留白,而margin则是在整个相片内容到整个相框的相对位置。这是我的理解。
二、position定位
position的四个值:static、relative、absolute、fixed,static是默认值,relative是相对定位,而absolute和fixed统称为绝对定位。
1、relative:相对于原来位置的移动,元素设置此属性后仍然处在文档流中,不影响其他元素的布局。
这是正常的文档流
而改变为相对定位的CSS则是
相对定位仅改变自身位置,相对于原来的位置进行移动,不改变其他的属性。
2、absolute:元素会脱离文档流,如果设置了偏移量,会影响其他元素的位置定位。
绝对定位正常的文档流
而改变了绝对定位的CSS
在设置了absolute属性后,当前改变的元素的位置会被后面的元素填充上位置。
fixed和static暂且不提。
转载地址:https://blog.csdn.net/yyyyyang525/article/details/117533750 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
不错!
[***.144.177.141]2024年04月12日 03时17分32秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
思考设计SQL优化方案
2019-04-29
消息中间件选型分析
2019-04-29
融资30亿、百度领投!造车新势力威马完成C轮融资 ...
2019-04-29
大数据专业适合考研吗?
2019-04-29
Java内存区域与内存溢出异常
2019-04-29
mysql修改root密码
2019-04-29
tomcat 调优-生产环境必备
2019-04-29
企业云盘 | 你更喜欢是用虚拟盘还是windows客户端? ...
2019-04-29
Python零基础学习笔记(四十一)—— 面向对象编程思想 ...
2019-04-29
如何落实提升企业研发效能?阿里巴巴实践案例解读 ...
2019-04-29
Euler 今日问世!国内首个工业级的图深度学习开源框架,阿里妈妈造 ...
2019-04-29
致敬改变者,2019江北新区首届产业创新加速论坛在江北举行 ...
2019-04-29
Weblogic 12版本以下服务器如何调整SSL协议和加密套件 ...
2019-04-29
短视频APP开发者告诉你:苹果手机加上它也能用美颜 ...
2019-04-29
解析家纺企业使用的ERP系统 呈现三大特点
2019-04-29
关于MAC地址的相关知识学习笔记
2019-04-29
python方法对象 类和实例变量
2019-04-29