网页设计摘要.docx

流式布局一、百分号计算目标元素宽度 上下文元素宽度 = 百分比宽度二、em计算1、浏览器的默认字体大小是16px2、如果元素自身没有设置字体大小，那么元素自身上的所有属性值如“boder、width、height、padding、margin、line-height”等值，我们都可以按下面的公式来计算1 父元素的font-size 需要转换的像素值 = em值3、这一种千万要慢慢理解，不然很容易与第二点混了。如果元素设置了字体大小，那么字体大小的转换依旧按第二条公式计算，也就是下面的：1 父元素的font-size 需要转换的像素值 = em值那么元素设置了字体大小，此元素的其他属性，如“border、width、height、padding、margin、line-height”计算就需要按照下面的公式来计算：1 元素自身的font-size 需要转换的像素值 = em值设计分析布局分析首页、列表页、内容页面等拆分图纸网页的版式、颜色，做原料分离，包括尺寸坐标、颜色、背景图、装饰性的线框、特殊字体、装饰图片等；1、分离颜色，配色提取包括基本配色、普通链接配色和导航部分配色。1）基本配色：页面、分栏、表格等的背景色。2）普通配色：普通文字中间出现的链接，包括内容目录和文字内出现的链接等；3）导航部分配色：页面内栏目及导航条部分的配色。2、提取出组装页面用的布局尺寸、背景图、边框及装饰线、特殊插图等元件。1）提取尺寸：CSS盒模型中的边界（margin）、边框（border）、填充（padding）、宽度（width）、高度（height）以及XY坐标等。2）分离背景图：背景图一般包括大面积的重复图案区，还有一种情况是特殊样式的边框、阴影、装饰线等。3）分离图片：包括装饰性大图、特殊字体的标题或者导航菜单、特殊的小图标。浏览器兼容1、 div的垂直居中问题vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行。2、 margin加倍的问题，浮动IE产生的双倍距离设置为float的div在IE下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline; block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);3、 IE与CSS宽度和CSS高度的问题divIE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：#box width: 80px; height: 35px;htmlbody #box width: auto; height: auto; min-width: 80px; min-height: 35px;4、 页面的最小宽度min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个 放到 标签下，然后为div指定一个类,然后CSS这样设计：#containermin-width: 600px; width:expression_r(document.body.clientWidth600?600px:auto);第一个min-width是正常的；CSS制作但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。5、 DIV浮动IE文本产生3象素的bug左边对象浮动，右边采用外补丁的左边距来定位。右边对象内的文本会离左边有3px的间距#box float:left; width:800px;#left float:left; width:50%;#right width:50%;*html #left margin-right:-3px; /这句是关键6、 IE捉迷藏的问题当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。7、 float的自适应高度 作为外部 wrapper 的 div 不要定死高度,div CSS制作为了让高度能自动适应，要在wrapper里面加上overflow:hidden; 当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。例如某一个wrapper如下定义：.colwrapper overflow:hidden; zoom:1; margin:5px auto;8、 高度不能自适应 高度不能自适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或padding时。例：#box background-color:#eee; #box p margin-top: 20px;margin-bottom: 20px; text-align:center; p对象中的内容/p解决技巧：在P对象上下各加2个空的div对象CSS代码：.1height:0px;overflow:hidden;或者为DIV加上border属性。9、 IE6下为什么图片下有空隙产生 改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为vertical-align:top。10、 如何对齐文本与文本输入框 加上 vertical-align:middle;input width:200px;height:30px;border:1px solid red;vertical-align:middle;11、 无法定义1px左右高度的容器 IE6下这个问题是因为默认的行高造成的,解决的技巧也有很多,例如:overflow:hidden zoom:0.08 line-height:1px12、 超链接访问过后hover样式就不出现的问题被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: L-V-H-A13、 BOX模型解释不一致问题在FF和IE中的BOX模型解释不一致导致相差2px解决技巧：divmargin:30px!important;margin:28px; 注意这两个margin的顺序一定不能写反， important这个属性IE不能识别，但别的浏览器可以识别。14、 FF下文本无法撑开容器的高度 去掉height设置min- height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:height:auto!important;height:200px;min-height:200px;15、 浏览器对不同关键字的支持 !important 可被FireFox和IE7识别* 可被IE6、IE7识别_ 可被IE6识别*+ 可被IE7识别16、 CSS控制透明 IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60);FireFox：opacity:0.6;17、 FireFox设置Padding属性后会相应的增加Width和Height属性值IE不会用!important方法多定义一套Height和Width18、 当Content内容多时，即使parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动伸展 一个高度为1的空格,代码如下 19、 CSS的优先性 div .class div.class #id div#id #id.class div#id.class20、 IE6下overflow:hidden失效 当父元素的直接子元素或者下级子元素为position:relative属性的时候，父元素的overflow:hidden属性失效。解决方法:对父元素同样设置position:relative可以解决该BUG21、 FF和OPERA中按钮的行高属性 button的行高在Chrome/Safari/IE8等浏览器解析正确的line-height(用户自定的值“50px”);而在Firefox和Opera解析的line-height却是默认的值，只有“15px”。答案便是加上padding22、 定义链接的四种状态要注意先后顺序: Link Visited Hover Active 23、 用CSS控制cellspacing、cellpadding tableborder:0;margin:0;border-collapse:collapse;table tdpadding:0;24、 Line-height 行高：文本行的基线间的距离。在Opera内，行高将按照CSS定义的将行距除以2增加到内容区域的上下两边，而IE和Firefox则不是完全平分基线：并不是汉字的下端沿，而是英文字母x的下端沿行框：本行的一个虚拟的矩形框，其高度等于本行内所有元素中行高最大的值。只同本行内元素的行高有关，而和父元素的高度（height）无关25、 IE 6.0对于含有图片或者表单元等可替换行内元素的行高失效的问题 IE 7.0中，将半行距分别加在了图片的上下，而由于图片默认是基线对齐，因此文字的基线下移了，这显然不符合CSS中的规定。对于IE 6.0中行高失效的问题，需要使用CSS Hack手段来针对IE 6.0设定替换元素的上下补白来修正。26、 文字和图片在垂直方向并不是沿中线居中，而是沿基线对齐元素默认的垂直对齐方式为基线对齐（vertical-align: baseline）【豆豆猫的窝】垂直对齐属性只对行内元素有效。顶端对齐（vertical-align : top）文本顶端对齐（vertical-align : text-top）27、 浏览器对于含小数值PX（像素）解析的差异 IE与其他浏览器对于小数像素的解析差异：IE对小数像素采取取整的策略，类似于Math.floor属性，就算你大小为11.999999像素，最后还是显示11像素文字的大小（已测试）；而IE8、Chrome、Firefox等一些浏览器则采取四舍五入的策略，类似于Math.round属性，11.4像素就表现为11像素，11.5像素就表现为12像素（已测试）28、 大小不固定的图片、多行文字的水平垂直居中 将a标签默认的inline属性设置为inline-block属性，这样a标签既支持宽度，又支持vertical-align:middle，配合img的vertical-align:middle就可以实现图片的水平垂直居中显示了。adisplay:inline-block;width:1.2em;font-size:128px;text-align:center;vertical-align:middle;imgvertical-align:middle;29、 复选框单选框与文字对齐 在chrome谷歌浏览器下，radio单选框的默认margin值是：margin:3px 3px 0 5px;checkbox复选框的margin值为margin:3px 3px 3px 4px;而IE浏览器下似乎没有margin值，但是对margin敏感。这是不用hack解决对齐问题的难点之一。vertical-align:-3px; margin-top:-2px; margin-bottom:1px;30、 浮动 本质定义为“包裹与破坏”,浮动破坏了正常的line boxes。包裹是让标签占据的空间水平收缩，破坏是破坏的inline box。inline boxes是高度形成的基础，浮动破坏了inline boxes也就没有高度可言了，才能让其他inline boxes元素重新整合，环绕浮动元素排列。31、 纯CSS实现侧边栏/分栏高度自动相等 margin-bottom:-3000px; padding-bottom:3000px;32、 (relative/absolute)定位 absolute：包裹性，就是让元素inline-block化。破坏性不仅让高度塌陷，宽度也是塌陷的。以天空或其他外界限制计算瞬移位置。可以一个人战斗。正业之元素隐藏，等高布局。margin定位元素绝对定位元素重叠的误会relative：幻影瞬移，只能通过自身所在位置计算瞬移位置。虽是凡夫肉体，但是却有只有神魔才有的“纵云梯”技能，亦称“垂直升空”的本事。借助z-index这把御剑。天生可以限制position:absolute在left/top翅膀下瞬间移动的能力。IE6浏览器下，haslayout下的元素负margin