《HTML+CSS总结》由会员分享，可在线阅读，更多相关《HTML+CSS总结（29页珍藏版）》请在金锄头文库上搜索。
1、 HTML+CSS基础部分CSS样式重置body,h1,h2,h3,h4,h5,h6,p,dl,dd,ol,ul,form, pre,th,td,input,textarea,selectmargin:0;padding:0;textareaoverflow:auto;resize:none;tableborder-collapse:collapse;lilist-style:none;atext-decoration:none;imgborder:none;vertical-align:top;emfont-style:normal;.clear:aftercontent:;display:
2、block;clear:both;.clearzoom:1;Lesson0 PS基础常用快捷键： Ctrl+alt+shift+e 盖印可见图层三中图片格式应用JPG：网页中的大图，高清图（体积大）；GIF：网页中的小图标（动画图片）；PNG8：网页中的小图标；PNG24：图像中存在半透明效果的图片；PSD测量注意事项一般电脑会有宋体、微软雅黑两种字体宋体在XP下一般都是11乘以11，win7下是11乘以12文字不能小于12px，在谷歌下不支持Lesson11 代码初识2浅析HTML 代码编码格式文件的编码格式需要和代码的编码格式保持一致utf-8 国际标准gb2312 中文简体标准3样式位置
3、4 background详解background 背景background-attachment: fixed; 背景是否滚动background-color: gray; 背景颜色background-image: url(bg.jpg); 背景图background-repeat: no-repeat; 背景图是否重复background-position: center 0px; 背景图位置（数值可以为负数，可以为百分数）5 border padding详解边框样式：solid 实线dashed 虚线dotted 点线（IE6不兼容1px点线）（各个浏览器显示大于1px点线也不尽相同）6
4、 margin外边距详解margin 外边距外边距的问题：1、上下外边距会叠压；2、父子级包含的时候子级的margin-top会传递给父级； 7 盒模型和结构样式8 页面常见文本设置font-size 文字大小（一般均为偶数）text-indent 首行缩进（em缩进字符）（可以为负值）letter-spacing 字符间距 （也适用于汉字，可以为负数）word-spacing 单词间距（以空格为解析单位）9 页面常见样式总结font：font-style | font-weight | font-size/line-height | font-family；font和line-height同
5、时使用，font里面已经包括行高可能覆盖掉line-heightLesson21 img和a标签 图片（单标签）alt属性是图片占位符，是给百度搜索引擎抓取使用；a标签三个作用：链接/下载/锚点target 链接打开方式 blank 新窗口self 当前窗口 定义页面链接默认打开方式2 常见标签和SEO浅析常见标签Strong 强调（粗体）Em强调（斜体）dl 定义列表dt 定义列表标题dd 定义列表项SEO ：搜索引擎优化；部分方法：a、页面标签语义化；b、使用对SEO有利的标签：h1/h2/h3/strong/emc、提高页面关键词密度；3 基础选择符id选择符（#）群组选择符（，）cla
6、ss选择符（.）类型选择符(div)包含选择符（div p）通配符（*）4 选择符优先级基础选择符的优先级* 类型（1） class（10） id（100） style行间（1000） js同级样式默认后者覆盖前者5 a伪类详解伪类：伪类用于向被选中元素添加特殊的效果。（元素在特定情况下才具备的。）a四个伪类的顺序：link visited hover activeIE6不支持a以外其它任何标签的伪类；IE6以上的浏览器支持所有标签的hover伪类；Lesson31标签默认值样式重置2 标签基本特性和转换块的特征1、默认独占一行 2、没有宽度时，默认撑满一排3、支持所有css命令内嵌(内联、行
7、内)的特征1、同排可以继续跟同类的标签2、内容撑开宽度3、不支持宽高4、不支持上下的margin和padding5、 代码换行被解析3 inline-block特性和应用Inline-block的特点和问题特性：1、块在一行显示；2、行内属性标签支持宽高；3、没有宽度的时候内容撑开宽度问题：1、代码换行被解析；2、ie6 ie7 不支持块属性标签的inline-block;Cursor指针样式（规定要显示的光标的类型）Cursor：pointer | text | move Cursor:url（hand.cur），pointer3 前端规范p,dt,h标签里面不能嵌套块属性标签；Lesson
8、41 清浮动的原理（上）inline-block/float（浮动）回顾:inline-block 特性：1、块在一排显示2、内联支持宽高3、默认内容撑开宽度4、标签之间的换行间隙被解析（问题）5、ie6 ie7不支持块属性标签的inline-block（问题）float浮动： 1、块在一排显示2、内联支持宽高3、默认内容撑开宽度 4、脱离文档流5、提升层级半层Float/文档流float:left | right | none | inherit;文档流是文档中可显示对象在排列时所占用的位置。浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。2 清浮
9、动的原理（下）clear:left | right | both | none | inherit；元素的某个方向上不能有浮动元素clear:both; 在左右两侧均不允许浮动元素。3 清浮动清浮动方法：（1）clear （2）通过BFC1.加高问题：扩展性不好2.父级浮动问题：页面中所有元素都加浮动，margin左右自动失效（floats bad ！）3.inline-block 清浮动方法：问题：margin左右自动失效；4.空标签清浮动在浮动元素下加.clearheight:0;font-size:0;clear:both;问题：IE6 最小高度 19px；（解决后IE6下还有2px偏差
10、）在IE6下高度小于19px的元素，高度会被当做19px来处理解决办法：font-size:0;5.br清浮动在浮动元素下加问题：不符合工作中：结构、样式、行为，三者分离的要求。6.after伪类 清浮动方法（现在主流方法）.clear:aftercontent:;display:block;clear:both;.clearzoom:1;after伪类： 元素内部末尾添加内容；:aftercontent添加的内容; IE6，7下不兼容zoom 缩放 a、触发 IE下 haslayout，使元素根据自身内容计算宽高。Haslayout 根据元素内容的大小或者父级的大小来重新的计算元素的宽高b、
11、FF 不支持；在IE6、7下浮动元素的父级有宽度就不用清浮动7.overflow:hidden 清浮动方法；问题：需要配合 宽度 或者 zoom 兼容IE6 IE7；overflow: scroll | auto | hidden；overflow:hidden;溢出隐藏（裁刀！）Lesson5浮动问题在IE6、7下元素浮动要并在同一行的元素都要加浮动IE6双边距BUG（IE6下块属性标签浮动，并且有横向margin，横向margin加倍。）：a、IE6b、浮动c、横向margind、块属性标签（加display:inline;）IE6下 li部分兼容性问题： a、左右两列布局，右边右浮动IE
12、6 IE7下折行；(左边元素浮动)b、IE6 IE7 li 下元素都浮动 在IE6 IE7下li下方会产生几px间隙问题；解决方法：1.给li加浮动2.加vertical-align:topVertical-align/img问题vertical-align 垂直对齐方式a、加垂直对齐方式的同排元素都要加垂直对齐方式；b、垂直对齐方式可以解决元素下方间隙问题；图片下方间隙问题a、display:block; (改变标签本身特性)b、overflow:hidden; (必须知道图片高度)d、vertical-align (暂时最完美的方案)在IE6下高度小于十几px，高度会被当做十几px来处理解
13、决办法：overflow：hidden；min-width解决父级跟着body，子级宽度大于body的时候，给body设置最小宽度。Lesson71 相对定位position:relative; 相对定位a、不影响元素本身的特性；b、不使元素脱离文档流；c、如果没有定位偏移量，对元素本身没有任何影响；定位元素位置控制top/right/bottom/left 定位元素偏移量。2 绝对定位和定位层级position:absolute; 绝对定位a、使元素完全脱离文档流；b、使内嵌支持宽高；c、块属性标签内容撑开宽度；d、如果有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档发生偏移；e、相对定位一般都是配合绝对定位元素使用；z-index:number； 定位层级（层级问题比较多）a、定位元素默认后者层级高于前者；（包括相对定位和绝对定位）b、相对定位在不设置层级的情况下默认层级为0，没有脱离文档流。c、绝对定位在不设置层级的情况下默认层级也为0，但是它比不设置定位的元素的层级高。d、没有设置定位的元素，即使设置了层级，也不起作用。3绝对定位和应用4滤镜和遮罩弹窗遮罩滤镜/固定定位标准 不透明度：
