20210523—王博

工作日志

一.知识总结

内边距（填充）

1.四周填充：padding: value;

2.盒子模式：

标准盒模式

替代盒模式：box-sizing:border-box

盒子模式和内联盒子

3.display

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

4.背景样式

（1）背景颜色：background-color：

（2）背景图片：background-image：

（3）控制背景平铺：background-repeat：

no-repeat — 不重复。
repeat-x —水平重复。
repeat-y —垂直重复。
repeat — 在两个方向重复。

（4） 调整背景图像的大小

background-size：cover /

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

(5) 背景图像定位

background-position:

(6)渐变背景

background-image :

linear-gradient 线性梯度渐变，延伸到整个盒子上
radial-gradient 有一个固定的大小，因此会重复

(7) 多个背景图像: 属性也可以有值逗号分隔的方式相同的 background-image ：

(8)背景附加: background-attachment:

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

fixed : 使元素的背景固定在视图端口上，这样当页面或元素内容滚动时，它就不会滚动。

local:

5.处理不同方向的文本

writing-mode：

horizontal-tb : 块流向从上至下。对应的文本方向是横向的。

vertical-rl : 块流向从右向左。对应的文本方向是纵向的。

vertical-lr : 块流向从左向右。对应的文本方向是纵向的。

6.溢出的内容

overflow属性：visible 默认值。

hidden 隐藏掉溢出。

scroll 显示滚动条

auto 如果内容需要被修剪，则浏览器会显示滚动条以便查看其余的内容。

7.修饰字体文字

color:字体颜色

font-size:字体大小,通常用像素(px)来定义大小

font-weight:bold 加粗/normal 正常/00~900为字体指定了 9 级加粗度

font-famliy:字体

font-style:字体风格

text-decoration：字体加横线

text-align:字体所处位置

line-height:行高

text-indent:首行字的缩进

vertical-align 设置元素的垂直对齐方式。

8.阴影

box-shadow ：

9.透明度

opacity 用于设置元素的透明度， 值的范围是 0~1 。1 为不透明， 0 为完全透明。

10.鼠标样式

cursor： pointer 、 wait 、 help 、 copy 、 crosshair

二.心得体会

今天学习的内容相对的来说，自己吸收和理解的还是挺多的，除了个别的理解比较困难，需要花费很长的时间去加深理解，自己也知道了自己对于储备知识的短板和欠缺。