LaoKonB-CSDN博客

原创 CSS——弹性 flex 布局

通过 flex-basis、flex-grow 和 flex-shrink 控制项目在主轴上的初始大小、放大和缩小比例。Flexbox 是 CSS3 引入的一种一维布局模型，旨在提供更高效的方式来布局、对齐和分配容器内项目的空间。采用 Flex 布局的元素称为 Flex 容器，其内部的子元素称为 Flex 项目。当项目有固定高度时，其内容会在该高度内对齐，而不是拉伸以适应容器。即使项目的高度不同，它们的文本底部也会对齐在同一条水平线上。（如主价和小字体的原价）时，保持数字底部对齐。所有项目的文本基线会。

2025-06-02 18:23:19 1043

原创 CSS——清除浮动

该盒子必须出现在所有左浮动盒子的下方。如果前方有左浮动盒子，浏览器会将该盒子下推到所有左浮动盒子的最底部。进而强制父盒子重新计算高度，直到高度能包裹所有左浮动盒。浮动是让元素脱离文档流直接悬浮在页面上，父元素会随着元素的变化而改变，而当元素出现浮动时原本支撑着父元素的高度消失，造成高度塌陷。如果前方有右浮动盒子，浏览器会将该盒子下推到所有右浮动盒子的最底部。如果前方有浮动盒子，浏览器会将该盒子下推到浮动盒子的最底部。该盒子必须出现在所有左浮动和右浮动盒子的下方。该盒子必须出现在所有右浮动盒子的下方。

2025-06-02 17:01:47 420

原创 CSS——浮动布局

本文介绍了CSS浮动属性的工作原理及其影响。浮动元素会脱离文档流，形成独立浮层，左浮动会从左到右排列，右浮动则从右到左排列。浮动会导致父元素高度塌陷，虽然可以通过设置固定高度解决，但这会带来内容溢出、响应式适配差等问题。此外，浮动还会造成文字环绕效果，这种特性在现代前端开发中可能成为副作用。文章最后展示了一个包含浮动导航栏的网页结构示例，演示了浮动在实际布局中的应用。

2025-05-26 20:21:04 580

原创 CSS——盒子的定位

使用 fixed 的元素，相对于窗口固定，也就是无论上下滑动，盒子1总是会固定在窗口的某个位置.同理，2 盒子移动，那就只剩下 3 和 4 盒子。而且2盒子移动会盖住1盒子。使用了绝对定位移动了 1 盒子，就相当于 1 盒子不见了，其他盒子。这是位置是相对于整个窗口，距离左100px，距离下50px。在原本的代码下还添加了许多个盒子2来体现固定定位的作用。，也就是说向左向上位移50px就会回到原来的位置。fixed:绝对定位，相对域浏览器窗口进行定位。盒子定位的属性：position。

2025-05-17 22:49:43 524

原创 CSS——特殊选择器的使用

2. 有些浏览器对伪类的支持不太好，比如部分火狐浏览器无法支持: active 属性（我们主要使用谷歌浏览器和edge浏览器）：1. link , visited , hover , active 这四个伪类从前到后的顺序不能颠倒，否则会影响浏览器的渲染。这四个伪类选择器通常一起使用，以创建具有丰富交互效果的链接和按钮。可以把伪类理解为标签的四个内置动态属性,且只能在CSS配置。active 链接被激活时（鼠标左键按下但还未抬起）的样式。，它指定的是一个或其他相关的选择符的状态。

2025-05-05 20:35:28 319

原创 CSS——表格和表单的常用属性

1、border-collapse：设置表格的边框合并规则。2、border：设置表格的边框样式、宽度和颜色。表示边框为1像素宽度、实线样式、黑色颜色。4、text-align：设置表格单元格内文本的水平对齐方式。5、vertical-align：设置表格单元格内文本的垂直对齐方式。3、background-color：设置表格单元格的背景色。7、font-family：设置表格单元格内文本的字体系列。8、font-size：设置表格单元格内文本的字体大小。6、color：设置表格单元格内文本的颜色。

2025-05-05 17:20:34 1056

原创 CSS——复合选择器的使用

交集选择器（标签+类选择器、标签+ID选择器、类+类选择器）、并集选择器、关系选择器（后代选择器、子代选择器、相邻兄弟选择器、通用兄弟选择器）的使用

2025-04-19 22:06:22 507

原创 CSS——基础引入方式及选择器

CSS（层叠样式表，Cascading Style Sheets）是一种用于描述网页外观和样式的标记语言，主要控制网页的布局、颜色、字体、动画等视觉效果。它与 HTML 结合使用，HTML 负责页面结构， CSS 则专注于美化内容。行内样式属于最直接的一种，也叫内联样式。行内样式就是通过直接设置各种元素的 style 属性，从而达到设置样式的目的。但是这样的设置方式会使得整个页面变得更加臃肿，即便俩个元素一模一样，用户也需要在每个元素中单独书写。

2025-04-13 16:24:24 1215

原创 HTML——结构元素与其他标签的联合应用

article元素：用来放置诸如一篇文章或是博客一类的相对独立的信息，这些内容可不影响整体内容的情况下被删除或是放置到新的上下文中。用来呈现评论的 article 元素被包含在表示整体内容的 article 元素中。包含有关联的信息，但这些信息自身不能被放置到不同的上下文中，否则其代表的含义就会丢失。内容，该标签定义的内容可独立于页面中的其他内容使用。、如果article元素，aside元素或nav元素更符合使用条件，那么不建议使用section元素。的结构元素，该元素可以包含所有通常放在页面头部的内容。

2025-04-04 21:47:39 715