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. 最后⼀个建议放通⽤字体名，这个属性只有⼏个选项：rif | sans-rif | 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. 枚举取值为：baline(基线默认)/super(上标)/sub(下标)/top(⽗元素顶部)/bottom(⽗元素底部)/middle(⽗元素中部)/text-top(⽂字顶
部)/text-bottom(⽂字底部)
6. text-align: 左右对齐⽅式
1. 也是指针对⾏内元素有效，不能针对块级元素进⾏控制
2. 取值为：left, right, center和justify(两侧对齐)
7. text-transform：⼤⼩写转换
1. 取值为枚举：capitalize：⾸字母⼤写；upperca/lowerca; 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最⼤的区别就在其还是会占据空间；还有个跟表格相关的collap的选
项；
7. overflow：visible(默认值), 会显⽰出来；hidden, 不显⽰了；scroll，增加滚动条；auto，交给浏览器来判断是否装得下，装不下就加滚
动条；
8. clip：⽤来剪切⼀个形状的属性，可以剪切为圆形，不规则多边形，圆弧等形状
9. transform：对元素属性主要是⽤来对某个元素进⾏旋转，偏移等，demo效果请。
10. z-index：
1. 不同z-index之间的⽐较只针对⽗亲和直属⼦元素，⼀个⽐较好的理解是给理解成⽬录版本号，详细请参考
2. 除了z-index之外，还有其他的⼀些属性也会⽣成⼀个新的层叠上下⽂
1. z-index不为auto：⾮static的元素，或者flex元素
2. opacity⼩于1, 即元素半透明
3. transform不为nong的元素，即有各种⾓度变换的操作等
多列属性
1. columns：像论⽂⼀样将⽂章按照多列的⽅式来展⽰，可以分成任意多列；
2. column-count：分成⼏列来显⽰⽂本
3. column-gap：每⼀列之间的间距⼤⼩
4. column-rule：每⼀列之间的间隔样式(类似border)
5. column-span：可以将某段⽂字横跨所有列, ⽐如标题，或者将⽂章分成⼏个格⼦来展现
6. column-width：每⼀个列的宽度；
Flex布局
⽗亲元素设置
基本属性设置
弹性布局，更多详细请参考
该布局主要⽤于单⾏的横向排版布局, 相⽐于float等布局⽅式主要好处在于其不脱离⽂档流, 控制⽐例⽅便
1. display:flex：将⽗亲设置为 flex 弹性布局
2. flex-direction：row(从左往右), row-rever(从右往左), column(从上往下), column-rever(从下往上)
1. 主轴：以从左往右为例, 就是左->右;
2. 交叉轴：就是垂直于主轴的⽅向，以rtl为例, 就是上->下；
3. 起始和终⽌：以左->右布局为例, 起始就是左边交叉轴->右边交叉轴;
4. 主轴和交叉轴概念很重要，因为各种属性都是控制区块是如何在主轴和交叉轴上⾯分布的；
3. flex-wrap：沿着主轴的元素如果超出⽗元素宽度之后，是否⾃动折⾏显⽰新⼦元素，默认不折⾏，直接超出⽗元素显⽰；
描写马的诗句1. wrap：换⾏；nowrap：不换⾏；
4. flex-flow：将flex-direction和flex-wrap合起来的简写属性；
元素对齐与空间分配
1. align-items：元素在交叉轴上的⾼度控制
1. flex-start：顶部对齐，不⾃动拉伸⾼度
蔡明年龄2. felx-end：底部对齐，不⾃动拉伸⾼度
3. center：中间对齐
4. stretch：默认值，⾃动拉伸占满所有⾼度
2. justify-content：在主轴上的布局⽅式
1. flex-start：靠左对齐
2. flex-end：靠右对齐
3. center：居中
4. space-round：平均分布，左右也留⽩
5. space-between：平均分布，左右对齐边界
3. align-content：对于多⾏的flex容器设置⾏与⾏之间的排布
⼦元素宽度属性
占据宽度设置
1. flex-bias：⽤来决定⼦元素的初始长度
1. 默认为auto，意思是让浏览器来决定宽度，如果设置了width，就⽤；否则就浏览器⾃⼰计算；
2. 也可以⼈⼯指定绝对值或者百分⽐（相对⽗亲），⽤来⼿动指定宽度
2. flex-grow：⼀个绝对的数字，如果⼦元素之和没有⽗元素宽的话，就⽤这个数字的相对⽐例来决定每个元素如何分配剩下的空间
3. flex-shrink：跟flex-grow类似，只不过是⼦元素之和⼤于⽗元素的时候，怎么压缩，不过压缩不会⽆限制压缩，每个元素都会有个最⼩
宽度。
1. 具体grow和shrink在实际应⽤当中的表现可以参考
4. flex：如上三个属性的简写，可以为枚举值或者1~3个数字
1. auto：相当于1 1 auto，即⾃动伸长，也⾃动伸缩，宽度由浏览器决定
2. initial: 默认值, 相当于0 1 auto, 即不⾃动伸长，但是⾃动收缩，宽度由浏览器决定
3. none：相当于0 0 auto，即不⾃动伸长，也不⾃动收缩，宽度由浏览器决定
4. 如果是⼀个值：
1. 如果是⼀个⽆单位的数，会被当成flex-grow的值
2. 如果是⼀个长度/宽度单位，会被当成flex-bias的值
5. 如果是两个值：
1. 第⼀个值必须是⼀个⽆单位的数，当成是flex-grow的值
2. 第⼆个值可以是：
1. ⼀个⽆单位的数，当成是flex-shrink的值
2. ⼀个长度/宽度单位，会被当成是flex-bias的值
6. 如果是三个值
1. 第⼀个值必须是⽆单位的数，会被当成flex-grow的值
2. 第⼆个值必须是⽆单位的数，会被当成是flex-shrink的值
3. 第三个值必须是长度/宽度单位或者枚举值，被当成flex-bias的值
4. 占据⾼度设置
语文课文5. align-lf：在⼦元素上⾯设置元素在交叉轴上⾯的⾼度控制
1. 默认为⽗亲的align-items的值
2. 如果设置了，就覆盖⽗亲的值，值得取值范围和含义跟align-items⼀模⼀样
3. 排序设置
6. order：如果⼦元素设置了该属性，则各⼦元素按照order值排序，否则按照⽂档出现的先后顺序排序
⽹格布局
⽹格布局跟Flex弹性布局是类似的，都是css3新出的属性。
Flex主要针对的是单⾏的布局，⼀般不会换⾏。Grid主要针对的是表格类多⾏布局，可以将其想象成在css中控制类似excel的表格。
相⽐于普通的html中的table布局，Grid布局⼀⽅⾯主要是在 css 中控制表格效果，另⼀⽅⾯是在合并单元格⽅⾯⽐表格布局会更灵活。
更多跟Grid布局相关的信息，请参考
⽗亲属性
1. display: grid：将⽗亲设置为表格布局属性，所有其直属⼉⼦都会按照表格⽅式布局
2. grid-template-columns：将表格分为多少列
1. 可以直接写100px, 100px, 100px 将表格分为三个 100px 的列
2. 也可以写 1fr, 1fr, 1fr 将表格均分为三个相同的列，主要 fr 是专门为grid布局新出的⼀个单位
3. 也可以写 repeat(3, 1fr) 达到跟上⾯⼀样的效果，这样可以减少书写的量
4. 还可以为每条线命名，这样⼉⼦就可以不⽤坐标，⽽⽤名字来定位，有的时候这样代码会更可读⼀些，⽐如
1. grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
3. grid-template-rows：将表格分为多少⾏，同上
4. grid-auto-rows：设置每⼀⾏的⾼度，可以⽤minmax(100px, auto)来设置为最少100px, 最⾼就让浏览器⾃⼰设置
5. grid-auto-columns：同grid-auto-rows
6. grid-column-gap：列与列之间的宽度，⼀个长度单位
7. grid-row-gap：⾏与⾏之间的宽度，⼀个长度单位
8. grid-gap：如上两个属性的简写
1. 如果只有⼀个值，会同时应⽤到⾏与列的间距
2. 如果有两个值，第⼀个⽤到⾏，第⼆个⽤到列
9. grid-template-areas：这个是基于命名⽹格的定位，在该属性中将所有单元格属于哪个⼉⼦都写出来，详情请参考
⼉⼦属性
⼉⼦定位默认是从左到右，从上到下，按照单元格依次排布的。
⽽Grid属性最⼤的作⽤就是可以弹性布局，即合并单元格，每个⼉⼦可以指定⾃⼰所占据的单元格的区间。
设置的⽅式有多种：
1. grid-column-start/grid-column-end/grid-row-start/grid-row-end：这四个属性就对应了横纵坐标轴(注意，是从1开始)
1. 默认每个⼉⼦只占⼀个单元格，所以如果只写了start，不写end的话，默认end就是start+1；同样，如果只写了end的话，start就
是end-1
2. 坐标可以设置为负数，即导数第⼏个坐标
2. grid-column/grid-row的简写，如下：
1. grid-column: 1 / 2
2. grid-row： 1 / 4
3. 可以⽤span关键字来改为start/start+_span_的⽅式来设置单元格属性，这样可以专注单元格⼤⼩，⽰例如下：
1. grid-column: 1 / span 1
2. grid-row: 1/ span 3
3. 效果跟上⾯两⾏效果是⼀样的
3. grid-area属性，如下：
1. grid-area：1 / 1 / 4 / 1
2. 该属性是按照上/左/下/右的顺序来写的，跟margin正好是反⽅向的
表格布局
表格布局是很⽼很早的布局了，其布局结构主要在html中控制，css中有如下的⼏个属性来控制表格的⾏为：
⽽现在表格⼀般不⽤来布局了，主要还是⽤来做表格类数据的呈现。
1. border-collap：控制单元格之间的边框是否合并，默认不合并，但是⼀般都要设置为合并；
1. 默认为perate，合并为collap
2. border-spacing：跟grid-gap类似，设置的单元格之间的间距，如果是⼀个值就是统⼀设置，如果是两个值就是先⾏后列
1. 如果设置了border-collap属性，就会忽略border-spacing的属性
3. empty-cells：在没有内容的单元格周围是否绘制边框
1. show：绘制，默认值
2. hide：不绘制
3. 如果设置了border-collap为collap的话，就会忽略该属性
4. caption-side：可以在html中⽤caption添加⼀个标题，然后这个属性是⽤来控制该标题的位置，是位于表格的上⾯还是下⾯
5. top：顶部
6. bottom：底部
7. table-layout：⽤来设置单元格的布局宽度⾼度的算法
1. auto：⾃动设置，默认值
1. 某列宽度由没有折⾏的最⼤宽度来决定，即使设置了width也没⽤
2. 该算法较慢，因为要遍历完所有内容才能决定每⼀列的宽度，在主要以呈现数据为主的页⾯中不建议使⽤
2. fixed：固定宽度
1. 跟单元格内内容⽆关，就跟表格⾃⾝设置的⾼度宽度⽐例有关
动画属性
animation
组织生活会和民主生活会的区别
成人高考英语
animation属性的动画原理是在⼀段时间之内修改某个元素的属性，然后浏览器会⾃动的将修改属性在这段时间之内均匀化，看起来就是⼀个⽐较均匀的动画效果了。
最简单的动画就是设置调整位置属性，然后就可以均匀的上
下或者左右移动了。
