- 2024-11-22css笔记： 继承关系
这两天写css的时候发现子元素继承了父元素的css样式，不显示它自己的。经过一番搜索，得出以下几个解决方案：检查选择器优先级增加样式的特异性避免不必要的继承使用!important标记（谨慎使用）检查CSS规则的顺序明确样式规则，减少对父元素的依赖考虑使用CSS变量理解CSS的层叠规则
- 2024-11-22fastadmin自定义主题并随切换变更iframe颜色
一、不同皮肤主题的css文件fastadmin自带一些皮肤，不同的皮肤对应不同的css样式文件，对应目录:public/assets/css/skins。比如拿其中一个css自定义一些样式，记住所需要强制定义样式的css前面一定加所在皮肤文件的样式头，如.skin-black-blue 二、随着切换皮肤主题，修改ifrme的样
- 2024-11-22你知道全屏滚动的原理是什么吗？它用到了CSS的哪些属性？
全屏滚动（FullPageScroll）的原理是让浏览器视口（viewport）的高度与每个“页面”或“屏幕”的高度相等，然后通过JavaScript或CSS控制滚动，每次滚动一个视口的高度，从而实现类似幻灯片的效果。它主要用到了以下CSS属性和技术：height:100vh或height:100%:这是核心所在。100vh表
- 2024-11-22列举CSS优化、提高性能的方法
CSS优化可以显著提高前端性能，减少页面加载时间，提升用户体验。以下是一些常用的CSS优化方法：1.减少HTTP请求:合并CSS文件:将多个CSS文件合并成一个，减少浏览器请求次数。可以使用构建工具例如Webpack、Gulp等自动化完成。使用CSSSprites:将多个小图标或背景图片合并成一张大
- 2024-11-22重置（初始化）css的作用是什么？
重置（初始化）CSS的作用是将所有浏览器内置的默认样式统一化，为网页提供一个干净的、一致的样式起点，避免跨浏览器兼容性问题。不同的浏览器对HTML元素有不同的默认样式，例如字体大小、行高、边距、内边距等等。如果不进行重置，这些差异会导致网页在不同浏览器上的显示效果不一致，给
- 2024-11-21前端技术对css布局的学习
css布局目录css布局盒模型传统布局Flexbox弹性盒子布局Grid布局（了解）盒模型CSS盒模型是前端开发中的一个核心概念，它描述了网页布局中元素是如何被组织和渲染的。每个HTML元素都可以被看作是一个矩形的盒子，这个盒子由内容（content）、内边距（padding）、边框（border）和外边距（margin）四个
- 2024-11-21你有用过CSS预处理器吗？喜欢用哪个？原理是什么？
我用过CSS预处理器，主要用过Sass、Less和Stylus。我最常用的是Sass，因为它拥有强大的功能、活跃的社区和丰富的学习资源。以下是我喜欢Sass的一些原因：语法简洁易懂:Sass提供了两种语法：SCSS(SassyCSS)和缩进语法。SCSS与CSS语法非常相似，易于上手；缩进语法则更加简
- 2024-11-21解释下 CSS sprites的原理和优缺点分别是什么？
CSSSprites，中文通常被称为“CSS精灵”或“雪碧图”，是一种网页图像优化技术。它的核心原理是将多个小图标或图像合并到一张大图中，然后利用CSS的background-position属性来精确显示需要的那部分图像。原理：合并图像:将多个小图标或图像合并成一张大图（雪碧图）。这张大图通常是PNG
- 2024-11-21什么是FOUC？你是如何避免FOUC的？
FOUC(FlashofUnstyledContent)指的是网页在加载过程中，浏览器先渲染未经样式化的HTML内容，然后才加载CSS样式，导致用户短暂地看到页面元素的原始样式，然后页面突然“跳”到正确的样式。这会造成不佳的用户体验。避免FOUC的关键在于确保CSS样式在HTML内容渲染之前或与之同时加载
- 2024-11-21说说你对html中的置换元素和非置换元素的理解
在HTML中，元素可以大致分为置换元素（Replacedelements）和非置换元素（Non-replacedelements）。它们的区别在于内容的渲染方式：置换元素(ReplacedElements):定义:内容的渲染不由CSS控制，而是由外部资源决定，例如图像、视频、音频、表单控件等。HTML只提供占位，实际内容由浏览
- 2024-11-21css的属性content有什么作用呢？有哪些场景可以用到？
CSS的content属性用于在元素的::before和::after伪元素中插入生成的内容。它本身并不直接作用于元素本身，而是作用于这些伪元素，允许你在元素内容的前面或后面添加内容，而无需修改HTML结构。content属性的主要作用是插入各种类型的内容，包括：字符串:可以使用单引号或双引
- 2024-11-21页面导入样式时，使用link和@import有什么区别？
在前端开发中，link和@import都可以用来导入样式表，但它们之间有一些关键的区别：1.加载方式和性能:link:link标签是HTML元素，浏览器会并行下载HTML文件和CSS文件，这意味着CSS文件的下载不会阻塞HTML文件的解析和渲染，从而提高页面加载速度。@import:@import是CSS
- 2024-11-21三圆点CSS3 loading加载动画特效库
在线预览 插件下载 安装可以通过npm来安装three-dots.css。npminstallthree-dots--save 使用方法在页面中引入three-dots.css。<linkhref="css/three-dots.css"rel="stylesheet"> HTML结构然后在你需要添
- 2024-11-20前端游戏网站【GAME】大学生web期末大作业 html+css+js
目录1.项目介绍2项目展示3.代码部分4.联系我 1.项目介绍这是大一时候写的一个前端游戏网站，包括了火影忍者，原神，蛋仔派对（没有写完），英雄联盟（没有写完），现在才想起来有怎么一个项目可以分享出来可以练练手。2项目展示前面使用html+css+js：Div、导航栏、图片轮翻效果、视频
- 2024-11-20CSS入门（主要讲解字体，链接，列表，表格）
一.CSS字体1.CSS字体属性要定义字体的加粗，大小，文字样式2.设置字体系列font-family属性设置文本的字体系列。font-family属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。注意:如果字体系列的名称超过一个字，它必须用引号，如Fo
- 2024-11-20初始化CSS
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em0}hr{box-sizing:content-box;height:0;overflow:visible}pre{f
- 2024-11-19前端技术对css属性的学习
css属性目录css属性文本字体背景文本属性说明CSScolor设置文本的颜色1direction规定文本的方向/书写方向2letter-spacing设置字符间距1line-height设置行高1text-align规定文本的水平对齐方式1text-decoration规定添加到文本的装饰效果
- 2024-11-19圣诞老人html-css和js没发奥
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Jinglebellsrock!</title><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.
- 2024-11-192025年前端面试准备css篇
1.css盒子模型css包含了内容(content),内边距(padding),边框(border),外边距(margin)等因素。css标准盒子模型宽包括：margin+border+padding+widthIE盒子模型的宽包括：border+padding+width 2.css选择器优先级id选择器:#main{}class选择器:.main{}
- 2024-11-19【前端基础】1.CSS文件的加载和解析顺序
HTML中，使用<link>标签先后加载两个CSS文件，其加载和解析顺序主要遵循以下规则： CSS文件的加载与解析在现代浏览器中是边加载边解析的过程，而不是等所有CSS文件加载完毕后再进行解析。1.加载顺序：CSS文件按照<link>标签在HTML中的书写顺序加载。
- 2024-11-19你可能不知道的JavaScript-1
目录1.防御式CSS2.js的应用领域JavaScript中让人迷惑的知识点3.一个网页URL从输入到浏览器中到显示经历过怎么样的解析过程呢4.浏览器内核1.是什么2.浏览器的渲染过程HTML解析CSS解析构建RenderTree3.回流与重绘1.回流(重排）2.重绘3.页面性能优化1.减少DOM操
- 2024-11-19博客园-awescnb插件-geek皮肤优化-样式优化
- 2024-11-19CSS在Table列右上角添加标记简单实现
实现效果代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>TableRibbonDemo</
- 2024-11-19从五种网页布局到八种常用布局四十二种CSS方法
/*contentstyleend*//*五种布局一、流式布局相对于屏幕大小设置元素百分百自适应。float:right或left二、网格布局Grid二位表格（网格）。display:grid。三、弹性布局Flexbox容器内自动调整元素大小和位置。display:flex;四、浮动布局float多列布局。overflow:hidden;floa
- 2024-11-19大学生HTML期末大作业——HTML+CSS+JavaScript南宁绿城
HTML+CSS+JS【旅游网站】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计