网页设计摘要

发布时间：2018-06-30 13:34:09





流式布局

一、百分号计算

目标元素宽度÷上下文元素宽度=百分比宽度

二、em计算

1、浏览器的默认字体大小是16px

2、 如果元素自身没有设置字体大小，那么元素自身上的所有属性值如

“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高度的问题div

IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。

比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，

可以这样：

#box{ width: 80px; height: 35px;}

html>body #box{

width: auto; height: auto;

min-width: 80px; min-height: 35px;

}

4、 页面的最小宽度

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div>放到<body> 标签下，然后为div指定一个类,

然后CSS这样设计：

#container{

min-width: 600px;

width:expression_r(document.body.clientWidth<600?"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代码：.1{height: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:1px

12、 超链接访问过后hover样式就不出现的问题

被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: L-V-H-A

13、 BOX模型解释不一致问题

在FF和IE中的BOX模型解释不一致导致相差2px

解决技巧：div{margin: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和Width

18、 当Content内容多时，即使parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动伸展

一个高度为1的空格,代码如下

19、 CSS的优先性

div< .class

20、 IE6下overflow:hidden失效

当父元素的直接子元素或者下级子元素为position:relative属性的时候，父元素的overflow:hidden属性失效。解决方法:对父元素同样设置position:relative可以解决该BUG

21、 FF和OPERA中按钮的行高属性

button的行高在Chrome/Safari/IE8等浏览器解析正确的line-height(用户自定的值“50px”);而在Firefox和Opera解析的line-height却是默认的值，只有“15px”。答案便是加上padding

22、 定义链接的四种状态要注意先后顺序: Link Visited Hover Active

23、 用CSS控制cellspacing、cellpadding

table{border:0;margin:0;border-collapse:collapse;}

table td{padding: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就可以实现图片的水平垂直居中显示了。

a{

display:inline-block;width:1.2em;font-size:128px;

text-align:center;vertical-align:middle;

}

img{ vertical-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超出父标签的部分会被隐藏掉。

absolute+margin（左上角元素定位，作用于当前元素）

float+relative（右上角元素定位，作用于当前元素）

relative+absolute（右下角元素定位，直接父标签+当前定位元素）

33、 (relative/absolute)定位

空间占据：

回流与渲染：

display:none隐藏产生reflow和repaint(回流与重绘)，而visibility:hidden没有这个影响前端性能的问题

株连性：

display:none就是“株连性”明显的声明：一旦父节点元素应用了display:none，父节点及其子孙节点元素全部不可见，而且无论其子孙元素如何不屈地挣扎都无济于事。

34、 CSS布局实现与文字鼠标选择的可用性

CSS布局与文字鼠标选择之间的关系相当复杂，例如，一个简单的position:relative属性的添加，会有相当大的选择差异。例如最后一个margin负值定位的例子，增加相对定位属性后（虽然效果没有一丁点差异），实际上左边标题文字只能块选了！

浮动是魔鬼。不仅仅在布局上，而且是目前文字鼠标选择可用性的罪魁祸首！

绝对定位以及相对定位不是好鸟，尽量避免使用，因为证据表明，其也会影响文字的鼠标选择。

文字选择性最好的都是以自然方式呈现的文字。即以流体呈现的文字，没有影响其本身元素水平的CSS呈现。margin负值的定位就是最佳的实现方式，两端文字内容都是以自然呈现方式展示的。

网页设计摘要

推荐内容

相关推荐