工作日志

盒子模型

内联盒子只使用盒模型中定义的部分内容。模型定义了盒的 每个部
分 ——合在一起就是在页面上看到的内容。

标准模型中，

Content box:显示内容，大小通过设置 width 和 height .
Padding box: 内容区域外部的空白； 大小通过 padding 属性设置。
Border box: 边框盒包裹内容和内边距。
Margin box: 大小通过 margin 相关属性设置。

调整背景图像的大小

background-size 属性，它可以设置长度或百分比值，来调整图像的大小以适应背景
你也可以使用关键字:
cover —浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比。在这种情况
下，有些图像可能会跳出盒子外
contain — 浏览器将使图像的大小适合盒子内。在这种情况下，如果图像的长宽比与盒子的长宽
比不同，则可能在图像的任何一边或顶部和底部出现间隙。

背景图像定位

最常见的背景位置值有两个单独的值——一个水平值后面跟着一个垂直值
你可以使用像 top 和 right 这样的关键字

默认的背景位置值是(0,0)

渐变背景

linear-gradient 线性梯度渐变，他可以延伸到整个盒子上
radial-gradient 有一个固定的大小，因此会重复

内边距

内边距位于边框和内容区域之间。与外边距不同，您不能有负数量的内边距。

display

display 属性规定元素应该生成的框的类型。

block:块元素特征，前后会带有换行符
inline:行内元素特征，前后没有换行符
inline-block：元素呈现行内并保持宽和高的属性，行内块元素
none:元素不做呈现，不占网页空间。

背景颜色

元素的背景是元素的总大小，包括填充和边界（但不包括外边距）

大图不会缩小以适应方框，只能看到它的一个小角，而小图则是平铺以填充方框。

多个背景图像

有多个背景图像—在单个属性值中指定多个 background-image 值，用逗号分隔每个值
其他 background-* 属性也可以有值逗号分隔的方式相同的 background-image ：

学习心得

通过今天的学习，在写代码时有了一定的逻辑结构，但基础知识还是掌握不够，在编写代码时容易出现错误，需要进行多次调试方可运行成功，希望后续能加强自己在这方面的能力。