523翟玉豪

工作日志

盒子模型

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

标准模型中,

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 :

学习心得

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

标签

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