工作日志

一.学习总结

盒子模型

盒模型的各个部分

Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height .

Padding box: 包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置。

Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。

Margin box: 这是外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性 设置。

注：padding 和 border 再加上设置的宽高一起决定整个盒子的大小。

display

display属性的值

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

使用display: inline-block ：display: inline-block 是一个特殊的值，它在内联和块之间提供了一个中间状态。

注：它不会跳转到新行，如果显式添加 width 和 height 属性，它只会变得比其内容更大

背景样式

background 的值

color：指定背景颜色

transparent指定背景颜色应该是透明的。这是默认

inherit 指定背景颜色，应该从父元素继承

背景图片

background-image 属性允许在元素的背景中显示图像.

background-repeat 属性用于控制图像的平铺行为。可用的值是:
no-repeat — 不重复。

repeat-x —水平重复。

epeat-y —垂直重复。

repeat — 在两个方向重复。

调整背景图像的大小

cover —浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比。

contain — 浏览器将使图像的大小适合盒子内。

背景图像定位

background-position 属性允许您选择背景图像显示在其应用到的盒子中的位置。它使用的坐标系 中，框的左上角是(0,0)，框沿着水平(x)和垂直(y)轴定位。

渐变背景

渐变——当它用于背景时——就像图像一样，也可以使用 background-image 属性设置。

多个背景图像

也可以有多个背景图像—在单个属性值中指定多个 background-image 值

背景附加

scroll : 使元素的背景在页面滚动时滚动。

local

二.心得体会

本节课我们主要学习了css的背景设置和图片设置，发现它的主要作用是对前端页面的布局进行美化，我们可以通过学习css对网页进行简单的美化，希望在后面的实训中，可以掌握更多有关css的知识，提高自己的操作水平和实践能力。