标签：asi top lan 优化 压缩包 居中 word creat style
1、
font的两个必须要写的：font-size 和 font-family
text-indent 首行缩进（em）1em=一个文字大小
text-algin 对齐方式：left、center、right
text-decortion 文本修饰： underline（下划线）overline（上划线）line-through（删除线）none（无）
letter-spacing 字间距（为0时字间距本身为1个像素，若为5px则字间距实际为6px）
word-spacing 词间距（先用空格将词组分开，否则没效果，注意空格也占几个像素）
line-height：行高，字的顶部到下一行字的顶部的像素
2、<a> href:
超链接 <a href="xxx.html">跳转页面</a>
压缩包下载：<a href=“xxx.rar">压缩包下载</a>
锚点(id)：<a href="#div1">跳转指定id位置</a>
eg：<a href="http://sohu.com/#sogou-search">直接跳到搜狐页面的指定id位置</a>
3、base：写在<head></head>之间
<base target="_blank" href="www.baidu.com"> 指定文档中所有<a>标签的默认
4、常用标签
section 版块 用于划分页面上的不同区域,或者划分文章里不同的节
header 页面头部或者版块（section）头
footer 页面底部或者（section）底部
<header></header>
<section>
<header></header>
<footer></footer>
</section>
<footer></footer>
nav 导航 （包含链接的的一个列表）<nav></nav>
article 用来在页面中表示一套结构完整且独立的内容部分.可以用来呈现论坛的一个帖子，
杂志或报纸中的一篇文章，一篇博客，用户提交的评论内容，可互动的页面模块挂件等。<article></article>
aside 元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，
以及其他类似的有别与主要内容的部分 <aside></aside>
1）被包含在<article>中作为主要内容的附属信息部分，其中的内容 以是与当前文章有关的引用、词汇列表等
2）在<article>之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，
其中的内容可以是友情链接、附属导航或广告单元等。
time 里面写时间 <time></time>
5、文件路径：
绝对路径：完整的固定的路径地址、网站地址
相对路径：以当前页面的地址为对象来表示路径地址
6、搜索引擎通过标签来判断用户搜索内容---标签语义化
SEM 搜索引擎营销
SEO 搜索引擎优化
7、css选择器的优先级
选择器的优先级一致的情况下，后面的会覆盖前面相同的属性
!import > 行间样式style > id选择器 > class选择器 > 类型tag选择器 > 通配符* > 默认
包含（父子）选择器 > 单个选择器 = 群组选择器
内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）
8、块元素和内嵌（内联、行内）元素：
块：
1）默认独占一行
2）支持所有css样式
3）不设置宽度的时候，宽度默认撑满整行
内嵌：
1）同一行上可以显示同类的标签
2）不支持宽高
3）不支持上下的margin和padding样式
4）宽高由内容撑开
5）代码换行会被解析成空格
想让内联元素具备块元素特征：display:block;
想让块元素具备内敛元素特征：display:inline;
想让元素既支持内敛也支持块元素特征：display:inline-block;
内敛块：
1）块元素能在一行显示
2）行内元素支持宽高
3）没有宽度的时候内容撑开宽度
4）标签之间的换行间隙被解析成空格
5）ie6 ie7不支持块属性标签的inline-block
9.浮动:
float:left | right | none | inherit;
文档流是文档中可显示对象在排列时所占用的位置。
浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停下来。
clear:left | right | both | none | inherit；指定元素的某个方向上不能有浮动元素
clear:both; 在左右两侧均不允许浮动元素。
float特征：
1）块在一排显示
2）内联支持宽高
3）默认内容撑开宽度
4）脱离文档流
5）提升层级半层
10.清除浮动的方法
1）加高：给父级元素一个高度，缺点是扩展性不好，若高度不固定，加高清除失效
2）父级浮动：给各类父级元素设置float，问题是页面中所有元素都要加浮动，而且margin左右auto居中失效
3）inline-block方法：给父级加display:inline-block; 问题是导致margin左右auto失效
4）空标签清除浮动：在浮动元素同级位置加一个空标签<div class="clearfix"></div> css: .clearfix{clear:both;}
问题：IE6 最小高度 19px；（解决后IE6下还有2px偏差） ，每个浮动元素后都要加空标签
5）br清除浮动：浮动元素后加 <br clear="all"/> 问题：不符合工作中结构、样式、行为，三者分离的要求。每个浮动元素后都要加
6）after伪类清浮动方法（现在主流方法） ：给浮动元素的父级添加一个clear类，并设置css样式为：
.clear:after{content:‘‘;display:block;clear:both;} .clear{zoom:1;} （zoom兼容ie6、ie7）
after伪类： 元素内部末尾添加内容；
:after{content"添加的内容";} IE6，7下不兼容
zoom 缩放
a、触发 IE下 haslayout，使元素根据自身内容计算宽高。
b、FF 不支持
7）overflow:hidden; 清除浮动：给父级元素加。 问题：需要配合 宽度 或者 zoom 兼容IE6 IE7；
overflow: scroll | auto | hidden；overflow:hidden;溢出隐藏
11、定位position:relative | absolute | fixed | static | inherit;
1）relative相对定位/定位偏移量position:relative; 特征
a、不影响元素本身的特性；
b、不使元素脱离文档流（元素移动之后原始位置会被保留）；
c、如果没有定位偏移量，对元素本身没有任何影响；
d、提升层级
定位元素位置控制 top/right/bottom/left 定位元素偏移量。
2）absolute绝对定位/定位层级position:absolute; 特征
a、使元素完全脱离文档流；(原始位置消失，元素相当于隐形了)
b、使内嵌支持宽高；
c、块属性标签内容撑开宽度；
d、如果有定位父级相对于定位父级发生偏移，没有定位父级相对于document发生偏移；
e、相对定位一般都是配合绝对定位元素使用；
f、提升层级
z-index:[number]； 定位层级
a、定位元素默认后者层级高于前者；
b、建议在兄弟标签之间比较层级
eg：z-index：1; 向前提升一个层级,
z-index:[number]； 定位层级
3）fixed 固定定位：
与绝对定位的特性基本一致，的差别是始终相对整个文档进行定位； 问题：IE6不支持固定定位；
12、透明度
标准浏览器：opacity：0-1；
IE6、7下：filter：alpha（opacity=0-100）
13、表格样式重置
table{border-collapse:collapse;} 单元格间隙合并
th,td{padding:0;}重置单元格默认填充
合并单元格
colspan 属性规定单元格可横跨的列数。 <td colspan="2"></td>
rowspan 属性规定单元格可横跨的行数。 <td rowspan="2"></td>
14、兼容（标准浏览器一般都兼容，主要看IE6、7）
1）H5兼容 IE6、IE7不支持H5标签，解决方案：需将h5标签变成block元素，后用js创建标签 （document.createElement("section")）
若含有很多h5标签，引用 html5shiv.js 文件解决。
2）元素浮动之后,能设置宽度的话就给元素加宽度.如果需要宽度是内容撑开,就给它里边的块元素加上浮动;
3）第一块元素浮动,第二块元素加margin值等于第一块元素,在IE6下会有一条空隙问题; 解决方案：第二块元素要用浮动float。
4）IE6下子元素超出父级宽高，会把父级的宽高撑开 。解决方案：子元素宽高不要超过父级元素宽高！
5）<p><h1-6><td>包含块元素嵌套规则,块元素在所有浏览器中不被这三个标签包含，直接变成同级关系。
6）margin兼容性问题，上下margin叠压问题，解决方案是避免多个元素上下margin同时存在，只使用一个方向的margin。
在浏览器中子元素margin-top会传递给父级元素，解决方案是触发BFC和haslayout
给父元素加overflow:hidden;触发BFC 。 给父元素加zoom:1；触发haslayout
BFC (block formatting context) 标准浏览器 ：
a、float的值不为none。
b、overflow的值不为visible。
c、display的值为table-cell, table-caption, inline-block中的任何一个。
d、position的值不为relative和static。
e、width|height|min-width|min-height:(!aotu)
haslayout IE浏览器 ：
a、writing-mode:tb-rl
b、-ms-writing-mode:tb-rl
c、zoom:(!normal)
7）display:inline-block兼容 IE6下不支持。解决方案：使用css hack(*)。在display：inline-block;后加上*display:inline; *zoom:1;
8）IE6最小高度问题。height:1px;在IE6下最小高度不是1px是19px; 解决方案：*overflow:hidden;
9）IE6双边距。在设置了float:left后设置margin-left会导致双边距现象；比如float:left;margin-left:50px;在IE6下会距离左边100px。
解决方案：针对IE6,添加 *display：inline；
10）li子元素都浮动的情况下，li下方会产生4px间隙。解决方案：给li添加 *vertical-align:top;
11）两个浮动元素中间有注释或者内联元素并且和父级宽度相差不超过3px时会出现溢出文字的情况
解决方案：两个浮动元素中间避免出现内联元素或者注释 或者 与父级宽度相差3px或以上
12）IE6\7下父元素overflow：hidden；包不住子元素的relative相对定位
解决方案：针对ie6、7给父级元素添加相对定位 *position：relative；
13）IE6下绝对定位元素的父级元素宽高是奇数,绝对定位元素设置的right和bottom值会有1px的偏差 。
解决方案：避免父级宽高出现奇数
14）IE6下绝对定位元素和浮动元素并列绝对定位元素消失 。解决方案：避免在同一级，可以用<p>包住内敛元素。
15）IE6下input会有上下1px空隙问题 。解决方案：给input添加 *float：left；
16）IE6下输入类型表单控件随输入内容增加，背景图片不固定的问题。解决：设置background-attachment：fixed；
CSS hack：针对不同的浏览器写不同的CSS 样式的过程，就叫CSS hack!
div{
width: 200px;
height: 200px;
background-color: red
background-color: blue\9;
*background-color: green;
_background-color: yellow;
}
书写顺序，从上到下范围依次减小。
\9 IE10以及IE10以下版本的
* IE7以及IE7以下版本的
_ IE6以及IE6以下版本的
17）PNG24 兼容性问题：IE6不支持PNG24，出现背景。
解决方案：
使用PNG8
或者:
JS插件:DD_belatedPNG_0.0.8a.js(问题:不能处理body之上png24) ；执行js插件中的函数：DD_belatedPNG.fix(‘xxx‘);
原生滤镜：在body样式添加这两句：
_background-image:none;
_filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(src="XX.png", sizingMethod="crop");
兼容IE代码：
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
< ![endif]-->
零散知识点
background-position:-70px -40px;
图片以容器左上角为参考向左偏移70px，向上偏移 40px，即图片的左边70px和上边的40px都在容器之外，容器内只显示剩下的部分。为负数是向右下。
css盒模型：
标准 w3c 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。
ie 盒子模型的范围也包括 margin、border、padding、content，和标准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 padding。
例：一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px。
用标准 w3c 盒子模型（也包括ie7以上）解释：
那么这个盒子需要占据的位置为：宽 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px。
盒子的实际大小(有背景颜色的区域)为：宽 1*2+10*2+200=222px、高 1*2+10*2+50=72px。
用ie 6及其以下盒子模型：
那么这个盒子需要占据的位置为：宽 20*2+200=240px、高 20*2+50=70px
盒子的实际大小为：宽 200px、高 50px。
HTML+CSS基础小笔记再整理
标签：asi top lan 优化 压缩包 居中 word creat style
原文地址：http://www.cnblogs.com/hello-web/p/7221414.html
