CSS基础属性介绍

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之间的比较只针对父亲和直属子元素，一个比较好的理解是给理解成目录版本号，详细请参考这里
    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-reverse(从右往左), column(从上往下), column-reverse(从下往上)
   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-self：在子元素上面设置元素在交叉轴上面的高度控制
   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-collapse：控制单元格之间的边框是否合并，默认不合并，但是一般都要设置为合并；
   1. 默认为seperate，合并为collapse
2. border-spacing：跟grid-gap类似，设置的单元格之间的间距，如果是一个值就是统一设置，如果是两个值就是先行后列
   1. 如果设置了border-collapse属性，就会忽略border-spacing的属性
3. empty-cells：在没有内容的单元格周围是否绘制边框
   1. show：绘制，默认值
   2. hide：不绘制
   3. 如果设置了border-collapse为collapse的话，就会忽略该属性
4. caption-side：可以在html中用 caption 添加一个标题，然后这个属性是用来控制该标题的位置，是位于表格的上面还是下面
5. top：顶部

6. bottom：底部

7. table-layout：用来设置单元格的布局宽度高度的算法
   1. auto：自动设置，默认值
      1. 某列宽度由没有折行的最大宽度来决定，即使设置了width也没用
      2. 该算法较慢，因为要遍历完所有内容才能决定每一列的宽度，在主要以呈现数据为主的页面中不建议使用
   2. fixed：固定宽度
      1. 跟单元格内内容无关，就跟表格自身设置的高度宽度比例有关

动画属性

animation

animation 属性的动画原理是在一段时间之内修改某个元素的属性，然后浏览器会自动的将修改属性在这段时间之内均匀化，看起来就是一个比较均匀的动画效果了。

最简单的动画就是设置调整位置属性，然后就可以均匀的上
下或者左右移动了。

1. @keyframes

动画的关键帧配置，类似一个函数，将动画的关键时间点对应的属性信息给标注上，配置示例如下：

@keyframes mymove
{
    0%     {top:0px;}
    25%    {top:200px;}
    50%    {top:100px;}
    75%    {top:200px;}
    100% {top:0px;}
}

最终的动画效果参考这里。

1. animation-name：即指定的 keyframes 的名字，如上的例子就是 mymove
2. animation-duration：动画的持续时间，我估计浏览器会根据这个时间来计算需要自动计算的帧数，因为人眼睛需要每秒24帧的变化才能显示出比较平滑的动画效果；
3. animation-timing-function：动画的变化的速度曲线，可以是线性的，或者一开始慢后面快，或者反过来，或者先慢后快结束的时候再慢等选项，也可以通过指定三次贝塞尔函数 cubic-bezier(n,n,n,n) 来选择不同的动画效果；
4. animation-delay：在动画开始之前的延迟；
5. animation-iteration-count：默认为1，可以为任意整数，也可以设置为枚举值 infinite 从而无线循环；
6. animation-direction：枚举值，默认为normal，即正常播放动画，可以设置为 alternate 该值得含义是奇数次正向播放，偶数次反向播放；当然，如果 animation-iteration-count 设置为1的话，该属性就没有意义了；
7. animation-play-state：paused和running的枚举值，可以对动画进行暂停和继续的操作，类似视频播放的感觉；
8. animation-fill-mode：在动画开始之前和之后属性的应用值；
9. animation：综合如上所有属性的一个简写属性
   1. 各简写属性出现的顺序并没有明确规定，而且没有任何一个属性是必须的；
   2. 只有时间的值可能会出现0，1,2次，当出现1次的时候表示的是 animation-duration 的值，如果出现2次代表的是 animation-delay 的值
   3. 可以有多组值，用逗号做分割，表示多个动画效果同时显示和起作用

transition

1. transition-property：对该元素哪个属性的变化进行动画效果
   1. 当然，不是所有的属性都支持动画的，常见的位置、大小、颜色、以及旋转 之类的都是支持的，详细支持列表请参考这里
   2. 只要属性发生变化，都会实现动画效果，比如hover属性或者js变化属性
2. transition-duration：动画的持续时间
3. transition-delay：动画开始的延迟时间
4. transition-timing-function：动画的速度函数，可以是匀速，也可以是变速，也可以是指定函数
5. transition：是如上几个属性定的简写属性
   1. 几个属性出现的顺序没有明确规定，如果是时间字段的话，第一个是duration，第二个是delay-time
   2. 一些常见的动画效果示例请参考这里。

其他

1. 长度：长度是css的基本单位，会有如下的一些可能的值：
   1. 会用到长度单位的典型的属性：
      1. font-size, width, margin, padding, border-width, text-shadow
   2. 相对单位
      1. cap：相对当前字体的大写字母的高度
      2. ch：相对字体当中0的高度
      3. ex：相对字体当中小写x字母的高度，一般字体的ex≈0.5em
      4. lh/rlh：相对当前行高/跟节点行高
      5. em/rem：相对当前字体/根节点字体
   3. 绝对单位
      1. px：一个像素点，跟设备相关，一般1cm约等于35~45个像素点
      2. Q/mm/cm：0.25毫米/毫米/厘米
      3. pt/in：1/72英寸 / 英寸
      4. pc：12px
   4. 视窗单位
      1. vh/vw：相对视窗的高度/宽度的1/100
      2. vmin/vmax：在视窗的min(高度, 宽度)和max(高度, 宽度)的1/100

在实际应用场景中，主要使用的是em和px两个类型的长度。

1. 颜色：
   1. 枚举值
      1. 比如red, blue, yellow一共大概有将近150个预定义的颜色，详细请参考这里
   2. RGB立体坐标

      1. RGB || #RRGGBB

         1. 当设置为#RGB的时候，跟#RRGGBB是一样的，比如#F03，效果跟#FF0033是一样的
      2. 可以用rgb(r_int, g_int, b_int)来表示，跟上面表示是类似的，只不过一个用的是16进制，一个用的是十进制
      3. 可以用rgba(r_int, g_int, b_int, 透明度)，透明度得分从0~1的浮点数，0是透明，1是不透明
   3. HSL圆柱坐标
      1. hsl(色相, 饱和度, 明度)
         1. 色相是一个彩虹圆环的角度值，red为0/360，green为120，blue为240；
         2. 饱和度是颜色的显示强度，如果为0就是黑白照片即某种灰色
         3. 明度是明亮度，如果是100%，就是白色了，如果是0%，那就是黑色了
      2. hsla，跟rgba一样可以增加一个透明度的参数
2. 渐变函数
   1. 渐变函数是一种自定义的image表示方法，使用示例参考这里
   2. 直线渐变：linear-gradient(角度，方向，颜色列表)，在颜色后面还可以跟一个比例表示位置从什么地方开始渐变
   3. 圆形渐变：radial-gradient(颜色列表)
   4. 重复渐变：重复渐变（即条纹装渐变）

参考

1. CSS属性的高级分类. https://blog.csdn.net/qq_16546829/article/details/81979142
2. CSS属性参考页面. https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference