20210523李元

工作日志

一.学习总结

盒子模型

盒模型的各个部分

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

二.心得体会

今天的课程我学习到了网页的图片设置和相关的背景设置,可以对网页添加更多的元素,丰富我们制作的网页,但今天16个方格的作业,比较有难度,自己理解能力有限,比较的困难,希望在以后的学习中可以更加认真,提高自己的程序编写能力,储备更多的知识

标签

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1