我在乐字节学习前端的第二天-学习笔记：CSS3全面知识汇总

笔记：CSS3全面知识汇总

结构框架：分为六个部分（属性、选择符、语法与规则、取值、css单位以及附录）

第一部分：属性（定位、布局、弹性盒模型、尺寸、外补白、内补白、边框、背景、颜色、字体、列表、表格、内容、用户界面、多栏、2D变换、过渡、动画、打印、媒体查询、only IE、only Firefox、only webkit）

第二部分：选择符（元素选择符、关系选择符、属性选择符、伪类选择符、伪对象选择符）

第三部分：语法与规则（！Important、/comment/、@import、@charset、@media、#font-face、@page、@keyframes）

第四部分：取值（颜色、文本、函数、图像、数字、其他）

第五部分：css单位（长度、角度、时间、频率、布局）

第六部分：附录（颜色关键字、媒体类型、css条件hack、css属性hack、css选择符hack、cssbugs解决方案、css技巧和经验、css其他技巧）

---

第一部分：属性

第一节：定位（position、z-index、top、right、bottom、left）

第二节：布局（display、float、clear、visibility、clip、overflow、overflow-x、overflow-y）

display：none 隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline指定对象为内联元素。
block指定对象为块元素。
list-item指定对象为列表项目。
inline-block指定对象为内联块元素。（CSS2）
table指定对象作为块元素级的表格。类同于html标签<table>（CSS2）
inline-table指定对象作为内联元素级的表格。类同于html标签<table>（CSS2）
table-caption指定对象作为表格标题。类同于html标签<caption>（CSS2）
table-cell指定对象作为表格单元格。类同于html标签<td>（CSS2）
table-row指定对象作为表格行。类同于html标签<tr>（CSS2）
table-row-group指定对象作为表格行组。类同于html标签<tbody>（CSS2）
table-column指定对象作为表格列。类同于html标签<col>（CSS2）
table-column-group指定对象作为表格列组显示。类同于html标签<colgroup>（CSS2）
table-header-group指定对象作为表格标题组。类同于html标签<thead>（CSS2）
table-footer-group指定对象作为表格脚注组。类同于html标签<tfoot>（CSS2）
compact分配对象为块对象或基于内容之上的内联对象（CSS3）
run-in分配对象为块对象或基于内容之上的内联对象（CSS3）
ruby将对象作为表格脚注组显示（CSS3）
ruby-base将对象作为表格脚注组显示（CSS3）
ruby-text将对象作为表格脚注组显示（CSS3）
ruby-base-group将对象作为表格脚注组显示（CSS3）
ruby-text-group将对象作为表格脚注组显示（CSS3）
box将对象作为弹性盒模型显示（CSS3）-webkit-box;-moz-box;-o-box;-ms-box;inline-box将对象作为内联块级弹性盒模型显示（CSS3）

clip:rect(0 auto 35px 10px) 上边不剪切，右边不剪切，下边从第35个像素开始剪切直至最底部，左边剪10

overflow:visible 不剪切内容
hidden将超出对象尺寸的内容进行裁剪，将不出现滚动条。
scroll将超出对象尺寸的内容进行裁剪，并以滚动条的方式显示超出的内容。
auto在需要时剪切内容并添加滚动条，此为body对象和textarea的默认值。

第三节：弹性盒模型（box-orient子元素排列方式、box-pack子元素对齐方式、box-align子元素对齐方式、box-flex子元素如何分配剩余盒子的剩余空间、box-flex-group子元素的所属组、box-ordinal-group子元素的显示顺序、box-direction子元素顺序是否相反、box-lines子元素是否可以换行显示）要使其生效需给父级元素display为box或者是inline-box；注意浏览器

box-orient 定义盒子内部元素的方向排列方式
horizontal(水平线上从左到右) vertical(垂直线上从上到下)
inline-axis(水平编排)、block-axis(垂直编排)、inherit(继承父级元素)

---

box-pack:start 设置弹性盒模型对象的子元素从开始位置对齐（大部分情况等同于左对齐）
center设置弹性盒模型对象的子元素居中对齐
end设置弹性盒模型对象的子元素从结束位置对齐（大部分情况等同于右对齐）
justify设置或弹性盒模型对象的子元素两端对齐

