html+css笔记

文档结构

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(字体)

特殊字符:

&nbsp;空格

&lt; <  -->less than

&gt; >  -->greater than

&copy;  ©-->copyright版权

&yen;  ¥

<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闭合(暂缺)

上一篇:Java中关于继承、类、多态、接口的知识点


下一篇:[Web API] Web API 2 深入系列(2) 消息管道