css note

1.     属性

1.1.     定位

1.1.1.    position(static, relative, absolute, fixed, center, page, sticky)

1.1.2.    z-index(auto, <integer>,适用于定位元素)

1.1.3.    topright bottom left (auto, <length>, <percentage>,适用于定位元素)

1.1.4.    clip(auto, rect(), inset(),适用于绝对定位元素)

1.2.     布局

1.2.1.    display

none:隐藏对象

inline:指定对象为内联元素

block:对峙对象为块元素

list-item:指定对象为列表项目

inline-block:指定对象为内联块元素

table:指定对象作为块元素级的表格

box:将对象作为弹性伸缩盒显示(伸缩盒最老版本)

flex:将对象作为弹性伸缩盒显示(伸缩盒最新版本)

1.2.2.    float(none, left, right)

1.2.3.    clear(none, left, right, both)

1.2.4.    visibility(visible, hidden, collapse)

1.2.5.    overflow(visible, hidden, scroll, auto)

1.2.6.    overflow-x(visible, hidden, scroll, auto)

1.2.7.    overflow-y(visible, hidden, scroll, auto)

1.3.     尺寸 (width, min-width, max-width, height, min-height, max-height)

1.4.     外补白 (margin, margin-top, margin-right, margin-bottom, margin-left)

1.5.     内补白 (padding, padding-top, padding-right, padding-bottom, padding-left)

1.6.     边框 (border, border-width, border-style, border-color, border-top,border-right, border-bottom, border-left, border-radius, box-shadow,border-image)

1.7.     背景 (background, background-color, background-image, background-repeat,background-attachment, background-position, background-origin, background-clip,background-size)

1.8.     颜色 (color, opacity)

1.9.     字体 (font, font-style, font-variant, font-weight, font-size,font-family, font-stretch)

1.10.  文本

1.10.1. text-transform(none,capitalize, uppercase, lowercase, full-width)

1.10.2. white-space(normal,pre, nowrap, pre-wrap, pre-line)

1.10.3. tab-size

1.10.4. word-break(normal,keep-all, break-all)

1.10.5. word-wrap(normal,break-word)

1.10.6. overflow-wrap(normal,break-word)

1.10.7. text-align(left,center, right, justify, start, end)

1.10.8. text-align-last(auto,left, center, right, justify, start, end)

1.10.9. vertical-align

1.10.10.  line-height

1.11.  文本装饰(text-decoration)

1.12.  书写模式(direction)

1.13.  列表(list-style, list-style-image, list-style-position, list-style-type)

1.14.  表格

1.15.  内容

1.16.  用户界面

1.17.  多列

1.18.  伸缩盒

1.19.  交换

1.19.1. transform(none,matrix, translate, translateX, translateY, rotate, scale, scaleX, scaleY, skew,skewX, skewY)

1.19.2. transform-origin

1.20.  过渡(transition, transition-property, transition-duration,transition-timing-function, transition-delay)

1.21.  动画(animation, animation-name, animation-duration,animation-timing-function, animation-delay, animation-iteration-count,animation-direction, animation-play-state, animation-fill-mode)

1.22.  打印

1.23.  媒体查询

1.23.1. width

1.23.2. height

1.23.3. device-width

1.23.4. device-height

1.23.5. orientation

1.23.6. aspect-ratio

1.23.7. device-aspect-ratio

1.23.8. color

1.23.9. color-index

1.23.10.  monochrome

1.23.11.  resolution

1.23.12.  scan

1.23.13.  grid

2.     选择器

2.1.     元素选择符

2.1.1.    通配选择符(*)

2.1.2.    类型选择符(E)

2.1.3.    ID选择符(E#id)

2.1.4.    类选择符(E.class)

2.2.     关系选择符

2.2.1.    包含选择符(E F)

2.2.2.    子选择符(E>F)

2.2.3.    相邻选择符(E+F)

2.2.4.    兄弟选择符(E~F)

2.3.     属性选择符

2.3.1.    E[attr]

2.3.2.    E[attr=”val”]

2.3.3.    E[attr~=”val”]

2.3.4.    E[attr^=”val”]

2.3.5.    E[attr$=”val”]

2.3.6.    E[attr*=”val”]

2.3.7.    E[attr|=”val”]

2.4.     伪类选择符

2.4.1.    E:link

2.4.2.    E:visited

2.4.3.    E:hover

2.4.4.    E:active

2.4.5.    E:focus

2.4.6.    E:lang(fr)

2.4.7.    E:not(s)

2.4.8.    E:root

2.4.9.    E:first-child

2.4.10. E:last-child

2.4.11. E:only-child

2.4.12. E:nth-child(n)

2.4.13. E:nth-last-child(n)

2.4.14. E:first-of-type

2.4.15. E:last-of-type

2.4.16. E:only-of-type

2.4.17. E:nth-of-type(n)

2.4.18. E:nth-last-of-type(n)

2.4.19. E:empty

2.4.20. E:checked

2.4.21. E:enabled

2.4.22. E:disabled

2.4.23. E:target

2.4.24. @page:first

2.4.25. @page:left

2.4.26. @page:right

2.5.     伪对象选择符

2.5.1.    E:first-letter/E::first-letter

2.5.2.    E:first-line/E::first-line

2.5.3.    E:before/E::before

2.5.4.    E:after/E::after

2.5.5.    E::selection

3.     语法与规则

3.1.     !important

3.2.     /*comment*/

3.3.     @import

3.4.     @charset

3.5.     @media

3.6.     @font-face

3.7.     @page

3.8.     @keyframes

4.     取值与单位

4.1.     长度

4.2.     角度

4.3.     时间

4.4.     频率

4.5.     布局

4.6.     分辨率

4.7.     颜色

4.8.     文本

4.9.     函数

4.10.  图像

4.11.  数字

5.     CSSHack

5.1.     条件Hack

5.2.     属性级Hack

5.3.     选择符级Hack

展开阅读全文
©️2020 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值