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

二.心得体会

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

标签

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