??这是前端网页,关注我学习前端不迷路 ??如果对你有帮助,给博主一个免费的表扬来鼓励 欢迎大家点赞评论收藏
??专栏介绍
前端网页 目前主要更新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 快速生
我们可以给盒子加阴影。
格式:
当盒子里的文本太多时,我们可以使用它 CSS 文本省略了效果。
格式:
box-sizing 决定如何设置盒子实际宽度和高度的策略。
通常,为了稳定布局,如果盒子有内部距离,我们经常使用它 border-box 策略
准备代码
:
Emmet
语法是提高前端开发效率的开发工具。大多数编辑器都支持它,可以快速生成前端
广泛应用于开发。
Emmet 语法在分析时按在编辑器上 激活语法分析,生成快速代码。
格式: html:5
效果
格式:html:4s
效果:
有些
CSS
支持快速使用首字母缩写来快速生成:
例如:快速生成宽度属性
w200
。结果:
width:200px;
快速生成行高属性
lh26
。 结果:
line-height:26px;
快速生成背景颜色
bc
。 结果:
background-color: #fff;
CSS
属性默认长度单位是
px
,可以直接指定其他单位:例如:
lh26em