html页面出现空白的原因很多。下面举一个空白的例子：
例子：
图一：现在所示的是有边距的情况。
图二：在head标签中加入“<style> body,p{margin: 0} </style>”后的情况
总结：html标签很多都有默认元素，需要一开始就重写这些元素的外边距或者内边距；例如：*{margin：0；padding：0}
你这是样式css跟div标签的问题；解决方案：（1）用火狐或谷歌浏览器打开dw页面编辑的页面，需要前端页面查看bug（
页面有10个像素左右的多余白边）单机右键查看元素
(2)这是可以看到左边是div标签嵌套的样式，右边是对应div标签规范的css样式（简称页面空间框架）
（3）这个需要前台页面调试好，再去css样式表里改写。
参考样式代码：
html是一种标记语言不是编程语言（.html .htm)
<html></html>：网页标记
<head></head>:网页头部标记
<title></title>:网站的标题
<body></body>:网站内容区域
<br/>:换行符
<p></P>:分段符
<hr/>:水平直线
<center></center>:居中
<meta name="keywords" content="这是网站搜索关键字"/>
<meta name="description" content ="网站的描述信息"/>
meta:元标签
keywords：关键字
description：描述
content：内容
空格符号
background:#000背景(图片或颜色)
width:100px宽度
height:200px高度
color:#ff3300文字颜色
font-family:"微软雅黑"字体
font-size:24px文字大小
font-weight:bold文字加粗
border:1px solid #ff3300边框
border-radius:25px圆角边框
line-height:30px行高
text-align:center文字对齐(center居中、left居左、right居右)
float:left浮动（横排/left/right）
margin:10px外边距(top上、右right、下bottom、左left)
padding:20px内边距(top上、右right、下bottom、左left)
text-decoration:none连接文字的下滑线
display:block显示,陈列
list-style-type:none列表样式
list-style:none列表样式
text-indent:30px文字缩近
display 属性规定元素应该生成的框的类型。
display:none此元素不会被显示。（隐藏元素内容）
display:block此元素将显示为块级元素，此元素前后会带有换行符。（使元素换行）
display:inline默认。此元素会被显示为内联元素，元素前后没有换行符。（元素内容不换行）
display:inline-block行内块元素。（块换行）
overflow:hidden 内容会被修剪，并且其余内容是不可见的。（隐藏多出的内容）
position 定位:
relative 相对
absolute 绝对
position: relative相对定位.dingwei{ position: relativeleft: -30pxtop: 20px}
position: absolute绝对定位.dingwei{ position: absoluteleft: 30pxtop: 20px}
top 上
right 右
bottom 下
left 左
center 居中
solid 实线
dashed 虚线
bold 加粗
auto 自动
none 没有样式
normal 正常
overflow: hidden隐藏溢出
clear: both在左右两侧均不允许浮动元素。
【标签：】
基本结构：例：开头<p>这里是段落内容</p>结尾
div 划分（盒子）
ul 无序列表
ol 有序列表
li 列表项目
dl 列表
dt 定义列表中的项目
dd 定义条目…
<br/>换行符
p 段落
a 代表连接
hover 选择器用于选择鼠标指针浮动在上面的元素（鼠标放到连接文字上是什么颜色）
h1-h6 标题
span 范围(特殊提示和注释样式）
i 斜体字
em 强调的内容
<hr/>水平线
<table>；代表表格
<tr>；代表行
<p>；代表段落
<td>；代表单元格
<th>；代表表头
透明：
opacity: 0.6透明背景
filter:Alpha(opacity=50)/* IE8 以及更早的浏览器 */
清除：
.clear {
clear: both
height: 0
line-height: 0
overflow: hidden
}
要从固定的、基于像素的设计方法转到d性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。像素是计算机屏幕上的不可缩放的点，而一个 em 就是一个字大小的方块。由于字体大小的变化， em 代表用户喜欢的文字大小的相对单位。
采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用d性的设计方法，就可以充分利用电脑的显示器和浏览器。
也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。
为了理解d性设计，我们必须首先来看看一个似乎与此无关的问题 - 指定文字大小的几种方式。
d性文本
显然文字是最容易实现的d性设计的。能够设定喜欢的文字大小是用户最常见的要求，因此不可忽视。
亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 - 你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。
如果设计者使用像素为单位指定文字大小，大多数的用户将无法缩放文字，因为 Internet Explorer 改变文字大小的方式与别的浏览器不同。Mozilla 和 Opera 可以缩放已经设定像素大小的文字，而Windows 下的IE却不能。
em 存在的问题
Em 似乎是进行文字相对大小设定时的单位，浏览器默认的文字高度是16像素，对大多数设计者来说太大了，不合他们的口味。要使用 em，设计者一般将文字的初始大小设为小于 1em。
例如：
body { font-size: 0.8em}
h1 { font-size: 2em}
p { font-size: 1em}
看起来似乎可行，但有一个问题 - 如果你在 IE 中将“文字大小”设为“较小”或“最小”，文字就会小得难以阅读。由于 IE 如此普及， em 似乎不是可行的选择。
得出的。 Owen Briggs 测试了264种不同的文字缩放方法并演示了 em 之类的相对单位行不通。许多设计人员现在都用像素为单位指定文字大小，不是出于精确控制网页外观的需要，而是似乎没有更为合理的其他选择。
如此看来，要么是难看的大字体，要么无法缩放，好像无法两全。别着急，接着读下去。
另一种“大字体”后备样式
在与无法缩放的像素所带来的亲和力问题的战斗中，许多作者在他们的网页上使用了一种的技术，可通过网页上的一个链接进行切换。
这种方法固然不错，但是如果和相对文字大小的措施（比如
CSS 关键词
Font-size 的关键词(xx-small, medium, x-large,等等)好像就是答案。在 IE 中，当用户选择“较大”或“最大”时文字会变大，选择“较小”或“最小”时文字会变小，一直到合适的大小。与其他的d性设计方法不同，使用关键字的好处是当对文字进行缩放时，永远不会使文字实际像素大小低于某个值，所以无论用户如何选择文字大小，都应当有良好的可读性。
在 ALA 的对关键字有更详尽的解说，这种方法的最好的示例也许就是你正在阅读的这篇文章。（在最近一次的改版之前，ALA 使用了后备的“大字体”样式切换，一个样式表使用像素指定文字大小，另一个用的是基于关键字的相对大小方法。）
百分比使得 em 可行
Em 之所以可行是因为通过设定初始文字的百分比，可以很容易避免文字过小的问题。虽然其原理并非显而易见，但的确可行。当采用这种方案时，IE 文字大小各档设置之间的间隔就不会显得生硬，设计者可以精确设置初始文字大小，使得在“较小”和“最小”时仍然得到较好的可读性。这样有使 em 有了用武之地。（甚至于 Briggs 现在也更.）
例如：
body { font-size: 80%}
h1 { font-size: 2em}
p { font-size: 1em}
不用关键字而采用 em 的好处是你可以用 em 来指定全部布局的尺寸，它可以随着文字的大小按比例缩放。
d性布局
对设计者来说，比d性字体更困难的是彻底的相对布局 - 如果用 em 来设定布局的尺寸事情就容易了。
让布局具有d性，使之随着用户改变文字大小时自动适应，这好像有些多余甚至毫无必要。但是既然你让文字可以伸缩，那么让包容文字的布局也随之伸缩也是顺理成章的事。
另外，如果用户选择了较大的字体，则周围的空间应当会随之按比例增加，保持了“设计者”选择的比例，使文章容易阅读。
这种方案的另一个好处是可以避免不希望的文字换行。如果一个窄的栏目宽度以像素来定义，当其中的文字变大时，可能会打乱整个布局。采用文字大小比例来指定栏目宽度就可避免这个问题。
关于该方案的一个例子请看 CSS Zen Garden 上的作品 。
太宽了！
将网页的初始文字大小指定为 100% 以后，在 IE 的“中等”字体下，36em 的宽度应该是 576 个像素（作为参考，ALA 的宽度为600个像素），在“最大”的字体下，36em 应当增加到 768 个像素（Windows 下 IE 6 的测试结果）。如果再大一点，在 800 像素宽的屏幕、“最大”号字体下就可能会显得太宽了。
CSS 对这个问题的解决方案是 max-width 属性，它可以指定某个元素的最大宽度。不幸的是 Internet Explorer 不支持（不知有谁想过没有？）。
另一个解决方案就是采用流动式布局，也就是说根本不指定内容区域的宽度，让文字自然流动，充满屏幕宽度（采用了这种方案）。许多人不接受这种方案，因为在宽屏幕下的可读性不好，但对于移动设备这样的小屏幕非常合适。
如果你准备采用d性布局方案，在指定边界或者位图之类的由像素构成的对象时，仍然要以像素为单位，这可能会和基于文字大小关系发生冲突；但这不应成为不采用d性布局的理由。
使图形d性化
用相对大小来设置位图的尺寸会导致灾难性的后果。对付这个问题可以这样做 - 维持图形原有的解析度不变，将它裁剪到合适的大小。
通过更换背景图片可以就可做到。这里是一个标题元素的例子，你也可以采用其他的图片替换技术：
h1 { font-size: 1emwidth: 10emheight: 100pxtext-indent: -1234embackground-image: url(whatever.jpg)}
或者（正如所做的那样），你可以将图片包含在一个容器，比如一个有下面样式的 DIV 中:
div { width: 10emoverflow: hidden}
本文中提到的许多d性设计方法都可以在 中看到。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）