css note
来源:互联网 发布:抽象工厂模式 java 编辑:程序博客网 时间:2024/05/24 16:13
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
- NOTE:CSS
- css note
- css-note
- w3shool css study note
- HTML&CSS note
- CSS fundation [note]
- CSS布局note
- CSS实战note
- CSS Note 使用笔记 by Emerald
- note
- note
- NOTE
- note
- Note
- note
- note
- Note
- note
- 如何成为优秀开发人员
- C语言初学 测定数据类型长度
- What Is Key-Value Coding?
- ant打包所遇到问题(外导library项目包)
- JS下拉菜单
- css note
- CentOS 6 网络设置修改 指定IP地址 DNS 网关(实测 笔记)
- CustomEditText
- C#模拟http 发送post或get请求
- form标签 小例子
- window 下 mongodb 配置文件快速启动
- nginx负载均衡
- HFS + WingDNS架文件共享服务
- 黑马程序员-基本运算