css属性详解

CSS/CSS3

1. CSS样式

尺寸：width/min-width/max-width/height/min-height/max-height

背景：background-color/repeat/position/attachment
- repeat 背景平铺：no-repeat/repeat/repeat-x/repeat-y css3添加 round/space 图像自动缩放适应填充满容器/以相同的间距平铺且填充满容器
- attachemnt 背景关联：scroll(默认，背景随文档滚动)/fixed
- position left/center/right/top/bottom/percentage/length 背景位置

文本：text-indent/overflow/align/transform/decoration(-line/-color/-style|blink)/stroke text-fill-color word-spacing letter-spacing white-space direction vertical-align line-height
- indent 缩进文本：负值(悬挂缩进：悬挂在元素余下部分的左边) 继承
- overflow clip/ellipsis 文本溢出裁剪或显示省略号
- align left/center/right/justify两端对齐
- transform 处理文本大小写lowercase/capitalize(首字母大写)
- decoration-line none/underline/overline/line-throung
- decoration-color
- decoration-style solid/double/dotted/dashed/wavy
- blink(文本闪烁)
- text-fill-color将会覆盖color属性
- stroke stroke-width/color描边
- direction 块级元素书写方向，表中列布局方向，内容水平填充方向，两端对齐最后一行的位置
- vertical-align 默认baseline percentage/length/sub/top/text-top/middle/bottom/text-bottom
- line-height normal/percentage/length/number

字体：font-family/style/variant/weight/size/
- style 默认normal italic oblique斜体
- variant 默认normal small-caps小型大写字母
- weight 文本粗细,100~900 bold 700 normal 400 bolder lighter细体

颜色： color

链接：a:link a:visited a:hover a:active点击的时刻

列表：list-style-type/image/position
- list-style-type disc/circle/square/... 实心圆/空心圆/方块等
- list-style-position inside/outside标志出现在列表项之外还是内容内部

表格：border-collapse/spacing/ caption-side empty-cells table-layout
- border-collapse collapse是否将表格边框合并单一边框 seprate边框独立
- caption-side 表格标题位置
- empty-cells 是否显示空格单元
- table-layout 默认布局算法auto fixed

用户界面：outline-color/style/width/zoom/cursor

模型框：margin border padding element(width/height)
- margin 外边距默认透明的，因此不会遮挡其后的任何元素
- padding-top/right/bottom/left (背景色包括padding)
- border-(top/right/bottom/left)-style/width/color
- border-style solide/dotted/dashed/double
- color transparent透明
- margin-top/right/bottom/left
- 外边距合并 垂直外边距相遇(正正取大 正负相加 负负取绝对值大)

定位：position/z-index/overflow/clip/float/clear
position
- static 正常生成，默认的元素
- relative 元素框偏移某个距离，保持未定位之前的状态，原本所占的空间任然保留(限制absolute)
- absolute 元素框从文档完全删除，并相对于其包含块定位，元素原先正常文档流中所占空间关闭，包含快可能是文档中的另一个元素或是初始包含块(包含块就是含position: relative/absolute/fixed声明的父集元素，没有则是body元素) 宽高不占据任何尺寸
- fixed 类似于absolute,不过包含块是视窗本身
z-index 检索或设置层叠顺序，值越大则被层叠在最上面 必须定义position属性值为absolute、relative或fixed，此取值方可生效
overflow
- visible 默认,显示原样，不裁剪
- scroll
- auto 内容被裁剪，则显示滚动条以便查看裁剪内容
- inherit 从父元素继承overflow元素
- hidden 超出的裁剪不出现滚动条
- overflow-x/y css3属性，属性值和overflow一样
clip
- rect(t,r,b,l) 剪切成长方形
- auto 对象无裁剪
float
- none/left/right 浮动元素
clear
- none/both/left/right 允许两边有浮动元素/不允许两边有浮动元素/不允许左边浮动

