_CodePencil_-CSDN博客

原创 CSS专题之flex: 1常见问题

本文探讨了Flex布局中flex: 1的常见问题及其解决方案。当元素设置了flex: 1却未按预期填满剩余空间，或文本溢出处理失效时，这通常是由于Flex子元素的min-width默认为auto导致的。该默认值会基于内容决定最小宽度，使得长文本可能撑开容器。解决方案是将min-width设为0，强制元素可以收缩到小于内容尺寸。文章通过实例演示了问题现象，分析了规范依据，并提供了简洁有效的修复方法。

2025-05-24 14:58:36 802

原创 CSS专题之常见布局

作为一名前端开发，在日常开发中，写页面是必不可少的工作，但有时候发现很多的页面结构都是类似的，所以打算写一篇文章来梳理一下日常开发中常见的布局，如果哪里写的有问题欢迎指出。CSS 有如下常见布局：单列布局两列布局三列布局等高列布局粘连布局瀑布流布局每种布局都有多种实现方案，每种方案都有自己的优缺点，最好根据实际情况选择使用。

2025-05-20 15:43:51 929

原创 CSS专题之自定义属性

CSS 自定义属性（CSS Custom Properties），也称为 CSS 变量，是现代 CSS 中用于定义和复用值的强大工具。与 CSS 预处理器（如 Sass）不同，CSS 变量在浏览器运行时动态生效，支持与 DOM 和 JavaScript 交互，提升了样式的维护性和动态控制能力。变量的声明以 -- 开头，并通过 var() 函数使用，支持回退值和多种数据类型。CSS 变量具有作用域，遵循层叠规则，能够在 @media 和 @keyframes 等规则中使用，但不能用于媒体查询或选择器中。尽管现

2025-05-11 12:35:29 1031

原创 CSS专题之响应式设计(下)

本文主要探讨了移动端适配的基础概念和技术处理。随着移动设备尺寸的多样化，前端开发面临如何在不同设备上保持网页一致展示效果的挑战。文章首先介绍了移动端适配的定义，强调了其目的是在不同尺寸和分辨率的设备上保持良好的布局和视觉效果。接着，文章详细解释了设备独立像素、物理像素、设备像素比（DPR）、像素密度（PPI）等基础概念，并通过iPhone 6的例子进行了具体说明。此外，文章还介绍了视口的三种类型：布局视口、视觉视口和理想视口，并说明了如何通过<meta>标签来设置理想视口，以确保页面在不同设备上

2025-05-10 08:14:05 900

原创 CSS专题之响应式设计(上)

作为一名前端开发，响应式设计可以说是一定要会的，毕竟前端的一大工作内容就是去兼容页面在不同浏览器、不同设备中能够正常工作。但是这块知识点我认为相比于其它知识点是很有难度，因为涉及前端布局的历史发展以及很多其它的概念。在看了很多大佬的文章之后打算写一篇文章来好好梳理一下，如果哪里写的有问题欢迎指出。响应式设计英文全称是 Responsive Web Design，简称为RWD。拥有响应式设计的网站理论上可以适配不同设备屏幕的大小。

2025-04-27 08:12:11 706

原创 CSS专题之CSS单位

我们都知道在 CSS 中有很多的单位，但在我平常开发中用的最多的却只有px和，其它的没怎么用到过。想了一下没用到的原因可能是业务需求对响应式要求不高，或者是对其它单位不够熟悉，所以打算写一篇文章来好好梳理一下，如果哪里写的有问题欢迎指出。CSS单位分类固定单位（如px）：值固定，适合精确控制相对单位（如emrem）：基于参照基准动态计算，适合响应式设计常用单位特性em：基于当前元素的font-size计算，易受嵌套影响rem：基于根元素font-size。

2025-04-13 10:24:58 1074

原创 CSS专题之BFC

在上一篇文章中，如何避免外边距重叠的部分有提到，给容器元素添加（或者非visible的值），可以避免与内部子元素产生嵌套外边距重叠，出现这个效果的原因是因为BFC。BFC 也是前端面试中必备的知识点，所以就有了这篇文章来梳理一下，如果哪里写的有问题欢迎指出。BFC 定义：块格式化上下文，是一块独立的渲染区域，内部外部互不影响。创建方式：常用的有、浮动、绝对定位等。常见作用阻止外边距重叠解决高度塌陷避免浮动元素遮挡内容控制元素是否避开浮动实践建议优先使用（需注意兼容性）

2025-04-11 08:45:58 986

