博客喵喵-CSDN博客

原创盒模型——清除浮动的讲解和运用

本文介绍了CSS浮动溢出问题及清除浮动的方法。当容器内子元素浮动时，会导致父元素高度塌陷，内容溢出。使用clear属性可以解决该问题：clear:both清除左右浮动，clear:left清除左浮动，clear:right清除右浮动。通过代码示例对比了使用清除浮动前后的效果差异，验证了清除浮动能有效防止高度塌陷，使父元素正确包裹浮动子元素。在实际布局中，应根据需求选择合适的清除方式，其中clear:both最常用。清除浮动是CSS布局中的重要技巧，对构建稳定页面结构至关重要。

2025-06-02 18:54:39 346

原创盒模型——浮动的讲解和运用

文章摘要：浮动(float)是CSS中实现元素定位的重要方式，通过设置left/right使元素脱离文档流，常用于图文混排。主要特性包括：1)浮动元素会生成浮层并按指定方向排列；2)导致父元素高度塌陷，可通过设置明确高度解决；3)引发文字环绕效果。文章通过代码示例展示了浮动的基本用法、常见问题及解决方案，最后以学校网页为例演示了浮动在布局中的实际应用，包含导航栏浮动、内容区布局等典型场景。

2025-05-26 22:35:42 808

原创盒模型——三种定位方式的讲解和运用

CSS盒模型定位方式是网页布局中的核心技术，通过不同的定位属性（如static、relative、absolute、fixed、sticky）实现元素的多样化排列。相对定位（relative）使元素相对于其正常位置偏移，原位置保留；绝对定位（absolute）使元素脱离文档流，相对于最近的已定位祖先元素定位；固定定位（fixed）使元素相对于视窗固定，页面滚动时位置不变。这些定位方式广泛应用于响应式设计、固定导航等场景，是构建复杂页面结构的基础。通过综合运用这些定位方式，可以实现复杂的网页布局设计。

2025-05-23 13:25:10 828

原创 CSS3基础——伪类选择符、伪元素的讲解和运用

伪类选择符和伪元素是CSS中用于增强网页交互性和视觉效果的重要工具。伪类选择符主要用于定义链接的不同状态（如未访问、已访问、悬停和激活状态）的样式，通过特定的语法规则（如a:link, a:visited, a:hover, a:active）来实现。伪元素则允许在不修改HTML文档结构的情况下，向文档中插入虚构的元素，从而实现特定的样式效果（如::before, ::after, ::first-letter, ::first-line）。

2025-05-12 21:35:59 379

原创 CSS修饰页面外观——文本、图像、表格、表单样式的讲解和运用

字体样式主要涉及文字本身的效果，而文本样式主要涉及多个文字（段落）的排版效果。所以CSS在命名属性时，特意使用了font 前缀和 text 前缀来区分两类不同性质的属性。2、字体样式的常用属性属性说明设置字体的类型设置字体的大小设置字体的粗细设置字体的倾斜3、文本样式的常用属性属性说明text-align设置文本的水平对齐方式设置行高设置文本修饰效果设置段落的首行缩进设置首字下沉设置文本的截断color设置文本颜色设置文本背景颜色<head>

2025-05-11 18:19:28 976

原创 CSS3基础——复合选择符的讲解和运用

在 HTML 里，CSS 复合选择符将简单的选择器组合，精准定位元素，方便网页设计者打造独特界面。复合选择符包括了交集选择符、并集选择符和关系选择符。

2025-04-22 22:54:03 430

原创 CSS3 基础——CSS引入方式和选择符的讲解和运用

CSS 是一种格式化网页的标准方式，它拓展了 HTML 的功能，使网页设计者能够以更有效、更易维护的方式设置网页格式。CSS 功能强大，CSS 的样式设定功能比 HTML 多，几乎可以定义所有的网页元素。

2025-04-13 18:33:48 932

原创 HTML页面布局与交汇——结构元素的讲解和运用

HTML 中的结构元素用于构建网页的基本框架和语义结构，使得网页的内容组织更加清晰、易于理解，同时也有助于搜索引擎优化和无障碍访问。合理使用这些结构元素，能够使 HTML 文档结构清晰、语义明确，提升网页的可维护性和用户体验。

2025-04-05 18:26:08 1009

原创 HTML基础标签——表单的运用和讲解

表单是网页中最常见的元素，是网站与服务器端与客户端之间沟通的桥梁。表单在网上随处可见，可用于登录页面输入账号、客户留言、搜索产品等。

2025-04-04 19:19:12 717

原创 HTMl基础标签——列表、表格的运用和讲解

#本文主要是对HTML基础标签中列表和表格的介绍和实例运用，详细介绍无序列表、有序列表这两种类型和各种表格标签。列表是以结构化、易读性更强的方式提供信息的方法。不但方便用户快速查找到重要的信息，还可以使文档结构更加清晰明确。在制作网页时，列表经常被用于写提纲和品种说明书。通过列表标签可以使内容在网页中条理清晰、层次分明、格式美观地表现出来。无序列表就是列表中列表项的前导符号没有一定的顺序，而是用黑点、圆圈、方块等一些特殊符号标识，类似于Word文档处理软件中的项目符号。创建一个无序列表，主要使用<ul>（u

2025-03-21 19:14:19 1167

原创 HTML基础标签——图像、超链接的运用和讲解

HTML的一个重要特性就是可以在文本中加入图像，既可以把图像作为文档的内在对象加入，又可以通过超链接的方式加入，还可以将图像作为背景加入到文档中。在HTML中，图像标签和超链接标签都是网页设计不可或缺的部分，能更加方便浏览者访问网页，也是前端设计师在设计网页中的重要因素，需要好好掌握这些标签的运用。

2025-03-02 18:02:58 1228