--- title: "05-定位与装饰" created: 2025-11-25 tags: - 项目筑基 --- # 定位与装饰 > 子绝父相与页面细节：定位四式、z-index、基线对齐、圆角阴影过渡，再到 SEO 三大标签与 ico 图标，项目开工前的最后一块拼图。 ## 定位 如果说浮动能实现元素在同一行显示 那么定位就可以实现元素在某个块的任意位置显示 挺具灵活性 （像那些小标签 小按钮 或者跟随窗口移动的小广告 就可以用定位的形式展示） 功能： - 解决盒子与盒子之间的层叠问题（定位之后元素层级最高，可以层叠在其他盒子上） - 可以让盒子始终固定在屏幕中的某个位置 标准流就一般是静态定位 不能通过方位属性进行移动 此外重点在于相对定位和绝对定位 以下 4 个为属性值 需要用属性名 position 去使用他们 ![[web-image145.png]] 此外 要让显示在什么位置 就需要设置偏移值 ![[web-image146.png]] ### 相对定位 根据自己原本的位置进行移动 ```css position: relative; ``` 虽然移动了 但是原本所在的位置不会被其他元素填充 （没有脱标） 通常用于小范围的移动 ![[web-image147.png]] 对于这样一个 div 会显示在段落中间 没问题 给它加上相对定位 ![[web-image148.png]] 有点不符合常规思维的一点是 它的移动是相反的 right 向左移 left 向右 top 向下 而 bottom 向上 完全颠倒 可以试着这样理解 right 是加了右填充 …… 或者用绘图的坐标来去理解 本身网页这样东西的布局就是 y 轴朝下 x 轴朝右 所以 left 为 x++ 那么就是向右 top 为 y++ 所以向下 看自己怎么去理解吧 ![[web-image149.png]] 然后就这种 4 个方位都设置了情况而言 也并不是想象中的 先向……再向…… 可以看到 图中的效果是 向右下移动了 那就是 top 和 left 起了作用 对——当 left 和 right 同时设置时 只有 left 会起作用 当 top 和 bottom 同时设置时 只有 top 起作用 如果只设置了相对定位而不去设置偏移 是没有任何问题的 当然 后面也会有很多这种技巧 ### 绝对定位 以非静态定位的父元素为参照 在其中进行定位 如果没有父标签 那就以整个网页为参照（也就是 body） ```css position: absolute; ``` 它与相对就不同了 一旦设置就会脱离标准流 其他元素会填充它原本的位置 然后根据第一句话（以父元素为标准）应该就能想到—— 如果在某个不需要调整位置的 div 中设置一个小元素 div 是该小元素的父元素咯 如果 div 不去定位 那么就会以整个网页为基准 与预期不符 要想达到预期效果 就得给父元素 div 加上一个定位 然后又因为设置一个相对定位没有什么影响 那么——可想而知 可以先给父标签加个相对定位 **so—— 子绝父相（相夫（父）教（绝）子）** 具体用法： ![[web-image150.png]] ![[web-image151.png]] 可以理解为 right 就是在父元素的右边开始移动 right:4px 从右边界向左移 4 像素 right:-4px 从右边界向右移 4 像素 同理 bottom:50px 从下边界向上移 50 像素 到这里又成了左负右正了…… 所以 还是以 padding 来理解比较好 ### 居中 一旦加了绝对定位 就会脱标 从而使得 margin:0 auto 失效 那么想要绝对定位的元素居中该怎么做？ 让它移动到 body 的 50% 位置会怎么样？ ```css left: 50%; ``` ![[web-image152.png]] 确实移动了 50% 但是移动了离边界 50% 的一段距离 那么再向左移一点距离（盒子宽度的一半）就行了 ```css margin-left: -150px; ``` 垂直方向同理 ```css top: 50%; margin-top: -150px; ``` 但是 这样每次都得自己去计算……而且 一旦盒子像素为单数 求一半？？ 肯定有简便方法 ```css transform: translate(-50%, -50%); ``` 这段代码就是使元素移动自己宽高的一半 那么居中就成了 ```css left: 50%; top: 50%; transform: translate(-50%, -50%); ``` 此外 绝对定位后的元素展示的是行内块的效果 即不加宽高 则大小由内容撑开 ### 固定定位 网页里的内容一般会随滚动条滚动而显示或消失 但有些内容 希望一直显示在页面中 像标头栏 右侧的导航栏（类似于 excel 固定最左最上行列的效果） 再或者那种页面两边的广告 这些都得用到固定定位 ```css position: fixed; ``` 同样 它也是脱标的 浮在其他元素之上 如果想让该元素固定在左上角 那么就设置 ```css left: 0; top: 0; ``` 比如用这个功能做一个简单的跳转到置顶 ![[web-image153.png]] ![[web-image154.png]] ![[web-image155.png]] ### 元素层级关系 不同布局方式元素的层级关系： ``` 标准流 < 浮动 < 定位 ``` 不同定位之间的层级关系： 相对、绝对、固定默认层级相同 此时 HTML 中写在下面的元素层级更高，会覆盖上面的元素（后来者居上） 如果有时候希望某元素在最上面 而不想改书写的位置 就可以自己改变定位元素的层级 ```css z-index: 数字; ``` 属性名：z-index 属性值：数字 （数字越大，层级越高） 可以写 999 也可以写 1 默认都在 0 层 一般写个 1 就已经比其他元素要高了 一定要配合定位才能生效 ## 装饰 ### 基线 浏览器文字类型元素排版中存在用于对齐的基线（baseline） ![[web-image156.png]] （从有效内容开始划线） 在排版时 往往会出现行内块和文字、行内块和行内对不齐的问题 这是因为浏览器会默认将他们当成文字处理 而文字是按基线对齐的 要解决这个问题就可以使用 ```css vertical-align: middle; ``` ![[web-image157.png]] 不用记太多 当遇到了图片啊 表单中的 input 啊 对不齐的情况时 想想是不是因为基线问题 如果是——想顶端对齐 就设置 vertical-align:top; 想居中 就设置 vertical-align:middle; 还有一个场景 让图片居中于 div 块 可以用 div 设置相对定位 img 设置绝对定位 然后 left50%+top50%+transform:translate(-50%,-50%) 也可以就之前一样设置 margin:0 auto; 先水平居中 在设置 margin-top 移到合适位置 ![[web-image158.png]] 现在还可以利用行内块等同文字处理 利用基线 ### 光标类型 鼠标放在某些元素上 希望展示一些特殊的效果 属性名：cursor ![[web-image159.png]] ![[web-image160.png]] 所以 这些都是可以设置的 ![[web-image161.png]] 眼见不一定为实 ### 边框圆角 做出来的 div 盒子都是方方正正的 太约束了 如果让盒子四个角变得圆润，增加页面细节，说不定可以提升用户体验 属性名：border-radius 常见取值：数字+px 、百分比 原理： ![[web-image162.png]] 依旧是从左上角开始赋值，然后顺时针赋值，没有赋值的看对角 | | | |---|---| | border-radius: 10px; | border-radius:10px 20px 40px 80px; | 利用这种方式 还可以将 div 元素变成圆形 ```css border-radius: 100px; ``` 或者直接 50% ![[web-image165.png]] ### overflow 溢出部分显示 如果文本超过了给出的盒子的大小 那么超过的那部分就需要我们去进行一个处理 属性名：overflow 一二很容易理解 ![[web-image166.png]] 三和四不常见到 他们有个区别就是 如果内容超过了 auto 和 scroll 都会显示滚动条 盒子大小不变 如果没超过 scroll 仍然会显示滚动条 而 auto 不会 而且 auto 会隐藏下方的滚动条 ### 显示隐藏 将鼠标放在某链接上时 会显示一些原本没显示的东西 ![[web-image167.png]] 让某元素本身在屏幕中不可见。如：鼠标 :hover 之后元素隐藏 常见属性： 1. visibility：hidden 2. display：none 区别： 1. visibility：hidden 隐藏元素本身，并且在网页中 **占位置** 2. display：none 隐藏元素本身，并且在网页中 **不占位置** 注意点： 经常会通过 display 属性完成元素的显示隐藏切换 display：none；（隐藏）、display：block；（显示） 因为不占位置的特点 往往第二种用的更多 ![[web-image168.png]] ![[web-image169.png]] 注意是： .xiangqing 默认隐藏 .yingchang 被触发 而后 .xiangqing 变为显示 ### 元素透明 让某元素整体（包括内容）一起变透明 属性名：opacity 属性值：0~1 之间的数字 - 0 表示完全透明 - 1 表示完全不透明 opacity 会让元素整体透明，包括里面的内容，如：文字、子元素等…… ![[web-image170.png]] ![[web-image171.png]] css 中很少用到 多与 js 结合使用 ### 边框合并 让相邻表格边框进行合并，得到细线边框效果 ```css border-collapse: collapse; ``` ![[web-image172.png]] ### 绘三角形 在网页中展示出小三角形时，除了可以使用图片外，还可以使用代码完成。 ![[web-image173.png]] 原理：利用盒子边框完成 1. 设置一个盒子 ![[web-image174.png]] 2. 设置四周不同颜色的边框 3. 将盒子宽高设置为 0，仅保留边框 ![[web-image175.png]] 4. 得到四个三角形，选择其中一个后，其他三角形（边框）设置颜色为透明 还可以通过调整不同边框的宽度，可以调整三角形的形态 ![[web-image176.png]] ```css div { /* width: 100px; height: 100px; */ width: 0; height: 0; /* background-color: pink; */ /* transparent: 透明 */ border-top: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid orange; } ``` ![[web-image177.png]] ## 选择器再拓展 ### 链接伪类选择器 常用于选中超链接的不同状态 语法： ➢ 注意点： ![[web-image178.png]] 如果需要同时实现以上四种伪类状态效果，需要按照 LVHA 顺序书写 其中 :hover 伪类选择器 使用更为频繁，常用于选择各类元素的悬停状态 ### 焦点伪类选择器 用于选中元素获取焦点时状态，常用于表单控件 ![[web-image179.png]] 使得表单控件获取焦点时默认会显示外部轮廓线 ### 属性选择器 通过元素上的 HTML 属性来选择元素，常用于选择 input 标签 ![[web-image180.png]] ```html ``` ## 阴影与过渡 ### 文字阴影 给文字添加阴影效果，吸引用户 属性名：text-shadow ![[web-image181.png]] 阴影可以叠加设置，每组阴影取值之间以逗号隔开 ### 盒子阴影 给盒子添加阴影效果，体现页面细节 属性名：box-shadow ![[web-image182.png]] ```css box-shadow: 5px 10px 20px 10px bisque inset; ``` 如果是外阴影 不需要写 outset 直接缺省 ```css box-shadow: 5px 10px 20px 10px bisque; ``` ### 过渡 让元素的样式慢慢的变化，常配合 hover 使用，增强网页交互体验 属性名：transition ![[web-image183.png]] 通常与 hover 一起用 不是加在 hover 上 而是谁要变 加在谁上 ![[web-image184.png]] 比如这里宽变化 想要一秒的过渡时间 写上 transition:width 1s 再加上高也要变 两者用逗号隔开 同理 颜色等等属性都可以添加过渡效果 如果比较多 不想一个一个写 就直接给 all 加 ```css transition: all 1s; ``` 注意点： 1. 过渡需要：默认状态 和 hover 状态样式不同，才能有过渡效果 2. transition 属性给需要过渡的元素本身加 3. transition 属性设置在不同状态中，效果不同的 - ① 给默认状态设置，鼠标移入移出都有过渡效果 - ② 给 hover 状态设置，鼠标移入有过渡效果，移出没有过渡效果 ## 前置认知 ### 网页与网站 网页：相当于是每页纸 例如：淘宝的主页、淘宝的登录页、淘宝的商品页等 网站：相当于一本书籍 提供特定服务的一组网页集合 例如：百度、淘宝、京东 用户翻阅的时候，看的是每页纸上的内容 由多页纸整合在一起，就是完整的一本书籍了 ### 骨架结构标签 `` 文档类型声明，告诉浏览器该网页的 HTML 版本 这个就是告知是 html 5 它需要写在页面的第一行，不属于 HTML 标签 `` 标志网页使用的语言（默认英文） lang=language en=english 改成中文就 `` （这就是为什么打开自己的网站会显示要不要翻译成中文） 作用：帮助搜索引擎归类 + 浏览器翻译 `` 标识网页使用的字符编码 保存和打开的字符编码需要统一设置，否则可能会出现 乱码 1. UTF-8：万国码，国际化的字符编码，收录了全球语言被认证了的文字 2. GB2312：6000+ 汉字 3. GBK：20000+ 汉字 一般就用 utf8 就行 `` 解决 ie 浏览器兼容性（ie 兼容性很差 基本被 edge 替代了） `` 做移动端网页时必需 就是将页面与实际屏幕大小适配 ## SEO 什么是 seo search engine optimization 搜索引擎优化 就是说 搜索了一个关键词后 会有很多结果 这些结果是有先后顺序显示在结果栏的 如果想让自己的网站在某搜索结果中靠前 就得用到这个 seo 最简单的方式就是钞能力（竞价排名） 然后将网页做成 html 后缀是有利于提升 seo 排名的 然后在细节上 使标签语义化（在合适地方放合适标签） 比如说标题别用 div 用 h 关于关键字的内容 放在 strong 里面去 使网页结构更清晰 有些公司还有专门岗位去做 seo 优化 但再怎么优化都不可能优化到钞能力前面…… ### SEO 三大标签 title 网页标题标签、description 网页描述标签、keywords 网页关键词标签 这里面的东西不能瞎写 比如京东还把网站放进标题里了 但这些东西一般不是前端所要考虑的 ![[web-image185.png]] ### 语义化标签 在 HTML5 新版本中，推出了一些有语义的布局标签，可以增强网页的语义化 ![[web-image186.png]] 显示特点和 div 一致，但是比 div 多了不同的语义 ## ico 图标 ![[web-image187.png]] 我们自己的网页左上角只是一个 e 怎么让它显示一个图标呢 ![[web-image188.png]] 需要一个 .ico 后缀的图标 利用 link 去链接它 这个 .ico 一般放在根目录 而不是在 images 目录里 ```html ``` ![[web-image189.png]] 小 tips： .ico 图标不知道怎么来？要偷哪个网站的 就在它网址后面加上 /favicon.ico 回车一下 就可以看到该网站的图标 右键另存为 就是自己的了 详情：https://www.shejitang.com/ui/84360.html 不用背那么长一串 直接快捷键 link:f 回车 ## 版心 在之前的案例已经有过这个版心的概念 不外乎就是呈现在网页中间的东西 给它取个类 统一控制一下 一般命名为：container、wrapper、w 常设定为： ![[web-image190.png]] ## 书写顺序 之前有提到过 不同的 CSS 书写顺序会影响浏览器的渲染性能 所以通常使用专业的书写顺序习惯 ![[web-image191.png]] 在选择器中 推荐用类 + 后代 .xx .yy zz…… 但不是层级越多越好，一个选择器中的类选择器的个数推荐 不要超过 3 个 ## 附件 - [[web前端.docx|web前端.docx]] --- ⬅️ [[04-CSS 布局|04-CSS 布局]] 🏠 [[00-前端与可视化|00-前端与可视化]] ➡️ [[06-入门小项目|06-入门小项目]]