css3 优雅降级: 优先考虑高版本浏览器的兼容,再考虑低版本浏览器的兼容
渐进增强:
优先考虑低版本浏览器的兼容,再考虑高版本浏览器的兼容
属性选择器:
e[attr]{} 选中e元素,且有attr属性
e[attr="value"]{} 选中e元素,且有attr属性,值为value
e[attr~="value"]{} 选中e元素,且有attr属性,值包含value
【拓展】
e[attr^="value"]{} 选中e元素,且有attr属性,值以value开头
e[attr$="value"]{} 选中e元素,且有attr属性,值以value结尾
e[attr*="value"]{} 选中e元素,且有attr属性,值包含value
e[attr|="value"]{} 选中e元素,且有attr属性,值只有value或者以value-开头
结构伪类选择器:
.box:first-child{} 选中box本身,且box是第一个子元素
.box:last-child{} 选中box本身,且box是最后一个子元素
div:nth-child(n){} 选中div本身,是指定位置的子元素
n是从0开始的自然数
2n = even 偶数序列
2n-1 = odd 奇数序列
div:only-child{} 选中div本身,div是唯一的子元素
html:root{} 选中根元素html
.box:empty{} 选中box,且box内容为空,有空格也不行
li:not(.list){} 否定选择器,选中li,但是排除li中有class="list"的这个元素
.box:target p{} 目标伪类选择器,当box被关联后,在选中box的子元素p
UI元素状态伪类选择器:
input:enabled{} 可用状态
input:disabled{} 不可用状态
input:checked{} 选中状态
input:focus{} 获取光标状态
:link{} 未访问状态
:visited{} 访问过后状态
:hover{} 鼠标移入状态
:active{} 鼠标按下状态
【注】
有顺序要求 LoVe HAte
层级选择器:
e > f{} 子元素选择器 选中e中的子元素f
e + f{} 相邻兄弟选择器 选中e后面紧挨着的兄弟元素f
e ~ f{} 通用兄弟选择器 选中e后面的所有兄弟元素f
css3相关属性:
text-shadow:水平 垂直 模糊度 阴影颜色;
box-shadow:水平 垂直 模糊度 阴影大小 阴影颜色 内外阴影;
【注】内部阴影 inset
默认外部阴影,不需要写
背景相关属性:
background-origin:背景图起始位置;
padding-box 内边距区域开始(默认值)
border-box 边框区域开始
content-box 内容区域开始
backgorund-clip:背景图裁剪区域;
border-box 边框区域开始(默认值)
padding-box 内边距区域开始
content-box 内容区域开始
background-size:宽度 高度;背景图大小
px %
cover 等比例缩放,图片有可能超出元素
contain 等比例缩放,元素有可能留白
【拓展】
多张背景图： background:url(),url();
颜色模式:
rgba(0,0,0,0)
hsl(0,0%,0%)
hsla(0,0%,0%,0)
h 色调 0-360
s 饱和度 0%-100%
l 亮度 0%-100%
a 透明度 0-1
图片边框:
border-image:url("图片地址") 垂直偏移量 水平偏移量 / 图片大小 / 图片往外扩张倍数 图片填充方式;
圆角:
border-radius:值;
border-radius:水平值/垂直值;
计算模式:
width:calc(100% - 200px);
用于不同单位之间的计算
运算符前后需要添加空格
穿透模式:
pointer-events:none; 不阻止,穿透
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