原创 CSS专题之外边距重叠

在上一篇文章中有提到块级盒子有一个特点，垂直方向相邻的外边距（margin）会产生重叠（合并）现象，这也是在开发中会经常遇到的，所以就有了这篇文章，如果哪里写的有问题欢迎指出。当块级盒子的垂直方向外边距相邻时，就会发生外边距重叠（合并）现象，产生单个外边距并取其中最大的外边距。只有垂直方向的外边距会产生重叠，水平方向的外边距不会重叠。行内盒子垂直方向的外边距会被浏览器忽略，所以也就不会重叠。外边距重叠是指垂直方向相邻的块级元素外边距会重叠，合并为其中较大的值。

2025-04-05 09:30:16 1016

原创 CSS专题之盒模型

CSS 盒模型是前端面试常问的知识点，所以打算写一篇文章来好好梳理一下，如果哪里写的有问题欢迎指出。CSS 盒模型用于描述 HTML 元素尺寸的计算方式和布局规则，决定了浏览器如何计算元素总大小和其在页面中的位置，网页中的任何元素都可以看做是一个盒子。元素的实际内容，如元素中的文本、图像或其他媒体内容。盒子内容与边框之间的空白区域。盒子的边框大小。⚠️ 注意：margin 外边距不影响盒子的实际大小，但会影响盒子在页面上的占位空间。

2025-04-04 12:00:07 1070

原创 CSS专题之继承

上一篇文章我们讲的是层叠，但在 CSS 中还有一种添加样式的方式总是和层叠搞混，那就是继承，所以就有了这篇文章，如果哪里写的有问题欢迎指出。如果一个元素某些属性没有设置值，那么就可能会继承祖先元素的值。例如属性可以被继承，那我们可以利用这个特性，给页面所有元素的祖先元素<body>添加属性，这样就可以不用给页面每个元素都明确指定字体了。上图展示了继承如何沿着 DOM 树向下传递。继承是子元素自动获取某些父元素样式的机制，其主要特点如下：默认继承。

2025-04-02 13:08:17 807

原创 CSS专题之层叠

CSS 英文全称为 Cascading Style Sheets，中文翻译为“层叠样式表”，那究竟什么是层叠？我却说不出个所以然，所以打算写一篇文章来梳理一下，如果哪里写的有问题欢迎指出。层叠就是浏览器应用样式的优先级规则，大致的规则流程顺序如下样式表的来源选择器优先级在源码中的顺序最佳实践不使用 ID 选择器来添加样式不使用!important。

2025-04-01 08:55:58 808

原创 HTML专题之语义化

石匠敲击石头的第 3 次有一道经典的前端面试题：如何理解 HTML 语义化？如果让我自己回答，我会说语义化会让 HTML 代码更利于维护，并且有利于 SEO 的优化。但这样的回答显然不够完整，所以才有了这篇文章来好好记录一下 HTML 语义化，如果哪里写的有问题欢迎指出。HTML 中语义化简单来说就是使用“有意义的标签”来表示页面上不同的区域。有利于构建清晰的结构，有利于团队的维护和开发。有利于搜索引擎爬虫更好的理解页面，以此来提升网页的权重。

2025-02-12 15:33:18 1874

原创 HTML专题之meta标签

之前在公司做文档管理的项目时，发现文档中外部粘贴的图片无法正常显示，最后是通过在<head>标签内部添加这行代码才解决的。我发现自己对<meta>标签所知甚少，所以才有了这篇文章来整理相关的知识点，如果哪里写的问题欢迎指出。<meta>标签用于表示 HTML 相关的元数据信息，元数据信息不会在页面中显示<meta>标签可以用于搜索引擎优化(SEO)、页面性能优化、用户体验优化和提高安全性。

2025-01-26 10:15:39 1958

原创 HTML专题之DOCTYPE

DOCTYPE 是什么？这个问题在网上一搜有很多相关的文章，如果让我自己回答竟然让我脑子里一片空白，我的印象里加了就表示这个网页的版本是 HTML5，但是这样的回答在面试时肯定是不行的，看了很多网上的文章，决定写一篇文章来梳理一下，第一次写文章，如果有哪里讲的不对或者不完整，欢迎大家指出错误。是用于声明文档类型，告诉浏览器用标准模式渲染网页HTML5 因为不再基于 SGML，因此不需要对 DTD 进行引用，使用最简单的声明方式。

2025-01-12 16:09:41 1411

m0_56326830的博客