CSS万能手册🤔

本篇大致介绍了一下 css 的各种属性，文章底部罗列了所有的 react-native css 属性。

关于文本属性

font: font简写属性在一个声明中设置所有字体属性。用于一次设置元素字体的两个或更多方面,可以按顺序设置font-style font-variant font-weigh font-family…注意，如果没有使用这些关键词，至少要指定字体大小和字体系列。
```
font:italic bold 12px/30px arial,sans-serif;
```
font-family: 规定文本的字体系列。该属性完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路。
```
font-family:`Times New Roman`,Georgia,Serif;
```
font-size: 设置字体的尺寸。

xx-small x-small small medium large x-large xx-large 把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。默认值：medium。
smaller 把 font-size 设置为比父元素更小的尺寸。
larger 把 font-size 设置为比父元素更大的尺寸。
length 把 font-size 设置为一个固定的值。
% 把 font-size 设置为基于父元素的一个百分比值。
inherit 规定应该从父元素继承字体尺寸(所有版本 IE 都不支持)。
20pt 数值
font-size-adjust: 为某个文本规定一个 aspect 值，这样就可以保持首选字体的 x-height.字体的小写字母 x 的高度与 font-size 高度之间的比率被称为一个字体的 aspect 值。当字体拥有高的 aspect 值时，那么当此字体被设置为很小的尺寸时会更易阅读
```
font-size-adjust: 0.60;
```
font-style: 定义字体的风格。默认normal,可设置italic斜体…一般可以 control + spec 提示可输入属性。
font-variant: 设置所有的小写字母转换为大写
font-weight: 设置文本的粗细。数字值 400 相当于关键字 normal，700 等价于 bold。
text-align: 设置文本水平对齐方式, 仿佛没有垂直居中属性？设置vertical-align并没有什么卵用，单行情况下可以设置文本的height 与 line-height保持一致来实现垂直居中。多行情况下可以在外面加个容器然后设置 padding 都为0
line-height: 设置行高。
color: 设置文本颜色。
letter-spacing: 设置字符间距。
text-decoration: 设置添加到文本的修饰。

none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。(现在好像都不支持了，经测试 chrome 跟 safari 无效)
inherit 规定应该从父元素继承 text-decoration 属性的值。
text-indent: 设置文本首行缩进。
text-shadow: 设置文本阴影。

h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色
text-transform: 设置文本大小写。

none 默认。定义带有小写字母和大写字母的标准的文本。
capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义无大写字母，仅有小写字母。
inherit 规定应该从父元素继承 text-transform 属性的值。
white-space: 设置文本空白符处理方式。

normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。
word-spacing: 设置文本中字间距，“字” 定义为由空白符包围的一个字符串
text-overflow: 设置当文本溢出包含元素时所做的处理。但是它的实现需要另一个属性支持：overflow:hidden

clip 修剪文本。
ellipsis 显示省略符号来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本。
word-break: 设置文本自动换行的处理方法。

normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。
word-wrap: 设置文本允许长单词或 URL 地址换行到下一行。

normal 只在允许的断字点换行（浏览器保持默认处理）。
break-word 在长单词或 URL 地址内部进行换行。

关于元素 Size/Dimension

height: 定义元素高度

auto 默认。浏览器会计算出实际的高度。
length 使用 px、cm 等单位定义高度。
% 基于包含它的块级对象的百分比高度。
inherit 规定应该从父元素继承 height 属性的值。
20pt 数值
width: 定义元素宽度
max-height、max-width、min-height、min-width 相信大家都懂的

关于元素定位Position

Position: 这个比较重要,设置元素的定位方式。

absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定。
fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定。
relative
生成相对定位的元素，相对于其正常位置进行定位。因此，left:20 会向元素的 LEFT 位置添加 20 像素。
static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
sticky
css 3 新属性，它的表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。类似 UITableView 的 header inherit
规定应该从父元素继承 position 属性的值。
top/left/bottom/right 默认值auto。可以为负数。设置上下左右距离

