网页设计边距，网页设计边距留多少

在互联网高速发展的今天，网页设计已经成为企业品牌形象展示的重要窗口。一个优秀的网页设计，不仅需要美观的界面、丰富的内容，更需要合理的布局。而网页设计边距作为布局的重要组成部分，对整个网页的视觉效果有着至关重要的影响。本文将从网页设计边距的定义、作用、应用等方面进行探讨，以期为设计师们提供有益的参考。

一、网页设计边距的定义

网页设计边距，即网页内容与浏览器的边界之间的空白区域。它包括上边距、右边距、下边距和左边距。边距的设置，有助于使网页内容更加整洁、美观，提升用户体验。

二、网页设计边距的作用

1. 视觉平衡：合理的边距设置可以使网页内容在视觉上达到平衡，避免过于拥挤或空旷，使浏览者在阅读时感到舒适。

2. 突出重点：通过调整边距，可以将网页中的重点内容凸显出来，引导浏览者的视线，提高信息的传达效果。

3. 提升用户体验：适当的边距设置可以使网页内容更加易于阅读，降低浏览者的视觉疲劳，提升用户体验。

4. 增强品牌形象：统一的边距设置可以使网页风格更加协调，有助于树立企业品牌形象。

三、网页设计边距的应用

1. 页面布局：在设计网页布局时，应根据内容的重要性、阅读顺序等因素，合理设置边距。例如，将重要内容放置在页面中心，适当扩大边距，以突出重点。

2. 图片排版：图片是网页设计中的重要元素，合理的边距设置可以使图片更加美观。例如，在图片周围设置一定的边距，可以使图片与文字、背景等元素相互协调。

3. 文字排版：文字是网页内容的核心，边距的设置对文字排版有着重要影响。适当扩大行间距、段落间距，可以使文字更加易于阅读。

4. 响应式设计：随着移动设备的普及，响应式设计成为网页设计的重要趋势。在响应式设计中，边距的设置要充分考虑不同设备屏幕尺寸的差异，确保网页在不同设备上均能保持良好的视觉效果。

四、权威资料引用

1. 《网页设计原理与应用》一书中提到：“边距是网页设计中不可或缺的元素，它关系到网页的整体布局和视觉效果。”

2. 《用户体验设计》一书中指出：“合理的边距设置可以降低浏览者的视觉疲劳，提升用户体验。”

网页设计边距作为布局的重要组成部分，对整个网页的视觉效果有着至关重要的影响。设计师们应充分认识边距的作用，合理设置边距，以打造出美观、实用的网页作品。在未来的网页设计中，边距的应用将更加注重用户体验和视觉效果，为用户提供更好的浏览体验。

网页尺寸多少合适

网站 首页页面宽度 px

Yahoo! 950

淘宝 950

MySpace 960

新浪 950

网易 960

Live Search 958

搜狐 950

优酷 960

AOL 960

随着电脑的发展，显示器是越来越大，分辨率也是越来越高，为了照顾所有不同显示器的用户，把网站的制作尺寸规范就定在1024*768下，网页宽度保持在1002-1004以内，高度还是以根据需要制作的内容在定，如果只想网页只在一屏内显示，不要上下滚动条， 一般高度是600-635像素之间, 就不会出现垂直滚动条。

在ps里面做网页可以在1003*600状态下显示全屏，页面的下方也不会出现滑动条，尺寸为1003*650像素左右 。

1、在IE6.0下，宽度为显示器分辨率减21，比如1024的宽度-21就变成1003。但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框。

2、在Firefox下，宽度的分率辨减19。比如1024的宽度-19就变成1005

3、在Opear下，宽度的分率辨减23。比如1024的宽度-23就变成1001

网站页面大小其实并没有一个统一的标准，不过网站建设好之后要记得测试各浏览器的兼容性，很可能在IE没问题的情况下，其他浏览器出现错位的情况。

常规页边边距是多少

常规页边边距通常是1英寸（2.54厘米）左右，但这也可能因不同的文档类型、出版要求和个人偏好而有所变化。

在印刷品中，页边边距的设定对于整体布局和视觉效果至关重要。合适的页边边距不仅能使文本和图像在页面上呈现出专业而整洁的外观，还能确保读者在阅读时拥有舒适的视觉体验。一般来说，印刷品的标准页边边距为1英寸，这既能保证文本不会过于拥挤在页边，也能确保在裁剪或装订时不会损失重要内容。

然而，在数字文档如电子书或网页设计中，页边边距的设定则可能更加灵活。设计师可能会根据内容需求、屏幕尺寸和用户阅读习惯等因素来调整页边边距。例如，在网页设计中，为了增加内容的可视区域或突出某些元素，设计师可能会选择较小的页边边距。而在电子书中，为了适应不同设备的屏幕尺寸和阅读模式，页边边距也可能会有所调整。

此外，个人或组织在创建特定文档时，也可能根据自己的需求和审美来设定页边边距。例如，一份正式的报告可能需要更宽的页边边距以体现其严谨性和专业性；而一份创意海报则可能通过巧妙的页边边距设计来吸引观众的注意力。

