css属性分类介绍
- 格式：pdf
- 大小：241.33 KB
- 文档页数：7
css属性分类介绍
css属性分类介绍
CSS分类⽬录
1. ⽂本/字体/颜⾊
1. ⽂本相关
2. 字体相关
3. 颜⾊相关
4. 背景相关
2. ⼤⼩/布局
1. ⼤⼩属性
2. margin 外边距
3. padding 内边距
4. border 边框
5. position 定位
3. 列表/表格
1. 多列属性
2. 可伸缩框属性
3. 列表属性
4. Grid属性
5. Table属性
4. 动画属性
1. Animation 动画属性
2. Transition 过渡属性
CSS属性分类
⽂本/字体/颜⾊/背景
字体类
1. font-family：指定字体
1. 需要考虑客户端机器上是否装有字体
2. 可以排列多个字体，⽤逗号分隔，如果有空格⽤引号分隔
3. 最后⼀个建议放通⽤字体名，这个属性只有⼏个选项：serif | sans-serif | cursive | fantasy | monospace
2. font-size：字体⼤⼩，要注意有绝对⼤⼩，相对⼤⼩，长度，百分⽐
1. ⼀般建议采⽤相对⼤⼩，即em或者rem
2. 典型的长度单位，详细信息请参考
3. font-style：正常体、斜体、倾斜体
4. font-weight：设置粗体
5. font-variant：⽤来将所有字体都变成⼤写，但是原来是⼤写的字体呢⼜要⽐默认的要⼤⼀些
6. font：
1. 简写形式，如上所有跟字体相关的字体混合在⼀起
2. font-family是必选的，⽽且⼀定要在最后；font-size如果有，必须出现在倒数第⼆个, 后⾯可以⽤/跟⼀个line-height的设置
3. 剩下的font-style, font-weight, font-variant就⽆所谓了，前⾯任意排列
4. font还⽀持⼀些类似caption, icon等快捷描述
5. 详细请参考
7. line-height：⼀个数字，默认差不多为1.2，有normal/数字/长度/百分⽐
1. ⼀般建议使⽤纯数字, ⽤长度和百分⽐都在某些特殊情况下超出预期，即⼦元素的⾏⾼被⽗亲元素设置了，同时⼦元素还有默认
的浏览器字体设置的场景。参考2. 长度可以参考
8. font-size-adjust：不太常⽤属性，⽤来设置英⽂字体的⼤⼩写字母之间的⾼度⽐例的
⽂本类
1. word-spacing：词和词之间的距离，默认值是由字体来定的，⾃定义可以定义为长度/百分⽐，对于中⽂来讲，也是空格
2. letter-spacing：字母和字母之间的距离，默认值是由字体来定的，可以⾃定义为长度单位
3. word-break：⽂字换⾏逻辑
1. normal：默认值，英⽂空格处换⾏，中⽂任意字符换⾏；
2. break-all：都采⽤中⽂的⽅式任意换⾏；
3. keep-all：都采⽤英⽂的⽅式，中⽂也要遇到了空格或者回车等特殊符号才换⾏4. break-word：跟normal类似，不过即使min_width(即单个单词的长度)⼤于容器的width的时候，会换⾏，⽽不是超出
4. word-wrap/overflow-wrap：normal/break-word。word-wrap是overflow-wrap的别名。逻辑跟如上word-break的break-word的逻辑类
似，要溢出的时候是否换⾏, 详情参考5. vertical-align: 上下对齐⽅式
1. 只针对display的值为inline和table-cell的元素有效，⽐如span，img，input，td等元素，对于其他块级元素都不⽣效
2. 取值范围为枚举/长度/百分⽐
3. 枚举取值为：baseline(基线默认)/super(上标)/sub(下标)/top(⽗元素顶部)/bottom(⽗元素底部)/middle(⽗元素中部)/text-top(⽂字顶
部)/text-bottom(⽂字底部)6. text-align: 左右对齐⽅式
1. 也是指针对⾏内元素有效，不能针对块级元素进⾏控制
2. 取值为：left, right, center和justify(两侧对齐)
7. text-transform：⼤⼩写转换
1. 取值为枚举：capitalize：⾸字母⼤写；uppercase/lowercase; none;
8. text-shadow：阴影设置，可以设置阴影的颜⾊，相对原字体的位置，以及模糊半径
9. text-decoration：设置颜⾊、位置、样式。分别对应了text-decoration-color，text-decoration-line，text-decoration-style
1. 位置可以为：上划线、下划线、删除线、闪烁和⽆
2. 样式可以为：实线(solid)、双实线(double)、dotted(点虚线)、dashed(虚线)、wavy(波浪线)
3. 注意：⽗亲会影响⼉⼦，且⼉⼦⽆法取消
10. text-indent：缩进，段落第⼀⾏⽂本要空多少距离，单位为长度
11. text-justiy：在text-align被设置为justiy的时候⽤来控制是在单词之间加空格(英⽂)，还是在字母之间加空格(中⽂)
12. text-overflow：⽂本溢出的截断，可以⽤'...'来代替，或者⽤⾃⼰定义的字符串来代替超出字符
1. 需要配合 overflow: hidden 的属性来控制, 否则还是会超出边距显⽰
13. white-space：控制空格符，"\t", "\n"以及显⽰的时候是否折⾏显⽰的属性
1. normal/nowrap/pre/pre-wrap/pre-line：详情参考
颜⾊&背景类
1. color：背景颜⾊，关于眼⾊的值⼀共有三种，枚举值，#xxx, rgb, hsl，详细请参考
2. opacity：不透明度，即设置颜⾊的透明的程度，0为透明，1为不透明，单独的属性设置和⽤color的rgba函数来设置都⼀样
3. backgroud-color：背景颜⾊
4. backgroud-image：
1. 可以指定多个图⽚，第⼀个图⽚最接近⽤户，border会最后绘制
5. backgroud-clip：背景图⽚延伸到盒⼦模型的范围，到⽂本、到边框内沿，到边框外沿
6. backgroud-origin：跟backgroud-clip类似，只是只作⽤域backgroud-image, 可以取值为border-box, padding-box, content-box
7. backgroud-position：背景图⽚的位置，可以设置为枚举值，也可以设置为相对于左上⾓的坐标，分别为长度单位，这个值⼀般要跟
backgroud-repeat: no-repeat配合使⽤
8. backgroud-size：设置背景图⽚的⼤⼩，可以控制压缩或者截断或者⽐例
1. auto：⾃动
2. cover：图⽚做截断，装满背景，但是背景图⽚可能显⽰不全
3. contain：图⽚不做截断，但是有可能装不满背景
4. 还可以指定长宽来按照指定的⽐例来缩放背景图⽚
9. backgroud-repeat：不重复；沿着x,y轴重复（最后⼀个图⽚可能会被截断）；图⽚不截断，但是中间留空隙；图⽚不截断，同时拉伸/
压缩图⽚保证图⽚之间⽆空隙；10. backgroud-attachment：背景图⽚是否随着⿏标滚轮⽽变动位置
11. backgroud：如上各个backgroud开头的属性的组合，组合⽐较⾃由，⼀共8个元素：
1. backgroud-color必须出现在最后；
2. 盒⼦属性有backgroud-clip, backgroud-origin，可以出现0,1,2次
3. backgroud-size必须出现在backgroud-position之后，⽤/连接
4. backgroud-image, backgroud-position, backgroud-size, backgroud-repeat, backgroud-attachment 可以任意出现
⽂字连接&⿏标样式
1. a:link ⽂字连接默认格式； a:visited 访问过后的链接样式；a:active ⿏标点击时候的样式；a:hover ⿏标移动上去的样式；
2. ⿏标样式：help 加?；pointer 变为⼿；progress：请等待；wait：系统繁忙；move：拖拽；not-allowed：不能执⾏；等等，详细请参
考
⼤⼩/布局类
⼤⼩属性
1. width/height：包含了width，max-width，min-width⼏个配套的属性，值为长度/百分⽐；同时还可以设置⼀些属性值，⽤于表达width
⽤于内容级别，还是border级别等；2. max-width/max-height：最⼤宽度/⾼度
3. min-width/min-height：最⼩宽度/⾼度
盒⼦模型类
1. border：包含了粗细、样式、颜⾊。1. border-width：可以有1~4个长度值。1个代表4个边；2个的话代表横边和纵边；3个代表上，左&右，下；4个代表上，右，下，
左2. border-style：可以有1~4个枚举值。跟text-decoration类似，可以有实线、双实线、虚线、点虚线、波浪线等，还可以有浮雕、
陷⼊、突出等效果；3. border-color：可以有1~4个颜⾊值。
4. border-image：可以⽤来设置边框的图⽚，⽤来显⽰⼀些⽐较漂亮的边框，图⽚选择哪些部分来作为边框请参考
5. border-radius：⽤来设置圆⾓的
6. box-shadow：边框的模糊划效果，跟text-shadow是类似的效果，可以设置阴影相对位置/阴影模糊半径/扩散半径/阴影颜⾊；
2. outline：outline跟border类似, 是画边框的，
1. 跟border的区别是 1. 不占盒⼦模型宽度; 2. 可能不是矩形;
2. 准确来说, outline应该不算是盒⼦模型的属性
3. 跟border类似有, outline-style, outline-color, outline-width三个⼦属性
3. margin/padding：外边距，内边距的属性，可以有1~4个值，不同个数的值代表函数同边；
4. margin-top/margin-bottom/margin-left/margin-right：对应的控制4个边的外边距的属性
5. padding-top/padding-bottom/padding-left/padding-right：对应的控制4个边的内边距的属性
布局类
基础定位类
1. float：浮动属性
2. clear：清除浮动
3. position：位置类型
4. top/left/bottom/right：如果设置了position为⾮static的话，就可以设置这⼏个值来调整div的相对位置
5. display：显⽰类型
6. visibility：是否显⽰，设置为hidden则不显⽰，跟display:none最⼤的区别就在其还是会占据空间；还有个跟表格相关的collapse的选
项；7. overflow：visible(默认值), 会显⽰出来；hidden, 不显⽰了；scroll，增加滚动条；auto，交给浏览器来判断是否装得下，装不下就加滚
动条；8. clip：⽤来剪切⼀个形状的属性，可以剪切为圆形，不规则多边形，圆弧等形状
9. transform：对元素属性主要是⽤来对某个元素进⾏旋转，偏移等，demo效果请。
10. z-index：
1. 不同z-index之间的⽐较只针对⽗亲和直属⼦元素，⼀个⽐较好的理解是给理解成⽬录版本号，详细请参考
