关于前端:我在乐字节学习前端的第一天和第二天学习笔记CSS3全面知识汇总

2次阅读

共计 10590 个字符，预计需要花费 27 分钟才能阅读完成。

构造框架：分为六个局部（属性、选择符、语法与规定、取值、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（）和 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%{……}
}

正文完