box-align:start 设置弹性盒模型对象的子元素从开始位置对齐
center设置弹性盒模型对象的子元素居中对齐
end设置弹性盒模型对象的子元素从结束位置对齐
baseline设置弹性盒模型对象的子元素基线对齐
stretch设置弹性盒模型对象的子元素自适应父元素尺寸

---

box-flex:0让子元素按照父元素的宽度划分 将一个容器分成6份，子对象a分1份，b分2份，c分3份（动态的分配剩余空间）

---

box-flex-group:1 动态的给数字较大的组分配其内容所需的实际空间（如无内容、paddin、border则不占空间），剩余空间则均分给数字最小的那个组（可能有1个或多个元素）

box-ordinal-group:1 调整三个栏目的先后顺序，数字越大越靠后， 数值较低的元素显示在数值较高元素的前面，相同数值的元素，它们的显示顺序取决于它们的代码顺序

box-direction:normal 确定内部元素的排列顺序
normal、reverse（翻转）、inherit 设置弹性盒模型对象的子元素按正常顺序排列
reverse反转弹性盒模型对象的子元素的排列顺序

box-lines:single 弹性盒模型对象的子元素只在一行内显示
multiple弹性盒模型对象的子元素超出父元素的空间时换行显示

第四节：尺寸（width、min-width、max-width、height、min-height、max-height）
第五节：外补白（margin、margin-top、margin-right、margin-bottom、margin-left）
第六节：内补白（padding、padding-top、padding-right、padding-bottom、padding-left）
第七节：边框（border、border-width、border-style、border-color、border-top、border-top-width、border-top-style、border-top-color、border-right、border-right-width、border-right-style、border-right-color、border-bottom、border-bottom-width、border-bottom-style、border-bottom-color、border-left、border-left-width、border-left-style、border-left-color、border-image、border-radius、border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius、box-shadow阴影、box-reflect倒影）

border-image：border-image-sourceborder-image-slice / border-image-width / border-image-outset / border-image-repeat
none：无背景图片。
<url>使用绝对或相对地址指定图像。
<number>用浮点数指定宽度。不允许负值。
<percentage>用百分比指定宽度。不允许负值。
<length>用长度值指定宽度。不允许负值。
stretch：指定用拉伸方式来填充边框背景图。
repeat：指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。
round：指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。

border-image:url(skin/border.png) 27/27px;

---

box-shadow
none：无阴影
<length>①第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<length>④如果提供了第4个长度值则用来设置对象的阴影外延值。不允许负值
<color>设置对象的阴影的颜色。
inset：设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影
box-shadow:5px 5px 5px 10px rgba(0,0,0,.6);

---

box-reflect：none | <direction> | <offset> | <mask-box-image>`
`<direction> = above | below | left | right`
`<offset> = <length> | <percentage>`
`<mask-box-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> |<repeating-radial-gradient>`
默认值：none无倒影
`box-reflect:below 0 linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3));

第八节：背景（background、background-color、background-image、background-repeat、background-attachment背景图片是滚动还是固定、background-position、background-origin、background-clip、background-size、multiple-background混合属性）

