20210523-郭倩

工作日志

一、知识总结

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

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

3、盒子模型

(1)Content box:用来显示内容,可以通过width 和 height 设置大小

(2)Padding box: 区域外部的空白区域,大小通过 padding 设置。

(3)Border box: 边框盒包裹内容和内边距。大小通过 border 设置。

(4)Margin box: 盒子和其他元素之间的空白区域。大小通过 margin 设置

(5)margin不计入实际大小

(6)border-box用来定义替代盒模型的大小

4.display相关知识

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

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

5、背景样式

(1)background-color:定义了CSS中任何元素的背景颜色

(2)transparent 指定背景颜色应该是透明的

(3)inherit 指定背景颜色,应该从父元素继承

(4)background-image: 在元素的背景中显示图像.

(5)background-repeat属性

​ no-repeat — 不重复

​ repeat-x —水平重复

​ repeat-y —垂直重复

​ repeat — 在两个方向重复

(6)background-size 可以设置长度或百分比值

(7)background-position 属性允许您选择背景图像显示在其应用到的盒子中的位置

(8)linear-gradient 线性梯度渐变

(9)scroll : 使元素的背景在页面滚动时滚动

(10)fixed : 使元素的背景固定在视图端口上

(11)background-clip 设置元素的背景是否延伸到边框、内边距盒子、内容盒子下面。

(12)border-box 背景延伸至边框外沿

padding-box 背景延伸至内边距外沿

content-box 背景被裁剪至内容区外沿

text 背景被裁剪成文字的前景色

二、心得体会

​ 长达一天的学习又结束了,最大的感受就是,难中的成就感,今天的内容,一天下来觉得就很恍惚,突然让我做题的时候我还很懵,后来在老师的指导下我有所进步,一会自己去研究去深究,最后才得以把今天的内容搞明白,真的就是那句话,不是不懂知识没去让自己懂,继续加油吧!

标签

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