|
css属性分类介绍
CSS分类目录
- 文本/字体/颜色
- 文本相关
- 字体相关
- 颜色相关
- 背景相关
- 大小/布局
- 大小属性
- margin 外边距
- padding 内边距
- border 边框
- position 定位
- 列表/表格
- 多列属性
- 可伸缩框属性
- 列表属性
- Grid属性
- Table属性
- 动画属性
- Animation 动画属性
- Transition 过渡属性
CSS属性分类
文本/字体/颜色/背景
字体类
- font-family：指定字体
- 需要考虑客户端机器上是否装有字体
- 可以排列多个字体，用逗号分隔，如果有空格用引号分隔
- 最后一个建议放通用字体名，这个属性只有几个选项：serif | sans-serif | cursive | fantasy | monospace
- font-size：字体大小，要注意有绝对大小，相对大小，长度，百分比
- 一般建议采用相对大小，即em或者rem
- 典型的长度单位，详细信息请参考这里
- font-style：正常体、斜体、倾斜体
- font-weight：设置粗体
- font-variant：用来将所有字体都变成大写，但是原来是大写的字体呢又要比默认的要大一些
- font：
- 简写形式，如上所有跟字体相关的字体混合在一起
- font-family是必选的，而且一定要在最后；font-size如果有，必须出现在倒数第二个, 后面可以用
/跟一个line-height的设置
- 剩下的font-style, font-weight, font-variant就无所谓了，前面任意排列
- font还支持一些类似caption, icon等快捷描述
- 详细请参考这里
- line-height：一个数字，默认差不多为1.2，有normal/数字/长度/百分比
- 一般建议使用纯数字, 用长度和百分比都在某些特殊情况下超出预期，即子元素的行高被父亲元素设置了，同时子元素还有默认的浏览器字体设置的场景。参考这里
- 长度可以参考这里
- font-size-adjust：不太常用属性，用来设置英文字体的大小写字母之间的高度比例的
文本类
- word-spacing：词和词之间的距离，默认值是由字体来定的，自定义可以定义为长度/百分比，对于中文来讲，也是空格
- letter-spacing：字母和字母之间的距离，默认值是由字体来定的，可以自定义为长度单位
- word-break：文字换行逻辑
- normal：默认值，英文空格处换行，中文任意字符换行；
- break-all：都采用中文的方式任意换行；
- keep-all：都采用英文的方式，中文也要遇到了空格或者回车等特殊符号才换行
- break-word：跟normal类似，不过即使min_width(即单个单词的长度)大于容器的width的时候，会换行，而不是超出
- word-wrap/overflow-wrap：normal/break-word。word-wrap是overflow-wrap的别名。逻辑跟如上word-break的break-word的逻辑类似，要溢出的时候是否换行, 详情参考这里
- vertical-align: 上下对齐方式
- 只针对display的值为inline和table-cell的元素有效，比如span，img，input，td等元素，对于其他块级元素都不生效
- 取值范围为枚举/长度/百分比
- 枚举取值为：baseline(基线默认)/super(上标)/sub(下标)/top(父元素顶部)/bottom(父元素底部)/middle(父元素中部)/text-top(文字顶部)/text-bottom(文字底部)
- text-align: 左右对齐方式
- 也是指针对行内元素有效，不能针对块级元素进行控制
- 取值为：left, right, center和justify(两侧对齐)
- text-transform：大小写转换
- 取值为枚举：capitalize：首字母大写；uppercase/lowercase; none;
- text-shadow：阴影设置，可以设置阴影的颜色，相对原字体的位置，以及模糊半径
- text-decoration：设置颜色、位置、样式。分别对应了text-decoration-color，text-decoration-line，text-decoration-style
- 位置可以为：上划线、下划线、删除线、闪烁和无
- 样式可以为：实线(solid)、双实线(double)、dotted(点虚线)、dashed(虚线)、wavy(波浪线)
- 注意：父亲会影响儿子，且儿子无法取消
- text-indent：缩进，段落第一行文本要空多少距离，单位为长度
- text-justiy：在text-align被设置为justiy的时候用来控制是在单词之间加空格(英文)，还是在字母之间加空格(中文)
- text-overflow：文本溢出的截断，可以用'...'来代替，或者用自己定义的字符串来代替超出字符
- 需要配合 overflow: hidden 的属性来控制, 否则还是会超出边距显示
- white-space：控制空格符，"\t", "\n"以及显示的时候是否折行显示的属性
- normal/nowrap/pre/pre-wrap/pre-line：详情参考这里
颜色&背景类
- color：背景颜色，关于眼色的值一共有三种，枚举值，#xxx, rgb, hsl，详细请参考这里
- opacity：不透明度，即设置颜色的透明的程度，0为透明，1为不透明，单独的属性设置和用color的rgba函数来设置都一样
- backgroud-color：背景颜色
- backgroud-image：
- 可以指定多个图片，第一个图片最接近用户，border会最后绘制
- backgroud-clip：背景图片延伸到盒子模型的范围，到文本、到边框内沿，到边框外沿
- backgroud-origin：跟backgroud-clip类似，只是只作用域backgroud-image, 可以取值为border-box, padding-box, content-box
- backgroud-position：背景图片的位置，可以设置为枚举值，也可以设置为相对于左上角的坐标，分别为长度单位，这个值一般要跟backgroud-repeat: no-repeat配合使用
- backgroud-size：设置背景图片的大小，可以控制压缩或者截断或者比例
- auto：自动
- cover：图片做截断，装满背景，但是背景图片可能显示不全
- contain：图片不做截断，但是有可能装不满背景
- 还可以指定长宽来按照指定的比例来缩放背景图片
- backgroud-repeat：不重复；沿着x,y轴重复（最后一个图片可能会被截断）；图片不截断，但是中间留空隙；图片不截断，同时拉伸/压缩图片保证图片之间无空隙；
- backgroud-attachment：背景图片是否随着鼠标滚轮而变动位置
- backgroud：如上各个backgroud开头的属性的组合，组合比较自由，一共8个元素：
- backgroud-color必须出现在最后；
- 盒子属性有back
|