HTML+CSS总结

HTML+CSS基础部分

CSS样式重置

body,h1,h2,h3,h4,h5,h6,p,dl,dd,ol,ul,form,

pre,th,td,input,textarea,select{margin:0;padding:0;} textarea{overflow:auto;resize:none;} table{border-collapse:collapse;} li{list-style:none;} a{text-decoration:none;}

img{border:none;vertical-align:top;} em{font-style:normal;}

.clear:after{content:\.clear{zoom:1;}

Lesson0 PS基础 常用快捷键：

Ctrl+alt+shift+e 盖印可见图层

三中图片格式应用

JPG：网页中的大图，高清图（体积大）； GIF：网页中的小图标（动画图片）； PNG8：网页中的小图标；

PNG24：图像中存在半透明效果的图片；

1

PSD测量注意事项

一般电脑会有宋体、微软雅黑两种字体

宋体在XP下一般都是11乘以11，win7下是11乘以12 文字不能小于12px，在谷歌下不支持 Lesson1 1 代码初识 2浅析HTML

3样式位置 4 background详解 background 背景

background-attachment: fixed; 背景是否滚动 background-color: gray; 背景颜色 background-image: url(bg.jpg); 背景图 background-repeat: no-repeat; 背景图是否重复

background-position: center 0px; 背景图位置（数值可以为负

2

数，可以为百分数）

5 border padding详解 边框样式： solid 实线 dashed 虚线

dotted 点线（IE6不兼容1px点线）（各个浏览器显示大于1px点线也不尽相同）

6 margin外边距详解 margin 外边距 外边距的问题：

1、上下外边距会叠压；

2、父子级包含的时候子级的margin-top会传递给父级；

7 盒模型和结构样式

8 页面常见文本设置

font-size 文字大小（一般均为偶数） text-indent 首行缩进（em缩进字符）（可以为负值）

letter-spacing 字符间距 （也适用于汉字，可以为

3

负数）

word-spacing 单词间距（以空格为解析单位）

9 页面常见样式总结

font：font-style | font-weight | font-size/line-height | font-family；

font和line-height同时使用，font里面已经包括行高可能覆盖掉line-height Lesson2 1 img和a标签

a标签三个作用：链接/下载/锚点 target 链接打开方式 blank 新窗口 self 当前窗口

2 常见标签和SEO浅析

4

常见标签

Strong 强调（粗体） Em强调（斜体）

dl 定义列表 dt 定义列表标题 dd 定义列表项

SEO ：搜索引擎优化；

部分方法：

a、页面标签语义化；

b、使用对SEO有利的标签：h1/h2/h3/strong/em?? c、提高页面关键词密度；

3 基础选择符 id选择符（#） 群组选择符（，） class选择符（.） 类型选择符(div??) 包含选择符（div p） 通配符（*）

5

4 选择符优先级 基础选择符的优先级

* < 类型（1）< class（10）< id（100）< style行间（1000）< js

同级样式默认后者覆盖前者

5 a伪类详解

伪类：伪类用于向被选中元素添加特殊的效果。才具备的。）

a四个伪类的顺序：

link visited hover active

IE6不支持a以外其它任何标签的伪类； IE6以上的浏览器支持所有标签的hover伪类； Lesson3

1标签默认值样式重置 2 标签基本特性和转换 块的特征

1、默认独占一行

6

（元素在特定情况下

2、没有宽度时，默认撑满一排 3、支持所有css命令

内嵌(内联、行内)的特征

1、同排可以继续跟同类的标签 2、内容撑开宽度 3、不支持宽高

4、不支持上下的margin和padding 5、

3 inline-block特性和应用 Inline-block的特点和问题 特性：

1、块在一行显示； 2、行内属性标签支持宽高； 3、没有宽度的时候内容撑开宽度 问题：

1、代码换行被解析；

2、ie6 ie7 不支持块属性标签的inline-block;

Cursor指针样式（规定要显示的光标的类型）

7

代码换行被解析

Cursor：pointer | text | move ?? Cursor:url（hand.cur），pointer

3 前端规范

p,dt,h标签里面不能嵌套块属性标签； Lesson4

1 清浮动的原理（上） inline-block/float（浮动） 回顾:inline-block 特性： 1、块在一排显示 2、内联支持宽高 3、默认内容撑开宽度

4、标签之间的换行间隙被解析（问题）

5、ie6 ie7不支持块属性标签的inline-block（问题）

float浮动： 1、块在一排显示 2、内联支持宽高 3、默认内容撑开宽度 4、脱离文档流 5、提升层级半层

8

Float/文档流

float:left | right | none | inherit;

文档流是文档中可显示对象在排列时所占用的位置。

浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。

2 清浮动的原理（下）

clear:left | right | both | none | inherit；元素的某个方向上不能有浮动元素

clear:both; 在左右两侧均不允许浮动元素。 3 清浮动

清浮动方法：（1）clear （2）通过BFC 1.加高

问题：扩展性不好

2.父级浮动

问题：页面中所有元素都加浮动，margin左右自动失效（floats bad ！）

3.inline-block 清浮动方法：

9

问题：margin左右自动失效；

4.空标签清浮动

在浮动元素下加 .clear{height:0;font-size:0;clear:both;}

问题：IE6 最小高度 19px；（解决后IE6下还有2px偏差） 在IE6下高度小于19px的元素，高度会被当做19px来处理 解决办法：font-size:0;

5.br清浮动

在浮动元素下加

问题：不符合工作中：结构、样式、行为，三者分离的要求。

6.after伪类 清浮动方法（现在主流方法）

.clear:after{content:'';display:block;clear:both;} .clear{zoom:1;}

after伪类： 元素内部末尾添加内容；

:after{content\添加的内容\，7下不兼容 zoom 缩放

a、触发 IE下 haslayout，使元素根据自身内容计算宽高。 Haslayout 根据元素内容的大小或者父级的大小来重新的计算元素

10

的宽高

b、FF 不支持；

在IE6、7下浮动元素的父级有宽度就不用清浮动

7.overflow:hidden 清浮动方法；

问题：需要配合 宽度 或者 zoom 兼容IE6 IE7； overflow: scroll | auto | hidden； overflow:hidden;溢出隐藏（裁刀！） Lesson5 浮动问题

在IE6、7下元素浮动要并在同一行的元素都要加浮动

IE6双边距BUG（IE6下块属性标签浮动，并且有横向margin，横向margin加倍。）： a、IE6 b、浮动 c、横向margin

d、块属性标签（加display:inline;） IE6下 li部分兼容性问题：

11

a、左右两列布局，右边右浮动IE6 IE7下折行；(左边元素浮动) b、IE6 IE7 li 下元素都浮动 在IE6 IE7下li下方会产生几px间隙问题；

解决方法：1.给li加浮动

2.加vertical-align:top

Vertical-align/img问题 vertical-align 垂直对齐方式

a、加垂直对齐方式的同排元素都要加垂直对齐方式； b、垂直对齐方式可以解决元素下方间隙问题；

图片下方间隙问题

a、display:block; (改变标签本身特性) b、overflow:hidden; (必须知道图片高度) d、vertical-align (暂时最完美的方案)

在IE6下高度小于十几px，高度会被当做十几px来处理 解决办法：overflow：hidden；

min-width解决父级跟着body，子级宽度大于body的时候，给body设置最小宽度。 Lesson7

12

1 相对定位

position:relative; 相对定位 a、不影响元素本身的特性；

b、不使元素脱离文档流；

c、如果没有定位偏移量，对元素本身没有任何影响；

定位元素位置控制

top/right/bottom/left 定位元素偏移量。

2 绝对定位和定位层级

position:absolute; 绝对定位 a、使元素完全脱离文档流； b、使内嵌支持宽高； c、块属性标签内容撑开宽度；

d、如果有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档发生偏移；

e、相对定位一般都是配合绝对定位元素使用；

z-index:[number]； 定位层级（层级问题比较多）

a、定位元素默认后者层级高于前者；（包括相对定位和绝对定位） b、相对定位在不设置层级的情况下默认层级为0，没有脱离文档流。

13

c、绝对定位在不设置层级的情况下默认层级也为0，但是它比不设置定位的元素的层级高。

d、没有设置定位的元素，即使设置了层级，也不起作用。 3绝对定位和应用 4滤镜和遮罩弹窗 遮罩滤镜/固定定位

标准 不透明度： opacity:0~1;

IE 滤镜： filter:alpha(opacity=0~100);

Body，html{height:100%;} 在IE6下，给body和html加上高度

5其他定位和定位问题 position:fixed； 固定定位

与绝对定位的特性基本一致，差别是始终相对整个文档进行定位； 问题：IE6不支持固定定位；

定位其他值：

position:relative | absolute | fixed | static | inherit; position:relative;

在 IE6 下父级的 overflow:hidden; 包不住子级的relative;

14

position:absolute;

在 IE6 下定位元素的父级宽高都为奇数那么在 IE6 下定位元素的 right 和 bottom 都有1像素的偏差。(宽度为奇数时，right有1px误差；高度为奇数时，bottom有1px的误差。)

position:absolute; 绝对定位元素子级的浮动可以不用写清浮动方法；(仍会影响后面布局)

position:fixed; 固定定位元素子级的浮动可以不用写清浮动方法；（IE6不兼容） Lesson8

1表格标签的特性 1、 2、 3、 4、 5、

2单元格合并和表格实例

colspan 属性规定单元格可横跨的列数。 rowspan 属性规定单元格可横跨的行数。

15

不要给table、th、td以外的表格标签加样式 单元格默认平分table宽度 Table决定了整个表格的宽度

Table里面的单元格宽度会被转换成百分比 表格里面的每一列必须有宽度

3表单元素以及样式重置 form 表单

password 密码 radio 单选 checkbox 复选 submit 提交 不常用

reset 重置 image 图片 file 上传 hidden 隐藏

label 标签为 input 元素定义标注

select/option 下拉选框 对高度的支持不兼容；

16

textarea 文本域

各个浏览器下的默认滚动条显示不兼容 css3新增 resize 调整尺寸属性；

表单元素属于inline-block元素，如果要让他们并在一起居中，用vertical-align:middle; 加一个空的标签设置高

4 表单的问题 表单元素兼容性问题 IE6下input背景滚动； Lesson9 1 滑动门（一） 滑动门：

滑动门并不是一项全新的技术，它是利用背景图像的可层叠性，并允许他们在彼此之上进行滑动，以创造一些特殊的效果。

扩展要求高，图片比较大的 用三层嵌套 扩展要求不高，图片比较小的 用二层嵌套

2滑动门（二）

17

元素的宽度由内容撑开 Display：inline； Display：inline-block; Float

Position:absolute; Position:fixed;

3滑动门（三）

4 CSS精灵 CSS精灵 优点：

利用CSS精灵能很好地减少了页面的http请求次数，从而大大的提高了页面的性能，这也是CSS精灵最大的优点。 减少图片大小

CSS精灵 缺点： 降低开发效率 维护难度加大 Lesson10 1 兼容性1

在IE6下，元素浮动，如果宽度需要内容撑开，就给里边的块元素都

18

加浮动

IE6下最小高度问题

在IE6下，元素的高度小于十几px时候，会被当做十几px处理 解决办法：overflow：hidden；(只是隐藏了超出部分)

1px dotted 在IE6下不支持（显示为虚线） 大于1px支持 解决办法：切背景平铺

在IE6下解决margin传递要触发haslayout overflow:hidden; zoom:1;

在IE6下父级有边框的时候，子元素margin值消失 解决办法：触发父级的haslayout

2 兼容性2 IE6下双边距bug

在IE6下，块元素有浮动和横向margin值，横向的margin值会被放大成两倍

解决办法：display：inline；

在IE6、7下，li本身没浮动，但是li的内容有浮动，li下边就会产生一个间隙

19

解决办法：1给li加浮动

2给li加vertical-align

当IE6下最小高度问题，和 li的间隙问题共存的时候，给li加浮动

当一行子元素占有的宽度之和和父级的宽度相差超过3px，或者有不满行状态的时候，最后一行子元素的下margin在IE6下就会失效(包括3px)

IE6下的文字溢出bug

子元素的宽度和父级的宽度相差小于3px的时候，两个浮动元素中间有注释或者内嵌元素

解决办法：用div把注释或者内嵌元素用div包起来(这种情况很特殊)

3 兼容性3

当浮动元素和绝对定位元素是并列关系，并且叠在一起时候，在IE6下绝对定位元素会消失

解决办法：给定位元素外面包个div

在IE6、7下，子元素有相对定位的话，父级的overflow包不住子级

20

元素

解决办法：给父级也加相对定位

在IE6下，绝对定位元素的父级宽高是奇数的时候，元素的right值和bottom值会有1px的偏差

不要给tr和tbody同时加样式，如果同时加，在IE6下，只显示tr的样式 thead同理

在IE6、7下，输入类型的表单控件上下各有1px的间隙 解决办法：给input加浮动

在IE6、7下，输入类型的表单控件加border:none无效;(用border:0可以解决)

解决办法：重置input的背景

在IE6、7下，输入类型的表单控件输入问题的时候，背景图片会跟着一块移动

解决办法：把背景加给父级

元素浮动之后 能设置宽度的话 就给元素加宽度 如果需要宽度是内容撑开 就给它里边的块元素加上浮动；

21

Lesson11 1 兼容性1 PNG24 兼容性问题 IE6不支持png24 图片。

解决方案：1、JS插件(问题:不能处理body之上png24)

2、原生滤镜

_background:none;_filter :progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\

html条件注释语句(在IE9以上不起作用)

css hack

hack 黑客？ （原意：修改）

针对不同的浏览器写不同的CSS 样式的过程，就叫CSS hack! \\9 所有的IE10及之前 + * IE7及ie7之前的ie浏览器认识 _IE6及ie6之前的ie浏览器认识

22

样式优先级、提升样式优先级

默认 < 类型 < class < id < style(行间)

在IE6下 在important后边再加一条同样的样式，会破坏掉important的作用，按照默认的优先级顺序来走

2 兼容性2

圣杯布局（双飞翼布局）

左右宽度固定，中间宽度自适应伸缩；并且中间先加载 等高布局

左右两列高度自适应扩展，并且相等

在IE6下，使用margin负值超出父级的部分会被截掉 解决办法：给这个元素加相对定位

Lesson 12 1 HTML进阶1 热区

shape=\

23

coords=\

href=\

shape=\

coords=\

map 热区 area 点击区域

shape = “circle”圆型 coords =“圆心点X，圆心点Y，圆的半径”

shape = “rect” 矩形 coords = “矩形左上角X，矩形左上角Y，矩形右下角X，矩形右下角Y”

shape = “poly”多边形 coords = “第一个点X，第一个点Y，第二个点X，第二个点Y，?”

data uri

优点：减少HTTP请求数；

缺点：无法被重复利用；会使文件变大

http://dancewithnet.com/lab/2009/data-uri-mhtml/create/1376100722.php iframe

iframe的样式设置问题

24

frameborder = “0”；scrolling = “no”；

flash引入 Flash

插件

wmode=\” 让背景透明

在页面省引入视频

方法一：借助DW里面的插入flv

方法二：先把视频传到优酷网站，然后把html地址复制到embed标签里面

2 HTML进阶2 词内断行和省略号

text-overflow （clip | ellipsis） 在最后加上省略号 white-space:nowrap 文字不换行

word-break:break-all （所有文字顺序折行） word-wrap:break-word（溢出文字折行）

25

盒模型的怪异模式

在IE6、7、8下不设置文档声明的时候 页面的盒模型解析 就会进入怪异模式

CSS3中新属性设置盒子模型 box-sizing:border-box content-box;

3 HTML进阶3

用absolute模拟出来固定定位（只适合面试）

把文档的滚动条隐藏掉，把滚动条加到body身上，让绝对定位跟着文档走。

css模拟固定定位（不建议使用）

expression(eval(document.documentElement.scrollTop+(document.documentElement.clientHeight-this.offsetHeight)/2)); 未知宽高的img居中问题

方法一：设置vertical-align: middle;

方法二：把父级设置为表格，子级设置为单元格，在IE6下使用绝对定位和相对定位

li的里分为左右两块元素，右边元素一直跟在左侧内容后边并距离左侧元素10px间距，左侧元素宽度由左侧内容撑开。如果左右两侧内容总宽度超出了li宽度，就把左侧多出的文字隐藏掉

26

|

Lesson 13 1、

HTML整站规划

服务器 路径

（1）网站的加载速度

5s之内打开，用户流失基本在1%以下，超过了5s之后，每秒流失1%到2% ，30s流失80%到90% 最好保持在150k以下

（2）请求次数和服务器压力 （3）后期维护 （4）样式的通用性

2、HTML整站规划

样式表划分：重置样式区，共同样式区、其他样式区，把首页单独列出来，方便后期维护 命名：

根据每块元素的主题 或者功能、在页面上的位置，可以加前缀 驼峰命名 从第二个单词开始每个单词的首字母大写 写包含样式的时候能找到这个元素并且不影响其他元素即可

登录条：loginBar 标志：logo 侧栏：sideBar

27

广告：banner 子导航：subNav 子菜单：subMenu 搜索：search 滚动：scroll

标签页：tab 文章列表：list 提示信息：msg

小技巧：tips 栏目标题：title 加入：joinus

指南：guild 服务：service 热点：hot 新闻：news 下载：download 注册：regsiter

状态：status 按钮：btn 投票：vote 合作伙伴：partner 友情链接：friendLink 版权：copyRight 商 标：label 顶导航：topnav 边导航：sidebar 左导航：leftsideBar 右导航：rightsideBar

标 语：banner 菜单内容1： menu1Content

菜单容量： menuContainer 子菜单： submenu

边导航图标：sidebarIcon 注释： note

面包屑：breadCrumb(即页面所处位置导航提示)

容器：container 内容：content 搜索：search

28

登陆：login 功能区： shop(如购物车，收银台) 当前：current 3、HTML整站规划 4、HTML整站规划

29

本文来源：https://www.bwwdw.com/article/rayo.html