万世浮华戏骨-CSDN博客

原创 Flex弹性盒模型

公式：项目实际尺寸 = 初始尺寸 + 剩余空间×比例（flex-grow）或初始尺寸 - 溢出空间×比例（flex-shrink）。flex-grow根据比例分配剩余空间，flex-shrink基于项目初始尺寸（flex-basis）计算缩小量。flex-grow、flex-shrink、flex-basis（如flex: 1等价于1 1 0%）stretch（默认）、flex-start、flex-end、center、baseline。auto（默认，基于内容）、固定值（如200px）

2025-06-12 13:58:36 1069

原创盒子的浮动与高度塌陷

1. 浮动核心概念作用：使元素脱离标准文档流（元素不再占据原有空间），并向左或向右浮动，直到碰到父容器边缘或其他浮动元素。语法：css.element {/* 左浮动 *//* 右浮动 *//* 默认值，不浮动 */2. 经典应用场景示例 1：实现两栏布局（左侧固定，右侧自适应）示例 2：文字环绕图片3. 浮动导致的常见问题问题 1：父容器高度塌陷原因：浮动元素脱离文档流，父容器无法自动计算高度，呈现高度为 0。

2025-06-09 20:18:38 256

原创 HTML--CSS表单表格属性

3. 标签对齐（Flexbox 布局）二、表格（Table）样式。一、表单（Form）样式。

2025-06-08 21:13:28 178

原创盒子的绝对定位

相对于最近的已定位祖先元素（position 值为 relative、absolute、fixed 或 sticky）。父元素显式设置定位（如 position: relative）避免意外定位基准。结合 transform 属性优化定位精度（某些浏览器渲染问题）。绝对定位元素默认不会撑大父容器，需手动设置宽高或通过定位属性约束。通过 top、right、bottom、left 调整位置。绝对定位元素会基于 <body> 定位，可能导致布局错位。元素不再占据原位置空间，其他元素会重新排列。

2025-06-02 14:40:49 145

原创伪元素和伪类选择器

伪元素（Pseudo-elements）和伪类（Pseudo-classes）是 CSS 中用于扩展选择器功能的两种不同机制，初学者容易混淆它们的用途和语法。伪元素：添加装饰性图标（::before）、首字下沉（::first-letter）、清除浮动（::after）。伪类：表单交互（:focus）、动态效果（:hover）、列表筛选（:nth-child）。伪类选择元素的状态，伪元素创建元素的虚拟子元素。语法：以双冒号 :: 开头（CSS3 规范，但单冒号 : 兼容旧浏览器）。

2025-06-02 12:57:08 169

原创 HTML--CSS复合选择器

复合选择器的核心是直接连写多个简单选择器，常用于精细化匹配元素。组合符选择器（Combinators）通过符号（如空格、>、+、~）连接多个选择器，形成层级关系。复合选择器是多个简单选择器的直接连写（如 div.class）。后代选择器，子元素选择器，相邻兄弟选择器，通用兄弟选择器。⚠️ 注意区分：复合选择器 vs 组合符选择器。使用 * 匹配任意元素，与其他选择器组合。2. 标签选择器 + ID 选择器。与其他选择器结合使用伪类或伪元素。1. 标签选择器 + 类选择器。结合属性选择器与其他选择器。

2025-05-05 14:40:17 564

原创 HTML--CSS基础

今天要练习的内容如下，练习下三种CSS引入方式，练习下三种选择器。6.建立CSS的文件夹，建立CSS文件，插入内容。1.先用英文的“！3.插入<style>元素里的内容。

2025-04-13 21:05:57 208

原创 HTML--网页语义结构布局

表示文档的主要内容，一个页面中应该只有一个 <main> 元素。代表页面或章节的页眉，通常包含标题、标志、导航等信息。包含与主要内容相关但并非核心的信息，如侧边栏、广告等。代表页面或章节的页脚，通常包含版权信息、联系方式等。用于定义导航链接，帮助用户在页面或网站内进行导航。类似于书中的注释或附录，对正文起到补充说明的作用。如同书中的正文部分，是页面要传达的核心信息。就像书中的目录，能让读者快速找到想要的章节。好比书的封底，提供一些额外的、辅助性的信息。类似于书中的章节，把主题相关的内容归为一组。

2025-04-07 13:28:41 156