background-image:-moz-linear-gradient(top , #45B5DA, #0382AD);渐变背景`
`background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, from(#45B5DA), to(#0382AD));渐变背景`
`background-image:-o-linear-gradient(top , #45B5DA, #0382AD);渐变背景`
`background-image:url(skin/p_103x196_1.jpg),url(skin/p_103x196_2.jpg),url(skin/p_103x196_3.jpg);多重背景`
`background：linear-gradient（top，#000，#999）。从上到下、从黑色到灰色水平方向渐变`
`background：linear-gradient（left，#000，#999）。起始于左边、从黑色到灰色垂直方向渐变`
`background：linear-gradient（left，30deg，#000，#999）。起始于左边，倾斜30度、从黑色到灰色水平渐变`
`background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);

第九节：颜色（color、opacity）
第十节：字体（font、font-style、font-weight、font-size、font-family、font-stretch）
第十一节：文本（text-indent、text-overflow、text-align、text-transform、text-decration、text-decoration-line、text-decoration-color、text-decoration-style、text-shadow、text-fill-color、text-stroke、text-stroke-width、text-stroke-color、letter-spacing、word-spacing、vertical-align、word-wrap、white-space、direction、unicode-bidi、line-height、tab-size）

text-overflow
clip：当对象内文本溢出时不显示省略标记（…），而是将溢出的部分裁切掉。
ellipsis：当对象内文本溢出时显示省略标记（…）。

text-transform
none：无转换
capitalize：将每个单词的第一个字母转换成大写
uppercase：转换成大写
lowercase：转换成小写
full-width：
full-size-kana：

white-space
normal：默认处理方式。
pre：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行。可查阅pre对象
nowrap：强制在同一行内显示所有文本，直到文本结束或者遭遇br对象。
pre-wrap：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。
pre-line：保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。

direction
ltr：文本流从左到右。
rtl：文本流从右到左

unicode-bidi
normal：对象不打开附加的嵌入层，对于内联要素，隐式重排序跨对象边界进行工作。
embed：对象打开附加的嵌入层，direction属性的值指定嵌入层，在对象内部进行隐式重排序。

bidi-override
严格按照direction属性的值重排序。忽略隐式双向运算规则。
用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用
假如您想应用direction属性于内联元素的文本，您必须设定unicode-bidi属性为embed或bidi-override。

第十二节：列表（list-style、list-style-image、list-style-position、list-style-type）

list-style-type
disc：实心圆(CSS1)
circle：空心圆(CSS1)
square：实心方块(CSS1)
decimal：阿拉伯数字(CSS1)
lower-roman：小写罗马数字(CSS1)
upper-roman：大写罗马数字(CSS1)
lower-alpha：小写英文字母(CSS1)
upper-alpha：大写英文字母(CSS1)
none：不使用项目符号(CSS1)
armenian：传统的亚美尼亚数字(CSS2)
cjk-ideographic：浅白的表意数字(CSS2)
georgian：传统的乔治数字(CSS2)
lower-greek：基本的希腊小写字母(CSS2)
hebrew：传统的希伯莱数字(CSS2)
hiragana：日文平假名字符(CSS2)
hiragana-iroha：日文平假名序号(CSS2)
katakana：日文片假名字符(CSS2)
katakana-iroha：日文片假名序号(CSS2)
lower-latin：小写拉丁字母(CSS2)
upper-latin：大写拉丁字母(CSS2)

第十三节：表格（table-layout、border-collapse、border-spacing、caption-side、empty-cells）
第十四节：内容（content、counter-increment、counter-reset、quotes）

content
normal：默认值。表现与none值相同
none：不生成任何值。
<attr>插入标签属性值
.attr p:after{content:attr(title);}
<url>使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源）
.url p:before{content:url(…/…/skin/ico.png);}
<string>插入字符串
counter(name)：使用已命名的计数器
.counter1 li:before{content:counter(testname);}
counter(name,list-style-type)：使用已命名的计数器并遵从指定的list-style-type属性
.counter2 li:before{content:counter(testname2,lower-roman);}
counters(name,string)：使用所有已命名的计数器
.counter3 li{counter-increment:testname3;}
.counter3 li:before{content:counter(testname3,decimal)".";}
counters(name,string,list-style-type)：使用所有已命名的计数器并遵从指定的list-style-type属性
no-close-quote：并不插入quotes属性的后标记。但增加其嵌套级别
.counter3 li li:before{content:counter(testname3,decimal)".“counter(testname4,decimal)”.";}
no-open-quote：并不插入quotes属性的前标记。但减少其嵌套级别
close-quote：插入quotes属性的后标记
open-quote：插入quotes属性的前标记
counter-increment：none |[<identifier> <integer>]

第十五节：用户user interface（outline、outline-width、outline-style、outline-color、outline-offset、nav-index、nav-up、nav-right、nav-down、nav-left、cursor、zoom、box-sizing、resize、ime-mode）

outline定义元素周围轮廓线，类似于border
outline-width ：指定轮廓边框的宽度。
outline-style ：指定轮廓边框的样式。
outline-color ：指定轮廓边框的颜色。
outline:2px solid #f00;border:3px solid #333;

outline-width
<length>用长度值来定义轮廓的厚度。不允许负值
medium：定义默认宽度的轮廓。
thin：定义比默认宽度细的轮廓。
thick：定义比默认宽度粗的轮廓。

outline-style
none：无轮廓。与任何指定的outline-width值无关
dotted：点状轮廓。
dashed：虚线轮廓。
solid：实线轮廓
double：双线轮廓。两条单线与其间隔的和等于指定的outline-width值
groove：3D凹槽轮廓。
ridge：3D凸槽轮廓。
inset：3D凹边轮廓。
outset：3D凸边轮廓。
outline-offset：4px；

cursor [<url> [<x> <y>] [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll]

resize
none：不允许用户调整元素大小。
both：用户可以调节元素的宽度和高度。
horizontal：用户可以调节元素的宽度
vertical：用户可以调节元素的高度。
none：不允许用户调整元素大小。
both：用户可以调节元素的宽度和高度。
horizontal：用户可以调节元素的宽度
vertical：用户可以调节元素的高度。

第十六节：多栏multi-column（columns、column-width、column-count、column-gap、column-rule、column-rule-style、column-rule-color、column-span、column-fill、column-break-before、column-break-after、column-break-inside）

columns:200px 3;

columns:200px;

column-count:3;column-gap:40px;

第十七节：2D变换（transform、transform-origin）

translate移动。translate（X（距离left位置）,Y（距离top位置））。以坐标轴原点为中心进行位移，正值向右下角移动。
1旋转。transfrom：rotate（10deg）。平面旋转多少度
2斜拉。skew（X,Y）。倾斜多少度
3缩放。scale（X,Y）。放大或缩小多少倍
4移动。translate（X，Y）

transfrom：rotate（30deg）。
transfrom：scale（X，Y）。
transfrom：skew（X，Y）。
transfrom：translate（X，Y）。
1234

所有2D转换方法连在一起就是matrix()。矩形方式进行变换matrix();
改变起点位置：transfrom-origin：bottom left

eg：transfrom：scale（1.5）。
对应的matrix是 transfrom：matrix（1.5，0，0，1.5，0，0）；

matrix（scaleX，0，0，scaleY，0，0）
1234

深究矩阵 matrix

matrix（）和matrix3d（），前者是2D的平面移动变换，33。后者是3D变换，44。
transfrom：matrix（a , b , c , d , e , f）
所对应的矩阵如下图

第一个与第一个相乘，第二个与第二个相乘，第三个与第三相乘

ax+cy+e 为水平坐标。bx+dy+f 为垂直坐标。

transfrom：matrix（1 ， 0 ， 0 ，1 ， 30 ，30）//a=1,b=0,c=0,d=1,e=30,f=30。
假设中心坐标为（0 ，0）
x坐标为 ax+cy+e = 10 + 00 +30 = 30。
y坐标为 bx+dy+f = 00 + 10 + 30 = 30。
中心坐标变为了（30 ，30） 向右下角偏移，transfrom：translate（30px, 30px）
所以matrix只用关心最后两个参数就可以了
缩放：transfrom：matrix（1 ， 0 ， 0 ，1 ， 30 ，30）当中的1是缩放的参数，所以写为transfrom：matrix（scalex ,0, 0 ,scaley ,30 ,30）

第十八节：过渡

transition-property：过渡效果的css属性名称。none、all、indent
transition-duration：过渡的时长。
transition-timing-function：过渡速度曲线。平缓还是先慢后快。
transition-delay：过渡延迟。

第十九节：动画（animation-timing-function）

animation-name：`动画名称。
`animation-delay：`动画延迟。
`animation-duration：`动画运动周期时长。
`animation-timing-function：`动画速度曲线。linear（速度一致）、ease（低速开始，然后加快，结束慢）、ease-in（低速开始）、ease-out（低速结束）、ease-in-out（低速开始和结束）、cubic-bezier（自己的值，从0到1）
`animation-iteration-count：`动画播放次数。0、infinite。
`animation-direction：`动画是否在下一个周期逆向播放。normal、alternate。
`animation-play-state：`动画是否正在运行或暂停。
`animation-fill-mode

简写：animation：name duration timing-function delay

@keyframes  animationName{
    from{ ...... }
    to{ ...... }
}
@keyframes animationName{
    0%{ ...... }
    50%{ ...... }
    100%{ ...... }
}