找到
3
篇与
默认分类
相关的结果
-
材质缩写列表 材质缩写列表 以下是室内设计领域常用的 材质缩写列表，覆盖主流材料类型及表面处理效果，助你高效命名与管理CAD图库： 一、基础材质类 材质名称（中文）材质名称（英文）推荐缩写示例应用场景木材WoodWD实木地板（WD_橡木）、木饰面石材StoneST大理石（ST_卡拉拉）、花岗岩金属MetalMT金属框架（MT_不锈钢）玻璃GlassGL玻璃隔断（GL_钢化_12mm）陶瓷CeramicCR瓷砖（CR_釉面_600x600）塑料PlasticPL塑料椅（PL_注塑成型）布料FabricFB布艺沙发（FB_亚麻）皮革LeatherLT皮革座椅（LT_头层牛皮）混凝土ConcreteCN清水混凝土墙面（CN_裸露）亚克力AcrylicAC亚克力台面（AC_透明_20mm）石膏GypsumGP石膏线（GP_欧式雕花）树脂ResinRS树脂装饰品（RS_仿铜）二、细分材质类 材质名称（中文）材质名称（英文）推荐缩写特殊说明不锈钢Stainless SteelSSSS_304（标号）黄铜BrassBRBR_拉丝（表面工艺）铝合金Aluminum AlloyALAL_阳极氧化（处理工艺）人造石Artificial StoneASAS_石英石（厨房台面）强化复合地板Laminate FlooringLFLF_12mm（厚度）生态木Eco-WoodEWEW_户外地板（防腐）超纤皮Microfiber LeatherMLML_仿麂皮（手感）岩板Sintered StoneSSSS_6mm（超薄台面）碳纤维Carbon FiberCFCF_3K（编织密度）马赛克MosaicMCMC_玻璃（材质类型）三、表面处理效果缩写 表面效果（中文）表面效果（英文）推荐缩写示例应用哑光MatteMATMT_不锈钢_MAT（哑光不锈钢）亮面GlossyGLSST_大理石_GLS（抛光大理石）拉丝BrushedBRUBR_黄铜_BRU（拉丝黄铜）磨砂SandblastedSANGL_磨砂玻璃（GL_SAN）阳极氧化AnodizedANOAL_ANO_黑色（阳极氧化铝）浮雕EmbossedEMBFB_浮雕布料（FB_EMB）仿古AntiqueANTWD_仿古木纹（WD_ANT）四、组合材质命名规则 基础材质+细分类型： 示例：SS_304（不锈钢304标号）、WD_胡桃木（胡桃木材） 材质+表面处理： 示例：AL_ANO_黑色（黑色阳极氧化铝）、BR_BRU（拉丝黄铜） 复合材质组合： 示例：MT+GL_隔断（金属+玻璃隔断）、WD+SS_吧台（木饰面+岩板吧台） 五、避坑指南 避免歧义缩写： 如“SS”可能代表不锈钢（Stainless Steel）或岩板（Sintered Stone），需通过上下文或标注区分。 团队统一标准： 在团队内制定《材质缩写对照表》，避免多人协作时混淆。 动态更新补充： 遇到新型材料（如生物基塑料、石墨烯涂层）时，及时扩充缩写库。 六、实战命名示例 文件命名：沙发_MOD_WD胡桃木_2200x900.dwg （现代风格胡桃木沙发） 材质标注：MT_SS拉丝_厚度2mm （拉丝不锈钢，厚度2mm） 掌握这些缩写，你的CAD文件命名将更专业高效！
-
Flowus函数使用手册 属性与常量 1.属性 标题说明使用方法示例返回值类型%属性名%获取每条记录 %属性名% 的属性值prop("%属性名%")prop("%属性名%") == %属性值%原属性公式编辑菜单中列出全部属性，%属性值%显示用户编辑公式时，入口记录的属性值 2.常量 标题说明使用方法示例返回值类型e自然常数，自然对数的底数ee == 2.718281828459045:Numberpi圆周率pipi == 3.141592653589793:Numbertrue真 (true)true(true ? "是" : "否") == "是":Booleanfalse假 (false)false(false ? "是" : "否") == "否":Boolean函数 以下是对所有函数的更细粒度分类整理，按功能模块划分并标注核心特性： 一、字符串函数 1. 基础操作 函数名核心功能特殊说明示例concat多字符串连接支持无限参数concat("A","B","C") → "ABC"join首字符串作为分隔符连接首个参数为分隔符join("-","2023","10") → "2023-10"slice按索引截取子字符串支持负索引slice("Hello",1,3) → "el"substring按索引截取子字符串（类似slice）新增功能substring("FlowUs",0,4) → "Flow"length获取字符串长度支持多语言字符length("中文") → 22. 正则处理 函数名核心功能正则特性示例replace替换首个正则匹配项支持捕获组replace("a1b","\d","X") → "aXb"replaceAll替换全部正则匹配项全局替换replaceAll("a1b2","\d","X") → "aXbX"test检测正则匹配返回布尔值test("abc","^a") → truematch返回所有正则匹配结果（新增）返回列表match("a-b-c","-") → ["-","-"]3. 格式转换 函数名核心功能转换规则示例format通用类型转字符串支持日期/布尔/数字format(true) → "true"lower全小写转换（新增）保留原非字母字符lower("FlowUs!") → "flowus!"upper全大写转换（新增）国际化字符处理upper("íñ") → "ÍÑ"4. 样式控制 函数名核心功能样式类型示例style添加文本样式（新增）支持9种颜色+背景色style("注意","b","red") → 粗体红字unstyle移除文本样式（新增）可指定移除特定样式unstyle(带格式文本,"b") → 无粗体5. 特殊功能 函数名核心功能特性示例id生成唯一记录ID全局唯一性id() → "e68380be-..."repeat重复字符串（新增）支持0次重复repeat("na",2) → "nana"二、逻辑函数 1. 条件判断 函数名核心功能参数特性示例if基础三元运算支持嵌套if(score>60,"合格","重修")ifs多条件短路判断（新增）类似switch-caseifs(age<13,"儿童",age<18,"青少年","成人")2. 逻辑运算 函数名核心功能运算规则示例not逻辑非支持类型自动转换not("") → true (空字符串转false)and逻辑与短路求值and(1,0) → falseor逻辑或短路求值or(null, "默认值") → "默认值"3. 比较运算 函数名核心功能支持类型示例equal严格相等判断类型敏感equal(1,"1") → falselarger跨类型比较（文本/数字/日期）字典序比较文本larger("b","a") → truesmallerEq小于等于日期比较精确到毫秒smallerEq(now(), deadline)三、数字函数 1. 数学计算 函数名核心功能算法特性示例sum多参数求和（新增）自动跳过非数字sum(1,"2",3) → 6median计算中位数（新增）支持偶数项取均值median(1,2,3,4) → 2.5cbrt立方根计算支持负数cbrt(-27) → -32. 数值处理 函数名核心功能边界处理示例ceil向上取整正负数统一规则ceil(-4.2) → -4floor向下取整与ceil对称floor(4.7) → 4round银行家舍入法四舍六入五成双round(2.5) → 23. 算术运算 函数名核心功能异常处理示例mod取模运算支持负数mod(-7,5) → -2pow幂运算支持小数指数pow(9,0.5) → 3log2二进制对数精确浮点计算log2(256) → 8四、日期函数 1. 时间获取 函数名核心功能时区处理示例today当前日期（新增）系统时区today() → 2023-10-01now当前完整时间含毫秒精度now() → 2023-10-01 14:30:45.1232. 时间戳转换 函数名核心功能精度级别示例timestamp转UNIX时间戳（毫秒）13位数字timestamp(now()) → 1696159845123fromTimestamp时间戳转日期自动识别10/13位fromTimestamp(1696159845) → 2023-10-013. 日期运算 函数名核心功能特殊单位支持示例dateAdd增加时间间隔支持季度(quarters)dateAdd("2023-01-31",1,"months") → 2023-02-28dateBetween计算时间差周按7天计算dateBetween("2023-01-01","2023-02-01","days") → 314. 格式化解析 函数名核心功能格式符号库示例formatDate自定义格式输出支持YYYY/MM/DD等formatDate(now(),"Q季度") → "4季度"parseDate解析ISO8601格式（新增）自动时区转换parseDate("2023-10-01T00:00Z") → 本地时间五、高级函数 1. 列表操作 函数名核心功能索引规则示例at安全索引访问（新增）支持负数索引at([1,2,3],-1) → 32. 变量控制 函数名核心功能作用域规则示例let单变量定义（新增）局部作用域let(x,5,x*2) → 10lets多变量定义（新增）顺序赋值lets(a,1,b,2,a+b) → 3关键增强说明 正则深度支持：match() 返回数组类型，需配合后续列表处理函数使用 时区敏感函数：now()/parseDate() 使用系统时区，fromTimestamp() 自动处理时区偏移 类型严格模式：equal() 严格区分 1 和 "1"，需注意类型转换 数学精度：浮点运算可能存在精度问题（如 0.1+0.2），建议使用 round() 控制精度 样式叠加：style() 支持多参数叠加样式 style("文本","b","i","blue_background") 此分类体系可帮助快速定位函数，建议结合具体场景选择： 数据清洗：优先使用 replaceAll + test + format 组合 动态报表：ifs + formatDate + style 实现条件化格式输出 时间序列：dateBetween + dateAdd + median 计算周期性指标 运算符 算术运算符 运算符号描述示例：-将两个数字相减返回余差4 - 2 → 2*将两个数字相乘返回其乘积3 * 6 → 18%将两个数字相除返回余数23 % 7 → 2/将两个数字相除返回商21 / 7 → 3+将两个数字相加返回和2 + 2 → 4比较运算符 运算符号描述示例:!=不等于2 != 2 → false==平等2 == 2 → true>大于2 > 2 → false<小于2 < 3 → true>=大于或等于2 >= 2 → true<=小于或等于2 <= 3 → true日期格式 这些日期格式可以作为 formatDate()函数的第二个参数，结合这些来自定义你的日期显示吧。 类别模式返回值年份YY23 YYYY2023季度Q1 ~ 4 Qo1st ~ 4th月份M1 ~ 12 Mo1st ~ 12th MM01 ~ 12 MMMJan ~ Dec MMMMJanuary ~ December一年中的第几周w1 ~ 53 wo1st ~ 53th ww01 ~ 53一年中的第几天DDD1 ~ 365 DDDo1st ~ 365th DDDD001 ~ 365日D1 ~ 31 Do1st ~ 31st DD01 ~ 31星期d0 ~ 6 ddMo ~ Su dddMon ~ Sun ddddMonday ~ Sunday24小时H0 ~ 23 HH00 ~ 2312小时h1 ~ 12 hh01 ~ 12分钟m0 ~ 59 mm00 ~ 59秒s0 ~ 59 ss00 ~ 59AM/PMaam pm AAM PM时区偏移z+08:00 zz+0800分秒S0 ~ 9 SS00 ~ 99毫秒SSS000 ~ 999Unix时间戳x1581483600毫秒Unix时间戳x1581483600000
-
邂逅前端开发 一.编程语言大纲 服务器后端编程语言：Java、Nodejs、C++、Go、Python等 客户端开发编程语言： Android端：Java、kotlin iPhone端：OC、Swift iPad端： 网页开发：HTML、CSS、JavaScript Win：C# mac os端：OC、Swift 二.开发工具选择 [webstorm]、[sublime Text]、[visual studio code]、[atom]、[HBuilder]、[Intellij IDEA]、[Dreamweaver]等 特点：智能提示、高亮识别、语法检测、集成环境、开发效率高1. webstorm：优点 集成开发工具，包罗万象；缺点：重（占用系统资源多）收费 2. VSCode：优点 轻（相当于一个编辑器）免费；缺点 需要安装一些插件来辅助开发 用到的插件： 中文插件：Chinese 颜色主题：atom one dark 文件夹图标：VScode Great lcons 在浏览器中打开网页：open in browser、live sever（自动刷新浏览器） 自动重命名标签：auto rename tag 软件的配置： 自动保存：文件->自动保存 字体大小：文件->首选项->设置 控制字体大小（font size） 自动换行：设置->editor：word wrap改成on 空格渲染方式：render whitespace改成all 代码缩进方式：tab size由4个字符改成2个 3. 推荐安装的软件 Chrome浏览器：开发必备浏览器 VScode编辑器：开发推荐编辑器（编写代码） XMind：思维导图笔记软件 Typora：markdown笔记软件 三.浏览器的作用 网页的组成部分：HTML+CSS+JavaScript 浏览器最核心的部分是：“浏览器内核” 浏览器最核心的部分是渲染引擎（Rendering Engine）一般称为“浏览器内核” 负责解析网页语法，并渲染（显示）网页 常见浏览器内核有： trident（三叉戟）：IE、360安全浏览器、搜狗高速浏览器、百度浏览器、UC浏览器 gecko（壁虎）：Mozilla Firefox presto（急板乐曲）：blink（眨眼）：Opera webkit：safari、360极速浏览器、搜狗高速浏览器、移动端浏览器 webkit->blink：Google Chrome，edge 不同的浏览器内核有不同的解析、渲染规则，所以同一网页在不同内核的浏览器中的渲染效果也可能不同 HTML元素 一.概要(html基础) 超文本标记语言（hypertext markup language，简称HTML）是一种用于创建网页的标记语言html元素列表: https://developer.mozilla.org/zh-CN/docs/Web/HTML/element vscode快速html结构: [!回车] 标签元素可分为: 单标签元素/双标签元素 双标签元素:html/body/head/h2/p/a等 单标签元素:br/img/hr/meta/input等 元素中也可以拥有属性:<p class="editor-note">我是一个段落</p> class作为属性 1. 元素属性的分类 有些属性是公共的,每个元素都可以设置 比如:class/id/title 有些属性是元素特有的,不是每一个元素都可以设置 比如meta属性的charset属性/img元素的alt属性等 2. 元素的嵌套关系 <body> <p class="editor-note">我是一个段落</p> <ul> <!--快速复制上一行alt+shift+向下箭头--> <li> <div> <span>aaa</span> <span>bbb</span> </div> </li> <li></li> </ul> </body>3. 注释的语法 ctrl+/ 快速写注释快捷键 <!-- 注释内容 -->二.HTML常见的元素 1. HTML结构分析 HTML最上方第一行[<!DOCTYPE html>]文本我们称之为文档类型声明,用于声明文档类型 HTML文档声明，告诉浏览器当前页面是HTML5页面 让浏览器用HTML5的标准去解析识别内容； 必须放在HTML文档的最前面，不能省略，省略了会出现兼容性问题 lang属性=设置的语言["en"表示英文;"zh-CN"表示简体中文] 1.1 haed元素 HTML haed元素 规定文档相关的配置信息[也称为元数据],包括文档的标题,引用的样式和脚本等; 可以理解为对整个页面的配置 常见设置的2个元素:[title]标题; [meta]元素-charset属性设置网页的字符编码 一般为[utf-8];<meta charset="UTF-8"> 1.2 body元素 html元素列表: https://developer.mozilla.org/zh-CN/docs/Web/HTML/element 常见的元素(90%的时间都在写这几个) p元素/h元素 img元素/a元素/iframe元素 div元素/span元素 其他元素: ul/ol/li元素 button元素/input元素 table/thead/tbody/thead/th/tr/td HTML5新增元素: 后面讲解 2. h1-h6/p元素 h1-h6 = 标题元素 p = 段落元素 <h1>这是一级标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h3> <h4>这是四级标题</h4> <h5>这是五级标题</h5> <h6>这是六级标题</h6> <p>这是一个段落</p> <br> = 段落换号符3. img/a/iframe元素 3.1 img元素:两个属性(src="图片的地址" alt="1.资源加载不成功时以文本显示;2.给屏幕阅读器使用") <img src="https://123.ka81.cn/2024pic/202403111526001.jpg" alt="秀人网模特">3.2 a元素(超链接):两个常见属性 href="指定要打开的url地址;也可以是本地地址" target="_self(默认值,当前窗口打开); _blank(在新窗口打开)" <a href="https://www.baidu.com/" target="_blank">百度一下</a>a元素本页面的锚点链接: 在跳转到的元素上添加id 定义a元素,并且a元素的href属性指向id <a href="#time01">跳转到一级标题</a> <a href="#time02">跳转到二级标题</a> <a href="#time03">跳转到三级标题</a> <h1 id="time01">这是一级标题</h1> <h2 id="time02">这是二级标题</h2> <h3 id="time03">这是三级标题</h3>a元素与img元素结合使用: a元素中嵌套img元素即可实现 <a href="https://www.baidu.com/" target="_blank"> <img width="330" src="https://123.ka81.cn/2024pic/202403111526001.jpg" alt="秀人网模特"> </a>a标签指向其他协议地址: mailto <a href="mailto:123@qq.com">发邮件给123@qq.com</a>iframe元素: 在一个网页中嵌套其他网页 <iframe src="https://www.taobao.com/" width="800" height="600" frameborder="0"></iframe> <!-- frameborder值0和1;开启或不开启 -->a元素target的其他值: 需要和iframe结合使用(嵌套关系下使用) _parent:在父窗口打开 _top:在顶层窗口中打开 4. div/span元素 (特殊的;无所用无所不用) div/span区别:div和span元素都是"纯粹的"容器, 也可以把它们理解成"盒子",它们都是用来包裹内容的 div元素: 多个div元素包裹的内容会在不同的行显示 一般作为其他元素的父容器,把其他元素包住,代表一个整体 用于把网页分成多个独立的部分 span元素:多个span元素包裹的内容会显示在同一行 默认情况下 根普通文本几乎没区别 用于区分特殊文本和普通文本,比如用来显示一些关键字 5. 不常见元素 strong元素: 内容加粗 i元素: 内容斜体(开发中偶尔会用它来做字体图标) code元素:用于显示代码(偶尔会使用用来显示等宽字体) br元素:用于换行 html元素列表: https://developer.mozilla.org/zh-CN/docs/Web/HTML/element 6. HTML全局属性 全局数量列表: https://developer.mozilla.org/zh-CN/docs/Web/HTML/global_attributes 6.1 常见属性: id: 定义唯一标识符(ID),该标识符在整个文档中必须是唯一的. 其目的是在链接(使用片段标识符), 脚本或样式(css)时标识元素 class: 一个以空格分隔的元素的类名(classes)列表, 它允许css和JavaScript通过类选择器或者DOM方法来选择和访问特定的元素 style: 给元素添加内联样式CSS title: 包含表示与其所属元素相关信息的文本. 这些信息通常可以作为提醒呈现给用户,但不是必须的 三.额外知识点补充 1. 字符实体: 定义: 段落文本中有特别的字符 会影响浏览器的解析, 此时就要用字符实体包括该内容 html实体是一段以连字号(&)开头,以分号(;)结尾的文本 image-20240312015258915图片 2. URL的规则和URI的区别 URL代表是统一资源定位符(Uniform Resource Locator). URL 无非就是一个给定的独特资源在 Web 上的地址。理论上说，每个有效的 URL 都指向一个唯一的资源。这个资源可以是一个 HTML 页面，一个 CSS 文档，一幅图像，等等。 URL标准格式: [协议类型]://[服务器地址]:[端口号]/[文件路径][文件名]?[查询]#[片段ID] image-20240312020835834图片 和uri区别 uniform resource identifier 统一资源标志符,用于标识web技术使用的逻辑和物理资源 Uniform Resource Locator 统一资源定位符,俗称网络地址 相当于网络中的门牌号 3. 元素语义化 元素语义化: 用正确的元素做正确的事情 4. SEO优化 搜索引擎优化(Search Engine Optimization) 是通过了解搜索引擎的运作规则来调整网站,以提高网站在有关搜索引擎内排名的方式 image-20240312025215768图片 百科: https://baike.baidu.com/item/%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E%E4%BC%98%E5%8C%96/3132?fromtitle=SEO&fromid=102990 5. 字符编码 最常见的编码是(UTF-8) 其他编码: https://www.runoob.com/w3cnote/charset-encoding.html CSS样式 一.概要(CSS基础) 1. 认识css CSS (Cascading Style Sheets，层叠样式表）是为网页添加样式的代码 2. 编写css样式 如何将CSS样式应用到元素上? 内联样式 内联样式表存在于HTML元素的style属性之中 <div style="color: red; font-size: 30px;">我是div元素</div> <h1 style="font-size: 50px;">我是一级标题</h1> 内部样式表 内部样式表存在于HTML页面的head元素的尾部 添加style 通过选择器定位某元素 <head> <style> /* 通过元素选择 */ div { color: red; font-size: 30px; background-color: orange; } /* 通过class选择 */ .h1-one { color: aqua; } </style> </head> <body> <div>我是div元素</div> <h1 class="h1-one">我是一级标题</h1> </body> 外部样式表 外部样式表是将css编写在一个独立的文件中[后缀为css],并且通过元素引入[写在head尾部]进来 image-20240312171157806图片 扩展: 在css文件夹中创建名为index.css的文件,在中通过@import url(样式路径);引入其他css文件; 后在html引入此文件即可实现css的全部引用image-20240312171836441图片 3. css注释 /* 注释文本 */ vscode可通过快捷键[ctrl+/]快速注释 4. 常见的css属性 官方文档:https://www.w3.org/TR/?tag=css wdn文档(推荐):https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference#%E5%85%B3%E9%94%AE%E5%AD%97%E7%B4%A2%E5%BC%95 查询css属性的可用性(哪些浏览器支持的属性):https://caniuse.com/ CSS样式规则顺序coderwhy图片 CSS常见属性分类coderwhy图片 最基础最常用的css属性: font-size: (文字大小) color: (前景色/文字颜色) background-color: (背景色) width: (宽度) height: (高度) <style> .title { font-size: 24px; color: red; background-color: rgb(43, 40, 40); width: 200px; height: 200px; } </style>-- 额外知识补充 1. link元素 link元素是外部资源链接元素,规范了文档与外部资源的关系 link元素通常写在head元素中 最常用的链接是样式表CSS 此外也可以被用来创建站点图标(比如"favicon"图标) <link rel="引入类型" href="地址">link元素常见的属性: href: 此属性指定被链接资源的URL. URL可以是绝对的,也可以是相对的 rel: 指定链接类型, 常见的链接类型: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/rel icon: 站点图标; stylesheet: css样式 2. 计算机进制 计算机通常采用二进制/八进制/十六进制; 通常计算机底层逻辑只有0和1组成 通俗理解: 当数字达到某个值时,进一位(比如从1位变成2位) 理解一下十进制(人们通常采用10进制): 当数字到9的时候 到10,用1位已经表示不了了,那么就进一位变成2位 3. CSS颜色表示方法 90种表达色彩的单词指南: 英语学习 - 90 种表达色彩的单词指南 | 贝立兹 (berlitz.com) RGB颜色: RGB是一种色彩空间，通过R（red，红色）、G（green，绿色）、B（blue，蓝色）三原色来组成了不同的颜色； 也就是通过调整这三个颜色不同的比例，可以组合成其他的颜色； RGB各个原色的取值范围是0~255； RGB表示方法: RGB颜色可以通过以#为前缀的十六进制字符和函数（rgb()、rgba()）标记表示 方式一：十六进制符号：#RRGGBB[AA] R（红）、G（绿）、B （蓝）和A （alpha）是十六进制字符（0–9、A–F）；A是可选的。 比如，#ff0000等价于#ff0000ff； 方式二：十六进制符号：#RGB[A] R（红）、G（绿）、B （蓝）和A （alpha）是十六进制字符（0–9、A–F）； 三位数符号（#RGB）是六位数形式（#RRGGBB）的减缩版。 比如，#f09和#ff0099表示同一颜色。 四位数符号（#RGBA）是八位数形式（#RRGGBBAA）的减缩版。 比如，#0f38和#00ff3388表示相同颜色。 方式三：函数符： rgb[a]--R, G, B[, A] ---不常用 R（红）、G（绿）、B （蓝）可以是（数字），或者（百分比），255相当于100%。 A（alpha）可以是0到1之间的数字，或者百分比，数字1相当于100%（完全不透明）。 4. Chrome调试工具 打开Chrome调试工具: 方式一：右键– 检查 方式二：快捷键– F12 其他技巧: 快捷键：ctrl+ 可以调整页面或者调试工具的字体大小 可以通过删除某些元素来查看网页结构; 可以通过增删css来调试网页样式 image-20240313001630230图片 5. 浏览器渲染流程 image-20240313003528789图片 二.CSS文本的属性 1.text-decoration[装饰] text-decoration: 用于设置文字的装饰线 1.1 text-decoration常见取值: none: 无任何装饰线 可以去除a元素默认的下划线 underline: 下划线 overline: 上划线 line-through: 删除线 2.text-transform[变换] text-transform: 用于设置文字的大小写转换 2.1 text-transform 常见取值: capitalize: 将每个单词的首字母变为大写 uppercase: 将每个单词的所有字母大写 lowercase: 将每个单词的所有字母小写 none: 没有任何影响 [实际开发中用JavaScript代码转化的更多] 3.text-indent[缩进] text-indent: 用于设置第一行内容的缩进 "[em]单位==相对于字体的大小" text-indent: 2em ==首行缩进2字符4.text-align(重要)[对齐] text-align: 设置文本的对其方式 / 定义行内内容(例如文字)如何相对它的块 父元素对其; 4.1 常见的值: left: 左对其 right: 右对其 center: 正中间对齐 justify: 两端对其 5.word/letter-spacing[单词/字母间距] word-spacing/letter-spacing: 用于调整单词/字母间距 三.CSS字体的属性 1.font-size[尺寸] font-size: 决定文字的大小 1.1 常见的设置 具体数值+单位 比如100px 也可以使用em单位(不推荐): 1em代表100%,2em代表200% 百分比 基于父元素的font-size计算,比如50%等于父元素font-size的一半 2.font-family[字体] font-family: 用于设置文字的字体名称 可以设置1个或多个字体名称 浏览器会选择第一个该计算机中有安装的字体 或者是通过[@font-face] 指定的可以直接下载的字体 3.font-weight[加粗] font-weight: 用于设置文字的粗细 常见的取值: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 : 每一个数字表示一个重量(粗细程度) normal: 等于400 (默认值) bold: 等于700 4.line-height[行高] line-height: 用于设置文本的行高 注意区分height 和 line-height 的区别 height: 元素的整体行高 line-height: 元素中每一行文字所占据的高度 应用实例: 假设div中只有一行文字, 如何让这行文字在div内部上下居中 让line-height等同于height 5.其他不常用的 5.1 font-variant[变形] font-variant: 可以影响小写字母的显示形式 可以设置的值: normal: 常规显示 small-caps: 将小写字母替换为缩小过的大写字母 5.2 font-style[样式] font-style: 用于设置文字的常规/斜体显示 常见取值: normal: 常规显示 italic(斜体): 用字体的斜体显示(通常会有专门的字体) oblique(倾斜): 文本倾斜显示(仅仅是让文字倾斜) 6.font缩写属性 当需要设置字体多个属性时, 可以缩写font: 跟上对应值 ; 简化书写流程 font是一个缩写属性: font 属性可以用来作为font-style, font-variant, font-weight, font-size, line-height 和font-family 属性的简写; 格式: font-style font-variant font-weight font-size/line-height font-family 书写规则: font-style、font-variant、font-weight可以随意调换顺序，也可以省略 /line-height可以省略，如果不省略，必须跟在font-size后面 font-size、font-family不可以调换顺序，不可以省略 image-20240313033210308图片 四.CSS常见选择器 --其他选择器 通用选择器: [*]通配符 ; 将所有的元素全部选中 * {css属性} 注: 默认在没有设置任何样式的情况下, 浏览器会默认给HTML元素增加一些css属性; 这时我们想取消这些属性, 可以在样式内设置通配属性取消这些默认值; 例: * { margin: 0; padding: 0; } 或--- body, p, div, h2, span { margin: 0; padding: 0; }[重要]简单选择器: 前面学习过 元素选择器(type selectors), 使用[元素的名称] 类选择器(class selectors), 使用[.类名] id选择器(id selectors), 使用[#id] 强调: 在同一个HTML文档中, id不要重复, 应该是唯一的 id值如果由多个单词组成, 单词之间可以用中划线- / 下划线_连接, 也可以使用驼峰标识 最好不要用标签名 作为id值 1.属性选择器-了解 通过元素中的属性名 进行选择: 使用方式"[属性名/属性名="值"]" --例 <style> [title] { color: red; } /* 或是使用具体的值 */ [title="h2"] { background-color: blue; } </style> </head> <body> <div>我是div元素</div> <div title="div">我也是div元素</div> <p>我是p元素</p> <h2 title="h2">我是h2元素</h2> </body>image-20240313143039936图片 2.后代选择器 后代选择器一: 所有的后代(包括直接或间接的后代) 选择器直接以空格分隔 .属性值 元素 image-20240313145638639图片 后代选择器二: 直接子代选择器(必须是直接子代) 选择器之间以 > 分隔 .属性值 > 元素 image-20240313145658584图片 3.兄弟选择器 兄弟选择器 选择的 不包括自己兄弟选择器一: 相邻兄弟选择器 使用符号[+]连接 .属性值 + 元素或属性名 image-20240313150439757图片 兄弟选择器二: 全兄弟选择器 使用符号[~]连接 .属性值 ~ 元素或属性名 image-20240313150559213图片 4.选择器组 4.1 选择器组-交集选择器: 需要同时符合两个选择器条件(两个选择器紧密连接) 在开发者通常是为了精准的选择某一元素 <style> div.one { color: red; } </style> </head> <body> <div>我是div元素</div> <div class="one">我也是div元素</div> <p>我是p元素</p> <h2 class="two">我是h2元素</h2> </body>4.2 选择器组-并集选择器: 符合任意一个选择器条件即可(选择器直接以[,]分隔) 在开发中通常为了给多个元素设置相同的样式 <style> .one, .two { color: red; } </style> </head> <body> <div>我是div元素</div> <div class="one">我也是div元素</div> <p>我是p元素</p> <h2 class="two">我是h2元素</h2> </body> 5.伪类选择器 伪类选择器（简称：伪类）通过冒号来定义; 它定义了元素的状态; 如点击按下，点击完成等，通过伪类可以为元素的状态修改样式。 常见的伪类有: 动态伪类 :link / :visites / :hover / :active / :focus 目标伪类 :target 语言伪类 :lang() 元素状态伪类 :enabled / :disabled / :checked 结构伪类 :nth-child() / :nth-last-child() / :nth-of-type() / :nth-last-of-type() :first-child / :last-child / :first-of-type / :last-of-type :root / :only-child / :only-of-type / :empty 否定伪类 :not() 所有的伪类: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes 菜鸟教程: CSS 伪类 | 菜鸟教程 (runoob.com) 使用举例: 动态伪类 a:link [未访问的链接] a:visited [已访问的链接] a:hover [鼠标挪动到链接上(重要)] a:active [激活的链接(鼠标在链接上长按未松开的状态)] 使用注意 :hover必须放在:link和:visited后面才能完全生效 :active必须放在:hover后面才能完全生效 建议编写顺序是: :link / :visited / :hover / :active 输了a元素, :hover / :active也能用在其他元素上 :focus指当前 拥有输入焦点的元素(能接受键盘输入的) 文本输入框一聚焦后.背景就会变红色 应为链接a元素可以 被键盘的tab键选中聚焦, 所以:focus也适用于a元素 动态伪类编写顺序建议为: :link 、 :visited 、 :focus 、 :hover 、 :active 直接给 a 元素设置样式，相当于给 a 元素的所有动态伪类都设置了 相当于 a:link 、 a:visited 、 a:hover 、 a:active 、 a:focus 的 color 都是 red 6.伪元素(重要) 伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式; 一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后 常见的伪元素有: ::sirst-line ::first-letter ::before ::after 为了区分伪元素和伪类，建议伪元素使用 2 个冒号，比如 ::first line ::sirst-line: 可以针对首行文本设置属性 ::first-letter: 可以针对首字母设置属性 例: p::first-line { color:#ff0000; font-variant:small-caps; }::before: 向选定的元素前插入内容 ::after: 向选定的元素后插入内容 ::before 和 ::after 用来在一个元素的 内容之前或之后插入其他内容 （可以是文字、图片 常通过 content 属性 来为一个元素添加修饰性的内容。 image-20240313200902482图片 位置不好看 --简单调整 position: relative; /* 相对定位 */ left: 5px; top: 2px; 五.CSS属性的特性 1.CSS属性的继承 在默认情况下, 某元素的子代会继承父元素的 (有些CSS属性是不能被继承的)但可以强制继承; 定位继承的子代元素-属性写border: inherit 即可强制继承父元素CSS CSS中的某些属性具有继承性 如果一个 属性具备继承性 , 那么 在该元素上设置后 , 它的 后代元素都可以继承这个属性 当然 , 如果 后代元素自己有设置该属性 , 那么 优先使用后代元素自己的属性 不管继承过来的属性权重多高 如何知道一个属性具有继承性呢? 常见的font-size/font-family/font-weigth/line-heigth/color/text-aligen 这些都具有继承性 这些 不用刻意去记 , 用的多自然就记住了 另外可以查询文档 注意:继承过来的属性是计算值,而不是设置值 image-20240313205645632图片 2.CSS属性的层叠 一个元素设置多个属性的情况下, 首先显示权重最大的值/相同权重情况下, 会被越后(梢)的样式覆盖CSS的翻译是层叠样式表 , 什么是(层叠)呢? 对于一个元素来说, 相同一个属性我们可以通过不同的选择器给它进行多次设置; 那么属性就会被一层层覆盖上去; 但是最终只有一个生效; 那么多个样式属性覆盖上去, 哪个会生效呢? 判断一: 选择器的权重, 权重大的生效, 根据权重可以判断出优先级 判断二: 先后顺序, 权重相同时 后面(梢)设置的生效; 如何知道权重呢? 按照经验, 为了方便比较CSS属性的优先级, 可以给CSS属性所处的环境定义一个权重(权值): !important: 10000(权重最大) 内联样式: 1000 id选择器: 100 类选择器/属性选择器/伪类: 10 元素选择器/伪元素: 1 通配符: 0(权重最小) MDN解释表格: image-20240314002214936图片 3.CSS属性的类型 块级元素(独占一行): h元素/p/div元素 行内级元素(一行有多个): span/a/img/strong/i元素 display属性可更改元素的特性(跨级与行内级变换) 值为block/inline(跨级/行内级) 在前面我们会经常提到div是块级元素 会独占一行 ,span是行内级元素 会在同一行显示; 那么到底什么是块级元素, 什么是行内级元素呢? HTML定义元素类型的思路: HTML 元素有很多 , 比如 h 元素 /p 元素 /div 元素 /span 元素 img 元素 /a 元素等等; 当我们把这个元素放到页面上时 , 这个元素到底占据页面中一行多大的空间呢? 为什么我们这里 只说一行 呢 ? 因为垂直方向的高度通常是内容决定的; 比如我们的h1元素的标题, 我们必然是希望它独占一行的, 其他内容不应该和我的标题放在一起; 比如我们的p元素的段落, 必然应该独占一行, 其它内容不应该和我的段落放在一起; 而类似于img/span/a元素, 通常是对内容的某一个细节的特别描述, 没有必要独占一行; 所有, 为了区分哪些元素可以独占一行, 哪些元素不需要独占一行, HTML将元素区分成了两类(本质上是通过CSS实现的(浏览器赋予的)) 块级元素 (独占一行) 行内级元素 (多个行内级元素可以在同一行显示) div/h1/p元素之所以是块级元素是因为浏览器默认设置了display属性而已 那么就可以通过display来更改元素的特性 CSS中display属性有4个常见值: block: 让元素显示为块级元素 inline: 让元素显示为行内级元素 inline-block: 让元素同时预备行内级/块级元素的特性 none: 隐藏元素 事实上display还有其他的值,比如flex , 后面专门学习 4.display属性 块级元素可以设置宽度和高度; 行内级元素不可设置宽度和高度(img/input除外,它是行内可替换元素) inline-block: 作为行内级元素显示 ; 可以随意设置宽高 对外来说, 它是行内级元素 对内来说, 它是块级元素 可以通过display来更改元素的特性 ; 4个常见值: block: 让元素显示为块级元素 inline: 让元素显示为行内级元素 inline-block: 让元素同时预备行内级/块级元素的特性 none: 隐藏元素 事实上display还有其他的值,比如flex , 后面专门学习 image-20240314014429567图片 [x] 编写HTML时的注意事项: 块级元素 | inline-block元素 一般情况下,可以包含其他任何元素(如块级元素/行内级元素/inline-block元素) 特殊情况, p元素不能包含其他块级元素的 行内级元素(如: a/span/strong等) 一般情况下, 只能包含行内级元素 5.元素的隐藏(display) 方法一: display设置为none 元素不显示, 并且不占据位置, 不站任何空间(和不存在一样) 方法二: visibility设置为hidden 设置为hidden, 虽然元素不可见, 但是会占据元素空间; 默认值为visible, 可见的 方法三: rgba设置颜色, 将a值设置为0 rgba的a设置的是alpha值, 可以设置透明度, 不影响子元素; 方法四: opacity设置透明度, 设置为0 设置整个元素的透明度, 会影响所有的子元素; CSS样式不生效技巧: 选择器的优先级太低 选择器没选中对应的元素 CSS属性使用的形式不对 元素不支持此CSS属性, 比如span默认不支持width和height的 浏览器不支持此css属性, 比如旧版本的浏览器不支持一些css module3的某些属性 被同类型CSS属性覆盖, 比如font覆盖font-size 建议: 充分利用浏览器的开发者工具进行调试(增加/修改样式) 查错 6.overflow属性 如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为; overflow: visible (默认) -->溢出的内容照样可见 overflow: hidden -->溢出的内容直接裁剪 overflow: scroll -->溢出的内容被裁剪, 但可以通过滚动条查看(会一直显示滚动条区域, 滚动条区域占用的空间属于width/height) overflow: auto -->自动根据内容是否溢出决定是否提供滚动条 菜鸟文档: CSS overflow 属性 | 菜鸟教程 (runoob.com) 六.CSS的盒子模型 1.认识盒子模型 盒子有四个边, 所有margin(外边)/padding(内边)/border(边框)都包括top/right/bottom/left(上/右/下/左)四个边image-20240314222047946图片 image-20240314222125770图片 image-20240314222207450图片 image-20240314222503209图片 2.内容width/heigth HTML的内容是通过宽度和高度设置的: 宽度设置: width: 高度设置: height 注意: 对于行内级非替换元素来说, 设置宽高是无效的 另外还可以设置以下属性: min-width: 最小宽度 max-width: 最大宽度 移动端适配是,可以设置最大/最小宽度 下面这两个属性不常用的: min-height: 最小高度 max-height: 最大高度 3.内边距padding 内边距padding是设置内容至边框直接的间距; 包括四个值: padding-top ：上内边距 padding-right ：右内边距 padding-bottom ：下内边距 padding-left ：左内边距 padding单独编写是一个缩写属性: 缩写属性是从0点钟开始顺时针转动360度, 也就是上右下左 padding并非四个值, 也可以是其他值: image-20240314231111108图片 4.边框/圆角border 边框相对于content/padding/margin来说特殊一些: 有三个值 具备宽度width 具备样式style 具备颜色color 边框宽度: border-top-width / border-right-width / border-bottom-width / border-left-width border-width 是上面的简写属性 边框颜色: border-top-color/ border-right-color/ border-bottom-color/ border-left-color border-color 是上面的简写属性 边框样式: border-top-style/ border-right-style/ border-bottom-style/ border-left-style border-style 是上面的简写属性 总简写属性: border 是宽度/颜色/样式的简写属性, 顺序随意(样式不能省) 边框样式设置值: solid/dashed/dotted/double/insert/outset/groove/ridge image-20240314233136847图片 如果我们相对某一边同时设置 宽度 样式 颜色 , 可以进行如下设置: border-top border-right border-bottom border-left border: ：统一设置 4 个方向的边框 盒子圆角 border-radius: 常见的值: 数值: 通常用来设置小的圆角; 如比6px; 百分比: 通常用来设置一定的弧度或者圆形 border-radius 事实上是一个缩写属性: 将这四个属性 border-top-left-radius 、 border-top-right-radius 、 border-bottom-right-radius ，和 border-bottom-left-radius 简写为一个属性。 开发中比较少见一个个圆角设置 如果一个元素是正方形, 设置border-radius大于或等于50%时，就会变成一个圆 4.1.外轮廓: outline 特点: 不占用空间, 默认显示在border的外面 相关属性: outline-width: 外轮廓的宽度 outline-style：取值跟border的样式一样，比如solid、dotted等 outline-color: 外轮廓的颜色 outline：outline-width、outline-style、outline-color的简写属性，跟border用法类似 应用实例: 去除a元素/input元素的focus轮廓效果(即tab标记状态) 5.外边距margin 上下两个元素同时设置margin时会出现折叠现象(如设置30px,间距应该是60,折叠后还是30); 左右不会折叠.margin属性用于设置盒子的外边距, 通常用于元素和元素之间的间距; margin包括四个方向, 所以有如下的取值: margin-top：上内边距 margin-right：右内边距 margin-bottom：下内边距 margin-left：左内边距 margin单独编写是一个缩写属性: margin缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左 margin也并非必须是四个值, 也可以有其他值: image-20240315001406761图片 上下margin的传递: margin-top传递: 如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素 margin-bottom传递: 如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素 如何防止出现传递问题? 给父元素设置padding-top\padding-bottom 给父元素设置border 触发BFC: 设置overflow为auto @建议: margin一般是用来设置兄弟元素之间的间距 padding一般是用来设置父子元素之间的间距 上下margin的折叠: 垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin，这种现象叫做collapse（折叠） 水平方向上的margin（margin-left、margin-right）永远不会折叠 折叠后最终值的计算规则: 两个值进行比较, 取较大的值 如何防止margin折叠? 只设置其中一个元素的margin 块级元素水平居中问题? 在一些需求中，需要元素在父元素中水平居中显示（父元素一般都是块级元素、inline-block） 行内级元素(包括inline-block元素)-->水平居中：在父元素中设置text-align: center 块级元素-->水平居中：margin: 0 auto 6.盒子/文字阴影 6.1.盒子阴影: box-shadow box-shadow属性可以设置一个或者多个阴影 每个阴影用表示 多个阴影之间用逗号,隔开，从前到后叠加 的常见格式如下: 5px 5px 5px 5px color insert 第1个：offset-x, 水平方向的偏移，正数往右偏移 第2个：offset-y, 垂直方向的偏移，正数往下偏移 第3个：blur-radius, 模糊半径 第4个：spread-radius, 延伸半径 ：阴影的颜色，如果没有设置，就跟随color属性的颜色 inset：外框阴影变成内框阴影 image-20240315021354175图片 在线测试网站: https://html-css-js.com/css/generator/box-shadow/ 6.2.文字阴影: text-shadow text-shadow 用法类似于box-shadow ，用于给文字添加阴影效果 的常见格式如下: image-20240315021912661图片 相当于box-shadow, 它没有spread-radius(延伸半径)的值; 在线测试网站: https://html-css-js.com/css/generator/box-shadow/ 7.box-sizing box-sizing用来设置盒子模型中 盒子宽高的行为 包含值: content-box(默认): 内边距+边框在盒子宽高之外 image-20240315030544434图片 border-box: 内边距+边框在盒子宽高之内 image-20240315030557198图片 --额外知识点: 1.行内非替换元素的注意事项: 以下属性对行内级非替换元素不起作用 width、height、margin-top、margin-bottom 以下属性对行内级非替换元素的效果比较特殊 padding(内边距)上下会撑起来, 但是不占空间 border(边框)上下会撑起来, 但是不占空间 margin(外边框)上下的margin是不生效的
