css 盒模型整理

woshinia

于 2013-10-15 11:26:47 发布

阅读量734

点赞数

分类专栏： html-css

html-css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

BOX 模型（BOX Model ）属性

什么是BOX ？CSS 把HTML 中以<somesign> ……</somesign> 的部分称为BOX （容器），BOX 有三类属性：padding 、margin 和border 。

Margin 属性：

Margin 属性分为margin-top 、margin-right 、margin-bottom 、margin-left 和margin 五个属性，分别表示BOX 里内容离边框的距离，它的属性值是数值单位，可以是长度、百分比或auto ，margin 甚至可以设为负值，造成BOX 与BOX 之间的重叠显示，关于margin 的属性详见下表：

属性名称: 'margin-top' 、'margin-right' 、'margin-bottom' 、'margin-left'
属性值: <margin-width>
初始值: 0
适合对象: 所有元素
是否继承: no
百分比备注: 相对于BOX 的宽度

例如：

     Html代码   
     
   
 H1 { margin-top: 2em }  
    H2 { margin-right: 12.3% }  

Margin 还有一个快捷的书写方法，就是直接用margin 属性，例如：

     Html代码   
     
 BODY { margin: 1em 2em 3em 2em}

等同于：

     Html代码   
     
   
 BODY {  
    margin-top:1em;  
    margin-right:2em;  
    margin-bottom:3em;  
    margin-left:2em;  
    }  

margin 属性后面可以有四个值，中间用空格隔开（记住不是逗号），顺序是" 上右下左" ，当然margin 后面可以不足四个值，例如：

     Html代码   
     
   
 BODY { margin: 2em } /* 所有的margin 都设为2em */  
 BODY { margin: 1em 2em } /* 上下margin 为1em ，右左margin 为2em */  
 BODY { margin: 1em 2em 3em } /* 上margin 为1em ，右左margin 为2em ，下margin 为3em*/  

Padding 属性：

Padding 属性用来描述BOX 的边框和内容之间插入多少空间，和margin 属性类似，它也分为上右下左和一个快捷方式padding ，关于padding 的属性详见下表：

属性名称: 'padding-top' 、'padding-right' 、'padding-bottom' 、'padding-left' 、'padding'
属性值: <padding-width>
初始值: 0
适合对象: 所有元素
是否继承: no
百分比备注: 相对于BOX 的宽度

例如：

     Html代码   
     
 BLOCKQUOTE { padding-top: 0.3em }

padding 属性和margin 类似此处略去。

Border 属性：

平时我们在查看HTML 文档时，看到一段文字，并不会把它当作一个BOX ，实际上BOX 是有边框的，只是平时不显示出来罢了，而border 属性就是用来描述BOX 边框的。Border 属性分为border-width 、border-color 和border-style ，而这些属性下面又有分支。

border-width 属性：

border-width 属性又分为：border-top-width 、border-right-width 、border-bottom-width 、border-left-width 和border-width 属性，border-width 用长度表示为"thin/medium/thick" 或长度单位表示，下面是border-width 属性的详细列表：

属性名称: 'border-top-width' 、'border-right-width' 、'border-bottom-width' 、'border-left-width' 、'border-width'
属性值: <border-width>
初始值: medium
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止

border-width 为快捷方式，顺序为上右下左，值之间用空格隔开。

border-color 属性：

border-color 属性用来显示BOX 边框颜色，分为border-top-color 、border-right-color 、border-bottom-color 、border-right-color 和border-color 属性，属性值为颜色，可以用十六进制表示，也可用rgb() 表示，属性见下：
属性名称: 'border-top-color' 、'border-right-color' 、'border-bottom-color' 、'border-left-color' 、
'border-color'

属性值: <color>
初始值: 元素颜色的初始值
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止

border-color 为快捷方式，顺序为上右下左，值之间用空格隔开。

border-style 属性：

border-style 属性用来设置BOX 对象边框的样式，它的属性值为CSS 规定的关键字，平常看不到border 是因为，初始值是none 的缘故。属性见下：

属性名称: 'border-top-style' 、'border-right-style' 、'border-bottom-style' 、'border-left-style' 、'border-style'
属性值: <border-style>
初始值: none
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止

border-color 为快捷方式，顺序为上右下左，值之间用空格隔开。

属性值的名称和代表意义如下：

none ：无边框。
dotted ：边框为点线。
dashed ：边框为长短线。
solid ：边框为实线。
double ：边框为双线。
groove 、ridge 、inset 和outset ：显示不同效果的3D 边框（根据color 属性）。

border 属性：

border 属性为Border 的快捷方式，属性值间用空格隔开，顺序是" 边框宽度边框样式边框颜色" ，例如：

    <h1 style="border:.5em outset red">hello!</h1>

还可以用border-top 、border-right 、border-bottom 、border-left 分别作为上右下左的快捷方式，属性值顺序同border 属性。

----------------------------------------------------

盒子里由外至里依次 <script type="text/javascript"></script> 是：

    * margin 边距
    * border 边框
    * padding 间隙 (也有人称做补丁)
    * content (内容，比如文本 <script type="text/javascript"></script> ，图片等)

CSS 边距属性 (margin) <script type="text/javascript"></script> 是用来设置一个元素所占空间的边缘到相邻元素之间的距离。

CSS 边框属性 (border) 用来设定一个元素的边线 <script type="text/javascript"></script> 。

CSS 间隙属性 (padding) 是用来设置元素内容到元素边框的距离。

CSS 背景属性指的是 content 和 padding 区域 <script type="text/javascript"></script> 。

CSS 属性中的 width 和 height 指的是 content 区域的宽和高 <script type="text/javascript"></script> 。

CSS ( 大小 +border) 属性对应的 offset 长宽属性（无标准的实事标准）：

1. offsetWidth

与 CSS width + border + CSS padding 对应

2. offsetHeight

与 CSS width + border + CSS padding 对应

3. clientWidth

获取对象的宽度，不计算任何边距、边框、滚动条或可能应用到该对象的补白。
与 offsetHeight - 纵向滚动条宽度 ( 如果有 )
对应

4. clientHeight

获取对象的高度，不计算任何边距 (margin) 、边框、滚动条或可能应用到该对象的补白 (padding) 。
与 offsetHeight - 横向滚动条宽度 ( 如果有 )
对应

获取位置信息的属性有：
几个 offset 属性（无标准的实事标准）：
offset 坐标 0 点是 offsetParent 元素 content 区域的左上点
5. offsetParent
获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。
CSS persition = absolute 时， left,top 属性值参照的元素。
Object is positioned relative to parent element's position—or to the body object if its parent element is not positioned—using the top and left properties.
6. offsetLeft
获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。
与 CSS left( absolute )+margin 对应
7. offsetTop
获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置。
与 CSS top(absolute)+margin 对应