div+css中边框不听话的解决办法

在学习div+css布局过程中,碰到边框不听话的问题。就是我的样式表里是没有指定margin,boder等属性,预期效果应该是

左列,中列,右列三个div紧密结合,占据一整行。预期结果如下

然而实际效果如下

如图所示,在"中列"的四周出现了一下白边。代码如下

<style type="text/css">
#left4{
width:200px;
height:200px;
background-color:#09F;
border:2px solid #06F;
position:absolute;
top:0px;
left:0px;
}
#right4{
width:200px;
height:200px;
background-color:#09F;
border:2px solid #06F;
position:absolute;
top:0px;
right:0px;
}
#main{
height:200px;
background-color:#09F;
border:2px solid #06F;
margin:0px 204px 0px 204px;
}
</style>
<body>
<div id="left4">左列</div>
<div id="main">中列</div>
<div id="right4">右列</div>
</body>
请教下,为什么我这个"中列"四周会有白边?

答案是,这个css默认会给一些没有添加margin,boder等属性的div添加margin,boder属性,而且会有默认值。

解决办法是,在css样式表的第一行,加上*{margin:0; padding:0;} 这一串字符。

*{margin:0; padding:0;}

*是通配符,表示对所有的元素都生效,这一行的意思就是把所有元素的margin,padding都设置为0。这样就把css默认的

margin,padding属性给去掉了。然后从第二行开始编写自己的css样式,后面的样式就不会再受影响。

注意:这一行一定要在css样式表的第一行添加,如果在css样式表中间或者底部添加这一行,就会让这一行之前设置的所有

的margin,padding失效

修改后代码如下:

<style type="text/css">

*{margin:0; padding:0;}

#left4{
width:200px;
height:200px;

border:2px solid #06F;
position:absolute;
top:0px;
left:0px;
}
#right4{
width:200px;
height:200px;

border:2px solid #06F;
position:absolute;
top:0px;
right:0px;
}
#main{
height:200px;

border:2px solid #06F;
margin:0px 204px 0px 204px;
}
</style>
<body>
<div id="left4">左列</div>
<div id="main">中列</div>
<div id="right4">右列</div>
</body>

时间: 2024-10-29 07:06:03

div+css中边框不听话的解决办法的相关文章

div+css常见浏览器兼容问题以及解决办法

1.图片下方出现几像素的空白间隙问题说明:这个问题在ie6和ff(火狐)下经常见到,例如 <div><img src=""/></div>这个图片下面会有一条空白间隙,解决方法:给图上一个垂直方向的属性如:vertical-align: top(任意一个就行middle);这个问题从而延伸到,object(视频)和textarea在火狐下也会出现类似的问题,解决方法一样.细心的朋友会发现在第二节ahuing的重置代码里就有这样一个全局定义object

div+css中clear用法

原文:div+css中clear用法 一开始用clear属性,只是跟float相对使用,今天看视频的时候还是不大明白,查了下资料原来是这样的哦,看咯. clear属性值有四个clear:both|left|right|none; 作用:该属性的值指出了不允许有浮动对象的边. 这个属性是用来控制float属性在文档流的物理位置的. 当属性设置float(浮动)时,他所在的物理位置已经脱离文档流了,但是大多时候我们希望文档流能识别float(浮动),或者是希望float(浮动)后面的元素不被floa

Div+Css(1):Div+Css中transparent制作奥运五环

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>奥运五环</title> <style type="text/css"> body{ margin: 20px; background-color: #efefef; } ul.flag{ list-style: none;

DIV+CSS中让布局居中_背景图片居中_文字内容居中

DIV+CSS中让布局居中_背景图片居中_文字内容居中

linux中无 conio.h的解决办法

conio.h不是C标准库中的头文件,在ISO和POSIX标准中均没有定义.conio是Console Input/Output(控制台输入输出)的简写,其中定义了通过控制台进行数据输入和数据输出的函数,主要是一些用户通过按键盘产生的对应操作,比如getch()函数等等.大部分DOS,Windows,Phar Lap,DOSX,OS/2等平台上的C编译器提供此文件,UNIX和Linux平台的C编译器本身通常不包含此头文件,但已经有其兼容包,可参考: http://conio.sourceforg

GDI+中发生一般性错误的解决办法(转载)

今天在开发.net引用程序中,需要System.Drawing.Image.Save 创建图片,debug的时候程序一切正常,可是发布到IIS后缺提示出现"GDI+中发生一般性错误"的异常.于是开始"摆渡",并寻找到了解决办法:赋予 NETWORK SERVICE 帐户以写权限. 以下为晚上寻找到的资料: 在开发.NET应用中,使用 System.Drawing.Image.Save 方法而导致"GDI+ 中发生一般性错误"的发生,通常有以下三种

MySQL集群架构以及本人配置过程中出现的问题及解决办法

首先说下MySQL的优缺点 优点 解决单点故障 自动实现数据冗余 缺点就是维护起来太麻烦. 集群的条件就是所有的机器上都要安装MySQL的集群软件,我安装的是MySQL-Cluster-gpl-7.3.5-1.el6.x86_64.rpm的rpm包,不是源码包安装.如果系统里面安装了mysql-server等数据库服务软件的要自行写在掉即可. MySQL集群中有三种角色,下面是三种角色以及其的作用 角色 数据节点:ndbd节点 存储在表里的数据(表中的记录) SQL节点:不存储数据,供用户访问和

新建解决方案 在解决方案中添加项目中,解决方案消失的解决办法

新建空白解决方案的步骤:文件--新建项目--其他项目类型--Visual Studio 解决方案 这样就建立出了一个空白解决方案. 然后在资源管理器中可以添加项目,但是添加项目的时候会发现,解决方案消失了,解决办法  工具--选项--项目和解决方案(如果看不到这个,在下方有一个显示所有设置打勾),然后右边有一个 总是显示解决方案.勾上,解决方案就出现了 记录一下. 新建解决方案 在解决方案中添加项目中,解决方案消失的解决办法,布布扣,bubuko.com

基于H.264协议的视频传输系统中遇到的问题以及解决办法

问题1.视频压缩解码模块在运用的时候出现错误:解码器再解码第二帧视频图片的时候出现异常 client: ../../decoder/T264dec.c:594:T264dec_decode_nal: Assertion `0' failed. Aborted 对于该问题的分析及解决过程为: 1.  修改数据类型,所有缓存区改为unsigned char类型(原来统一为char 类型),但是还是遇到一样的异常错误,问题没有解决. 2.  查看缓存区具体内容是否与服务器端压缩的数据是一致的的,对照数