搜索
查看: 10250|回复: 4

[web] CSS 盒子模型

[复制链接]

30

主题

695

帖子

4178

积分

超级版主

Rank: 8Rank: 8

积分
4178
发表于 2012-6-28 09:48:48 | 显示全部楼层 |阅读模式


CSS 盒子模型  
ee36f30dab6f7baf7acbe17e.jpg
内容区外面依次为 padding (内边距),border (边框),margin (外边距)

盒子模型 - content-box
指节点的高度、宽度不包含边框(border)以及内边距(padding)
content-box :  盒子大小= content ( 不包含 border,padding 的大小 )
W3C 标准默认使用 content-box模型,主流浏览器默认使用此模型( HTMLayout也是使用 content-box
f00cb779af8fe6882e73b3dd.jpg

盒子模型  -  border-box
指节点的高度、宽度包含边框(border)以及内边距(padding)border-box : 盒子大小= border + padding + content
IE在怪异模式下使用 border-box模型,这被认为是IE的一个BUG.
导致IE进入怪异模式的原因:
1、HTML文件不写DOCTYPE声明
2、HTML文件在DOCTYPE声明前加 <!--->
3、IE6下在DOCTYPE声明前加XML声明
4、IE7在DOCTYPE与XML声明间加上<!-- keep IE7 in quirks mode -->
5、IE10以上不写DOCTYPE声明,并且加上<meta http-equiv="X-UA-Compatible" content="IE=5">
注意aardio中web.form使用IE内核,为了避免进入怪异模式,任何时候请在HTML的第一句放上DOCTYPE声明,一般简单写一句  <!doctype html> 即可。

border-box.jpg


在CSS3中可使用 box-sizing 属性指定盒子模型, 语法:
box-sizing : content-box | border-box | inherit

兼容性:
类型 IE.png Internet Explorer Firefox.png Firefox Chrome.png Chrome Opera.png Opera Safari.png Safari
版本
(×)IE6
(√)Firefox 2.0
(√)Chrome 1.0.x
(√)Opera 9.63
(√)Safari 3.1
(×)IE7
(√)Firefox 3.0
(√)Chrome 2.0.x

(√)Safari 4
(√)IE8
(√)Firefox 3.5





下面是一个演示程序:

  1. import web.form;
  2. /*DSG{{*/
  3. var winform = win.form(text="CSS盒模型演示";right=698;bottom=487)
  4. winform.add()
  5. /*}}*/

  6. var wb = web.form( winform, , , ,true/*securityTrusted*/  )
  7. var html = /**
  8. <!doctype html>
  9. <html>
  10. <head>
  11.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  12.   
  13.   <style type="text/css">
  14.   #box{
  15.     width:200px;
  16.     height:90px;
  17.     padding:0px;
  18.     margin:0px;
  19.     border:1px solid red;
  20.   }
  21.   
  22.   #box-padding-border{
  23.     width:200px;
  24.     padding:10px;
  25.     margin:0px;
  26.     height:90px;
  27.     border:10px solid red;
  28.   }
  29.   
  30.   #box-padding-border-margin{
  31.     width:200px;
  32.     padding:10px;
  33.     margin:10px;
  34.     height:90px;
  35.     border:10px solid red;
  36.   }
  37.   
  38.   .wrap {
  39.           width:260px;
  40.           border:1px dashed blue;
  41.   }
  42.   
  43.   body{
  44.           font-size:10.5pt;
  45.   }
  46.   </style>
  47. </head>
  48. <body>
  49. <div class="wrap">
  50.         <div id="box" >width:200px<br />padding:0px;<br />margin:0px<br />border:1px</div>
  51.         <div id="box-padding-border" >width:200px<br />padding:10px;<br />margin:0px<br />border:10px</div>
  52.         <div id="box-padding-border-margin" >width:200px<br />padding:10px;<br />margin:10px<br />border:1px</div>
  53. </div>
  54. <br />web.form标准模式默认使用content-box盒模型(需要在HTML前加上DTD声明避免进入怪异模式), content-box模式下盒子大小 = content大小 ( 即CSS的width,height不包含 border,padding 的大小 ) <br />
  55. </body>
  56. </html>
  57. **/
  58. wb.write( html )

  59. winform.show();  
  60. win.loopMessage();
复制代码


box.jpg

回复

使用道具 举报

30

主题

695

帖子

4178

积分

超级版主

Rank: 8Rank: 8

积分
4178
 楼主| 发表于 2013-2-25 16:52:17 | 显示全部楼层

[color=#c000][font=verdana, tahoma, arial][size=12px]语法:[/size][/font][/color][c

语法:

padding : length

参数:

length :  由浮点数字和单位标识符组成的长度值 | 或者百分数。百分数是基于父对象的宽度。请参阅长度单位

说明:

检索或设置对象四边的补丁边距。
如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。
1.jpg

如果只提供一个,将用于全部的四条边。
如果提供两个,第一个用于上-下,第二个用于左-右。
如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。

以内边距(padding)为例,他的参数可以使用以下几种不同的写法:
padding:上 右 下 左;
padding:上 右 下;
padding:上 右;
padding:上;

如果“下”省略他的值与“上”相同,
如果“左”省略他的值与“右”相同,
如果只写一个值则上、右、下、左使用相同的值
注意HTMLayout里background-positon或forground-postion指定四个值他的顺序与上面相同,但指定两个值时则第一个是横坐标、第二个是纵坐标,与margin、padding省略参数时表示的顺序不一样。

内联对象要使用该属性,必须先设定对象的heightwidth属性,
或者设定position属性为absolute。

不允许负值。  

示例:

body { padding: 36pt 24pt 36pt; }
body { padding: 11.5%; }
body { padding: 10% 10% 10% 10%; }
回复

使用道具 举报

30

主题

695

帖子

4178

积分

超级版主

Rank: 8Rank: 8

积分
4178
 楼主| 发表于 2013-2-25 16:53:55 | 显示全部楼层

[color=#c000][font=verdana, tahoma, arial][size=12px]语法:[/size][/font][/color][c

语法:

margin : auto | length

参数:

auto :  值被设置为相对边的值
length :  由浮点数字和单位标识符组成的长度值 | 百分数。百分数是基于父对象的高度。对于内联对象来说,左右外延边距可以是负数值。请参阅长度单位

说明:

检索或设置对象四边的外延边距。
如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。
1.jpg
如果只提供一个,将用于全部的四边。
如果提供两个,第一个用于上-下,第二个用于左-右。
如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。

内联对象要使用该属性,必须先设定对象的heightwidth属性,或者设定position属性为absolute。
margin属性不可用于td和tr对象。

外延边距始终透明。

示例:

body { margin: 36pt 24pt 36pt; }
body { margin: 11.5%; }
body { margin: 10% 10% 10% 10%; }

外边距(margin)垂直叠加现象

外边距叠加是指两个垂直相邻的普通块级元素(不包含浮动元素、绝对定位元素、内联元素、inline-block内联块元素),当上下两个边距相遇时,起外边距会产生叠加现象,且叠加后的外边距,等于其中较大者。注意水平方向外边距是不会发生重叠的(一个例外是:HTMLayout中指定 flow: h-flow; 改变块节点为水平流动时则会在水平方向重叠)

垂直相邻的块级元素上下边距叠加图示如下:
css_margin_1.gif

另一个叠加现象是当一个元素包含在另一个元素之中时,并且父元素没有指定边框(或透明边框)、内边距,那么子元素与父元素之间也会产生叠加现象,叠加后的外边距,等于其中最大者,图示如下:
css_margin_2.gif

同理,如果一个无内容的空元素,其自身的上下边距也会产生叠加。

外边距垂直叠加的的计算规则

a、相邻外边距全部都为正值,取最大
b、相邻外边距不全是正值,则都取绝对值,然后用正值减去最大值;
c、相邻外边距没有正值,则都取绝对值,然后用0减去最大值。

外边距叠加的意义

外边距的叠加只产生在普通流文档的上下外边距之间,这个看起来有点奇怪的规则,其实有其现实意义。设想,当我们上下排列一系列规则的块级元素(如段落P)时,那么块元素之间因为外边距叠加的存在,段落之间就不会产生双倍的距离。

外边距叠加可能遇到的一些例外
下面列出来的例外在不同浏览器下可能表现不一致,最好是尽量避免。
  • 绝对定位(position:absolute)垂直margin不会被重叠
  • 设置了display:inline-block的元素,垂直margin不会重叠,甚至和他们的子元素之间也是一样。
  • 给元素添加上浮动(float)属性,垂直margin不会重叠
  • 设置了overflow属性的元素和它的子元素之间的margin不被重叠(overflow取值为visible除外)。
  • 因为叠加的前提是需要垂直相邻,在可能叠加的元素间添加空的块元素也可以阻止外边距叠加。
  • 父子块元素外边距相邻时,在可能叠加的外边距之间添加透明边框或者内边距阻止外边距叠加。
  • 一个应用了清除操作的元素的margin-top不会和它的块级父元素的margin-bottom重叠
  • 根元素的垂直margin不会被重叠
回复

使用道具 举报

30

主题

695

帖子

4178

积分

超级版主

Rank: 8Rank: 8

积分
4178
 楼主| 发表于 2013-2-25 17:00:51 | 显示全部楼层

[color=#c000][font=verdana, tahoma, arial][size=12px]语法:[/size][/font][/color][c

语法:

border : border-width || border-style || border-color

参数:

该属性是复合属性。请参阅各参数对应的属性。

说明:

如使用该复合属性定义其单个参数,则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
默认值为:medium noneborder-color的默认值将采用文本颜色。
要使用该属性,必须先设定对象的heightwidth属性,或者设定position属性为absolute。
对应的脚本特性为border。请参阅我编写的其他书目。
关于对象的尺寸与边框,内外补丁等样式表属性的关系,请参看图例以及heightwidth属性。

示例:

p { border: thick double yellow; }
blockquote { border: dotted gray; }
p { border: 25px; }

Borders Properties
属性
CSS Version
版本
Description
简介
borderCSS1复合属性。设置对象边框的特性
border-colorCSS1设置或检索对象边框颜色
border-styleCSS1设置或检索对象边框样式
border-widthCSS1设置或检索对象边框宽度
border-topCSS1复合属性。设置对象顶边的特性
border-top-colorCSS2设置或检索对象顶边颜色
border-top-styleCSS2设置或检索对象顶边样式
border-top-widthCSS1设置或检索对象顶边宽度
border-rightCSS1复合属性。设置对象右边的特性
border-right-colorCSS2设置或检索对象右边颜色
border-right-styleCSS2设置或检索对象右边样式
border-right-widthCSS1设置或检索对象右边宽度
border-bottomCSS1复合属性。设置对象底边的特性
border-bottom-colorCSS2设置或检索对象底边颜色
border-bottom-styleCSS2设置或检索对象底边样式
border-bottom-widthCSS1设置或检索对象底边宽度
border-leftCSS1复合属性。设置对象左边的特性
border-left-colorCSS2设置或检索对象左边颜色
border-left-styleCSS2设置或检索对象左边样式
border-left-widthCSS1设置或检索对象左边宽度

回复

使用道具 举报

0

主题

5

帖子

124

积分

一级会员

Rank: 2

积分
124
发表于 2014-6-11 06:32:38 | 显示全部楼层

学习了!

学习了!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

手机版|未经许可严禁引用或转载本站文章|站长邮箱|aardio.com|aardio官方社区 ( 皖ICP备09012014号 )

GMT+8, 2018-8-22 07:06 , Processed in 0.078125 second(s), 25 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表