关于前端:我在乐字节学习前端的第一天和第二天学习笔记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);

第八节：背景（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：定义比默认宽度粗的轮廓。

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的立体挪动变换，3_3。后者是3D变换，4_4。 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 = 1_0 + 0_0 +30 = 30。 y坐标为 bx+dy+f = 0_0 + 1_0 + 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%{ ...... }
}