Web前端开发入门学习笔记之CSS 48-50 --新手超级友好版- Emmet&背景属性篇

      Foreword写在前面的话：

  大家好，我是一名刚开始学习HTML的新手。这篇文章是我在学习html过程中的一些笔记和心得，希望能和同样在学习HTML的朋友们分享。由于我的知识有限，文章中可能存在错误或不准确的地方，欢迎大家在评论区提出建议和指正。我非常期待大家的反馈，以便我能不断学习和进步。同时，我也会在文章中注明参考的资料，以示对原作者的尊重。

PS：本帖以记录学习心得和课堂笔记为主，没有其他大博主那么专业，但是简单易懂^-^

本贴的其他相关学习笔记资料可以通过订阅专栏获取，喜欢的小伙伴可以多多点赞+关注呀！后续会 持续更新相关资源的~

  课程学习资源：根据b站‘前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选黑马程序员’ 视频学习记录而成。原视频网址：前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选黑马程序员_哔哩哔哩_bilibili

第四十八课：Emmet写法

（简写代码的方式）

即：输入缩写，vscode会自动生成对应的代码。

HTML：

注意：div还可以再简写：在body里面直接.box 就会生成<div class="box"></div>

CSS：大多数简写方式为属性单词的首字母

第四十八课：背景属性：

实现装饰性的图片效果--背景图

为什么看到我的背景图被剪切or背景图出现多张重复？因为此时背景图默认的是平铺的效果来匹配我设置的宽高，之后会学到如何控制。

如何控制背景图的图片效果？

背景图平铺方式：background-repeat

如果是不平铺no-repeat的话，图片会显示在左上角

如果是平铺repeat，就会出现重复图片，填满。

如果是repeat-x，就是水平方向平铺，默认的水平方向和竖直方向起始点是左上角。

调整背景图位置：background-position  bgp

属性值：水平方向位置，垂直方向位置

写法：关键字或者坐标（数字px，正负都可以）or 数字+英文单词混用也可以

关键字：left, right, center, top, bottom

如左上：background-position: left top

background-position: right bottom右下角

对于第一个位置：控制左右）数字px数值为正，就是往右挪。（和数轴一样）正数向右，负数向左。

对于第二个位置：控制上下）正数向下，负数向上

提示：1. 关键字取值方式写法，可以颠倒取值顺序（比如说写右上，上右都可以）；

        2. 也可以只写一个关键字，另一个方向默认为居中；数字只写一个值表示水平方向，垂直方向为居中。

contain 如果背景图的宽或高与盒子尺寸（bgc）相等就停止缩放，确保完整了背景图被最大的放在盒子里面。可能导致盒子有露白。

cover 确保背景图完全覆盖盒子，可能导致部分背景图看不到了

100%图片的宽度等于背景色的宽度，长度等比缩放）作为背景图尺寸，可能会导致部分背景图看不到

背景图固定 background-attachment

背景复合属性background（一个属性对应多个值，用空格隔开）

（不区分顺序）除了：背景图位置/背景图缩放  是这种格式。

bg是放在{}里面的

背景图缩放cover contain

如果背景图和背景色的宽高比例一致，缩放cover和contain效果是一样的

最后，感谢每一位阅读这篇文章的朋友，你们的反馈对我来说非常宝贵。如果有任何问题或建议，请随时告诉我。让我们一起学习和进步吧！如果您喜欢我的内容，别忘了点赞和关注哦，我会定期分享更多有价值的信息。