- 博客(173)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 css3中有哪些新属性（特性）？
Animations（动画效果）：通过 @keyframes 规则和 animation 属性，实现更复杂的动画效果，可以控制元素的逐帧动画行为。Transitions（过渡效果）：通过 transition 属性，实现在状态改变时，元素样式平滑过渡的效果，如颜色、大小、位置等。Box Shadow（阴影效果）：通过 box-shadow 属性，为元素添加阴影效果，可以设置阴影的颜色、大小、模糊度和偏移量。这些新属性和特性使得开发者能够更加灵活和精确地控制页面的外观和行为，提升用户体验和视觉吸引力。
2025-04-03 02:45:00
123
原创 前端 css中1rem、1em、1vh、1px各自代表的含义
可以根据浏览器窗口的高度进行缩放，方便实现响应式设计，尤其是在需要根据窗口高度调整元素大小时非常有用。的继承特性可能会导致计算复杂，因为它的值依赖于父元素的字体大小。的好处是可以根据根元素字体大小进行缩放，方便调整整个页面的比例，从而实现响应式设计。像素，是屏幕上最小的显示单位。它是一个绝对单位，表示物理像素的数量。它也是一个相对单位，相对于当前元素的字体大小。的好处是简单直接，但缺点是它不灵活，不适应不同屏幕尺寸和分辨率。视口高度指的是浏览器窗口的可见高度。它是一个相对单位，相对于根元素（通常是。
2025-04-02 02:00:00
166
原创 CSS中表示长度的单位有哪些？有什么区别？
vw表示相对于视口宽度的1%，vh表示相对于视口高度的1%，vmin表示相对于视口宽度和高度中较小值的1%，vmax表示相对于视口宽度和高度中较大值的1%。这些单位的区别在于其相对性质，像素单位是相对于设备屏幕的分辨率，百分比是相对于父元素的尺寸，可视视口单位是相对于浏览器窗口的尺寸，而磅、毫米和厘米则是相对于物理尺寸的单位。em和rem是相对长度单位，em相对于父元素，rem相对于根元素（html）。em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。
2025-04-01 01:15:00
210
原创 请弹性布局与传统盒模型布局的区别和优缺点
弹性布局和传统盒模型布局各有优缺点，适用于不同的场景和需求。同时，随着技术的不断发展，新的布局方式和工具也在不断涌现，我们可以根据实际情况灵活运用这些技术和工具来提高开发效率和页面效果。在网页设计和开发中，弹性布局（Flexbox）和传统盒模型（Box Model）布局是两种常用的布局方式。（1）灵活性高：Flexbox布局可以轻松地实现元素的水平或垂直排列、对齐和分布，使得复杂布局的创建变得更为简单。弹性布局是一种更为现代的布局方式，它提供了更为灵活的布局选项，可以轻松地实现元素的排列、对齐和分布。
2025-03-31 00:15:00
122
原创 何让一个容器成为弹性容器？什么场景下使用弹性布局？
CSS3的Flexbox（弹性盒布局模型）是一种强大的布局技术，用于创建灵活和响应式的布局。它解决了传统CSS布局模型在垂直和水平居中、等高列、自适应宽度等方面的一些挑战，使开发人员能够更轻松地构建各种复杂的布局。
2025-03-27 01:45:00
392
原创 css的布局方式有哪些，有什么优缺点
每种布局方式都有其适用的场景和限制，根据具体需求选择合适的布局方式可以提高开发效率和页面性能。在实际项目中，常常会结合多种布局方式来实现复杂的页面布局。CSS中有多种布局方式，每种方式都有其特点和适用场景。
2025-03-26 01:00:00
126
原创 CSS：为什么看起来content-box更合理，但还是经常使用border-box？
使用border-box时，需要明确定义元素的边框和内边距，以避免出现尺寸计算错误。
2025-03-25 00:45:00
244
原创 标准的CSS的盒子模型与低版本IE的盒子模型有什么不同
2 + padding*2 + height（严格来说是：margin-left + border-left + padding-left + height + padding-right + border-right + margin-right）2 + padding*2 + width（严格来说是：margin-left + border-left + padding-left + width + padding-right + border-right + margin-right）
2025-03-24 00:45:00
233
原创 width:100%与width:auto区别
当应用 width: 100% 样式时，元素的宽度将被设置为其父容器的宽度的百分比。如果父容器没有显式设置宽度，则元素的宽度将相对于其包含块的宽度进行计算。它的宽度会自动调整以适应内容的宽度，不会超过父容器的宽度。它填充了整个容器的宽度，无论容器的宽度如何变化，该元素的宽度都会相应调整。例如，如果一个元素的父容器宽度为 500px，设置 width: 100% 将使该元素的宽度为 500px。例如，如果一个元素的内容宽度为 300px，设置 width: auto 将使该元素的宽度为 300px。
2025-03-21 01:00:00
219
原创 html css中有哪些属性可以继承，哪些不可以继承
font-size-adjust：为某个元素规定一个 aspect 值，字体的小写字母 “x” 的高度与 “font-size” 高度之间的比率被称为一个字体的 aspect 值。font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。1、字体系列属性 2、除text-indent、text-align之外的文本系列属性。1、元素可见性：visibility、opacity 2、光标属性：cursor。
2025-03-20 01:00:00
210
原创 CSS中的z-index属性有什么作用
当一个页面上有多个定位元素时，z-index属性决定了这些元素的前后关系，即哪个元素在前，哪个元素在后。如果两个定位元素的z-index值相同，则根据它们在HTML文档中的顺序来确定堆叠顺序，后声明的元素位于前面。如果一个元素的z-index值为负数，则该元素将位于所有z-index为正数或零的元素之下。z-index属性的默认值为auto，这意味着元素的堆叠顺序将遵循其父元素的堆叠顺序。值较高的元素会覆盖较低的元素，所以蓝色盒子会出现在最上面，绿色次之，红色在最下面。
2025-03-19 02:45:00
290
原创 HTML元素脱离文档流的三种方法
将窗体自上而下分成一行一行，并在每行中按从左至右依次排放元素，称为文档流，也称为普通流。这个应该不难理解，HTML中全部元素都是盒模型，盒模型占用一定的空间，依次排放在HTML中，形成了文档流。元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。
2025-03-19 00:30:00
202
原创 为什么要初始化CSS样式？
例如，<h1> 到 <h6> 标签在不同浏览器中的默认字体大小和粗细可能不同，<ul> 和 <ol> 标签的默认缩进和列表样式也可能不同。边距和填充：不同浏览器对段落（<p>）、标题（<h1> 到 <h6>）、列表（<ul>、<ol>）等元素的默认边距和填充可能不同。表格样式：不同浏览器对表格（<table>）、表格行（<tr>）、表格单元格（<td>）等元素的默认边框和间距可能不同。通过初始化CSS样式，可以消除不同浏览器之间的默认样式差异，确保网页在不同浏览器中具有一致的外观和布局。
2025-03-18 19:51:42
375
原创 定位有几种，他们的特点分别是什么？是相对于什么进行定位的？
特点：元素的位置相对于最近的已定位的祖先元素（而非正常文档流）。CSS的定位主要包含静态定位（Static）、相对定位（Relative）、绝对定位（Absolute）和固定定位（Fixed）。特点：元素相对于其正常位置进行定位。相对于什么进行定位：绝对定位是相对于最近的已定位的祖先元素或初始包含块进行定位的。相对于什么进行定位：相对定位是相对于元素在文档流中的原始位置进行定位的。相对于什么进行定位：静态定位是相对于正常的文档流进行定位的。相对于什么进行定位：固定定位是相对于浏览器窗口进行定位的。
2025-03-18 00:45:00
226
原创 css 块元素、行内元素、行内块元素相互转换
1、行内块元素融合了块级元素和行内元素的特点，它会以块的形式显示，但是它不会强制换行，可以与其他元素在同一行上。3、常见的行内元素有span, a, strong, em, img, br, input等。3、常见的块级元素有div, p, h1~h6, ul, ol, li, form等。2、行内元素一般用于包裹文本或者在文本中插入一些特殊的元素，如强调、链接、图片等。2、块级元素通常用于构建页面的结构，如段落、标题、列表、div等。2、行内块元素可以设置宽度、高度、内外边距等，这与行内元素不同。
2025-03-17 00:30:00
334
原创 css选择器有几种？选择器的优先级是怎样的？
5、后代选择器的优先级主要是依据前四种选择器进行计算所得，比如 .divClass span { color:Red;style（行内样式：1000） > id（ID选择器：100） > class（class选择器：10） > 标签选择器（假设级别为1）1、最高优先级是 (直接在标签中的设置样式，假设级别为1000) <div style="color:Red;4、最后优先级是 （标签选择器，假设级别是 1） div{color:Red;4、后代选择器（类选择器的后代选择器）即页面中的标签的id。
2025-03-13 02:00:00
214
原创 css引入方式有几种？link和@import有什么区别？
link的加载时机是在HTML文件解析时，因此它能够保证样式表和HTML结构同时加载，避免了因样式表加载延迟导致页面渲染不正确的问题。而@import的加载时机是在CSS文件解析时，如果引入的CSS文件较大，可能会延迟整个页面的渲染时间。此外，link引入样式表的方式更具有兼容性，能够被所有浏览器支持，而@import在一些老版本的浏览器中可能不被支持。如果需要使用@import引入外部样式表，建议将其放在CSS文件的底部，以避免因样式表加载延迟导致页面渲染不正确的问题。
2025-03-12 01:15:00
187
原创 CSS 的 link 标签放在 head 标签之间的作用
当我们在开发网页时，经常会遇到关于CSS文件引入位置的讨论。有些人喜欢将CSS文件的链接放在HTML文件的底部，而另一些人则认为最好将CSS链接放在<head>标签之间。那么，究竟应该将CSS的link标签放在head标签之间的原因是什么呢？让我们来深入探讨一下。CSS 的<link>标签是什么?link 标签是 HTML 中的一个元素，用于引入外部的资源文件，其中包括 CSS 文件。
2025-03-11 01:00:00
515
原创 绝对路径和相对路径区别详解
如果你使用绝对路径c:/website/img/photo.jpg，那么在自己的计算机上将一切正常，因为确实可以在指定的位置即c:/website/img/photo.jpg上找到photo.jpg文件，但是当你将页面上传到网站的时候就很可能会出错了，因为你的网站可能在服务器的c盘，可能在d盘，也可能在aa目录下，更可能在bb目录下，总之没有理由会有c:/website/img/photo.jpg这样一个路径。另外我们使用“../”来表示上一级目录，“../../”表示上上级的目录，以此类推。
2025-03-10 18:27:22
265
原创 input 的 name 属性的作用？（总结）
当用户提交表单时，字段的name属性将与字段的值一起发送到服务器端，以供进一步处理。数据处理和服务器端编程：在服务器端编程中，可以使用name属性来标识和操作表单字段的值。在后端编程语言如PHP、Python或Java中，可以使用表单字段的name属性来获取对应字段的值，并进行相应的数据处理。表单提交：当用户填写表单并提交时，name属性指定的字段名称将与该字段的值一起作为键值对传递到服务器端。其中，name属性用于定义表单字段的名称，也就是对应字段的标识符。
2025-03-09 01:00:00
179
原创 label的作用是什么？是怎么用的？
总之，<label> 元素是一个非常有用的HTML元素，用于提供对表单控件的标签和说明文本，增强了表单的可用性和可访问性。<label> 元素是HTML中的标签，其主要作用是提供对表单元素的标签或说明文本，从而增强表单的可访问性和用户体验。屏幕阅读器等辅助技术可以读取 <label> 元素的文本，并将其与关联的表单控件关联起来，从而使残障用户能够更容易地理解表单的结构和如何填写它。提供标签文本：<label> 元素内的文本描述与相应的表单控件相关联，使用户能够更容易地理解表单的内容和目的。
2025-03-08 01:00:00
168
原创 什么是iframe？请讲述一下iframe框架的优缺点？
它可以在网页中嵌入其他页面或文档，将其他页面的内容以框架的形式展示在当前页面中。iframe的使用方式是通过在HTML文档中插入iframe标签，并设置相应属性来指定要嵌入的页面地址，从而在当前页面的指定位置显示嵌入的页面。iframe框架具有一些明显的优点，但也存在一些缺点。性能问题：每个iframe都需要单独加载和渲染，这会增加额外的HTTP请求和页面加载时间，导致网页的加载速度变慢，降低性能。异步加载：iframe的加载是异步的，页面可以在不等待iframe加载完成的情况下进行展示。
2025-03-07 00:45:00
155
原创 HTML 表单 (form) 的作用解释
GET 是不安全的：因为在传输过程，数据被放在请求的 URL 中，而如今现有的很多服务器、代理服务器或者用户代理都会将请求 URL 记录到日志文件中，然后放在某个地方。method=get | post：指明提交表单的 HTTP 方法，可能的值有 POST 或 GET，在数据传输过程中分别对应了 HTTP 协议中的 GET 和 POST 方法。表单域包含了文本框、多行文本框、密码框、隐藏域、复选框、单选框和下拉选择框等，用于采集用户的输入或选择的数据，下面分别讲述这些表单域的代码格式。
2025-03-06 19:42:34
414
原创 Canvas和SVG：你应该选择哪一个？
Canvas的优势在于它可以处理大量的图形和动画，因为它使用的是位图，而不是矢量图。在这篇文章中，我们将探讨Canvas和SVG的区别以及它们的应用场景，帮助你决定哪种技术更适合你的项目。但是，Canvas通常更适合处理复杂的动画，因为它可以处理大量的图形和动画。Canvas使用位图来处理图形和动画，这意味着它可以快速渲染大量的图形和动画。在选择Canvas或SVG时，你应该考虑你的项目需要什么样的图形和动画，以及你需要什么样的交互和可访问性。处理需要无限缩放的图形和动画，如地图和数据可视化。
2025-02-26 02:15:00
215
原创 JPG,PNG, GIF的区别是什么？如何进行选择？
特点：PNG是一种无损压缩的图像格式，支持24位真彩色和透明度通道（PNG-8），因此可以提供高质量的图像效果和丰富的视觉效果。PNG格式的图像通常比JPG格式的图像具有更高的颜色深度和更好的细节表现。如果需要较高的压缩率和较小的文件大小，则选择JPG；不同设备和操作系统可能对不同的图像格式有不同的支持程度，因此需要选择具有广泛兼容性的格式。特点：JPG是一种有损压缩的图像格式，支持24位真彩色，可以提供较为丰富的色彩表现。JPG、PNG、GIF是三种常见的数字图像格式，它们各自具有不同的特点和适用场景。
2025-02-25 01:30:00
308
原创 input只读，禁用，必填，提示词（占位符）属性分别是什么？
在HTML中，<input>元素有几个常用的属性，包括只读（readonly）、禁用（disabled）、必填（required）和提示词（占位符，placeholder）。示例：<input type="text" name="username" required placeholder="请输入用户名">示例：<input type="text" name="username" placeholder="请输入用户名">属性值：无（只需在元素中包含该属性即可）属性值：无（只需在元素中包含该属性即可）
2025-02-24 00:15:00
295
原创 HTML中有哪些属于表单元素?那些属于表格元素?请分别列举5个并说明用途？
input>：这是最常用的表单元素，用于获取用户输入的数据。可以通过不同的"type"属性值（如"text", "password", "submit", "email"等）来改变输入字段的类型。在HTML中，有一些元素是专门用于表单的输入和布局，还有一些元素是专门用于表格的显示。<thead>, <tbody>, <tfoot>：这些元素用于对表格的头部、主体和尾部进行分组，以方便样式和脚本的使用。<textarea>：用于获取多行的用户输入。<th>：定义表格的头部单元格，通常用于标题或列名。
2025-02-23 18:00:00
150
原创 选项卡制作
这是一个非常适合练习JavaScript的小案例，各位小伙伴可以自行更改样式和内容，如果大家运行时出现问题或代码有什么不懂的地方都可以随时评论留言或联系博主。通过 forEach 循环遍历选项卡按钮，给每个按钮添加点击事件监听器，当点击某个按钮时，隐藏之前显示的选项卡内容，然后显示当前点击按钮对应的选项卡内容。切换选项卡内容：点击不同的选项卡按钮时，会隐藏之前显示的选项卡内容，并显示当前点击按钮对应的选项卡内容。默认显示第一个选项卡内容，即将第一个选项卡内容的 display 属性设置为 block。
2025-02-23 04:45:00
278
原创 行内元素，块级元素，行内块元素
(5)行内元素的paddding可以设置,margin只能够设置水平方向的边距。（2）可以对它设置宽高和内外边距，默认是它容器（父级元素）的100%(2)设置宽、高无效，默认宽高是其自身内容的宽高。（4）可以容纳其他块级元素和行内元素（内联元素）(1)无法自动换行，会和相邻的行内元素排成一行。(3 ) 默认宽、高为其内容的宽、高。（2）可以设置宽、高、行高、内外边距。特点：综合了块级元素和行内元素的特点。(3)只能设置水平方向的内外边距。(4)只能容纳其他行内元素和文本。
2025-02-16 00:45:00
141
原创 meta viewport是什么？ 原理是什么？
maximum-scale 和 minimum-scale: 控制页面的最大和最小缩放级别。width: 设置视口的宽度。width=device-width 表示视口的宽度等于设备的宽度。user-scalable=no 禁止用户缩放，user-scalable=yes 允许缩放。initial-scale: 设置页面加载时的初始缩放比例。避免缩放问题: 通过设置合适的 initial-scale，避免默认缩放造成的排版问题。提升用户体验: 通过合理的视口设置，提高在移动设备上的可读性和可操作性。
2025-02-15 00:30:00
167
原创 编码集的作用是什么？常见的编码集有什么？为什么常用utf-8?
ASCII编码集主要适用于英文文本。ISO-8859：ISO-8859是一系列的字符编码集，每个编码集可以表示256个字符，包括不同语言的字母、符号和特殊字符。节省空间：UTF-8采用变长编码方式，根据字符的不同使用不同长度的字节序列表示，对于英文字母和常见符号，UTF-8只需要一个字节表示，而对于中文等非ASCII字符，UTF-8会使用多个字节表示。兼容性：UTF-8可以表示ASCII字符，这意味着使用UTF-8编码的文本可以与使用ASCII编码的文本互相兼容，不会出现乱码问题。为什么常用UTF-8？
2025-02-14 00:15:00
149
原创 对WEB标准以及W3C的理解与认识
WEB标准是指在Web开发和设计中，确保内容、结构和表现的统一性、可访问性和兼容性的一系列技术规范。制定Web标准：W3C负责制定和维护各种Web标准，确保Web技术的互操作性和可扩展性。推动Web技术的发展：W3C通过研究和开发新技术，推动Web的发展，如HTML5、SVG、WebRTC等新标准。增强的可访问性：随着对可访问性的重视，更多的标准和工具将被制定，以确保所有用户都能平等使用Web。可访问性：符合W3C的可访问性标准能够让更多的用户，包括残障人士，能够使用和访问Web内容。
2025-02-13 09:33:20
410
原创 JavaScript 函数 Function 的基本使用
在讲函数调用时机之前，需要了解一下 JavaScript 的执行机制，JavaScript 是单线程的（同一时间只能做一件事），JavaScript 所有的任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。
2025-02-09 02:45:00
230
原创 CSS盒子模型box-sizing属性详解
当width和height属性设置为同一个值时，content-box的内容区域大小等于border-box整个盒子的大小。content-box的width，height与padding，border的大小无关。border-box的width，height与padding，border的大小有关。content-box的width和height从content算起，不包含border和padding。border-box的width和height从border算起,包含border和padding。
2025-02-08 01:00:00
295
原创 JPG、PNG、GIF有什么区别？
特点：PNG是一种无损压缩的图像格式，支持24位真彩色和透明度通道（PNG-8），因此可以提供高质量的图像效果和丰富的视觉效果。PNG格式的图像通常比JPG格式的图像具有更高的颜色深度和更好的细节表现。如果需要较高的压缩率和较小的文件大小，则选择JPG；不同设备和操作系统可能对不同的图像格式有不同的支持程度，因此需要选择具有广泛兼容性的格式。特点：JPG是一种有损压缩的图像格式，支持24位真彩色，可以提供较为丰富的色彩表现。JPG、PNG、GIF是三种常见的数字图像格式，它们各自具有不同的特点和适用场景。
2025-02-07 23:45:00
354
原创 【JavaScript】之浏览器对象模型（BOM）详解
BOM 为 JavaScript 提供了与浏览器交互的强大能力。理解 BOM 的核心对象和方法，可以让你更好地控制浏览器窗口、处理用户交互和获取浏览器信息，从而创建更丰富的 Web 应用。希望本文和其中的示例能帮助你更好地掌握 JavaScript BOM！
2025-02-03 00:15:00
884
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人