标签：
1.html文档结构
①文档类型声明
严格型（标准模式）: <!DOCTYpE HTML> HTML5
XHTML 1.0:<!DOCTYpE html pUbLC"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Strict DTD
准标准模式:transitional过渡型 frameset框架集型
XHTML 1.0:<!DOCTYpE html pUbLC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Transitional DTD
XHTML 1.0: <!DOCTYpE html pUbLC"-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Frameset DTD
②html页面 <html></html>根标记
<html xmlns="http://www.w3.org/1999/xhtml">
2.页面中的元素 出现在<html></html>根标记中的内容
①<head></head>头元素
1.1<title></title>定义网页标题
1.2 meta,常用属性content、http-equiv
1.2.1编码格式定义:<meta charset="utf-8"> gb2312
<meta http-equiv="content-type" content="text/html;charset="utf-8"/>
1.2.2定义网页关键字:默认content="html,css"
<meta name="keywords" content="关键字1,关键字2"/>
1.2.3定义网页描述:<meta name="description" content="描述的内容"/>
1.2.4引用javascript<script></script>
1.2.5定义内部样式表<style type="text/css"></style>
1.2.6引入外部样式表<link>
②<body></body>网页主体,常用属性text="red"、bgcolor、background
标准属性:所有标记都会具备的属性
id:定义元素在页面中的唯一标识,布局/JS时用
title:鼠标移入到当前元素上时所提示的文本
class:定义元素的类选择器
style:定义元素的行内(内联)样式
结构标记:取代div布局,有的内容无法使用结构标记则用div
<header></header>页头/眉,最上方显示内容,允许出现多次,取代<div id="header">
<nav></nav>导航,取代<div id="nav">
<section></section>主信息,常用于为页面上的内容分块,比如定义章节、页眉页脚等其他部分,可以使用header为内容添加标题
<article></article>用于定义独立与文档的其他部分内容,比如一个帖子,一篇文章,博客条目,用户评论
<footer></footer>页脚
<aside></aside>边栏,取代<div id="left_aside">
特殊:面包屑导航bread-crumb 结构模式为:1>2>3...
URL:1.绝对URL
①访问网络资源:由协议名、主机名(Ip地址)、目录路径、文件名称组成
协议名:http/https
主机名:Ip地址,域名www.xxx.com
目录路径:资源文件所在的文件夹路径
②访问本机资源:从文件所在的最高级目录下一层一层寻找
缺点:程序一旦发送位置改变,要保证新计算机中也要有对应的绝对路径和文件。
2.相对URL:相对当前文件所在的位置,去查找资源文件的路径
①同目录下,通过文件名称引用文件
②父目录下,先返回,再查找资源文件
../:向上返回一级目录
③子目录下:先进入到文件夹中,再查找资源文件
3.根相对URL:永远都是从web站点的根目录处开始查找
以/作为开始的路径都是根相对路径
<hr>分割线,单标记
常用属性:size厚度、width宽度、align水平对齐方式、color、noshade无阴影
<!-- 注释 --> 注释,不能嵌套在标记中/注释中:<p <!--注释-->>错误
<h1></h1>1号题标题,自动换行,数字不同标题大小不同,加粗,上下垂直空白
<p></p>段落,与前后文本都换行分开,常用属性:align;
注意:p只能嵌套文本、图像一级行内元素;p中不能嵌套p也不能嵌套div;
段落换行和br换行空间不一样
<br/>换行,单标记,可以没有结束
<blockquote></blockquote>缩进式段落标记
<pre></pre>预格式化元素,保留文档中的回车和空格的效果
<div></div>块分区元素,作用:网页布局;
注意:div可以嵌套任何一个元素,非布局元素不要嵌套div
在没有元素实现区域分割的情况下使用div
<span></span>行分区元素,不自动换行,一行内多个元素之间自动产生空格
作用:行内元素的布局和分区
行内元素与块级元素
1.行内元素:多个元素在一行内显示;span,i,u,s,b,a,img,input,select,strong（强调的语气）
特点:修饰文本,行内不能嵌套div
2.块级元素:每个元素独占一行:div,p,hn,ul,ol,li,dl,dt,dd
特点:做布局
3.空元素:<br> <hr> <img> <input> <link> <meta>
鲜为人知的是:
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
文本标记:不建议使用,建议用css样式
<em> 把文本定义为强调的内容
<strong> 把文本定义为语气更强的强调的内容
<b></b>加粗
<i></i>倾斜
<s></s>删除线
<u></u>下划线
<sup></sup>上标
<sub></sub>下标
<font></font>属性size,color,face(字体)
特殊字符:
空格
< < -->less than
> > -->greater than
© ©-->copyright版权
¥ ￥
<img/>:src(引用图像的URL)、
width/height(宽度高度只设置一个属性的话图片将等比缩放)、
title(鼠标移入时所提示的文本)、
alt(短描述)
图像格式:宽度高度设置不同的百分比不会拉伸
1.jpeg(图形图像联合专家组):表现形式:*.jpg *.jpeg 特点:有损压缩
2.gif(图像接口格式): 表现形式:*.gif 特点:动画
3.png(可移植网络图形): 表现形式:*.png,特点:背景为透明的时候使用
<a></a>链接,href(必有),target,name,rel
rel="text"规定当前文档与被链接文档之间的关系
href链接URL:绝对URL:http://www.......html
相对URL:images/teachers.jpg
根相对URL
锚点:①定义锚点-在页面上做记号
<a name="锚点名称">内容</a> a标记name属性,HTML5不支持
<div id="锚点名称">内容</div> 任何一个标记的id属性
②链接锚点-跳转到记号上
<a href="#锚点名称">...</a> 本页面锚点跳转
<a href="页面url#锚点名称">...</a> 其他页面锚点跳转
配合a:target{}动态为目标元素设置样式
③<a href="#top">或<a href="#"> 返回页面顶部的空链接
target属性:目标,即打开新网页的方式
可取值为_blank:新标签中打开
_self:当前页面或当前框架中打开,默认值
_parent:在当前文档的父框架组中打开
_top:在当前页面打开,破坏当前框架
链接的表现形式:1.目标文档为下载资源
链接目标为 *.rar或*.zip时就是下载操作
2.电子邮件链接
前提:必须有邮件客户端(Foxmail,Outlook),绑定账号
<a href="mailto:目标邮件地址">联系我们</a>
3.链接到Javascript即执行JS操作:
<a herf="javascript:...">执行JS</a>
onmouseover:"window.status=‘‘;return true;"鼠标移动到目标上显示的信息文本;
onmouseout:鼠标移出
<table></table>表格,可嵌套,嵌套的表格必须放在td中,是一些"单元格"从左到右,从上到下的方式进行排列的
width/height:表格宽/高度,默认单位px
align:表格在父层容器中的对齐方式(left/center/right)
bgcolor:表格背景颜色
cellpadding:单元格内边距(边框与内容之间的距离)
cellspacing:单元格外边距(单元格之间的距离)
border:边框粗细
bordercolor:边框颜色
background:背景图片
summary:规定表格的摘要，不会对普通浏览器中产生任何视觉变化。
<caption></caption>表格标题,表格外,自动居中
<thead><thead>表头行分组
<tbody></tbody>表主体行分组,默认情况下,表格中所有的tr都会放在一个tbody中;如果不手动编写行分组,大多浏览器会自动增加tbody
<tfoot></tfoot>表尾行分组
行分组包含一个或多个tr
<th></th>行列/标题,自动居中,使用方式与td相同,一般为第一行和每行第一个
<tr></tr>行
align:水平对齐
valign:垂直对齐方式(top/middle/bottom)
bgcolor:行背景颜色
<td></td>单元格,所有数据内容必须存放在td中,
注:默认情况每行的td数量都是统一化的
colspan:单元格跨列的单元格数,值为正整数,横向向右
rowspan:单元格跨行数,纵向向下
nowrap:单元格中的内容不换行
width/height:设置好宽/高度后,每行该列的宽度都与设置值相等
align/valign:/(top/middle/bottom)
bgcolor
background
<colgroup></colgroup>用于对表格中的列进行组合，以便对齐进行格式化
<col>用于表格列的属性，在table/colgroup中使用
css布局:
①{display:table;} <==>table,不是块级(block),也不是行内(inline)
特点:前后自动换行/独占一行
宽度自适应(由内容决定)
{display:table-row;} <==>tr
{display:table-cell;} <==>td/th
②块级:display:block
特点:独占一行
宽度100%
高度自适应
③行内:display:inline
特点:一行内显示多个
宽度高度 自适应
垂直内边距、边框、外边距，显示设置高度宽度无效
可修改行高，水平内边距、边框或者外边距
对align无效
列表,可嵌套在列表项中,块
<ul></ul>无序列表,type属性+li列表项改变,unorder list
<ol></ol>有序列表,自动编号,自动换行,用type属性+li控件改变列表项,order list
type属性:ul:disc(实心圆,默认);circle(空心圆);square(实心矩形)
ol:1(默认);a(小写字母);A;i(小写罗马数字);I
star属性:ol:第一个列表项起始序号
<dl></dl>列表创建 定义列表，可以进行结构性分组
<dt></dt>定义术语
<dd></dd>解释
<details></details>折叠元件,open默认展开
<summary></summary>标题
<meter></meter>度量元素%,min(默认0可不写),max(默认1,通常改为100),
value(度量值,默认0),title
<time></time>时间元素,用来关联时间的不同表现方式,不能为页面带来显示效果变化,datetime关联的日期时间值,日期与时间之间用T分割2011-7-11T0:35
<mark></mark>高亮文本显示,显示额外的背景色
<botton>显示的文本</botton>如果在form内,作用是提交按钮
如果在form之外,作用是普通按钮
<iframe>对不起,该浏览器不支持iframe</iframe>行内/内联框架
将一个网页嵌入在另一个网页中,常用于底部footer/搜索head区等容易重复的区域
frameborder:0/1显示框架边框
width/height
marginwidth/marginheight:定义框架左侧和右侧/顶部和底部边距
scrolling:yes/no/auto是否显示滚动条
src:url
<form></form>表单,用于显示、收集、提交用户信息到服务器上,一般table在form里
①name:表单名,JS中使用
②id:标识
③action:表单被提交时发生的动作,通常包含服务方脚本的URL(比如jsp、php)
处理表单数据的服务器端处理程序的地址,通常由服务器端处理人员提供。
默认值为提交到本页。
④enctype:表单数据进行编码的方式(将什么样的数据提交到服务器)
取值:1.application/x-www-form-urlencoded允许将提交数据中的普通字符以及
特殊字符(?.=,&)一并提交给服务器
2.multipart.form-data允许将文件进行上传,文件上传时enctype的值必须为multipart/form-data
3.text/plain只允许将普通字符提交给服务器,特殊字符不可以
⑤method:⑴post:向服务器端传送数据
特点:以密文的方式进行数据的提交,所提交的数据不会显示在地址栏上
1.安全性较高,适合提交用户的数据,密码必须用post
2.无大小限制,适合大文件提交,大数据提交
使用场合:1.提交数据让服务器处理的时候
⑵get:从服务器上获得数据,默认值,
特点:以明文方式进行提交,数据会显示在地址栏上。
1.安全性较低(明文)
2.有长度限制2KB,
使用场合:向服务器要数据的时候使用get提交方式
form控件:表单控件不在表单中,数据无法提交;不同浏览器对文本输入框/文本区域尺寸不同,应显式设置宽度和高度
①<select> <!--缩写sel-->
<option>...</option>
</select>
select选项框,size(>1则为滚动列表),multiple(多选),name
option选项,value(选项的值),selected(预选中),
②<textarea></textarea>:多行文本输入框
name
cols:文本区域列数,一行允许显示多少个字符
rows:行数,默认能够显示几行数据
readonly:只读
③<input/>单标记
属性:type(默认/写错的时候都是文本框),value(控件数据,提交给服务器时使用),name(控件名称,服务器使用),disabled(禁用控件)
<input type="text"/>文本框,属性size,name,value,maxlength(限制字数),readonly(只读),单标记
<input type="password"/>密码框,属性同上
<input type="radio"/>单选,缩写rdo
name:名称,并用于分组,一组单选/复选框的名称必须相同
value:value发送到服务器中,必须设置
checked:默认选项
<input type="checkbox"/>复选,chk,属性同上,必须设置value
<input type="submit"/>提交按钮,传送数据给服务器端/其他程序处理,
属性name、value(按钮显示文本)
<input type="reset"/>重置按钮,name、value
<input type="button"/>普通按钮,btn,执行客户端脚本,name、value
<button>文本</button>普通按钮
<input type="hidden"/>隐藏域,name、value,将一些不想给用户看的数据,但是要提交给服务器的数据,放在隐藏域中
<input type="file"/>文件选择框,name,注意:method必须为post;enctype值必须为multipart/form-data
<label></label>:将文本与控件联系在一起后,单击文本效果同单击控件一样
隐式方式：<label>email<input name=’email’ type=’text’/></label>
显式方式：<input type="checkbox" name="chkHid" id="chkHid"/>
<label for="chkHid">不要公开我的信息</label>
for:表示与该元素相联系的控件的ID值;
控件分组:<fieldset> border设置0px可以关闭
<legend>...</legend> <!--分组标题-->
控件
</fieldset>
name命名规范:匈牙利命名法
控件缩写+作用
缩写:文本、密码框txt+ 作用名称:首字母大写Username = txtUsername/txtUserpwd
css:/* 层叠样式表,级联样式表,cascading style sheets */
作用:控制页面元素的样式,提高代码的可重用性可维护性,能够使表现(html)和样式(css)相分离
html与css关系:HTML负责搭建网页结构,CSS用于构建元素样式
w3c规范尽量使用css样式取代HTML属性
能够取代的属性body:text/font:color/align可被text-align取代等
无法取代的属性:colspan,rowsoan
firefox调试:1.Unknown property name样式属性名写错
2.Invalid property value未验证的属性值写错了
样式表顺序:行内样式>植入样式>链接样式>输入样式>缺省浏览器样式
①内联/行内样式表:定义在html中,<p style="color:red;">...</p>
常用属性color/background-color/font-size
②内部样式表:<html>和<body>之间插入,一般插入head中
<style>
选择器{声明;}
</style>
注释标签<!-- and -->:有些老的浏览器(如MAC机用的IE 2.0)即使在设定了type="text/css"属性时也不能忽略样式表继续执行下面的命令,还会显示样式表的代码。使用注释标签可以避免发生这种情况。
③外部样式表:<head>中插入文件url,不能和其他方法结合使用
<link rel="stylesheet" href="xxxx.css" type="text/css">
rel=stylesheet首选样式表/alternate候选样式表
media=all默认所有媒体/...
title:设定同样的值,可按照首/候分组对应不同媒体
④输入样式表:插入文件url,只有IE 4.0支持,可以和其他方法结合使用
<style type="text/css">
<!--
@import url(xxxx.css);
h1 { color: orange; font-family: impact; }
-->
</style>
!important:重要声明,超过其他所有声明,放置在声明的分号前,中间用空格隔开,一个元素多个声明则都需放置
选择器:
①通用选择器:* 匹配页面上所有元素，可以用来对某个元素的所有后代应用样式或跳过一级后代
②元素选择器:标签
③ID选择器:*#,html中只能使用一次
④类选择器:*. 定义class属性后使用,不能以数字开头不能包含特殊字符（-,_）,
多类选择器:可给一个元素定义多个类名
分类选择器:将元素选择器和类选择器联合使用p.first { color: green; }
群组选择器:选择器列表用 , 隔开
⑤后代选择器:选择某元素的所有后代,选择器1 选择器2{ }
⑥子代选择器：选择某元素的直接后代，条件:父子关系
⑦相邻兄弟选择器:选择紧接在一个元素后的元素,条件:同父元素,一个元素紧接在一个元素后
h1 + p {margin-top:50px;} p紧接在h1后,选择了P
⑧通用兄弟选择器:选择某元素后面的所有兄弟元素,该元素可不直接紧随某元素
h1~p:选择h1后的所有p
⑨属性选择器:根据属性或属性值来寻找元素
简单属性选择器:elem[attr]{ } //elem表具体元素,attr表属性名称
elem[attr1][attr2]
img [alt]{ } 选择有alt属性的img
a [href][title] 选择同时有href和title的a
具体属性值选择器:elem[attr="value"] value是属性值,需完全匹配
部分属性值选择器:elem[attr~="abc"] abc是属性值里一个独立的单词
p [class~="warning"]<==>p.warning 选择单词列表有class的属性
子串属性值选择器:
p[class^/$/*="b"]选择foo属性以b开头/结尾/包含
a[href^="http://www..com"]/a[href$=".doc"]/a [href*="xxx.com"]常用
语言属性选择器:img [src|="img"] 选择属性=img和以img-开头的图像
⑨伪类选择器:选择器:伪类选择器{ }
链接/动态/目标/元素状态/结构/否定伪类,用于匹配元素不同状态时的样式
按LIVA顺序使用或用:串联连接伪类,只能作用于子元素和本身a:link b{}
-:link { }未被访问过的链接,链接伪类，在对a应用css时，可避免a的锚目标位置css改变
-:visited { }已经访问过的链接,链接伪类
-:hover { }鼠标悬停在某元素时,动态
-:focus { }元素获取焦点时,接受键盘输入或以某方式激活的元素,动态，输入框
-:active { }元素被激活,正在点击的链接,动态，提交按钮
链接伪类只能应用于锚元素动态伪类可以应用任何元素
静态伪类:第一个子元素:p:first-child 匹配到p的父元素的第一个子元素p
目标伪类:-:target{ }匹配#锚定义的目标元素,多用于<a href="#id">的跳转
元素状态伪类:-:enabled{ }匹配每个已启用的元素(大多用在表单元素上)
-:disabled{ }匹配每个被禁用的元素(大多用在表单元素上)
-:checked{ }匹配每个已被选中的input元素(只用于单选按钮和复选框)
结构伪类:-:first-child匹配属于其父元素的首个子元素
-:last-child匹配属于其父元素的最后一个子元素
-:empty匹配没有子元素(包括文本节点)的每个元素
-:only-child匹配属于其父元素的唯一子元素
-:nth-child(n)匹配属于其父元素的第n个子元素
否定伪类:-:not(-)匹配非-元素的其他所有元素
td:not(:first-child):not(:last-child)
input:not([type="text"]){ }匹配input中除了某属性以外的所有input标签
选择器:lang(fr){ ;} 定义lang="fr",向带有指定 lang 属性的元素添加样式。
Communicator支持带文字修饰(text-decoration)的预定义分类,但对其它属性非常
挑剔,IE 3不支持A:active(而MAC不支持A:visited)
⑩-:伪元素选择器可用-::伪元素选择器
伪类用于匹配元素,伪元素用于匹配元素中的内容
:用于伪类选择器,::用于伪元素中(部分伪元素也可用:)
W3C规范伪元素必须用:: 伪类必须用:
为了保证兼容性,通常使用:既表示伪类也表示伪元素
选取元素的首字母-:first-letter
选取元素的首行-:first-line
元素匹配用户选取的部分 ::selection{ }只能设置color,background
选取元素之前和之后-:before/after{content:""}在之前/后插入
内容生成属性:效果中不能查看源文件/复制等
-:before/after{content:url() "字符串" counter(计数器名) "";...}
``设置插入部分的效果
<a href="../default.htm">W3School</a>
a:after{content: " (" attr(href) ")"}
在a之后插入:(../default.htm)
计数器:同一个计数器可给不同元素使用
范围元素{counter-rest:计数器名/计数器名 值;}创建/复位计数器,
值默认0,可为正/负;多个计数器名称之间用空格隔开
不能再使用的元素上声明,在使用元素组的范围外声明
-{counter-increment:计数器名/计数器名 增量值; //默认增量1,可以是正值或负值
-:before/after{content:counter(计数器名);} //为指定元素添加计数器
display: none;无法增加计数； visibility: hidden；可增加计数
css优先级:通过选择器改变权重控制顺序
①按权重和来源排序:
声明来源由大到小:读者!important声明>创作人员!important声明>创作人员正常声明>读者正常声明>用户代理声明
②权重相同,按特殊性排序:
内联1000>ID0100>类/伪类/属性0010>(伪)元素0001>通用/子代/相邻选择器>浏览器缺省样式
权值相加,大的优先,相同则按前后顺序,非二进制:0,0,1,0>0,0,0,13
③权重、来源和特殊性完全相同,按顺序,最后出现的胜出
继承:子元素继承父元素,但大多框模型属性(边框border/内边距/外边距/背景)不会继承
层叠:为一个元素定义多个选择器,当样式声明不冲突时,可以将多个样式可以合并成一个
在body上添加类或ID来增强特殊性
css单位:
1.尺寸单位:css中的数值,如果有单位不能省略
%:比例:百分比是由父元素的大小作为参照
in:英寸 -->2.54cm
cm:厘米
mm:毫米
pt:磅 -->1/72in 文字大小使用,points,,pC中显示的字比MAC中显示的大一些,所有的浏览器和操作平台上都适用
px:像素,可以同时控制图像和文本大小,pixels
em:倍数
pc(打字机字型尺寸单位)文字大小使用
ex(x-height) 文字大小使用
2.颜色单位:
①颜色英文名称:
aqua,black,blue,fuchsia,gray,green,lime,maroon,navy,olive,purple,red,silver,teal,white,and yellow.
②16进制:#rrggbb 0-9、A-F组成 #000000黑 #ffffff白 #336699/#369
③rgb(r,g,b) 红绿蓝,数值范围0~255
④rgb(r%,g%,b%)
尺寸属性:width/max-width/min-width;height/max-height/min-height
哪些元素允许修改尺寸:p/div/h1/ul/ol/li/dl/dt/dd等块级对象;
存在width、height属性的元素,img/table等;
不具备width、height的行内元素不允许修改
溢出处理:内容空间>框空间
overflow/overflow-x/overflow-y:
visible(默认)超出尺寸也显示全部内容,若要子元素覆盖父元素,需设置默认值
hidden超出尺寸隐藏文本
scroll总显示滚动条
auto超出时显示滚动条
边框简写:border:width style color;
单边:border-方向(left/right/top/bottom):width style color;
单属性:border-属性:值;
单属性单边:border-方向-属性:值;
边框属性:
①宽度:width:1个值/4个方向值;
值:长度单位/关键词thin/medium/thick;常用:border-width:0/none取消边框
②样式:style: solid实线/double双线/
dotted点线/dashed虚线/groove/ridge/indet/outset;
希望显示某种边框,就必须设置边框样式
③颜色:color:顶 右 底 左;transparent(透明边框)
④倒角:radius:绝对值/百分比; 顺时针顺序设置四个
border-top-left/right-radius:左/右上角(bottom-left/right左下/右下)
⑤图片:image:url(url地址) 偏移 宽度 超出的量 平铺/铺满/拉伸;
⑥合并:collapse:separate默认,分离边框/collapse合并相邻的边框,表格特有
⑦边距:spacing:长度值/上下 左右;相邻单元格边框距离;条件:必须为分离边框模式使用,表格特有，IE6/7控制单元格间距的唯一办法(其他:margin:0;padding:0;)
显示规则:table-layout:
auto默认,列宽度由内容决定,自动表格布局
fixed由table和td宽度值来决定td宽,固定表格布局
自动表格布局特点:
单元格大小适应内容
表格复杂时,加载速度较慢
适用于不确定没咧大小时使用
固定表格布局特点:
单元格宽度由自定义数值为主,与表格显示内容无关
会加速显示表格,浏览器加载完第一行时就不用再进行后续的计算了
不够灵活
边框阴影:box-shadow:h-shadow(必须,水平阴影位置) v-shadow(必,垂直)
blur(模糊距离) spread(阴影尺寸) color inset(将外部阴影outset改为内部阴影)
轮廓:outline: width style color;常用:outline:0/none取消轮廓，轮廓不占用空间
outline-width/style/color:轮廓宽度/样式/颜色
outline-offset:length/inherit从父元素继承;默认0
盒模型:box model,框模型,定义了元素框、处理元素内容、内边距以及外边距
width/height:内容区域的宽度/高度,增加元素框的总尺寸,内边距、边框、外边距不会影响内容区域的尺寸
height影响框模型高度,line-height影响文本上下偏移
设置width和margin:0 auto;可使该块自动居中。
margin:外边距,元素与元素之间的距离,
取值:px/%/auto(自动计算外边距实现块级元素水平居中)/负值(相反方向移动元素)
外边距简写:margin:value;4个方向/上下 左右;/上 左右 下;/上 右 下 左(顺时针);
单边:margin-top/right/bottom/left:
边框外的空间,可以为负,默认透明
默认外边距:默认情况下块级元素都存在外边距,可以通过重写css来取消默认外边距
外边距叠加:
两个垂直外边距相遇会形成一个外边距，取较大值外边距
外边距可与本身发生叠加，父子元素无边框，内边距时，垂直外边距取较大值
只有普通文档流中可以，行内框(行内元素)，浮动框，绝对定位框直接不会发生叠加
外边距溢出:父子元素时,设置子元素的上下外边距,有可能会作用在父元素上
条件:父元素没有边框时,而且设置第一个子元素的上外边距时,会产生外边距溢出
解决方案:1.为父元素增加上/下边框,设置不可见,同时注意添加height=总高-border
2.为父元素设置一个上(下)内边距,用来取代子元素的上(下)外边距
3.在父元素中,增加一个空table作为第一个子元素
padding:内边距,内容区域和元素框之间的距离,不能为负,单边和简洁写法同上
注意:给行内元素增加内边距时,不会影响到其他元素
框模型计算模式:对象实际宽度=左右外边距+左右内边距+width;
对象实际高度度=上下外边距+上下内边距+height;
背景简写:background:颜色 图像url 平铺 固定 定位;无须设置每一项
背景颜色需设置在背景图片后才能显示
①背景颜色:background-color: 可以设置透明属性transparent,会填充元素的内容、内边距和边框区域;如果边框有透明部分会透过透明部分显示出背景色
②背景图片尺寸:background-size:宽度 高度/cover扩展背景图像尺寸,使背景图像完全覆
盖背景区域,图像的某些部分也许无法显示/contain扩展背景图像尺寸,使器宽度和高 度完全适应内容区域
③背景重复:background-repeat:repeat默认在水平和垂直重复出现(平铺)/no-repeat不重
复图像/repeat-x水平平铺/repeat-y垂直平铺,
④固定背景:background-attachment:scroll滚动,默认/fixed不滚动;只用于body标签内
⑤背景定位:background-position:x y;不同参数可混用
关键字参数:x:left/center/right y:top/center/bottom;
长度参数:x y; x正值右移,负左移;y正下移,负上移
比例值:x% y%; 0% 0%原始位置,左上方/100% 100%右下/50% 50%元素正中间
Firefox/Opera 中,要把background-attachment属性设置为 "fixed",才能保证定位
属性正常工作
⑥背景图像:background-image:url(地址url);默认none
特别:css sprites:将若干幅图像封装到一幅图像中,根据需求 移动图像位置,从而显示出想看的图像,设置显示范围,定位:background:url(images/iconlist_1.png) no-repeat -243px -112px;
⑦渐变:background-image:渐变属性(设定1,设定2,设定3);
⑴线性渐变linear-gradient(angle,color-point1,color-point2,...)
⑴angle:渐变方向to top从下向上/ringht左向右/bottom/left
或角度值0（to top）/90(to right)/180/270deg 范围0~360deg
⑵color-point:色标,由颜色和位置组成red 0%/0px
⑵径向渐变radial-gradient([size at position],color-point1,...)
渐变圆心位置,默认center,可省略,可取值数值/百分比/关键词
颜色起始点、中间点或结束点
⑶重复线性渐变repeating-linear-gradient(angle,color-point1,color-point2,...)
位置一定要给绝对的数值px,不要给相对%
180deg:to bottom
⑷重复径向渐变repeating-radial-gradient([size at position],color-point1,...)
渐变浏览器兼容性:浏览器不支持属性,前缀加在属性前;支持属性不支持值前缀加在值前
需要加前缀的浏览器:firefox:-moz-
chrome/safari:-webkit-
opera:-o-
IE:-ms-
字体简写:font:style斜体 varaint小型大写 weight加粗 size字号 family字型;
必须设定字号和字型,建议,取代加粗b倾斜i等HTML元素
font:12pt/16pt courier;字体大小/行高
使用系统字体:caption有标题的空间如按钮/icon用于对图标加标签/menu菜单/message-box对话框/small-caption对小控件加标签/status-bar窗口状态条
botton{font:caption;}按钮字体设置与操作系统中的按钮字体完全相同
字体:字体名有空格/与font-family关键词冲突(用一个与通用字体名同名的特定字体时)需要要引号"/’
body { font-family: "gill sans","Karrank%","微软雅黑"serif; }
Windows:应用软件比如word中的字体菜单中所列出的确切的字体名称。
Mac:不要相信应用软件给你列出的字体名称。而应该打开你的system folder,按照
其中对字体的拼写在你的样式表中使用字体名称。
如果字体设置没有列在最后一条,IE 3 会忽略整个一条CSS规则
字体大小:font-size:尺寸单位/关键字
关键字:xx-small/x-small/small/medium/large/x-large/xx-large /
smaller/larger
斜体:font-style:normal取消斜体/italic斜体,对字母结构有改动/oblique倾斜版本
加粗:font-weight:normal(清除加粗)/bold(b,hn,strong默认值)/lighter/bolder(IE /或Netscape Communicator不支持后两个)/100~900
小型大写字母:font-variant:normal/small-caps(大写字母变大,小写字母变大写); Communicator/IE不支持
文本:
文本颜色:color:value;
文字对齐:text-align: center/left/right/justify左右对齐(MACIE 3/4不支持)
文字修饰:text-decoration: 无继承性,线颜色与父元素相同
none效果都不发生,可去除链接的下划线
underline下划线
overline上划线
line-through删除线
blink文字在闪烁
Communicator不支持上划线,IE 4不支持文字闪烁,IE 3都不支持
文字转换:text-transform:none使文字将以正常形式显示
uppercase使所有字母大写显示
lowercase使所有字母小写显示
capitalize 使每个单词的第1个字母大写显示
首行文本缩进:text-indent:value;
文本阴影:text-shadow:h-shadoe v-shadow blur color;
text-overflow:ellippsis;单行文本溢出显示省略号
行高:line-height:长度单位/数字/比例,一行数据的高度
如果行高高度高于字体本身大写,该行文本会呈现出垂直居中的效果
行高=行间距+文字字体大小,为
避免继承时行间距过窄,设置line-height缩放因子:1/1.5等数字
字间距:word-spacing:长度单位/normal 只有MAC机用的IE4支持
字母间距:letter-spacing:长度单位/normal ,修改字符或字母的间隔 Communicator不支持
处理空白符:white-space:normal回车转换成空格/nowrap防止换行(除br)/pre/pre-line/pre-wrap;
文本方向:direction:ltr默认,左到右/rtl/inherit;影响元素中文本书写方向等
unicode-bidi:normal/embed/bidi-override
定位:用position和偏移可以设置普通流/相对/绝对定位,float设置浮动定位
position:static/relative相对/absolute绝对/fixed固定定位;
偏移属性:left:+右;top:+下;right:+左;bottom:+上;
z-index:无单位的数字;堆叠顺序,值越大越靠上
⑴只有已定位元素才能使用:relative/absolute/fixed,可以设置负值
⑵父子关系无法调整,永远都是子压在父上
⑶注意数值大小和层叠关系，可能会导致元素不可用
①普通流定位:position:static文档流定位,页面元素默认定位方式
块级元素:从上到下排列,独占一行,可通过margin改变元素位置
行内元素:从左到右排列,多个元素能在一行,显示不下,换行,通过左右margin改变
左右位置,可以使用水平内边距/边框/外边距调整之间的位置
非替换元素:元素内容包含在文档中
替换元素:用作为其他内容占位符的一个元素
②相对定位:position:relative;left/right:value;top/bottom:value;
"相对于"它的起点进行移动。
width,height(不支持),z-index参数高出现在越上面
元素扔保持未定位前的形状
元素原本所占的空间仍保留
③绝对定位:position:absolute;left/right:value;top/bottom:value;
将元素的内容从普通流中完全移除,会产生重叠
相对于最近的已定位(设置relative/absolute/fixed)的祖先元素定位
如果没有已定位的祖先元素,那么它的位置相对于最初的包含块:body/html实现
相关操作:
1.将元素修改为绝对定位将变成块级元素,
2.margin可以用,但auto可能失效
④固定定位:position:fixed;将页面固定在某位置。固定定位会脱离文档流
如，评论表单采用固定定位，页面滚动时一直出现在屏幕上的某个位置
⑤浮动定位:float: none/left/right,定义元素在哪个方向浮动,任何元素都可以浮动
脱离文档流,不占页面空间,
浮动元素依旧位于包含框之内,向X移动碰到包含框/另一个浮动框的边框为止
空间不够会自动下移,浮动的元素高度不同,可能会被其他浮动元素"卡住"
浮动元素的外边缘不会超过父元素的内边缘
浮动后的行框(行内元素)会围绕浮动元素
浮动元素margin不会合并
解决问题:能够让多个块级元素在一行内显示
浮动元素影响/效果:
1.如果父元素的宽度无法容纳所有的浮动元素,那么最后一个将换行
2.任何元素一旦浮动,将变成块级元素。
3.如果没限制元素的尺寸,那么浮动之后,宽度将变成自适应
4.文字、行内、行内块 采用环绕的方式排列的。如果有浮动元素占据了位置后了,他们会将位置让开
自适应高度解决:IE:zoom:1;
清除:clear:none/left/right/both不允许左侧/右侧/两边有浮动元素/允许两边都有
清除其他浮动元素对当前元素所带来的影响，在元素顶上添加足够的外边距使元素下降到浮动框下面，为前面元素流出了空间
浮动影响:
父元素的高度不随着设置浮动的子元素内容自适应
解决方案:1.设置父元素的高度
2.overflow:hidden/auto;撑起父元素的高度
弊端:会隐藏溢出显示的内容,如子元素负外边距溢出显示
某些情况会产生滚动条/截断内容
3.一般在末尾增加子元素（块级）如<div>并设置clear:botn;
4.父元素也是浮动元素,则宽度高度都能自适应,子元素不需清除浮动
5.最后一个元素
-:after{content:"";display:block;clear:both;}
或.clear:after{content:".";height:0;visibility:hidden;display:block;clear:both;}
显示:display:每个元素都有display属性
none:让生成元素不显示,不占用文档空间,脱离文档流
block:让元素变成块级,垂直导航栏/把链接显示为块元素可使整个链接区域可点击
inline让元素变成行内,行内元素不能设置宽度和高度,水平导航栏将li变成行内
inline-block:行内块元素,位置摆放如同行内元素,但可以像块级元素设置高度宽度,会使元素与父元素向下对齐,解决:定位/vertical-align:top;
table:元素作为块级表格显示类似<tab>
可视性:visibility:visible默认,元素可见
hidden:不可见,但仍占据空间,不会脱离文档流
collapse:用在表格元素时,可删除一行/一列。且不影响表格布局
垂直对齐:vertical-align:允许作用的元素:td/行内块、img、左右两端的文本的行内块
baseline:默认.元素底端与父元素基线对齐
top:元素的顶端与行中最高元素的顶端对齐
bottom:元素行内框底端与行框底端对齐
middle:元素行内框重点与父元素基线上0.5ex处一个点对齐
text-top:将要素的顶部同母体要素文字的顶部对齐。
text-bottom:元素与父元素大小的默认框底端对齐
sub:将要素以下标的形式显示,基线必父元素低
super:将要素以 上标的形式显示
%:元素基线相对父元素基线升高(正值)/降低
透明度:opacity:value;值0.0~1.0,应用它的元素的内容也会继承,造成文本内容难以辨认
background-clolr:rgba(r,g,b,0.7);单独设置某属性颜色值
光标:cursor:default默认/pointer手/crosshair +/text I/wait等待 ?/help/url();
定义了鼠标指针放在一个元素边界范围内时所用的光标形状
列表简写:list-style:type url position;一般情况直接将list-style设置为none
列表项标志:list-style-type:在li文本的父元素层上,若父元素padding为0则不显示
无序列表取值:none/disc实心圆/circle空心圆/square实心方块
有序列表取值:none/decimal数字/lower-roman小写罗马数字/upperroman大写罗马
列表项图像:list-style-image:url();指定图像作为列表项标志
列表项位置:list-style-position:outside默认,标记放在文本左侧且在文本外
inside标记放在文本内
多列:
column-count:元素被分隔的列数
column-gap:长度单位;列之间的间隔
column-rule:width style color;列之间的宽度,样式,颜色
浏览器兼容性:IE10和Opera支持;Firefox前缀-moz-;Chrome和Safari前缀-webkit-
转换:旋转的话坐标轴也跟着旋转,坐标(0,0)在元素左上角,原点在50%,50%元素中心处
①transform:none默认,无任何转换效果/转换方法;
同一个元素transform;只能设置一个，多个方法空格分隔；
x,y可以为关键词/长度值/%;deg为值deg;time为s/ms;
chrome、safari:属性前缀需加-webkit-
结构：舞台{容器{物品}}
旋转木马:
舞台-视距perspective;容器-3D视图声明transform-style:preserve-3d;和共用中心position:relative;物品-向外位移translatez计算:r=64/tan(20/180*π)
动画思路:旋转容器的y轴,调整容器视角
舞台：注意容器/物品位置 以及 舞台大小不一定设置必容器大 大小以方便实现动画效果为主
⑴2D转换方法:
translate(x)/translate(x,y)/translateX(x)/translateY(y)元素移动
rotate(deg) 根据原点顺时针旋转,负值逆时针
scale(x)/scale(x,y)/scaleX(x)/scaleY(y) 默认值1,缩放元素
skew(deg)/skew(deg,deg)/skewX(deg)/skewY(deg)按水平线x和垂直线y顺时针倾斜
matrix() 组合所有方法,需6个参数
⑵3D转换方法:
translateZ(z)/translate3d(x,y,z) 离原元素中心的位移，正值向外位移
rotateX(deg)/rotateY(deg)/rotateZ(deg)/rotate3d(x,y,z,deg) 3d旋转，
rotate3d(1,1,1,-30deg);xyz为deg的比例参数
scaleZ(z)/scale3d(x,y,z) 3d缩放
②属性:
transform-origin:数值/百分比/关键字;转换原点位置，默认在元素中心;
1个值:全部;2个值:xy轴;3个值:xyz轴
transform-style:flat默认,2d/preserve-3d 透视3d;
perspective:none/值(以像素计); 视距，3d元素，人眼到投射平面的距离
放在 3d 转换元素的 父元素上。其子元素会获得透视效果
书写方式：舞台里的物品为视角对象：子元素{transform:perspective();}/
舞台为视角对象：父元素{perspective();}
perspective-origin：视角(眼睛)位置
backface-visibility：visible默认,背面可见/hidden背面不可见;设置旋转元素不希望看到其背面时；也可透视叠加物品
过渡简写:
transition:属性名 时间 速度曲线 何时开始;(多个属性设置逗号分隔)
触发过渡:
用户行为(点击、悬浮等);元素状态变化(-:hover/active/focus等);JavaScript触发
过渡属性transition-property:none/all/属性名(多个逗号分隔);
可设置过渡的属性:颜色、取值为数值的、转换、渐变、visibility、阴影
过渡时间:transition-duration:time; 默认0,(多个逗号分隔)
速度曲线:transition-timing-function:
linear相同速度=cubic-bezier(0,0,1,1)
ease默认,慢速开始-快-慢速结束=cubic-bezier(0.25,0.1,0.25,1)
ease-in慢速开始=cubic-bezier(0.42,0,1,1)
ease-out慢速结束=cubic-bezier(0,0,0.58,1)
ease-in-out慢速开始和结束=cubic-bezier(0.42,0,0.58,1)
cubic-bezier(0,0,1,1);
过渡延迟:transition-delay:time;在过渡效果开始之前需要等待的时间
动画简写:会影响框空间变化
-{animation:动画名 时间 速度曲线 延迟时间 播放次数 轮流反向播放;}
animation-name:动画名/none;绑定到keyframes的名称,none则无动画效果
animation-duration:time;动画花费时间,默认0无动画效果
animation-timing-function:linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier(n,n,n,n);动画速度曲线
animation-delay:time;动画开始前的延迟,默认0
animation-iteration-count:n/infinite无限播放;动画应该播放的次数
animation-direction:normal默认,正向播放0%~100%
reverse逆向播放100%~0%
alternate轮流播放;奇数次正向播放;偶数次逆向播放
animation-fill-mode:none
forwards:动画完成后,保持最后一个属性值
backwards:显示前,应用开始属性值
botn:向前和向后都应用
animation-play-state:paused/running;规定动画运行/暂停,结合JavaScript使用
设置关键帧:原理:将一套 CSS 样式逐渐变化为另一套样式。
@keyframes 动画名{
from/0%{ css样式;}
25%{ css样式;}
to/100%{ css样式;}
}
背景图像效果：
1.边框background：
⑴滑动门技术:background创造边框，随着框尺寸增加，一个图像一直覆盖着另一图像；
应用于水平扩展和垂直扩展时，框尺寸不需与图像尺寸一致，会增加无意义标签
⑵山顶角：PS制作曲线位图角蒙版,需要四个元素应用四个角蒙版,适合较小边框
2.css投影:ps制作一层背景和一层白色背景叠加并使白色层往左上方移动x像素,放在容器内，然后使用负外边距偏移x像素创造投影
3.css视差:background-position:n% 0;设置背景图像相对于窗口大小水平偏移n%,当水平调整窗口大小时，背景图像移动，bodyn%值最低，中景较高，前景最高
4.图像替换:用css隐藏文本，并给其设置背景图像，搜索引擎仍然可以搜索文本，禁用css文本仍然显示，多用于品牌图像，解决大多数计算机上缺少可用字体
⑴FIR：<h1><span>文本</span></h1>，用display:none隐藏span并设置h1显示背景图像，但很多屏幕阅读器会忽略display:none或visibility:hidden的元素，完全忽略这个文本，不建议使用
⑵Phark:对标题进行非常大的负值文本缩进text-indent:-5000px;解决了屏幕阅读器问题，对于重要信息/导航信息避免使用
⑶slFR:用flash替换文本
链接：
类似按钮的链接:a{display:block;}用于get请求不要用于post请求
工具提示：<a><span></span></a> a相对定位，span绝对定位,display:none;
a:hover span{display:block}
在导航条中突出显示当前页面：对当前导航项单独设置css样式如cursor:default;
列表和导航条：
<ul>/*导航*/
<li><a></a></li>
<ul>/*子导航*/
<li><a></a></li>
...
</ul>
<li><a></a></li>
...
</ul>
简化的滑动门标签页式导航：li应用背景图像定位右侧,a应用背景图像定位左侧,即使字号增加,标签页也不会断裂
下拉菜单：
①设置该框父元素relative相对定位,设置该框absolute绝对定位位置且设置display:none，设置:父元素:hover 下拉框{display:block;}
②子导航嵌套在无序列表中，列表定位到屏幕之外，鼠标悬停在父列表项上是重新定位它,不需要设置相对定位
ul li ul{position:absolute;left:-999em;}
ul li:hover ul{left:auto;}
图像映射：鼠标悬停在图像某部分时出现矩形框且单击直接进入网站
<div>
<img>
<ul>
<li><a></a></li>
...
</ul>
</div>
div:position:relative;使链接可以相对图像边缘进行绝对定位
a设置宽度高度，创建单击区域，text-indent:-1000em;使文本消失
分别position:absolute;定位到相应位置
ie不显示内容隐藏在屏幕之外的链接，即使显示设置宽度高度也不想，设置背景可以(透明背景不行)，可以指向一个不存在url的背景图像
flicker风格的图像映射：在上面基础上 显示说明+双边框框
<a><span><span><span>提示说明////
设置span尺寸让a自适应，内外部span设置边框透明,悬停div/a时显示颜色
说明span:position:absolute;bottom:-3em;left:-1000em;定位到热点下面且隐藏到屏幕外,鼠标悬停时重新定位
远距离翻转：锚链接a内嵌套一个或多个元素，使用绝对定位对嵌套的元素分别定位，都包含在同一个父锚中，可以对同一个鼠标悬停事件作出反应
表单:
label{display:block;cursor:pointer;}将标签定位在表单元素上方(垂直布局)也可左
浮动(水平布局)
对单选和复选按钮,标签通常不放在上方而是放在右边或用隐式方式围绕
input[type="text"]{width:20em;}
单选/复选按钮width:auto;
可访问的数据输入元素:将标签宽度设置为0，负文本缩进到屏幕外；然后可以单独设置各
个表单控件尺寸
浏览器处理fieldset的legend标题定位方式不一致，可使用h1元素
使用button替代input元素,IE6及以下不支持属性选择器，OSX等许多操作系统禁止修
改input样式，button限制:IE6/7提交所有按钮内容，需要确保所有按钮功能相同
表单反馈：突出显示忘了填写或填写不正确的域
将反馈文本放在一个em中，然后放在label中，使用css进行绝对定位，使其出现在文本输入元素的右边
关于css重用性：div[class*=”-f”]{float:left;}
IE中text-align:center误解让所有东西居中，包括容器div;混杂模式中的IE5/6不支持margin:0 auto;
IE浮动会产生双外边距bug:可以给浮动div添加display:inline;
固定宽度缺点：会在低分辨率屏幕会导致水平滚动,在高分辨率上会缩写并出现在屏幕中
间，不适应灵活的web；浏览器默认文本字号增加，会挤满空间
流式布局：尺寸使用百分数而不是像素，能相对浏览器窗口进行伸缩
缺点：窗口宽度较小/大时，行变得很窄/长，难以阅读
解决:不要横跨浏览器而是让容器值跨越宽度的一部分
%设置内边距和外边距
给容器设置最大/小宽度max-width/min-width，防止在大显示器上变得过宽/窄
(设计者使用宽度像素/子容器像素÷浏览器窗口像素/父容器像素)x100
弹性布局:相对于字号来设置元素的宽度，以em为单位设置宽度
在容器div上添加100%的max-width:文本字号增加时整个布局加大,弹性布局会变得必浏览器窗口宽,导致水平滚动条出现
设置基字号，让1em大致相当于10像素：body{font-size:62.5%;}默认字号16px.10/16=62.5%
em为单位设置容器宽度，内部宽度仍使用%
页面上的img图像元素。将容器元素设置width:100%;overflow:hidden;图像会在容器元素伸缩的时候多出来的部分自动截短
设置图像%宽度并添加max-width避免像素失真
faux列:应用背景图像repeat-y
流式：按%对背景图像进行定位，可以创建水平比例与布局相同的背景图像，然后把背景图像定位到希望列出现的地方
高度与最长列相等的布局:给每个框设置大的底内边距padding-bottom:520px，使用数值相似的负外边距消除整个高度margin-bottom:-500px，导致每个列溢出框的容器元素，容器overflow:hidden;列最高点则被截切
css优化:减轻服务器压力、缩短服务器响应时间、提高用户的体验度
①css sprites:合并多个背景图像到一个单独图像,减少HTTP请求个数
②页面顶部引入css:提高页面加载速度，允许页面逐步显示
③将css和js放到外部文件中:页面引入外部文件,将由浏览器缓存,后续页会使用缓存
④合并样式:提前定义统一的样式,利用css继承
⑤缩写样式文件:尽量使用简写属性
⑥选择更优的样式属性值:比如border:none/0;outline:0;
⑦减少样式重写:h1,h2{}代替且不要写*{};使用reset(重置)但并非全局reset,比如针对性的清除边距
⑧代码压缩:使用工具压缩css代码如yuicompressor
⑨不要在html中缩放图像:图像在网络传输时仍然保持原来的图像字节数
⑩避免空的src和href
标准模式和混杂模式:
IE6以后遵循标准,出现了运行模式,IE6无兼容性
不同模式:针对css（框模型）和JS解析会产生不同
IE tester:webbroeser控件 包含5.5~11等几个版本的IE浏览器
混杂模式(Qrirks Mode),标准(Standard Mode),准标准(Almost Srandard Mpde)
浏览器会根据DOCTYPE自动进行模式选择,IE除此之外还可以手动选择运行模式
触发混杂模式:不声明DOCTYPE
触发准标准模式:<!DOCTYPE html PUBLIC ...HTML4.01 Transitional ...>
<!DOCTYPE html PUBLIC ...HTML4.01 Frameset ...>
<!DOCTYPE html PUBLIC ...XHTML1.0 Transitional ...>
<!DOCTYPE html PUBLIC ...XHTML1.0 Frameset ...>
触发标准模式:<!DOCTYPE html PUBLIC ...HTML4.01 strict.dtd>
<!DOCTYPE html PUBLIC ...XHTML1.0 strict.dtd>
<!DOCTYPE html>
需要针对不同的浏览器/浏览器版本定制编写不同的CSS效果
浏览器兼容性:
<div></div>:IE6(div前)会自动多一行-其他,正常换行 设置margin:0;padding:0
居中布局:-对IE低版本中,对于父元素用text-align:center;
-其他,子元素用margin:0 auto;
元素高度和内容:-IE低版本中,元素高度至少包含内容
-其他,内容超出高度,则显示
设置元素的overflow属性
子元素设置上外边距时,父元素需要设置边框或外边距:-IE6显示正确
-其他浏览器,变成了父元素的外边距
设置父元素的边框(可以设置为透明).或者设置父元素的内边距,替代子元素的外边距
css hack:解决浏览器兼容性
主要考虑IE6,IE7,IE8,Chrome,Firefox即可
原理:使用样式规则的优先级和书写顺序来解决问题,同样优先级的执行最后一个
①css 内部hack:给样式规则加前后缀
+:IE7,6
-:IE6
\0:IE8,9,10
\9\0:IE9,10
②选择器hack:给选择器加前缀
*前缀:IE6识别
*+前缀:IE7
@media sreen{...}
③html头部引用hack:通过条件注释判断浏览器版本
可以根据不同浏览器版本引入不同兼容性文件
条件注释:
<!---[if 条件 IE 版本]->
<link href="xxx.css" type="text/css" rel="stylesheet" />
<![endif]-->
条件:
⑴gt:选择条件版本以上版本,不包含条件版本greater than
⑵gte:选择条件版本以上版本,包含条件版本greater than or equal
⑶lt:选择条件版本以下版本,不包含条件版本less than
⑷lte:选择条件版本以下版本,包含条件版本less than or equal
⑸ ! :选择条件版本以外所有版本,无论高低
只IE生效:<!--[if IE]>文字<![endif]-->
只IE6生效:<!--[if IE 6]>文字<![endif]-->
IE6以上版本生效:<!--[if gte IE 6]>文字<![endif]-->
IE8上不生效:<!--[if ! IE 8]>文字<![endif]-->
非IE浏览器生效:<!--[if ! IE]>文字<![endif]-->
可以根据不同浏览器版本引入不同兼容性文件
css兼容:
1.火狐div设置padding会导致width和height增加,但IE不会（可用!important解决）
2.垂直居中,将line-height设置为当前div相同的高度,再通过vertical-align:middle;(注意内容不要换)
3.水平居中margin:0 auto;
4.若需要给a标签内内容加上样式,需要设置display:block;
5.浮动IE产生双倍距离,ex:div设置了float后,给他设置margin会出现加倍的margin,解决办法:给div设置display:inline;
6.IE和FF对盒模型的解释去吧:IE BOX的总宽度:width+padding+border+margin总和
FF BOX的总宽度:width的宽度,padding+border+margin的宽度含在width内
用!important:box{width:"300"!important;width:"290";}
7.ul标签在FF默认有list-style和padding,最好事先声明
8.作为外部的div不要定死高度,最好还加上overflow:hidden;以达到高度自适应
9.页面最小宽度:min-width可以指定元素最小也不能小于某个宽度,能保证排版一直正确,但IE不认这个。实际上他把width当做最小宽度来使用
10.万能float闭合(暂缺)
标签：
原文地址：http://www.cnblogs.com/sytg/p/5796231.html
