- 浏览: 1137709 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
RebeccaZhong:
严重: StandardWrapper.Throwableco ...
三步发布java方式的rest服务 -
RebeccaZhong:
严重: StandardWrapper.Throwableco ...
三步发布java方式的rest服务 -
冷酷月光:
楼主。请教一下。arcgis for android 有提供地 ...
ArcGIS API For Android离线地图的实现 -
winney117:
请问如何GET已有网页上的指定内容?比如百度文库中的某一篇文章 ...
三步发布java方式的rest服务 -
zige1012:
您好,我想问问我想换个自己地图的切片,也有4层(L0-L3), ...
ArcGIS API For Android离线地图的实现
margin和padding用来隔开元素,margin是隔开元素与外边,padding是隔开元素里边。
例子h2:
元素四边可以设置的属性:margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom and padding-left
CSS盒模型(Box Model)问题详解
width和height定义的是Content部分的宽度和高度,padding border margin的宽度依次加在外面。背景会填充 padding和content部分。但是由于浏览器设计上的问题,不同浏览器显示效果会有些不同。左右Margin加倍的问题当box为float 时,IE6中box左右的margin会加倍
W3C定义的盒模式如下:
width和height定义的是Content部分的宽度和高度,padding border margin的宽度依次加在外面。背景会填充padding和content部分。
但是由于浏览器设计上的问题,不同浏览器显示效果会有些不同。
左右Margin加倍的问题
当box为float时,IE6中box左右的margin会加倍。比如:
左面的inner的左面margin明显大于5px。
这时候,定义inner的display属性为inline。
外层box自动计算高度的问题
根据W3C定义,没有float属性的外层box不会自动计算高度,要计算高度,必须在内层最后一个box加入clear:both。
Opera、netscape、mozilla等不会计算外层box高度,但是微软ie6会自动计算外层高度。比如:
上面的代码在ie中有黑色的背景,但是没有正确的计算上下的margin,在inner2下面加上一个包含clear:both属性的div后,可以正确计算margin。但是firefox中仍然没有黑色背景,通常的解决办法是定义一下clear:both这个div的高度,或者插入全角空格,这样就必须增加额外的高度。网上一种比较好的解决办法是在外层div中加入overflow属性,同时使用clear:both,这样就不会增加额外的高度了。如下:
因此,外层css要定义overflow属性,内层最后要加上clear属性。
居中问题
需要定义元素的宽,并且定义横向的margin,如果你的布局包含在一个层(容器)中,就象这样:
你可以这样定义使它横向居中:
但是IE5/Win不能正确显示这个定义,我们采用一个非常有用的技巧来解决:在外层用text-align属性。就象这样:
第一个#outer的text-align:center; 规则定义IE5/Win中#outer的所有元素居中(其他浏览器只是将文字居中) ,第二个text-align:left;是将#warp中的文字居左。
因此,在有居中元素的css中,外层css要定义text-align:center属性,内层居中用margin:x auto x auto定义,并重新定义text-align。
CSS Borders 边框
边框可以运用到body里的大部分HTML元素。
制作一个元素的边框,你需要border-style边框样式。值可以是: solid, dotted, dashed, double, groove, ridge, inset and outset,具体样式大家可以实际下。
border-width设定宽度,通常使用pixels即单位是px,同样有四边属性:border-top-width, border-right-width, border-bottom-width and border-left-width。
border-color设定边框颜色。
例子
设定红色样式为dashed的边框,上下边框宽度为3px,而左右为10px(后面的属性覆盖了前面)。
例子h2:
h2 { font-size: 1.5em; background-color: #ccc; margin: 1em; padding: 3em; }
元素四边可以设置的属性:margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom and padding-left
CSS盒模型(Box Model)问题详解
width和height定义的是Content部分的宽度和高度,padding border margin的宽度依次加在外面。背景会填充 padding和content部分。但是由于浏览器设计上的问题,不同浏览器显示效果会有些不同。左右Margin加倍的问题当box为float 时,IE6中box左右的margin会加倍
W3C定义的盒模式如下:
width和height定义的是Content部分的宽度和高度,padding border margin的宽度依次加在外面。背景会填充padding和content部分。
但是由于浏览器设计上的问题,不同浏览器显示效果会有些不同。
左右Margin加倍的问题
当box为float时,IE6中box左右的margin会加倍。比如:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>www.52css.com</title> <style> .outer { width:500px; height:200px; background:#000; } .inner { float:left; width:200px; height:100px; margin:5px; background:#fff; } </style> </head> <body> <div class="outer"> <div class="inner"></div> <div class="inner"></div> </div> </body> </html>
左面的inner的左面margin明显大于5px。
这时候,定义inner的display属性为inline。
外层box自动计算高度的问题
根据W3C定义,没有float属性的外层box不会自动计算高度,要计算高度,必须在内层最后一个box加入clear:both。
Opera、netscape、mozilla等不会计算外层box高度,但是微软ie6会自动计算外层高度。比如:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>www.52css.com</title> <style> .outer { width:600px; background:#000; } .inner1 { float:left; width:200px; height:100px; margin:5px; background:red; } .inner2 { float:left; width:200px; height:100px; margin:5px; background:yellow; } </style> </head> <body> <div class="outer"> <div class="inner1"></div> <div class="inner2"></div> </div> </body> </html>
上面的代码在ie中有黑色的背景,但是没有正确的计算上下的margin,在inner2下面加上一个包含clear:both属性的div后,可以正确计算margin。但是firefox中仍然没有黑色背景,通常的解决办法是定义一下clear:both这个div的高度,或者插入全角空格,这样就必须增加额外的高度。网上一种比较好的解决办法是在外层div中加入overflow属性,同时使用clear:both,这样就不会增加额外的高度了。如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>www.52css.com</title> <style> .outer { width:600px; background:#000; overflow:auto; } .inner1 { display:inline; float:left; width:200px; height:100px; margin:5px; background:red; } .inner2 { display:inline; float:left; width:200px; height:100px; margin:5px; background:yellow; } .clear { clear:both; } </style> </head> <body> <div class="outer"> <div class="inner1"></div> <div class="inner2"></div> <div class="clear"></div> </div> </body> </html>
因此,外层css要定义overflow属性,内层最后要加上clear属性。
居中问题
需要定义元素的宽,并且定义横向的margin,如果你的布局包含在一个层(容器)中,就象这样:
你可以这样定义使它横向居中:
#wrap { width:760px; /* 修改为你的层的宽度 */ margin:0 auto; }
但是IE5/Win不能正确显示这个定义,我们采用一个非常有用的技巧来解决:在外层用text-align属性。就象这样:
#outer { text-align:center; } #wrap { width:760px; /* 修改为你的层的宽度 */ margin:0 auto; text-align:left; }
第一个#outer的text-align:center; 规则定义IE5/Win中#outer的所有元素居中(其他浏览器只是将文字居中) ,第二个text-align:left;是将#warp中的文字居左。
因此,在有居中元素的css中,外层css要定义text-align:center属性,内层居中用margin:x auto x auto定义,并重新定义text-align。
CSS Borders 边框
边框可以运用到body里的大部分HTML元素。
制作一个元素的边框,你需要border-style边框样式。值可以是: solid, dotted, dashed, double, groove, ridge, inset and outset,具体样式大家可以实际下。
border-width设定宽度,通常使用pixels即单位是px,同样有四边属性:border-top-width, border-right-width, border-bottom-width and border-left-width。
border-color设定边框颜色。
例子
h2 { border-style: dashed; border-width: 3px; border-left-width: 10px; border-right-width: 10px; border-color: red; }
设定红色样式为dashed的边框,上下边框宽度为3px,而左右为10px(后面的属性覆盖了前面)。
发表评论
-
16、CSS的优先级特性Specificity
2008-12-23 13:51 991如果同个元素有两个或以上冲突的CSS规则,浏览器有一些基本 ... -
15、CSS的伪元素Pseudo Elements
2008-12-23 13:47 1065伪元素吸附在选择上和pseudo classes伪类很像, ... -
14、CSS的At-Rules@规则
2008-12-23 13:45 1054At-rules分装不同的CS ... -
13、CSS网页布局Page Layout
2008-12-23 13:35 1177使用CSS布局非常简单,如果你习惯使用tables布局,可 ... -
12、CSS的display属性
2008-12-23 13:31 1253操作HTML元素的诀窍 ... -
11、CSS的Background Images 背景图片
2008-12-23 13:29 2146背景图片Background Images有许多属性可以操 ... -
10、CSS的属性缩写
2008-12-23 13:27 978一些CSS属性允许使用一串值代替许多属性,值使用空格分开。 ... -
9、CSS的Pseudo Classes 伪类
2008-12-23 11:15 1302请你注意一些CSS伪类属性不被所有浏览器支持,但有四个伪类 ... -
8、CSS的Grouping and Nesting分组和嵌套
2008-12-23 11:10 1166Grouping 分组 当许多选择器有同样属性时,可以使 ... -
7、CSS的Class以及ID选择器
2008-12-23 11:04 3509前面的学习我们仅仅使用HTML选择器(在HTML页面里为htm ... -
6、CSS属性结合起来使用
2008-12-23 10:59 991如果你学完HTML初级教程即可学习CSS初级教程,使用CSS处 ... -
4、CSS的Text 文本
2008-12-23 10:30 1556有一系列属性可以改变网页文字的大小和形状,概要如下: fon ... -
3、CSS的color颜色
2008-12-23 10:24 1422css可以处理16,777,216颜色,可以使用名字、rgb值 ... -
2、CSS Selectors,Properties,and Values
2008-12-23 10:16 1002HTML有标签,CSS有选择器。选择器是给内部和外部样式里面的 ... -
1、CSS的应用
2008-12-23 10:10 1053一、In-line 行内 行内样式是在html标签里直接 ... -
css横向导航条
2008-11-22 19:18 2736<style> <!-- *{m ... -
li和ul标签用法举例
2008-11-22 10:19 2127<ul>或者 <ol>是项目 ... -
CSS水平导航条——XHTML+CSS导航条
2008-11-21 15:23 2702横版: css代码 CSS中值得注意的是以下几点: 让ul ... -
制作css半透明的浮动层
2008-11-21 09:49 3581html代码: <div id="wra ... -
css控制照片大小
2008-07-14 10:31 1811转:http://www.52css.com/article. ...
相关推荐
Alignment、Margin 和 Padding 概述
这个一个CSS padding和margin的例子,对初学者很有帮助的哦~ .divcss3{border:1px solid #F00;width:400px;margin-left:15px; padding-left:35px;} .box2 { margin-left:10px; padding-left:15px; width:300px...
padding和margin区别 padding和margin区别 padding和margin区别padding和margin区别
什么时候该用padding而不是margin?你知道负margin吗?你知道负margin在实际工作中的用途吗?常见的浏览器下margin出现的bug有哪些?…… 写css,你少不了与margin打交道,而对于这个平时我们最常用的css属性我们...
HTML中padding和margin的区别,包括代码和详解,代码直接可用
css中padding、margin两个重要属性的详细介绍及举例说明
android_中_padding与margin
如何去掉DIV与DIV的空白,设置margin和padding为0及overflow:hidden可以做到,下面有个示例,感兴趣的朋友可以参考下
下面讲解 padding和margin常用的用法 一、padding 1、语法结构 (1)padding-left:10px; 左内边距 (2)padding-right:10px; 右内边距 (3)padding-top:10px; 上内边距 (4)padding-bottom:10px; 下内边距 (5)...
前端新手网页练习,内容关键词:H5,HTML5,CSS,技术关键词:div,margin,padding,用途:一个完整的页面代码,包含css样式,适合新手学习。html+css实现简单网页效果源码,尚且没有复杂的后台,给前端新手学习之用。
Class与ID区别 margin和padding区别 CSS学习笔记
1.需要在 border 外侧添加空白时 2.空白处不需要背景(色)时 3.上下相连的两个盒子之间的空白,需要相互抵消时,如 15px+20px 的 margi
创建接口时,最重要的部分之一就是间距( margin和padding )。 一致的单位对于Web应用程序的统一,平衡和节奏至关重要。 单位空间是为您的项目生成一致间距的基础,无论系统中可能需要多少变化。 Sass 3.3.x中内置...
有关默认元素在不同浏览器中的margin值是多少的问题,接下来与大家共同探讨下,希望下面提供的数值对你在浏览器兼容性测试时会有所帮助
CSS代码简化在工作中是非常有益的,也是必要的。在编写CSS代码时,经常会出现冗余的代码,为了提高代码的质量及文件压缩到最小,使代码具有可读性,不得不把CSS代码简化。
各浏览器padding、margin的差异
在《CSS Mastery》一书的第5章中,作者说IE和Opera使用margin-left来缩进列表,而Safari和Firefox使用padding-left。经过我的实际测试,发现Opera 9(我实测的是Opera 9.23)同FF和Safari一样,也是使用padding-left...
本文从语法结构、可能取的值、浏览器兼容问题等方面为大家介绍下padding和margin的异同点另附截图,有想学习的朋友可以参考下哈,希望对大家有所帮助