day01_起源和结构
结构：Xhtml xml
表现：CSS
行为：DOM ECMAScript
以上都属于WEB标准
HTML 指的是超文本标记语言（Hyper Text Markup Language）
XHTML 指可扩展超文本标记语言（标识语言）
（EXtensible Hyper Text Markup
Language）
HTML5指的是HTML的第五次重大修改（第5个版本）是W3C与WHATWG合作的结果
WHATWG网页超文本应用技术工作小组是一个以推动网络HTML5标准为目的而成立的组织
在2004年由Opera、Mozilla基金会和苹果这些浏览器厂商组成。
块元素：独占一行，可设宽高
行元素：不独占一行，大小由内容决定，不可设宽高
单标签：换行
水平线
注释：Ctrl + / Ctrl + Shift + /
空格： 小于号：<大于号：>版权：©商标®引号"元¥
加粗：
倾斜：
1）常规标记
<标记 属性=“属性值” 属性=“属性值”>
2）空标记
<标记 属性=“属性值” />
说明
1）写在<>中的第一个单词叫做标记，标签，元素
2）标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在“”号内
3）一个标记可以没有属性也可以有多个属性，属性和属性之间不分先后顺序
4）空标记没有结束标签，用“/”代替
ul 无序列表
属性type：
disc：默认值实心圆square：实心正方块circle：空心圆none：无
ol 有序列表
属性type：
1：默认值A：大写排序a：小写排序I：大罗马排序i：小罗马排序
start：值为几就是从第几项开始的
dl 自定义列表 dt 列表名 dd 列表项
target：页面打开方式，默认值：_self 属性值：_blank 新窗口打开
img src：文件路径
alt：文件提示
title：鼠标滑过时提示的信息
图片路径的四种方式
1）当当前文件XX.html与目标文件X.jpg在同一目录下，直接书写目标文件全称及其后缀名。
2）当当前文件XX.html与目标文件X.jpg所处的文件夹XX在用同一目录下，写目标文件所处的文件夹名字/书写目标文件全称及其后缀名。
3）当当前文件所处的文件夹与目标文件在同一目录时，写../书写目标文件全称及其后缀名。
4）当当前文件所处的文件夹与目标文件所处的文件夹在同一目录下时写../文件夹名/图片名及其后缀
day02_表格表单
表格的组成
caption（表格标题）
thead（表头）→→→tr（行）→→→th（表头单元格）
tbody（表主体）→→→tr（行）→→→td（单元格）
tfoot（表脚注）→→→tr（行）→→→td（单元格）
数据表格的相关属性
1）width="表格的宽度"
2）height="表格的高度"
3）border="表格的边框"
4）bgcolor="表格的背景色"
bordercolor="表格边框的颜色"
5）cellspacing="单元格与单元格之间的间距"
6）cellpadding="单元格与内容之间的空隙"
7）水平对齐方式：align="left(默认值)/center/right"
垂直对齐方式：valign="bottom/middle(默认值)/top"（放td、tr不可以放table）
8）合并单元格属性：colspan="所要合并的单元格的列数" 合并列、rospan="所要合并单元格的行数"合并行。
表单的应用
post与get的区别
1）get是从服务器上获取数据的，post是向服务器传送数据
2）get是把参数数据队列加到提交表单的ACTION属性所指的url中，在url中可以看到。post是通过HTTP post机制，用户看不到这个过程
3）get传送的数据量较小，不能大于2kb。post传送的数据量较大，一般被默认为不受限制
4）get安全性非常低，post安全性较高。但是执行率却比post方法好
表单框
name="表单名称"method="post/get" action=""> name表单名称 action把数据提交到哪里的路径 method提交到action所指向的url中的方式 1）文本框 type="text" value="默认值"/> type="text" placeholder="里面默认显示的字"/>（失焦） 2）密码框 3）提交按钮 type="submit" value="按钮内容"/> 4）重置按钮 type="reset" value="按钮内容"/> 5）普通按钮 type="button" value="按钮内容"name=""/> 6）普通按钮2 7）单选框/单选按钮 单选按钮里的name属性必须写 同一组单选按钮的name属性值必须一样 checked="checked"(默认选中) disabled="disabled"禁用 8）复选框 复选框里的name属性必须写 同一组复选框的name属性值必须一样 checked="checked"(默认选中) disabled="disabled"禁用 9）下拉菜单 菜单内容 10）多行文本框（文本域） name="textareal" cols="字符宽度" rows="行数"> ★改变input里面的placeholder的颜色： Input::-webkit-input-placeholder{ Color:颜色; } Outline:0; Outline:2px solid #f99; day03_CSS层叠样式表 CSS（cascading style sheets）层叠样式表 内部样式 /*css语句*/ 注：使用style标记创建样式时，最好将该标记写在 内联样式表(行间样式，行内样式，嵌入式样式) 语法： <标签style="属性：属性值；属性：属性值；"> 外部样式 方法一： rel="stylesheet" type="text/css" href="目标文件的路径及文件名全称"/> 方法二： @import url(目标文件的路径及文件名全称); 注：@和import之间没有空格 url和小括号之间也没用空格，必须结尾以分号结束 link和@import导入外部样式的区别 差别1：本质的区别：link属于XHMTL标签。而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外，还可以做很多其他的事情，比如定义RSS，定义rel链接属性等，@import就只能加载CSS。 差别2：加载顺序的区别：当一个页面被加载的时候（就是被浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS页面时会开始没有样式 差别3：兼容性的差别：@import是CSS2.1提出的，所以老的浏览器不支持，@import只在IE5以上的才能识别，而link标签无此问题。 差别4：使用dom控制样式时的差别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的 内联的优先级最大，内部和外部是看书写顺序的，后来居上，就近原则。 !important 优先级是最大的，等于外挂！ 1）元素选择符/类型选择符（element选择器） 语法：元素名称{属性：属性值;} 说明 a）元素选择符就是以文档语言对象类型作为选择符，即使用结构中元素名称作为选择符 例如body、div、p、img、em、strong、span......等 b）所有的页面元素都可以作为选择符 用法 a）如果想改变某个元素得默认样式时，可以使用类型选择符; b）当统一文档某个元素的显示效果时，可以使用类型选择符; 2）id选择器 语法：#id名{属性：属性值;} 说明： a）当我们使用id选择符时，应该为每个元素定义一个id属性，id具有唯一性 b）id选择符的语法格式是"#"加上自定义的id名 c）起名时要取英文名，不能用关键字：（所有的标记和属性都是关键字） d）一个id名称只能对应文档中的一个具体的元素对象，因为id只能定义页面中某一个的唯一元素对象 e）最大的用处：创建网页的外围结构 3）class选择器 语法：.class名{属性：属性值;} 说明： a）当我们使用类选择符时，应先为每个元素定义一个类名称 b）类选择符的语法格式是： 用法：class选择符更适合定义一类样式 4）*通配符 语法：*{属性：属性值;} 说明：通配选择符的写法是"*"，其含义就是所有元素 用法：常用来重置样式一般情况下不使用，原因负载过大，如果必须使用前面一定要加一个范围 5）群组选择器 语法：选择符1，选择符2，选择符3{属性：属性值;} 说明：当有多个选择符应用相同的样式时，可以将选择符用","分隔的方式，合为一组 6）包含选择器 语法：选择符1 选择符2{属性：属性值;} 说明：选择符1和选择符2用空格隔开，含义就是选择符1中包含的所有选择符2 div p 后代选择器匹配所有div下的p元素，div和p之间用空格分隔 div>p 子元素选择器，匹配所有div下的子元素p div+p 毗邻元素选择器，匹配所紧随div元素之后的同级元素p div[title] 匹配所有具有title属性的div元素，不考虑它的值 div[title=val] 匹配所有title属性等于"val"的div元素 7）伪类选择器 语法： a：link{属性：属性值;}超链接的初始状态 a：visited{属性：属性值;}超链接被访问后的状态 a：hover{属性：属性值;}鼠标划过超链接的状态 a：active{属性：属性值;}鼠标按下时超链接的状态 说明： a）当这四个超链接伪类选择符联合使用时，应注意他们的顺序正常顺序为：a：link，a：visited，a：hover，a：active 错误的顺序有时会使超链接的样式失效 b）为了简化代码，可以使用伪类选择符中国相同的声明提出来放在a选择符中 text-decoration：none 去除下划线 2）:nth-child(value){ //选择一个或多个特定的子元素，第一个为1; } day04_CSS核心属性 选择符的权重 css中用四位数字表示权重，权重的表达方式如：0,0,0,0 类型选择符的权重为0001 class选择符的权重为0010 id选择符的权重为0100 !important的权重为1000 伪类选择符的权重为0010 伪元素选择符的权重为0010 包含选择符的权重：为包含选择符的权重之和 内联样式的权重为1000 继承样式的权重为0000 CSS的三大特性 1）继承性 作用：子元素可以继承父元素的样式 text-，font-，line-这些元素开头的都可以继承，以及color属性 2）特殊性 a）a标签的颜色不能继承，必须对a标签本身进行设置 b）h标签的字体大小不能修改，必须对h标签本身进行修改 3）层叠性 是浏览器处理冲突的一个能力，如果一个属性通过两个选择器设置到用一个元素上，那么这个时候一个属性就会将另一个属性层叠掉 4）优先级 !important > 行内样式 > id选择器>class类选择器 > 标签选择器 > 通配符 > 继承 5）权重 作用：多个选择器组合以后的优先级 算法：（0,0,0,0）==》第一个0是important的个数，第二个0是id选择器的个数，第三个0对应的类选择器的个数，第四个0对应的是标签选择器的个数，就是当前选择器的权重。 权重是优先级的算法，层叠是优先级的表现 选择器的工作原理：选择器是从右往左查找 CSS核心属性 文本大小：{font-size：12px/14px/16px} 说明： 1）属性值为数值型时，必须给属性值加单位，属性值为0时除外 2）单位还可以是pt，9pt=12px; 3）为了减小系统间的字体显示差异，IE Netscape Mozilla的浏览器制作商与1999年召开会议，共同确定16px/ppi为标准字体大小默认值，即1em 默认情况下，1em=16px，0.71em=12px 4）使用绝对大小关键字 xx-small=9px x-small =11px small =13px medium =16px large =19px x-large =23px xx-large=27px 文本颜色：{color：颜色值;} 说明： 用十六进制表示颜色值： 01 2 3 4 5 6 7 8 9 A B C D E F 颜色模式：光色模式 R G B ff00 00 颜色值的缩写： 当表示三原色的三组数字同时相同时，可以缩写为三位 当用十六进制表示颜色值时，需要在颜色值前加"#" 文本字体：{font-family："字体1","字体2";} 说明： 当字体是中文字体时需加引号 当英文字体中有空格时需加引号如"TimesNew Roman" windows中文版操作系统下，中文默认字体为宋体或者新宋体，英文字体默认为Arial line-height 行高(与高度相等) 文字属性简写：font：12px/1.5em "宋体"; font属性的简写：字号，行高，字体 说明：font的属性值应按以下次序书写(各个属性之间用空格隔开) 顺序：font-style font-weight font-size/line-height font-family 1）简写时，font-size和line-height只能通过斜杠/组成一个值，不能分开写 2）顺序不能改变 ,这种简写法只有在同时指定font-size和font-family属性时才一起作用,如果你没有设定font-weight , font-style 他们会使用缺省值 加粗：{font-weight：bolder/bold/normal/100-900;} 说明： 在css规范中把字体的粗细分为9个等级，分别从100-900，其中100对应最轻的字体变形，而900对应最重的字体变形。100-500常规字体600-900加粗字体 倾斜：{font-style：normal常规字体/italic/oblique倾斜;} 说明： italic和oblique都表示倾斜，不过oblique的幅度要大一点。但一般浏览器对它们的区分不是很明显 检索或设置对象中的文本的大小写 {text-transform：none/capitalize首字母大小写/uppercase全大写/lowercase全小写;} 水平对齐方式{text-align：left/right/center/justify(了解);} 垂直对齐方式{vertical-align：top/bottom/middle;} 行高{line-height：normal/数值;} 说明： 1）当单行文本的行高等于容器高时，可实现单行文本在容器中垂直居中对齐 2）当单行文本的行高小于/大于容器高时，可实现单行文本在容器中垂直对齐以上任意位置的定位 文本修饰 text-decoration：none/underline/overline/line-through/blink underline 下划线 overline上划线line-through 删除线 blink高版本浏览器中不支持 段落操作 1）首行缩进{text-indent：value;}value可以取负值只对第一行起作用 2）字间距{letter-spacing：value;}控制英文字母或汉字的字距 3）词间距{word - spacing：value;}控制英文单词词距 列表的样式 定义列表符号样式 1）list-style-type：disc/circle/square/none 2）使用图片作为列表符号：list-style-image：url（路径） 3）定义列表符号位置：list-style-position：outside/inside list-style：none（简写） 边框border：1px solid red; 边框border：粗细 线型solid/dashed/dotted/double/none 颜色 实线solid/虚线dashed/点状线dotted/双实线double/无none border-width border-style border-color border-top/bottom/left/right border-radius：圆角 写数值（20px）或百分比 关于背景的属性 1）背景颜色 语法：选择符{background-color：颜色值;} 2）背景图片的设置 语法：background-image：url(背景图片的路径及全称); 插入图片：属于网页内容，也就是结构。 背景图：属于网页的表现背景图上可以显示文字、插入图片、表格 3）背景图片的显示原则 a）容器尺寸等于图片尺寸，背景图片正好显示在容器中 b）容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素 c）容器尺寸小于图片尺寸，只显示容器/元素/范围以内的背景图 背景图片平铺属性 语法： 选择符{background-repeat：no-repeat/repeat/repeat-x/repeat-y} no-repeat：不平铺 repeat：平铺 repeat-x：横向平铺 repeat-y ：纵向平铺 4）背景图片的位置 语法： {background-position：left/center/right/数值 top/center/bottom/数值;} background-position：值1 值2; 水平方向上的对齐方式（left/center/right）或值 垂直方向上的对齐方式（top/center/bottom）或值 两个值 ：第一个值表示水平位置的值，第二个值：表示垂直的位置 注：当元素小图片大，写图片的某个位置时：说明：向右方向，向下方向是负值 5）背景图的固定 语法：选择符{background-attachment：scroll(滚动)/fixed(固定);} 6）各属性的缩写 语法：选择符{background：属性值1 属性值2 属性值3;} day05_盒子模型 盒模型的概念和组成 盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都以拥有可像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区。这就是盒模型。 [if !vml] [endif] 1） padding的使用方法 填充：padding,在设定页面中一个元素内容到元素的边缘(边框) 之间的距离 也称补白 用法： a）用来调整内容在容器中的位置关系 b）用来调整子元素在父元素中的位置关系 注：padding属性需要添加在父元素上 c）padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值 属性值的4种方式： 四个值：上 右 下 左 {padding：10px20px 30px 40px;} 三个值：上 左右 下 {padding：10px20px 30px;} 二个值：上下 左右 {padding：10px20px ;} 一个值：四个方向padding：2px; /*定义元素四周填充为2px*/ 说明：可单独设置一方向填充 如： 上方向padding-top：10px; 右方向pahdding-right：10px; 下方向padding-bottom：10px; 左方向padding-left：10px; 注意：块元素上下左右都可设padding； 但是行元素只能设左右（input/img除外） 2）margin的使用方法 边界：margin，在元素外边的空白区域，被称为边距 margin-left：左边界，margin-right：右边界 margin-top：上边界，margin-bottom：下边界 属性值的4种方式： 四个值：上 右 下 左 {margin：2px 4px6px 8px;} 三个值：上 左右 下 {margin：2px 4px6px;} 二个值：上下 左右 {margin：2px4px;} 一个值：四个方向 margin：2px; margin：0 auto;/*在浏览器中横向居中 说明：可单独设置一方向边界，如：margin-top：10px; margin值的解析：左右边界累加，上下边界重合 注意：子元素里面的margin-top，会使父元素和他一起下移 第一种解决方式：给父元素加上边框 第二种解决方式：给父元素加上补白（padding-top：1px） 第三种解决方式：给父元素加overflow：hidden; 3）盒子的实际大小（公式 w3c中） 宽=左右border+左右padding+width（内容宽） 高=上下border+上下padding+height（内容高） day06_盒子模型续讲和浮动 怪异模型 由于各个浏览器的设计的不同，盒模型在不同的浏览器中的表现也不同，怪异模型是指在E6及更早的IE版本下盒模型的计算方法，所占空间总宽度等于内容+外边距 标准模型与怪异模型的异同点 相同点：都是由margin，border，padding，content组成 不同点：计算宽/高度的方法不同，标准模式下盒子的总共宽度是由margin，border，padding，content想加得来，怪异模型下 总宽度是由content+外边距得来 box-sizing（现代浏览器支持，IE8以上支持） 1）content-box：此值为其默认值，其让元素维持W3C的标准Box Model，也就是说元素的宽度/高度（width/height）等于元素边框高度（border）加上元素内边距（padding）加上元素内容宽度/高度（content width/height） 即： Element width/height = border+padding+content width/height 2）border-box：此值让元素维持IE传统的Box Model（IE6以下版本），也就是说元素的宽度/高度等于元素内容的宽度/高度。（从上面Box Model介绍可知，我们这里的content width/height包含了元素的border，padding，内容的width/height【此处内容宽度/高度=width/height-border-padding】） 浮动属性 [if !vml] [endif] 语法：float：none/left/right 浮动的框可以向左向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止 浮动框是脱离了普通的文档流 ◮浮动的问题的解决方案 浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷） 1）给父元素添加声明overflow：hidden； 2）在浮动元素下方添加空div，并给该元素添加声明： clear：both；height：0；overflow：hidden； 3）万能清除浮动法 选择符： ：after{ content："." clear：both; dispaly：block; height：0; overflow：hidden; visibility：hidden;} day07_元素类型和定位 XHTML元素分类 根据CSS显示分类，XHTML元素被分为三种类型： 块状元素，内联元素，可变元素 块状元素（block element） 1）块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，常用的块状元素包括： div，dl，dt，dd，ol，fieldset，（h1-h6），p，form，hr，colgroup，col，table，tr... 2）默认情况下，块状元素都会占据一行，通俗的说，两个相邻块状元素不会出现并列显示的现象；默认情况下，块状元素会按顺序自上而下排列 3）块状元素都可以定义自己的宽度和高度 4）块状元素一般都作为其他元素的容器，它可以容纳其他内联元素和其他块状元素，我们可以把这种容器比喻为一个盒子 内联元素（inline element）（行内元素） 1）常见的内联元素如：a，span，i，em，strong，b，del等 2）内联元素的表现形式是始终以行内逐个进行显示 3）内联元素没有自己的形状，不能定义它的宽和高，它显示的宽度、高度只能根据所包含内容的高度和宽度来确定，它的最小内容单元也会呈现矩形形状 4）内联元素也会遵循盒模型基本规则，如可以定义padding，border，margin，background等属性，但个别属性不能正确显示 可变元素 需要根据上下文关系确定该元素是快元素或者内联元素 元素类型的转换 盒子模型可通过display属性来改变默认的显示类型 display属性与属性值 (18个属性值) 属性值：block 、inline、inline-block、none、list-item、table-header-group、table-footer-group.... 作用：该属性设置或检索对象元素应该生成的盒模型的类型 说明：各属性值的作用 1）Block块状显示：类似在元素后面添加换行符，也就是说其他元素不能在其后面并列显示 2）inline内联显示：在元素后面删除换行符，多个元素可以在一行内并列显示 3）当元素设置了float属性后，就相当于给该元素加了display：block;属性； 4）Inline-block行内块元素显示：元素的内容以块状显示，行内的其他元素显示在同一行。（只有这一个元素类型支持vertical-align属性）img,input。 5）none此元素不会被显示。 6）list-item：将元素转换成列表。li的默认类型 7） A）大部分块元素display属性值默认为block，其中li默认值为list-item B）大部分内联元素的display属性值默认为inline,其中img,input，默认为inline-block 定位 语法：position：static/absolute/relative/fixed 取值： 1）static：默认值，无特殊定位，对象遵循HTML原则; 2）absolute：绝对定位，将对象从文档流中脱离出来，使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位;如果不存在这样的父对象，则依据html（根元素），而其层叠通过z-index属性定义； 3）relative：相对定位，对象不可层叠，将依据right，top，left，bottom（相对定位）等属性在正常文档流中偏移位置（相对自己原来的位置偏移） [if !vml][endif] 4）fixed：固定定位，对象定位遵从绝对定位方式（absolute）;但是要遵守一些规范（IE6浏览器不支持此定位）根据浏览器的窗口来定义自己的位置 滚动字幕的应用 behavior(行为)="scroll(滚动)/alternate(晃动)" direction(方向)="up(从下向上)/down/left/right(从左向右)" scrollamount(滚动速度)="value" height="value(上下滚动范围)" width="value"(左右滚动范围)> day08_定位续讲 透明：opacity："value"数值0~1 display：none;不占位 等于消失 visibility：hidden;占位 等于隐身 relative：相对定位元素参照自身起始位置移动，并占据原有空间 absolute：绝对定位元素参照最近的已定位父元素移动，不占据空间 fixed：固定定位元素参照浏览器移动，不占据空间 绝对定位和相对定位的区别 1）参照物不同绝对定位的参照物是包含块，相对定位的参照物是元素本身位置 2）绝对定位将对象从文档流中脱离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间 定位元素层叠属性 z-index：auto/number检索或设置对象的层叠顺序 auto：默认值 遵从其父对象 number：无单位的整数值 可为负数 说明： 较大number值的对象会覆盖在较小number值的对象至少 如两个绝对定位对象的此属性具有同样的number值，那么将依据它们在HTML文档中声明的顺序层叠 此属性仅作用于position属性值为relative或absolute，fixed的对象 命名锚点链接的应用 定义：是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍 1）命名锚点的作用：在同一页面内的不同位置进行跳转 2）给元素定义命名锚记名 语法：<标记id="命名锚记名称"> 3）命名锚记链接 语法： href="命名锚记名称"> 滚动条 overflow内容溢出时的设置 overflow 水平及垂直方向内容溢出时的设置 overflow-x 水平方向内容溢出时的设置 overflow-y 垂直方向内容溢出时的设置 以上三个属性设置的属性值： visible、scroll、hidden、auto、visible默认值，使用该值时，无论设置的"width"和"height"的值是多少，其中的内容无论是否超出范围都将被强制显示 hidden效果与visible相反。任何超出width和height的内容都会不可见 scroll 无论内容是否超越范围，都将显示滚动条 auto 当内容超出范围时，显示滚动条，否则不显示 应用： 1）没有水平滚动条 style="overflow-x：hidden">test 2）没有垂直滚动条 style="overflow-y：hidden">test 3）没有滚动条 style="overflow-x：hidden;overflow-y：hidden" 或style="overflow：hidden">test 4）自动显示滚动条 test 自己定义滚动条的颜色 Body{ scrollbar-arrow-color：#f4ae21; /*图6,三角箭头的颜色*/ scrollbar-face-color： #333; /*图5,立体滚动条的颜色*/ scrollbar-3dlight-color： #666; /*图1,立体滚动条亮边的颜色*/ scrollbar-highlight-color： #666; /*图2,滚动条空白部分的颜色*/ scrollbar-shadow-color： #999; /*图3,立体滚动条阴影的颜色*/ scrollbar-darkshadow-color： #666; /*图4,立体滚动条强阴影的颜色*/ scrollbar-track-color： #666; /*图7,立体滚动条背景颜色*/ scrollbar-base-color：#f8f8f8; /*滚动条的基本颜色*/ } 关于溢出 1）溢出属性（容器的） overflow：visible/hidden/scroll/auto/inherit; visible：默认值，内容不会被修建，会成现在元素框之外; hidden：内容会被修剪，并且其余内容是不可见的; scroll：内容会被修剪，浏览器会显示滚动条，以便查看其余内容; auto：如果内容被修剪，浏览器会显示滚动条，以便查看其他内容; inherit：规定应该从父元素继承overflow属性的值 2）空余空间 white-space：normal/pre/nowrap/pre-wrap/pre-line/inherit 该属性用来设置如何处理元素内的空白; normal：默认值，空白会被浏览器忽略; pre：空白会被浏览器保留，其行为方式类似HTML中的pre标签; nowarp：文本不会换行，文本会在同一行上继续，知道遇到 pre-wrap：保留空白符序列，但是正常的进行换行; pre-line：合并空白符序列，但是保留换行符; inherit：规定应该从父元素继承white-space属性的值;（IE浏览器不支持） 3）文本溢出：text-overflow：clip/ellipsis 取值 clip：不显示省略号(...)，而是简单的裁切 ellipsis：当对象内文本溢出时，显示省略标记 说明 text-overflow属性仅是...，当文本溢出时是否显示省略标记，并不具备其它的样式属性定义，要实现溢出时产生省略号的效果还需定义： 1）容器宽度：width：value； 2）强制文本在一行内显示：white-space：nowrap; 3）溢出内容为隐藏：overflow：hidden； 4）溢出文本显示省略号：text-overflow：ellipsis; day09_雪碧图 CSS Sprites的原理（图片整合技术、雪碧图/图片精灵） 将导航背景图片，按钮背景图片等有规则的合并成一张背景图，即将多张图合为一张整图，然后用background-position来实现背景图片的定位技术 图片整合的优势： 1）通过图片整合来减少对服务器的请求次数，提高页面的加载速度 2）通过整合图片来减小图片的体积 CSS Sprites的实现方法 滑动门技术 1）什么是滑动门 滑动门是一个形象的称呼，它利用CSS背景图像可层叠性，并允许彼此之上进行滑动来创造一些特殊动态效果 2）滑动门特征 通过滑动门技术，可以使CSS设计出来的导航菜单兼具传统布局的图像效果，与CSS布局的高效扩展性 动画 transition：value 动画执行时间 transform：scale(2) rotate(360deg); scale放大倍数 rotate旋转度数 transparent 透明：一般用来定义倒三角 图片与文字对齐方式：display：inline-block vertical-align：middle day10_兼容问题、表单高级、H5新增标签和表单控件 五大浏览器内核代表作品 Trident：IE、Maxthon（遨游）、腾讯、360、Theworld世界之窗 Gecko：MozillaFirefox Webkit：Safari、Chrome，是一个开源项目 Presto：Opera世界上公认的渲染速度最快的引擎 Blink：由Google和Opera Software开发的浏览器排版引擎，2013年4月发布 CSS Bug、CSS Hack和Filter 1）CSS Bug：CSS样式在各浏览器中解析不一致的情况，或者说CSS样式在浏览器中不能正确显示的问题称为CSS Bug 2）CSS Hack：CSS中，Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法，因为它们都属于个人对CSS代码的非官方的修改，或非官方的补丁，有些人更喜欢使用 3）Filter：表示过滤器的意思，它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲，Filter是一种用来过滤不用patch（补丁）来描述这种行为 使用Hack带来的一些副作用： 降低CSS代码的可读性，增加了代码的负担 设计CSS Hack和Filter通常有两种方法 1）一种是利用浏览器自身的Bug，来隐藏或显示样式或声明 2）另一种是利用浏览器对CSS支持的不完善，如对某些规则或语法还没有形成支持，来隐藏或显示样式 IE6常见CSS解析Bug及Hack 1)图片间隙 A）div中的图片间隙(该bug出现在IE6及更低版本中) 描述：在div中插入图片时,图片会将div下方撑大三像素 Hack1：将
标签为止;