首页
关于叶子
Search
1
Win10突然出现不能连接共享打印机一例
25,937 阅读
2
Laravel“高并发”导致数据“统计”异常一例
23,173 阅读
3
[iOS|Xcode]iOS-App自定义启动页制作(uniapp适用)
13,544 阅读
4
[经验存档] 微星(MSI)B150M-Pro-VD Plus安装系统蓝屏一例
13,027 阅读
5
Laravel 9高并发API数据操作的最佳实践
8,731 阅读
代码
分享
琐事
MySQL
数码
前端
MacOS
软件
Windows
登录
Search
标签搜索
Laravel
Windows
Laravel-Admin
PHP
uniapp
Vue
CSS
前端
chartjs
HTML
微信
小程序
web
App
工具
MySQL
PC
Adobe
Bootstrap
AI
Yesr00
累计撰写
57
篇文章
累计收到
7
条评论
首页
栏目
代码
分享
琐事
MySQL
数码
前端
MacOS
软件
Windows
页面
关于叶子
搜索到
4
篇与
的结果
2025-02-12
【CSS系统化学习】 - 盒模型与文本属性
第三部分:盒模型与文本属性3. 盒模型盒模型是CSS布局的核心概念,它定义了元素的内容、填充、边框和边距之间的关系。边框(border)作用:设置元素的边框样式、宽度和颜色。语法:.box { border: 2px solid #000; /* 宽度 | 样式 | 颜色 */ }细分属性:border-width:边框宽度。border-style:边框样式(如solid, dashed, dotted)。border-color:边框颜色。填充(padding)作用:设置元素内容与边框之间的空间。语法:.box { padding: 10px; /* 上下左右 */ padding: 10px 20px; /* 上下 | 左右 */ padding: 10px 20px 30px 40px; /* 上 | 右 | 下 | 左 */ }注意:填充会增加元素的尺寸。边距(margin)作用:设置元素与其他元素之间的空间。语法:.box { margin: 10px; /* 上下左右 */ margin: 10px 20px; /* 上下 | 左右 */ margin: 10px 20px 30px 40px; /* 上 | 右 | 下 | 左 */ }注意:负边距可用于重叠元素。盒模型计算标准盒模型:width和height仅包含内容区域。替代盒模型:width和height包含内容、填充和边框。.box { box-sizing: border-box; /* 启用替代盒模型 */ }4. 文本属性文本属性用于控制文本的样式和布局。字体系列(font-family)作用:设置文本的字体。语法:body { font-family: "Arial", sans-serif; }注意:提供备用字体以确保兼容性。字体大小(font-size)作用:设置文本的大小。语法:h1 { font-size: 24px; }常用单位:px, em, rem, %。字体粗细(font-weight)作用:设置文本的粗细。语法:.bold-text { font-weight: bold; /* 或数值如700 */ }文字颜色(color)作用:设置文本的颜色。语法:p { color: #333; }行高(line-height)作用:设置文本行之间的间距。语法:p { line-height: 1.5; /* 无单位表示倍数 */ }文本对齐方式(text-align)作用:设置文本的水平对齐方式。语法:.center-text { text-align: center; }文本装饰(text-decoration)作用:设置文本的装饰线(如下划线、删除线)。语法:a { text-decoration: none; /* 去除下划线 */ }文本转换(text-transform)作用:控制文本的大小写。语法:.uppercase { text-transform: uppercase; /* 大写 */ }
2025年02月12日
46 阅读
0 评论
0 点赞
2025-02-12
【CSS系统化学习】- CSS选择器
2. CSS选择器以下是CSS中常用的选择器及其示例:元素选择器作用:通过HTML标签名选择元素。语法:p { font-size: 16px; }示例:选中所有<p>标签并设置字体大小。类选择器作用:通过类名(class)选择元素。语法:.warning { color: #ff0000; border: 1px solid red; }示例:选中所有class="warning"的元素并设置红色文本和边框。注意:一个元素可以有多个类(如class="button primary")。ID选择器作用:通过唯一ID(id)选择元素。语法:#header { background-color: #333; padding: 20px; }示例:选中id="header"的元素并设置背景颜色。注意:ID在页面中应是唯一的。属性选择器作用:根据元素的属性或属性值选择元素。语法:/* 选中包含title属性的元素 */ [title] { cursor: help; } /* 选中type="text"的输入框 */ input[type="text"] { border: 1px solid #ccc; }示例:为所有带有title属性的元素添加帮助光标。伪类选择器作用:选择元素的特定状态(如悬停、聚焦等)。语法:/* 悬停状态 */ a:hover { text-decoration: underline; } /* 第一个子元素 */ li:first-child { font-weight: bold; } /* 无效的输入框 */ input:invalid { border-color: red; }常见伪类::hover, :active, :focus, :nth-child(n), :not(selector)。伪元素选择器作用:为元素的特定部分添加样式(如首行、首字母等)。语法:/* 段落的首字母 */ p::first-letter { font-size: 24px; } /* 元素内容前插入内容 */ .note::before { content: "⚠️ "; } /* 选中被用户选中的文本 */ ::selection { background: yellow; }常见伪元素:::before, ::after, ::first-line, ::placeholder。注意:伪元素使用双冒号(::),伪类用单冒号(:)。组合使用示例/* 类选择器 + 伪类 */ .button:hover { opacity: 0.8; } /* 后代选择器 */ nav ul li { list-style: none; } /* 子选择器 */ .container > .item { margin: 10px; }总结 CSS选择器是控制样式作用范围的核心工具,合理使用可大幅提升代码复用性和维护性。
2025年02月12日
54 阅读
0 评论
0 点赞
2025-01-07
【CSS系统化学习】- 基础部分
# CSS基础入门:样式引入与核心概念---## 一、CSS的三种引入方式### 1. 内联样式 **适用场景**:快速调试单个元素的样式 **语法**:直接在HTML标签中使用`style`属性 **示例**: ```html内联样式示例文本``` **缺点**:难以维护,无法复用样式规则。---### 2. 内部样式表 **适用场景**:单页面样式管理 **语法**:在HTML文件的``标签内添加``块 **示例**: ```html body { background-color: #f0f0f0; } h1 { color: blue; text-align: center; } 内部样式表示例标题 ``` **优点**:页面级样式隔离,避免污染全局样式。---### 3. 外部样式表 **适用场景**:多页面共享样式 **语法**:通过``标签引入独立的`.css`文件 **示例**: **styles.css**: ```css .container { max-width: 1200px; margin: 0 auto; } ``` **index.html**: ```html 内容区域 ``` **优势**: - 代码复用性强 - 便于团队协作 - 浏览器缓存优化性能---## 二、样式优先级规则 | 引入方式 | 优先级 | 作用范围 | |----------------|--------|----------| | 内联样式 | 最高 | 单个元素 | | 内部样式表 | 中 | 当前页面 | | 外部样式表 | 低 | 全局 |**冲突解决**: 当多个样式规则冲突时,优先级遵循: `!important > 内联样式 > ID选择器 > 类选择器 > 元素选择器`---## 三、最佳实践建议 1. **开发环境**:使用外部样式表便于维护 2. **生产环境**:压缩CSS文件(如`styles.min.css`) 3. **调试技巧**:通过浏览器开发者工具实时修改样式
2025年01月07日
2,506 阅读
0 评论
0 点赞
2025-01-07
【CSS系统化学习】- 大纲
最近失业,苦于之前的所有码农知识都是根据各种教程自学而来的,打算系统化学习一下。CSS 学习大纲基础部分1. 引入CSS 内联样式 内部样式表 外部样式表 2. CSS选择器 元素选择器 类选择器 ID选择器 属性选择器 伪类选择器 伪元素选择器 3. 盒模型 边框(border) 填充(padding) 边距(margin) 4. 文本属性 字体系列(font-family) 字体大小(font-size) 字体粗细(font-weight) 文字颜色(color) 行高(line-height) 文本对齐方式(text-align) 文本装饰(text-decoration) 文本转换(text-transform) 5. 背景 背景颜色(background-color) 背景图片(background-image) 背景重复(background-repeat) 背景位置(background-position) 背景附着(background-attachment) 中级部分6. 定位 浮动(float) 清除浮动(clear) 定位模式(position) 静态定位(static) 相对定位(relative) 绝对定位(absolute) 固定定位(fixed) z-index 7. Flexbox布局 显示Flex容器(display: flex;) 主轴方向(flex-direction) 换行(flex-wrap) 对齐项目(justify-content, align-items, align-self) 8. Grid布局 创建Grid容器(display: grid;) 列模板(grid-template-columns) 行模板(grid-template-rows) 区域模板(grid-template-areas) 自动填充(auto-fill) 自动适应(auto-fit) 网格间距(gap) 9. 过渡与动画 过渡效果(transition) 关键帧动画(@keyframes) 动画属性(animation) 10. 响应式设计 媒体查询(media queries) 视口单位(vw, vh, vmin, vmax) 图片响应式(max-width: 100%; height: auto;) 高级部分11. 变量 CSS变量(--variable-name) 12. 样式继承 了解哪些属性会继承 13. 特殊选择器 后代选择器 子选择器(>) 相邻兄弟选择器(+) 通用兄弟选择器(~) 14. 高级布局技术 多列布局(column-count, column-gap) 形状外边距(shape-outside) 分区布局(container-type, container-name) 15. 性能优化 减少重绘和回流 使用合适的单位 最小化样式的使用
2025年01月07日
2,722 阅读
0 评论
0 点赞