对于相对定位元素，如果 top 和 bottom 都是 auto，其计算值则都是 0；如果其中之一为 auto，则取另一个值的相反数；如果二者都不是 auto，bottom 将取 top 值的相反数。
display: 重点规定元素应该生成的框的类型。

none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row 此元素会作为一个表格行显示（类似 <tr>）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column 此元素会作为一个单元格列显示（类似 <col>）
table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption 此元素会作为一个表格标题显示（类似 <caption>）
inherit 规定应该从父元素继承 display 属性的值。
margin: 设置元素的外边距,4个参数是上右下左,iOS是上左下右。它可以设置1-4个参数,允许负数,比 iOS 要灵活一点,
padding: 设置元素的内边距,4个参数依然是上右下左,使用方式跟 margin 类似，但是不允许负数
float: 设置元素的浮动

left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。
clear: 规定元素的哪一侧不允许其他浮动元素。

left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。
vertical-align: 设置元素的垂直对齐方式。
z-index: 设置元素的堆叠顺序,如果为正数，则离用户更近，为负数则表示离用户更远。

其他设置

clip: 剪裁绝对定位元素。

shape 设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)
auto 默认值。不应用任何剪裁。
inherit 规定应该从父元素继承 clip 属性的值。
cursor: 设定光标样式

url 需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default 默认光标（通常是一个箭头）
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针（一只手）
move 此光标指示某对象可被移动。
e-resize 此光标指示矩形框的边缘可被向右（东）移动。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize 此光标指示矩形框的边缘可被向上（北）移动。
se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize 此光标指示矩形框的边缘可被向下移动（南）。
w-resize 此光标指示矩形框的边缘可被向左移动（西）。
text 此光标指示文本。
wait 此光标指示程序正忙（通常是一只表或沙漏）。
help 此光标指示可用的帮助（通常是一个问号或一个气球）。
overflow: 规定当内容溢出元素框时发生的事情
visibility: 规定元素是否可见。

React Native CSS ☆☆☆☆☆

alignContent,
alignItems, 定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
alignSelf,
aspectRatio,
backfaceVisibility,
backgroundColor,
borderBottomColor,
borderBottomEndRadius,
borderBottomLeftRadius,
borderBottomRightRadius,
borderBottomStartRadius,
borderBottomWidth,
borderColor,
borderEndColor,
borderEndWidth,
borderLeftColor,
borderLeftWidth,
borderRadius,
borderRightColor,
borderRightWidth,
borderStartColor,
borderStartWidth,
borderStyle,
borderTopColor,
borderTopEndRadius,
borderTopLeftRadius,
borderTopRightRadius,
borderTopStartRadius,
borderTopWidth,
borderWidth,
bottom,
color,
decomposedMatrix,
direction,
display,
elevation,
end,
flex,
flexBasis,
flexDirection,
flexGrow,
flexShrink,
flexWrap,
fontFamily,
fontSize,
fontStyle,
fontVariant,
fontWeight,
height,
includeFontPadding,
justifyContent, 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式
left,
letterSpacing,
lineHeight,
margin,
marginBottom,
marginEnd,
marginHorizontal,
marginLeft,
marginRight,
marginStart,
marginTop,
marginVertical,
maxHeight,
maxWidth,
minHeight,
minWidth,
opacity,
overflow,
overlayColor,
padding,
paddingBottom,
paddingEnd,
paddingHorizontal,
paddingLeft,
paddingRight,
paddingStart,
paddingTop,
paddingVertical,
position,
resizeMode,
right,
rotation,
scaleX,
scaleY,
shadowColor,
shadowOffset,
shadowOpacity,
shadowRadius,
start,
textAlign,
textAlignVertical,
textDecorationColor,
textDecorationLine,
textDecorationStyle,
textShadowColor,
textShadowOffset,
textShadowRadius,
tintColor,
top,
transform,
transformMatrix,
translateX,
translateY,
width,
writingDirection,
zIndex

CSS 万能手册🤔