选择器：
- [attribute (~/|/^/$/*)]=value ~匹配 |开头必须为value
- 后代选择器
- 子选择器>
- 相邻选择器+
- 伪元素 :before/after元素之前/后添加 :focus :first-child

高级：
- 对齐 margin position float
- 尺寸 (line/min/max)-height/weight
- 分类 clear cursor display(如何显示inline...baseline[是小写字母下的线]) visibility(元素可见否)
- 导航 display:inline float:left
- 透明度 IE8及之前filter：alpha(opacity=x)[x取值0-100] 其余opacity=x[x取值1-1.0]
- 媒介(CSS2) 定义以何种媒介提交文档 @media screen/print...

SCC3:
被拆分成”模块”，一些重要模块：选择器，盒模型，背景和边框，文字特效，2D/3D转换，动画，多列分布，用户界面

边框：border-redius/shadow/image

字体： font-stretch

文本： word-wrap normal/break-word

背景：background-image/size/origin/clip
- background-image 允许添加多个图片
- background-size 可定义图片大小 cover contain 填充、等比例缩放到某一边
- background-origin 背景图片的位置区域 border/padding/context-box
- background-clip 背景的绘制区域

颜色： opacity透明度 函数rgba()
- opacity是css3特性，默认1不透明

渐变：linear/radial-gradient IE10支持
语法

background: linear-gradient(direction, color-stop1, color-stop2, ...);


`linear-gradient` 默认从上到下 重复的线性渐变repeating-linear-gradient() 函数
    从左到右
    ```
        background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, red , blue); /* 标准的语法 */
    ```

    使用角度(0deg就是左到右 90deg上到下)
    ```
        background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */
        background: linear-gradient(180deg, red, blue); /* 标准的语法 */
    ```

\- `radial-gradient` 径向渐变
    语法
    ```
    background: radial-gradient(center, shape size, start-color, ..., last-color);
    ```

\- `size` 定义了 closest-side farthest-side closest-corner farthest-corner四个值

文本效果：text-shadow/overflow... box-shadow word-wrap/break
- text-shadow 指定水平阴影，垂直阴影，模糊距离，阴影颜色
- word-wrap 允许长文本换行

字体：@font-face规则
可以使用自己喜欢的字体
- font-family 规定字体的名称
- src 定义字体的URL
- font-stretch 定义如何拉伸字体，可选
- font-style 定义字体样式，可选
- font-weight 定义字体粗细，可选

2D转换：transform:translate()/ratate()/scale()/skew()/matrix()
- translate() 根据左(X轴)和顶部(Y轴)给定的参数从当前位置移动
- ratate() 0deg 正数顺时针，负数逆时针
- scale() 取决于宽度(X轴)和(Y轴)高度
- skew() transform:skew(<angle> [,<angle>]); 或skewX/Y水平/垂直方向倾斜
- matrix() 有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

3D转换：(translate/scale/rotate)3d() 相对应的添加一个....Z()
- perspective(n) 透视视图

过渡：transition/transition-(delay/duration/property/timing-function)
- timing-function linear/ease-in/easy-out/ease-in-out
- property 默认all none或property

动画：@keyframes
- animation 动画属性简写 除了animation-play-state
- animation-name 规定@keyframes名称
- animation-duration 完成动画的时间，默认0
- animation-timing-function 规定动画的速度曲线，默认ease 还有linear
- animation-delay 规定动画的开始
- animation-play-state 规定动画是否运行或暂停 默认running
- animation-iteration-count 动画播放次数 默认1 无限次infinite
- animation-direction 规定是否在下一个循环逆时针播放，默认normal alternate逆时针

多列：
- column-count 元素应该被分割的列数
- column-fill 如何填充
- column-gap 列与列之间的间隙
- column-rule 简写column-rule-*
- column-rule-color 两列间边框颜色
- column-rule-style 两列间边框样式
- column-rule-width 两列间边框厚度
- column-span 指定元素要跨越多说列 all
- column-width 指定列宽度
- columns 设置 column-width 和 column-count 的简写

用户界面：resize box-sizing outline-offset... IE不兼容resize outline-offset

框大小：在元素上设置box-sizing: border-box;则内边距和边框也包含在width和height中

弹性盒子：由弹性容器和弹性元素组成 通过设置display：flex/inline-flex;将其定义为弹性容器，可以包含多个子容器
- flex-direction 顺序指定了弹性子元素在父容器中的位置

row：横向从左到右排列（左对齐），默认的排列方式
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面
column：纵向排列
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面

- justify-context 把弹性盒子沿着弹性容器的主轴线对齐

justify-content: flex-start | flex-end | center | space-between | space-around

- align-items设置或检索弹性盒子元素侧轴方向上的对齐方式

align-items: flex-start | flex-end | center | baseline | stretch

- flex-wrap 子元素换行方式

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;


内联和内联块状元素中有影藏的文本节点导致图片底部有间隙
- 消除方法 1 块状化 display：block;
- 消除方法 2 底线对齐 vertical-align: bottom;
- 消除方法 3 行高足够小 line-height: 0;

CSS3 overflow-x/y 超出影藏对应的轴，另一个轴添加滚动条
非display: inline 单元格需要设置table-layout: foxed;
- xy值相同 等同于overflow
- xy值不同 一个为visible,另一个为其他的，visible重置为auto