重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
可以尝试以下初始化代码:
为吉阳等地区用户提供了全套网页设计制作服务,及吉阳网站建设行业解决方案。主营业务为网站建设、成都做网站、吉阳网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!
body,div,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,p,form,fieldset,legend,input{ margin:0; padding:0;}
h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal;}
ol,ul{ list-style:none;}
img,fieldset{ border:0 none; display:block;}
由于各个版本的浏览器,对一些标签的初始值不一样,我们需要帮它们初始化成一样的,用于兼容各个版本的浏览器。
块元素的之间的间距使用margin属性设置。
CSS margin 属性
定义和用法
margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
说明
这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并。允许指定负的外边距值,不过使用时要小心。
注释:允许使用负值。
例子 1
margin:10px 5px 15px 20px;
/*
上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px
*/
padding-top:0px; 或者margin-top:0px;不过我看你CSS里面貌似没有上边距
你应该写一个*{margin:0px;padding:0px;} 写在最上面
在css中加入如下代码即可:
*{padding:0; margin:0}
padding
定义和用法
padding 简写属性在一个声明中设置所有内边距属性。
说明
这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算;因此,如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。
注释:不允许使用负值。
margin
定义和用法
margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
说明
这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并。允许指定负的外边距值,不过使用时要小心。
div向右偏移一定距离,可采用margin外边距实现、也可以使用padding来实现,这就要看不同情况下如何灵活选择了。这里thinkcss为大家介绍各种css布局div向右移方法。
两个盒子前者是蓝色的div,后者是红色的div,就这种情况下灵活让红色div向右浮动偏移一定距离的方法教程分别如下。
基本说明:
为了便于实例,两个盒子并排,我们将两个div均设置float浮动样式,两个div box同时设置相同宽度和高度。
一、设置margin-left实现div右移
1、有边框或有背景颜色情况下
两个div均设置float:left布局靠左css样式,要让第二个(红色)div靠右移动一点,通常是对第二个(后者 红色)div设置margin-left。
2、为设置div靠右移动一点前代码:
!DOCTYPE html
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titlediv向右移一定距离实例 ;/title
style
.box-a,.box-b{width:200px;height:100px; float:left}
.box-a{ border:1px solid #00F}
.box-b{ border:1px solid #F00}
/style
/head
body
div class="box-a"第一个(前者)div/div
div class="box-b"第二个(后者)div/div
/body
/html
3、截图
设置div右移前
4、操作设置第二个div左外边距离样式
关键CSS代码:
.box-a,.box-b{width:200px;height:100px; float:left}
.box-a{ border:1px solid #00F}
.box-b{ border:1px solid #F00; margin-left:20px}
截图
设置margin-left实现红色div右移一定距离
二、使用margin-right让第二个div靠右产生一定距离
1、使用说明
上一个方法是直接对要右移div设置margin-left自身靠左一定距离,从而实现div自身向右移。
如果使用margin-right就不能对需要向右移div设置,而是对前者(蓝色div)设置即可,实现红色div右移一定距离。
2、CSS代码:
.box-a,.box-b{width:200px;height:100px; float:left}
.box-a{ border:1px solid #00F;margin-right:20px}
.box-b{ border:1px solid #F00}
3、截图:
margin-right实现div盒子右移
利用对蓝色div设置margin-right外右边距,这样让红色自然靠蓝色div一定距离,从而实现div右篇移
三、使用padding-left设置div右移一定距离
要对右移div本身设置padding-left,有一个前提条件,这个div没有边框和div本身背景与div外背景色没有区别,这样借助padding-left内左边距,实现div没有右移,内容右移,看上去就像div右移的一样效果。
1、关键CSS代码
.box-a,.box-b{width:200px;height:100px; float:left}
.box-a{ border:1px solid #00F}
.box-b{padding-left:20px}
2、截图
技巧实现看似div右移效果
四、总结
div css布局html是非常灵活的技术,不同思路不同方法不同代码实现相同效果。乐趣也在此,把握以最简单方法和思路来布局出要的效果。多实践多思考慢慢会建立灵活布局技巧与思维。