CSS 学习1(声优男)

字体

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1
2
3
4
5
6
7
8
9
10
11
12
sans-serif:无衬线修饰
serif:有衬线修饰
属性值有空格,需使用引号
monospace:字符之间有距离
font-weight:字重
font-style:italic 斜体
text-decoration:underline 带有下划线
text-transform:uppercase 全部大写
letter-spacing:1em 字符间距
word-spacing:2em 词间距
line-height:1.5em 行高
text-align:center 水平居中

盒子居中

在这里插入图片描述

层级关系

内层css会覆盖外层css(标签会优先用自己的css,自己没有就问父亲找)
在这里插入图片描述

执行顺序

同一个标签的css,下面会覆盖上面的(从上到下顺序执行)
在这里插入图片描述

盒子模型

1)、单个盒子
在这里插入图片描述

2)、多个盒子。当两个盒子靠在一起,会取最大的外边距,作为两个盒子之间的外边距。(外边距塌陷,外边距重叠,外边距合并)
在这里插入图片描述

3)、boder,padding,margin 使用。

在这里插入图片描述

按钮

在这里插入图片描述
在这里插入图片描述

1
2
hover:鼠标放上去
active:按钮被激活(鼠标点击)

超链接

a 标签
在这里插入图片描述

1
2
3
text-decoration:none 去除下划线
hover:鼠标放上去
visited:访问过

浮动

在这里插入图片描述

1)、div 默认行宽占用 百分百

在这里插入图片描述
2)、给 div 设置行宽
在这里插入图片描述
3)、设置一个 border。就不是一行了,因为它们三个 div 没办法分到 33.3%了,border 是 1px。
在这里插入图片描述
4)、设置box-sizing: border-box 即可。告诉浏览器,它是一个有 border 的 div 盒子。
在这里插入图片描述
5)、用完浮动要清除它
在这里插入图片描述

伪类选择器:

1
2
3
4
都是从 1 开始的。

even:偶数
odd:奇数

在这里插入图片描述

定位

position

1
2
3
4
5
static:静态定位(默认)
relative:相对定位(原空间会保留)
absolute:绝对定位(原空间不保留)
fixed:固定定位(窗口,视窗做定位)
sticky:(导航栏,滚动到某个位置之后,固定顶部不动。)

》》》相对定位,绝对定位
1)、绝对定位默认 上左都是 0
2)、父亲不加相对定位,自己加了绝对定位。那么自己是由整个 body 来进行绝对定位。
3)、如果父亲加了相对定位,自己加绝对定位就是对于父亲盒子来做的定位。
在这里插入图片描述

》》》固定定位(回到顶部)
在这里插入图片描述