盒子定位（Mac版）

Mac版写HTML与Windows版不同但思路不变。首先创建HTML文件 通过快捷键commandspace 搜索“文本编辑”App。接下来点击新建文稿将文稿重命名改为html后缀结尾如下图所示通过选择VScode的打开方式就可以进行网页的编写啦首先我们来了解固定定位要注意以下3点1. 固定在浏览器窗口不动页面怎么滚它位置都不变2. 用 top、left、right、bottom 设置它在哪3. 会脱离文档流原来的位置空出来别的元素会挤上来想要实现以下效果代码如下!doctype html html head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title固定定位/title style /* 通用样式所有div盒子 */ div { width: 250px; height: 250px; background-color: red; margin-bottom: 50px; /* 盒子之间的间距 */ } /* 第三个盒子 - 绿色 - 固定定位 */ #div3 { width: 200px; height: 200px; border-radius: 11px; /* 圆角边框 */ background-color: green; /* 固定定位相对于浏览器窗口定位 特点元素固定在窗口的指定位置滚动页面时位置不变 也会脱离文档流不保留原始空间 */ position: fixed; left: 100px; /* 距离窗口左侧100px */ top: 100px; /* 距离窗口顶部100px */ } /* 第五个盒子 - 橙色 - 固定定位 */ #div5 { width: 250px; height: 250px; border-radius: 22px; /* 圆角边框 */ background-color: orange; /* 固定定位相对于浏览器窗口定位 */ position: fixed; left: 150px; /* 距离窗口左侧150px */ top: 150px; /* 距离窗口顶部150px */ } /style /head body !-- 20个div盒子用于演示滚动效果 -- !-- 其中div3和div5使用固定定位滚动页面时它们会保持在屏幕固定位置 -- div盒子1/div div盒子2/div div iddiv3盒子3(固定定位)/div !-- 绿色固定在窗口左上角 -- div盒子4/div div iddiv5盒子5(固定定位)/div !-- 橙色固定在窗口 -- div盒子6/div div盒子7/div div盒子8/div div盒子9/div div盒子10/div div盒子11/div div盒子12/div div盒子13/div div盒子14/div div盒子15/div div盒子16/div div盒子17/div div盒子18/div div盒子19/div div盒子20/div /body /html接下来相对定位比起 固定定位钉死在浏览器窗口原来的位置直接丢掉别人会立刻补上。相对定位是自己挪一挪位置还留着别人挤不进来。想要实现以上渲染效果代码如下!doctype html html head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title相对定位/title style img { width: 100px; height: 100px; } /* 第一个图片 - 红色边框 - 演示未定位时的默认状态 */ #img1 { border: 4px red solid; /* 相对定位让元素相对于其原始位置进行定位 特点元素原本占据的文档流空间依然保留不会被其他元素占据 */ position: relative; /* left: 50px; 四个方向的偏移属性 - left: 正值向右负值向左 - right: 正值向左负值向右 - top: 正值向下负值向上 - bottom: 正值向上负值向下 注意偏移是相对于元素原来的位置而不是相对于父容器 */ /* top: -50px; */ /* left: 50px; */ } /* 第二个图片 - 绿色边框 - 演示相对定位 */ #img2 { border: 4px green solid; /* 相对定位相对于元素原本的位置进行偏移 */ position: relative; /* left: 50px; */ /* 重点说明即使盒子相对定位到别处很远其文档流位置依旧保留 也就是说虽然视觉上它移动了但原本占用的空间依然保留不动 后续元素不会填补这个空位 */ top: 150px; } /* 第三个图片 - 蓝色边框 - 演示未定位时的默认状态 */ #img3 { border: 4px blue solid; position: relative; /* left: -50px; */ /* top:-50px; */ } /style /head body !-- 三个演示用的图片使用不同的边框颜色区分 -- img src./img_src/photo1.jpg idimg1 img src./img_src/photo1.jpg idimg2 img src./img_src/photo1.jpg idimg3 /body /html接下来是绝对定位要注意以下三点1. 找最近设置过定位的父盒子当参照物没有就以整个网页为准。2. 元素会脱离文档流原来占的位置直接空出来别的元素会挤上去。3. 通过 top、left、right、bottom 来调整位置。想要实现以下渲染效果代码如下!doctype html html head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title绝对定位/title style /* 父容器 - 灰色背景 */ .container { width: 400px; height: 400px; background-color: gray; /* 绝对定位相对于最近的已定位配置了position属性上层元素定位 如果没有已定位的上层元素继续往上找则相对于浏览器窗口定位 */ position: absolute; left: 100px; /* 距离窗口左侧100px */ top: 100px; /* 距离窗口顶部100px */ } /* 第一个子元素 - 红色 */ #div1 { width: 100px; height: 100px; background-color: red; /* 绝对定位相对于已定位的祖先元素container定位 特点脱离文档流不保留原本的空间后续元素会填补空位 */ position: absolute; left: 50px; /* 相对于父容器左侧偏移20px */ top: 50px; /* 相对于父容器顶部偏移20px */ opacity: 0.75; /* 设置透明度0-1之间 */ } /* 第二个子元素 - 绿色 */ #div2 { width: 75px; height: 75px; background-color: green; position: absolute; left: 20px; top: 20px; } /* 第三个子元素 - 蓝色 */ #div3 { width: 50px; height: 50px; background-color: blue; /* 相对定位演示默认的文档流布局未开启绝对定位 */ /* position: absolute; */ /* left: 20px; */ /* top: 20px; */ } /style /head body !-- 父容器包裹三个子div -- div classcontainer !-- 红色div开启绝对定位脱离文档流 -- div iddiv1/div !-- 绿色div未开启定位遵循正常文档流布局 -- div iddiv2/div !-- 蓝色div未开启定位遵循正常文档流布局 -- div iddiv3/div /div /body /html总结一下