【网页前端】CSS之拓展样式以及Emmet语法
时间：2023-01-27 06:00:00
??这是前端网页，关注我学习前端不迷路
??如果对你有帮助，给博主一个免费的表扬来鼓励
欢迎大家点赞评论收藏
??专栏介绍
前端网页 目前主要更新HTML，一起学习，一起进步。
??本期介绍
本期主要介绍CSS扩展风格和Emmet语法
文章目录
1. 拓展样式
1.1 盒子阴影
1.2 文本省略
1.3 盒宽高策略
2. Emmet 语法
2.1 简述
2.2 通用说明
2.3 页面生成
标签生成-toc" style="margin-left:40px;">2.4 HTML 标签生成
2.4.1 单标签生成
2.4.2 生成层级标签
2.5 CSS 快速生
1. 拓展样式
1.1 盒子阴影
我们可以给盒子加阴影。
格式：
box-shadow
：
X
轴偏移
Y
轴偏移 模糊程度 阴影颜色
;
1.2 文本省略
当盒子里的文本太多时，我们可以使用它 CSS 文本省略了效果。
格式：
1.3 盒宽高策略
box-sizing 决定如何设置盒子实际宽度和高度的策略。
通常，为了稳定布局，如果盒子有内部距离，我们经常使用它 border-box 策略
准备代码
:
2. Emmet 语法
2.1 简述
Emmet
语法是提高前端开发效率的开发工具。大多数编辑器都支持它，可以快速生成前端
广泛应用于开发。
2.2 通用说明
Emmet 语法在分析时按在编辑器上 TAB 激活语法分析，生成快速代码。
2.3 页面生成
格式： html:5
效果
格式：html:4s
效果：
2.4 TML 标签生成
2.4.1 单标签生成
注意：以上用法都可以嵌套使用
2.4.2 层级标签生成
2.5 CSS 快速生成
有些
CSS
支持快速使用首字母缩写来快速生成：
例如：快速生成宽度属性
w200
。结果：
width:200px;
快速生成行高属性
lh26
。 结果：
line-height:26px;
快速生成背景颜色
bc
。 结果：
background-color: #fff;
CSS
属性默认长度单位是
px
，可以直接指定其他单位：例如：
lh26em
