 牛客手把手带刷FE14,FE15:布局_含::after详解+固定定位的核心特点 补充知识点)
布局所有的CSS定位属性CSS 列中的数字表示哪个CSS(CSS1 或者CSS2)版本定义了该属性。属性说明值CSSbottom定义了定位元素下外边距边界与其包含块下边界之间的偏移。autolength%inherit2clip剪辑一个绝对定位的元素shapeautoinherit2cursor显示光标移动到指定的类型urlautocrosshairdefaultpointermovee-resizene-resizenw-resizen-resizese-resizesw-resizes-resizew-resizetextwaithelp2left定义了定位元素左外边距边界与其包含块左边界之间的偏移。autolength%inherit2overflow设置当元素的内容溢出其区域时发生的事情。autohiddenscrollvisibleinherit2overflow-y指定如何处理顶部/底部边缘的内容溢出元素的内容区域autohiddenscrollvisibleno-displayno-content2overflow-x指定如何处理右边/左边边缘的内容溢出元素的内容区域autohiddenscrollvisibleno-displayno-content2position指定元素的定位类型absolutefixedrelativestaticinherit2right定义了定位元素右外边距边界与其包含块右边界之间的偏移。autolength%inherit2top定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。autolength%inherit2z-index设置元素的堆叠顺序numberautoinherit2CSS 中所有的浮动属性CSS 列中的数字表示不同的 CSS 版本CSS1 或 CSS2定义了该属性。属性描述值CSSclear指定不允许元素周围有浮动元素。leftrightbothnoneinherit1float指定一个盒子元素是否可以浮动。leftrightnoneinherit1CSS 对齐元素类别水平居中垂直居中行内元素text-align:centerline-height: 外层盒子高度块级元素margin: 0 autoposition:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }FED14 浮动和清除浮动!DOCTYPE html html head meta charsetUTF-8 style typetext/css /* 父级清除浮动标准伪元素清除法 */ .wrap::after { content: ; /* 必须项伪元素生效的前提 */ display: block; /* 必须项转为块级元素才能独占一行实现清除 */ clear: both; /* 核心项清除左右两侧的浮动 */ /* 以下为兼容低版本IE的可选属性现代浏览器可省略 */ height: 0; visibility: hidden; } .left { width: 100px; height: 100px; background: #f00; /* 辅助看效果可删除 */ float: left; /* 向左浮动实现同行排列 */ } .right { width: 100px; height: 100px; background: #00f; /* 辅助看效果可删除 */ float: left; /* 向左浮动和left元素在同一行 */ } /style /head body div classwrap div classleft/div div classright/div /div /body /html1. 实现「两个 div 同一行向左浮动」给.left和.right都设置float: left;原理浮动元素会脱离正常文档流向左靠齐排列只要父级宽度足够容纳两个元素这里两个元素总宽 200px无宽度限制就会自动在同一行显示完全符合题目要求。2. 实现「清除父级 wrap 内部的浮动」伪元素清除法是行业最推荐的标准方案解决的核心问题是子元素全部浮动后会脱离文档流父级.wrap没有正常流的子元素支撑高度会出现高度塌陷高度变为 0影响后续页面布局。content: 伪元素生效的必要属性哪怕是空内容也必须写display: block把伪元素转为块级元素独占一行才能触发清除浮动的效果clear: both清除该元素左右两侧的浮动让父级可以识别到浮动子元素的高度解决高度塌陷也就是题目要求的「清除内部浮动」。补充其他清除浮动的方案拓展除了伪元素法还有两种常用方案可根据场景选择1.给父级设置overflow: hidden.wrap { overflow: hidden; }优点代码极简缺点如果子元素有溢出父级的内容会被直接隐藏适用场景有限2.在父级末尾加空标签设置clear: bothdiv classwrap div classleft/div div classright/div div styleclear: both;/div /div缺点会增加无意义的空标签污染 HTML 结构不推荐使用::after详解基础概念什么是::after::after是 CSS 创造的一个虚拟元素它的作用是在选中元素的「内部内容末尾」插入一个看不见的 “假标签”并给这个 “假标签” 添加样式。它不是 HTML 里真实存在的标签DOM 树里找不到它但浏览器渲染时会生效它默认是行内元素inline可以通过display转为块级 / 行内块。语法结构拆解.wrap::after { content: ; /* 【必须项】伪元素的内容哪怕是空也得写 */ display: block; /* 【可选项】转为块级元素根据需求 */ clear: both; /* 【业务样式】具体的样式代码 */ }部分作用.wrap基础选择器表示要给「哪个元素」添加伪元素这里是给类名为wrap的元素加。::CSS3 标准双冒号专门用来区分伪元素如::after、::before和伪类如:hover、:first-child。注老浏览器兼容单冒号:after但现在推荐用双冒号。after位置关键词表示伪元素插入在「.wrap内部内容的最后面」。最关键的content属性content是::after生效的必要条件哪怕是空字符串也必须写否则伪元素不会显示常见取值content: ;空内容最常用比如清除浮动时content: 文字;插入具体的文字content: url(图片路径);插入图片。结合「清除浮动」场景看原理.wrap::after { content: ; /* 1. 生成一个空的伪元素 */ display: block; /* 2. 转为块级元素独占一行 */ clear: both; /* 3. 清除左右浮动 */ }为什么能解决「父级高度塌陷」当.wrap里的子元素.left、.right都设置了float: left时子元素会脱离正常文档流导致父级.wrap因为没有 “正常流的子元素撑高度”变成高度为 0塌陷。而.wrap::after的作用是在.wrap内部末尾 “造” 了一个空的块级伪元素给这个伪元素设置clear: both让它必须排在所有浮动子元素的下方父级.wrap就能通过这个伪元素感知到浮动子元素的高度从而把自己 “撑起来”完美解决塌陷::after的其他常见用法除了清除浮动::after还能做很多实用的视觉效果1. 插入装饰性文字 / 符号/* 在所有链接后面加一个箭头 */ a::after { content: →; color: #999; }2. 实现小三角Tooltip 效果.tooltip::after { content: ; position: absolute; bottom: -10px; /* 位置调整 */ left: 50%; transform: translateX(-50%); /* 用边框画三角 */ border: 5px solid transparent; border-top-color: #333; }3. 配合字体图标使用/* 假设用 Font Awesome */ .icon::after { content: \f007; /* 字体图标的 Unicode 编码 */ font-family: FontAwesome; }关键注意事项content不能忘哪怕是空字符串也必须写content: ;否则伪元素不生效默认是行内元素如果要设置宽高、上下 margin记得加display: block或display: inline-block是「子元素」不是「兄弟元素」::after是插入在选中元素内部的末尾不是元素外面可在开发者工具中查看Chrome/Firefox 的 Elements 面板里能看到::after方便调试样式FED15 固定定位!DOCTYPE html html head meta charsetUTF-8 style .box { width: 100px; height: 100px; background: #2c88ff; /* 辅助查看效果可删除 */ /* 核心固定定位代码 */ position: fixed; top: 0; left: 0; } /* 辅助测试滚动效果可删除 */ body { height: 2000px; } /style /head body div classbox/div /body /html核心属性作用position: fixed;这是固定定位的核心属性作用是让元素脱离正常文档流不再占据页面空间后续的普通元素会自动顶到它原本的位置元素的定位基准固定为浏览器的视口viewport即浏览器的可视区域和父元素、页面滚动完全无关。top: 0;left: 0;这两个属性是定位的偏移量精准控制元素的位置top: 0表示元素的顶部边缘距离视口的顶部边缘为 0left: 0表示元素的左侧边缘距离视口的左侧边缘为 0两者结合就实现了「固定在视口左上角」的需求哪怕页面上下滚动元素也会牢牢固定在这个位置不会跟随页面移动。固定定位的核心特点 补充知识点定位基准唯一固定定位的基准永远是视口哪怕父元素设置了position: relative/absolute也不会影响固定定位元素的位置这是它和绝对定位absolute最核心的区别。层级特性固定定位元素默认会覆盖普通文档流的元素你可以通过z-index属性调整它的层级数值越大层级越靠前。写法优化当偏移量为 0 时可以省略单位top: 0;和top: 0px;效果完全一致写法更简洁。常见场景固定定位最常用的场景就是网页顶部的导航栏、侧边悬浮按钮、右下角的回到顶部按钮等
前端入门必学CSS零基础快速入门篇(可用于备赛蓝桥杯Web应用开发) 牛客手把手带刷FE14,FE15:布局_含::after详解+固定定位的核心特点 补充知识点
发布时间：2026/6/17 14:36:36
布局所有的CSS定位属性CSS 列中的数字表示哪个CSS(CSS1 或者CSS2)版本定义了该属性。属性说明值CSSbottom定义了定位元素下外边距边界与其包含块下边界之间的偏移。autolength%inherit2clip剪辑一个绝对定位的元素shapeautoinherit2cursor显示光标移动到指定的类型urlautocrosshairdefaultpointermovee-resizene-resizenw-resizen-resizese-resizesw-resizes-resizew-resizetextwaithelp2left定义了定位元素左外边距边界与其包含块左边界之间的偏移。autolength%inherit2overflow设置当元素的内容溢出其区域时发生的事情。autohiddenscrollvisibleinherit2overflow-y指定如何处理顶部/底部边缘的内容溢出元素的内容区域autohiddenscrollvisibleno-displayno-content2overflow-x指定如何处理右边/左边边缘的内容溢出元素的内容区域autohiddenscrollvisibleno-displayno-content2position指定元素的定位类型absolutefixedrelativestaticinherit2right定义了定位元素右外边距边界与其包含块右边界之间的偏移。autolength%inherit2top定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。autolength%inherit2z-index设置元素的堆叠顺序numberautoinherit2CSS 中所有的浮动属性CSS 列中的数字表示不同的 CSS 版本CSS1 或 CSS2定义了该属性。属性描述值CSSclear指定不允许元素周围有浮动元素。leftrightbothnoneinherit1float指定一个盒子元素是否可以浮动。leftrightnoneinherit1CSS 对齐元素类别水平居中垂直居中行内元素text-align:centerline-height: 外层盒子高度块级元素margin: 0 autoposition:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }FED14 浮动和清除浮动!DOCTYPE html html head meta charsetUTF-8 style typetext/css /* 父级清除浮动标准伪元素清除法 */ .wrap::after { content: ; /* 必须项伪元素生效的前提 */ display: block; /* 必须项转为块级元素才能独占一行实现清除 */ clear: both; /* 核心项清除左右两侧的浮动 */ /* 以下为兼容低版本IE的可选属性现代浏览器可省略 */ height: 0; visibility: hidden; } .left { width: 100px; height: 100px; background: #f00; /* 辅助看效果可删除 */ float: left; /* 向左浮动实现同行排列 */ } .right { width: 100px; height: 100px; background: #00f; /* 辅助看效果可删除 */ float: left; /* 向左浮动和left元素在同一行 */ } /style /head body div classwrap div classleft/div div classright/div /div /body /html1. 实现「两个 div 同一行向左浮动」给.left和.right都设置float: left;原理浮动元素会脱离正常文档流向左靠齐排列只要父级宽度足够容纳两个元素这里两个元素总宽 200px无宽度限制就会自动在同一行显示完全符合题目要求。2. 实现「清除父级 wrap 内部的浮动」伪元素清除法是行业最推荐的标准方案解决的核心问题是子元素全部浮动后会脱离文档流父级.wrap没有正常流的子元素支撑高度会出现高度塌陷高度变为 0影响后续页面布局。content: 伪元素生效的必要属性哪怕是空内容也必须写display: block把伪元素转为块级元素独占一行才能触发清除浮动的效果clear: both清除该元素左右两侧的浮动让父级可以识别到浮动子元素的高度解决高度塌陷也就是题目要求的「清除内部浮动」。补充其他清除浮动的方案拓展除了伪元素法还有两种常用方案可根据场景选择1.给父级设置overflow: hidden.wrap { overflow: hidden; }优点代码极简缺点如果子元素有溢出父级的内容会被直接隐藏适用场景有限2.在父级末尾加空标签设置clear: bothdiv classwrap div classleft/div div classright/div div styleclear: both;/div /div缺点会增加无意义的空标签污染 HTML 结构不推荐使用::after详解基础概念什么是::after::after是 CSS 创造的一个虚拟元素它的作用是在选中元素的「内部内容末尾」插入一个看不见的 “假标签”并给这个 “假标签” 添加样式。它不是 HTML 里真实存在的标签DOM 树里找不到它但浏览器渲染时会生效它默认是行内元素inline可以通过display转为块级 / 行内块。语法结构拆解.wrap::after { content: ; /* 【必须项】伪元素的内容哪怕是空也得写 */ display: block; /* 【可选项】转为块级元素根据需求 */ clear: both; /* 【业务样式】具体的样式代码 */ }部分作用.wrap基础选择器表示要给「哪个元素」添加伪元素这里是给类名为wrap的元素加。::CSS3 标准双冒号专门用来区分伪元素如::after、::before和伪类如:hover、:first-child。注老浏览器兼容单冒号:after但现在推荐用双冒号。after位置关键词表示伪元素插入在「.wrap内部内容的最后面」。最关键的content属性content是::after生效的必要条件哪怕是空字符串也必须写否则伪元素不会显示常见取值content: ;空内容最常用比如清除浮动时content: 文字;插入具体的文字content: url(图片路径);插入图片。结合「清除浮动」场景看原理.wrap::after { content: ; /* 1. 生成一个空的伪元素 */ display: block; /* 2. 转为块级元素独占一行 */ clear: both; /* 3. 清除左右浮动 */ }为什么能解决「父级高度塌陷」当.wrap里的子元素.left、.right都设置了float: left时子元素会脱离正常文档流导致父级.wrap因为没有 “正常流的子元素撑高度”变成高度为 0塌陷。而.wrap::after的作用是在.wrap内部末尾 “造” 了一个空的块级伪元素给这个伪元素设置clear: both让它必须排在所有浮动子元素的下方父级.wrap就能通过这个伪元素感知到浮动子元素的高度从而把自己 “撑起来”完美解决塌陷::after的其他常见用法除了清除浮动::after还能做很多实用的视觉效果1. 插入装饰性文字 / 符号/* 在所有链接后面加一个箭头 */ a::after { content: →; color: #999; }2. 实现小三角Tooltip 效果.tooltip::after { content: ; position: absolute; bottom: -10px; /* 位置调整 */ left: 50%; transform: translateX(-50%); /* 用边框画三角 */ border: 5px solid transparent; border-top-color: #333; }3. 配合字体图标使用/* 假设用 Font Awesome */ .icon::after { content: \f007; /* 字体图标的 Unicode 编码 */ font-family: FontAwesome; }关键注意事项content不能忘哪怕是空字符串也必须写content: ;否则伪元素不生效默认是行内元素如果要设置宽高、上下 margin记得加display: block或display: inline-block是「子元素」不是「兄弟元素」::after是插入在选中元素内部的末尾不是元素外面可在开发者工具中查看Chrome/Firefox 的 Elements 面板里能看到::after方便调试样式FED15 固定定位!DOCTYPE html html head meta charsetUTF-8 style .box { width: 100px; height: 100px; background: #2c88ff; /* 辅助查看效果可删除 */ /* 核心固定定位代码 */ position: fixed; top: 0; left: 0; } /* 辅助测试滚动效果可删除 */ body { height: 2000px; } /style /head body div classbox/div /body /html核心属性作用position: fixed;这是固定定位的核心属性作用是让元素脱离正常文档流不再占据页面空间后续的普通元素会自动顶到它原本的位置元素的定位基准固定为浏览器的视口viewport即浏览器的可视区域和父元素、页面滚动完全无关。top: 0;left: 0;这两个属性是定位的偏移量精准控制元素的位置top: 0表示元素的顶部边缘距离视口的顶部边缘为 0left: 0表示元素的左侧边缘距离视口的左侧边缘为 0两者结合就实现了「固定在视口左上角」的需求哪怕页面上下滚动元素也会牢牢固定在这个位置不会跟随页面移动。固定定位的核心特点 补充知识点定位基准唯一固定定位的基准永远是视口哪怕父元素设置了position: relative/absolute也不会影响固定定位元素的位置这是它和绝对定位absolute最核心的区别。层级特性固定定位元素默认会覆盖普通文档流的元素你可以通过z-index属性调整它的层级数值越大层级越靠前。写法优化当偏移量为 0 时可以省略单位top: 0;和top: 0px;效果完全一致写法更简洁。常见场景固定定位最常用的场景就是网页顶部的导航栏、侧边悬浮按钮、右下角的回到顶部按钮等
