前端知识汇总

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

属性类 (标签)+ [attr]/[attr=value]/[attr

* ^ $=value]

伪元素 :first-line/:first-letter :before :after

结构 :root :not :empty :target

伪类 :first/only/last/nth(n/even/odd)/nth-last(n) +child

:nth-of-type/nth-last-of-type +(even/odd)

UI控件 :hover/active/focus/enable/disable/read-only/-write

checked/selection/default/(in)valid/requried/optional

in-range/out-of-range

通用兄弟元素标签~标签 <>~<>

文字阴影 text-shadow: [横纵 (模糊度颜色内外)]; ()可选

文本换行 word-break: normal/keep-all/break-all

长单词/url换行 word-wrap: normal/break-wrap

服务端字体 @font-face font-family:XX;

font-style/weight/variant/strench: ;

src:url();

src:local("XX"),url()format("truetype")

字体单位 rem html{font-size:62.5%} small{font-size:11px;font-size:1.1rem} strong{font-s inline-block/inline-table/list-item

盒阴影 box-shadow [横纵 (模糊度颜色内外)]; ()可选

盒计算方法 box-sizing:content-box/border-box/padding-box

box-sizing设置百分数蛮有效如50%

背景图像显示 background-clip/origin/size/break/repeat:

多个背景图 background-image/repeat/position: 同时写

渐变背景 background:lineal-gradient

radial-gradient

IE -ms opera -o

边框圆角border-radius:

图像边框border-image:url() 四边切割方式延伸方式

transform:scale(缩放)/skew(倾斜)/translate(移)/rotate(转)

变形

transform-origin(改变中心点变形)/多种变形混用

3D变形：scale/translate/rotate+X/Y/Z skew+X/Y

变形矩阵 2D/3D

transition法1:给无hover标签用:属性事件过度方式延迟法2:给无hover标签动画

用:transition+property/duration/timing-function/delay animation@keyframes 自定义名字{ 0%{ } n%{ } 100%{ } }标签:hover{animation-name:自定义名字 + 上面transition法2+ animation-iteration-count}

多栏布局 (多用于文章的排版，不适合网站布局):columns

属性：column-count/column-width/column-gap/column-

rule/column-span/

盒子模型：内盒与外盒（要区分IE和W3C标准）

弹性盒布局:display:flex

属性：flex-direction/justify-content/align-items

flex-wrap/flex-flow/align-content

项目属性：order/flex-grow/flex-shrink/flex-basis/flex/ align-self

Media Queries:@media 媒体类型 and (媒体特性){样式}

媒体类型：All Screen Print Tv Project/not XXX/only XXX

媒体特性：max-width: min-width: max-device-width:

颜色：alpha通道 rgba(n,n,n,m) 三原色红绿蓝/通道

hsla(n,k,k,m) 色调/饱和度/亮度/通道

轮廓线 outline-/color/style/width 颜色/线型/宽度可简写outline-offset:绘制双边框，属性值 px（可正可负）

拖动修改元素尺寸resize:

none/both/horizontal/vertical/inherit

不能修改/宽高可改/可改宽/可改高/继承父元素

滤镜filter：

褐色sepia(k)/饱和度saturate(k)/灰度grayscale(m)