20210523-马金娟
工作日志
内边距
内边距位于边框和内容区域之间。与外边距不同,您不能有负数量的内边距。
盒子模型
内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部
分 ——合在一起就是在页面上看到的内容。
标准模型中,
Content box:显示内容,大小通过设置 width 和 height .
Padding box: 内容区域外部的空白; 大小通过 padding 属性设置。
Border box: 边框盒包裹内容和内边距。
Margin box: 大小通过 margin 相关属性设置。
display
display 属性规定元素应该生成的框的类型。
block:块元素特征,前后会带有换行符
inline:行内元素特征,前后没有换行符
inline-block:元素呈现行内并保持宽和高的属性,行内块元素
none:元素不做呈现,不占网页空间。
背景颜色
元素的背景是元素的总大小,包括填充和边界(但不包括外边距)
大图不会缩小以适应方框,只能看到它的一个小角,而小图则是平铺以填充方框。
调整背景图像的大小
background-size 属性,它可以设置长度或百分比值,来调整图像的大小以适应背景
你也可以使用关键字:
cover —浏览器将使图像足够大,使它完全覆盖了盒子区,同时仍然保持其高宽比。在这种情况
下,有些图像可能会跳出盒子外
contain — 浏览器将使图像的大小适合盒子内。在这种情况下,如果图像的长宽比与盒子的长宽
比不同,则可能在图像的任何一边或顶部和底部出现间隙。
背景图像定位
最常见的背景位置值有两个单独的值——一个水平值后面跟着一个垂直值
你可以使用像 top 和 right 这样的关键字
默认的背景位置值是(0,0)
渐变背景
linear-gradient 线性梯度渐变,延伸到整个盒子上
radial-gradient 有一个固定的大小,因此会重复
多个背景图像
有多个背景图像—在单个属性值中指定多个 background-image 值,用逗号分隔每个值
其他 background-* 属性也可以有值逗号分隔的方式相同的 background-image :
学习心得
通过本节课的学习,练题时比之前熟练了很多,老师讲的也很仔细,希望在今后的实训过程中才可以掌握更多的知识,也希望我们的培训工作更加顺利的进行。
近期评论