定位: 改变元素的位置 定位属性: position 坐标属性: left right top bottom 定位值: relative 相对定位 1:占据文档流 2: 参考自身加载到页面中的初始位置 3: 能改变坐标属性
absolute 绝对定位
1:脱离文档流
2: 参考浏览器窗口或者参考最近的有定位的父级元素(默认定位除外)
3: 能改变坐标属性
fixed 固定定位
1: 脱离文档流
2: 参考浏览器窗口的可视区域
3:能改变坐标属性
static 默认定位
1: 添加与不添加对元素没有任何影响
2: 不能改变坐标属性
sticky 粘性定位
1: 结合了相对定位和固定定位的特征
包含块:
1: 嵌套结构
2: 父元素使用position:relative;
子元素使用position:absolute;
三角形:
width:0px;
height:0px;
border:10px solid transparent;/*边框颜色设置透明*/
border-top:red;
背景相关属性:
background:颜色 url("背景图地址") 是否重复 背景图定位/背景图大小;
background-color:背景颜色;
颜色单词: red green blue...
十六进制: # 0 - 9 a - f
【注】#aabbcc 缩写为 #abc
三原色: rgb() rgba()
r: red 0-255
g: green 0-255
b: blue 0-255
a: alpha 透明度 0-1
background-image:url("图片路径");
相对路径: 参考当前图片所在文件夹
绝对路径:
从盘符出发:
域名地址
伪元素选择器: :after{ content:"内容"; }