总之，常规页边边距的设定因各种因素而异，但无论在哪种情况下，都应确保页边边距既能满足功能需求，又能提升整体美感。

网页设计中让元素居中的方法

我们在进行Web前端代码编辑时，经常会遇到元素需要居中的问题，为此，特地总价了一下几种让元素居中的方法。

一、水平居中（text-align：center;） 这个属性在没有浮动的情况下，我们可以将块级元素转换为inline/inline-block，然后其父元素加上text-align:center;属性就可以将其居中。如果是行内元素（比如span、img、a等）直接在父元素上添加text-align:center;属性即可。

二、使用margin:0 auto;水平居中 前提： 给元素设定了宽度和具有display：block；的块级元素。 让一个DIV水平居中，只要设置了DIV的宽度，然后使用margin：0 auto，css自动算出左右边距，使得DIV居中。

三、定位实现居中(需计算偏移值) 原理: 通过定位使元素左上角居中，再通过偏移值margin调整使元素中心居中。缺点：高度宽度需事先知道。 div class="absolute_p1" div class="absolute_c1"/div /div .absolute_p1 { position: relative; width: 200px; height: 200px;} .absolute_p1 .absolute_c1 { width: 100px; height: 100px; position: absolute; /* fixed 同理 */ left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; /* 需根据宽高计算偏移量 */} 该方法普遍使用，但是前提必须知道元素的宽度和高度。如果当页面的宽高是动态的，比方说页面需要弹出一个DIV层必须要居中显示，DIV的内容是动态的，所以宽高也是动态的，这是可以用jquery解决居中。

四、jquery实现水平和垂直居中。 jquery实现水平和垂直剧中的原理是通过jquery设置div的css，获取div的左，上的边距偏移量，边距偏移量的算法就是用页面窗口的宽度减去该div的宽度，得到的值再除以2即左偏移量，右偏移量算法相同。注意div的css设置要在resize（）方法中完成，就是每次改变窗口大小是，都要执行设置div的css，代码如下： $(function(){ $(window).resize(function(){ $('.mydiv').css({ position:'absolute', left:($(window).width()-$('.mydiv').outerWidth())/2, top:($(window).height()-$('.mydiv').outerHeight())/2 }); }); }) 此方法的好处就是不需要知道div 的具体宽度和高度，直接用jquery就可以实现水平和垂直居中，并且兼容各种浏览器。这个方法在很多的弹出层效果中应用。

五、 定位实现居中(不需计算偏移值，margin：auto；和定位搭配使用) 这种方法好处是行内元素和块级元素都适用,但是需要知道元素本身的宽度。 div class="parent" span class="child"margin:auto;和定位使用/span /div .parent{ border: 1px solid #002FFF; width: 400px; height: 400px; position: relative; } .child{ width: 200px; height: 120px; background: #ddd; text-align: center; line-height: 120px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }

六、calc和定位的组合使用 calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。 以前我们可以使用box-sizing:border-box;来设置盒子的属性为不加上边距。现在我们又多了一个选择了。但要注意，两者只能使用一个哦，否则就会造成冲突了。 calc使元素居中的原理和负margin是一样的，calc 允许你基于当前的页面布局计算尺寸。在上面的简单计算中， 50% 是容器元素的中心点，但是如果只设置50%会使图片的左上角对齐div的中心位置。 我们需要把图片向左和向上各移动图片宽高的一半。计算公式为： top: calc(50% - (w / 2)); left: calc(50% - (h / 2)); /*css*/ div{ border:1px solid red; width: 200px; height: 200px; position: relative; } div span{ width: 150px; height: 50px; background: #ddd; position: absolute; top: calc(50% - (50px / 2)); left: calc(50% - (150px / 2)); } !--HTML-- div span我是span元素/span /div

七、使用css3的新属性transform:translate(x,y)属性 这个方法可以不需要设定固定的宽高，在移动端用的会比较多，在移动端css3兼容的比较好 原理: 通过定位使元素左上角居中，再通过 translate 位移元素使之中心居中，由于 translate支持百分比，所以也就不用自己算偏移量了

八、使用flex居中 使用flex居中不需要知道元素本身宽高以及元素的属性。 /*css*/ div{ border:1px solid red; width: 200px; height: 200px; display: flex; justify-content: center;/* 水平居中*/ align-items: center;/* 垂直居中*/ } div span{ background: #ddd; } !--HTML-- div span我是span元素/span /div

九、使用table-cell居中 使用 display: table-cell, 而不是使用table标签; 可以实现水平居中和垂直居中，但是这种方法需要添加额外的元素作为外部容器。 /*css*/ .center-aligned{ border:1px solid red; width: 200px; height: 200px; display: table; } .center-core{ display: table-cell; text-align: center; vertical-align: middle; } span{ background: #ddd; } !--HTML-- div class="center-aligned" div class="center-core" span我是span元素/span /div /div