6.CSS笔记：盒模型属性

本系列内容由ZouStrong整理收录

整理自 《写给大家看的CSS书（第2版）》、《CSS权威指南（第3版）》、《精彩绝伦的CSS》、《精通CSS：高级Web标准解决方案（第2版）》、CSS参考手册 css.doyoe.com

一. 元素宽/高

1. width属性

• 作用：指定元素宽度
  
• 默认值：auto
  
• 适用于：除了行内非替换元素和table-row, table-row-group之外的所有元素
  
• 继承性：无
  
• 动画性：有
  
• 可取值：所有长度值（使用百分数时，是相对于父元素的宽度）、auto

示例：

p {width:100px;}

width属性仅仅表示元素内容区的宽度，增加内边距、边框、外边距都会影响元素框的实际大小

块级元素默认与父元素内容区同宽，行内元素宽度由内容决定，且对行内非替换元素使用width无效

正常文档流中，块级元素水平部分的总和总是等于父元素宽度（width）

对于图片来说，仅指定图片宽度，那么高度就会根据宽度进行等比例缩放

2. min-width属性（IE6不支持）

• 作用：指定元素最小宽度
  
• 默认值：0
  
• 适用于：除了行内非替换元素和table-row, table-row-group之外的所有元素
  
• 继承性：无
  
• 动画性：有
  
• 取值：所有长度值

3. max-width属性（IE6不支持）

• 作用：指定元素最大宽度
  
• 默认值：none
  
• 适用于：除了行内非替换元素和table-row, table-row-group之外的所有元素
  
• 继承性：无
  
• 动画性：有
  
• 取值：所有长度值

注：如果max-width或者width小于min-width，则max-width和width自动获得min-width的值

4. height属性

• 作用：指定元素高度
  
• 默认值：auto
  
• 适用于：除了行内非替换元素和table-column, table-column-group之外的所有元素
  
• 继承性：无
  
• 动画性：有
  
• 取值：所有长度值（使用百分比时，是相对于父元素的高度）、auto

height使用百分比无效时，往往是因为父元素直到祖先元素都没有设置height值

5. min-height属性（IE6不支持）

• 作用：指定元素最小高度
  
• 默认值：0
  
• 适用于：除了行内非替换元素和table-column, table-column-group之外的所有元素
  
• 继承性：无
  
• 动画性：有
  
• 取值：所有长度值

6. max-height属性（IE6不支持）

• 作用：指定元素最大高度
  
• 默认值：none
  
• 适用于：除了行内非替换元素和table-column, table-column-group之外的所有元素
  
• 继承性：无
  
• 动画性：有
  
• 取值：所有长度值

注：如果max-height或者height小于min-height，则max-height和height自动获得min-height的值

二. 元素边距

1. 外边距

margin-top
margin-right
margin-bottom
margin-left
简写margin

• 作用：指定元素外边距
  
• 默认值：0
  
• 适用于：所有元素（table、inline-table、table-caption的表格类元素之外）
  
• 继承性：无
  
• 动画性：有
  
• 取值：所有长度值（使用百分数时，不管是上下还是左右边距，都是相对于父元素的宽度）

简写属性，当有一个值时，该值应用于四个方向

当有两个值时，第一个值应用于上下，第二个值应用于左右

当有三个值时，第一个值应用于上，第二个值应用于左右，第三个值应用于下

当有四个值时，依次应用于上、右、下、左

所有涉及四条边的简写属性规则同上，不再赘述…………

使用百分数时，都是相对于父元素的宽度，是因为元素都会足够高以包含后代元素，如果上下边距是父元素的height的百分比，就可能导致一个无限循环（height增加，适应边距，边距增加，又导致height增加）

对于行内非替换元素使用上下外边距，没有效果（其实是设置了，但是周围的内容不会被撑开）

注：元素默认并没有指定外边距，但是浏览器对很多元素提供了预定的样式，因此很逗块级元素默认就包含了一定的外边距，因此，通常都在reset样式里，覆盖掉默认的边距

注：垂直的外边距会相互重叠合并，直到一个元素的外边距接触到另一个元素（即由较大的外边距决定两者间距）
需要注意的是，水平外边距不会合并、浮动元素和绝对定位元素的垂直外边距也不会合并

2. 内边距

padding-top
padding-right
padding-bottom
padding-left
简写padding

• 作用：指定元素内边距
  
• 默认值：0
  
• 适用于：所有元素（除 table-row-group、table-header-group、table-footer-group、table-column-group、table-row ）
  
• 继承性：无
  
• 动画性：有
  
• 取值：所有长度值，但不能为负值（使用百分数时，不管是上下还是左右边距，都是相对于父元素的宽度）

注：为行内非替换元素应用边距（内、外）时，对行高没有影响，垂直边距不会撑开文本，但是垂直内边距会延伸背景，因为背景是可见的，所以会造成重叠

左右边距可以影响位置，同样上下边框也不会改变行高，但是会显示出来

对于只包含文本的行，能改变行间距的属性只有line-height、font-size、vertical-align

三. 元素边框

1. 边框宽度

border-top-width
border-right-width
border-bottom-width
border-left-width
简写border-width

• 作用：指定元素边框宽度
  
• 默认值：medium
  
• 适用于：所有元素
  
• 继承性：无
  
• 动画性：有
  
• 取值：任何长度值、thin（1px）、medium（3px）、thick（5px）

注：边框宽度不能使用百分比

2. 边框样式

border-top-style
border-right-style
border-bottom-style
border-left-style
简写border-style

• 作用：指定元素边框样式
  
• 默认值：none
  
• 适用于：所有元素
  
• 继承性：无
  
• 动画性：无
  
• 取值：none、hidden、solid、dotted、dashed、double、groove、inset、outset………

3. 边框颜色

border-top-color
border-right-color
border-bottom-color
border-left-color
简写border-color

• 作用：指定元素边框颜色
  
• 默认值：与文本颜色相同（currentColor）
  
• 适用于：所有元素
  
• 继承性：无
  
• 动画性：有
  
• 取值：所有颜色值

注：使用transparent值，可以创建具有宽度的不可见边框（透明），一般用来提前占位，但是IE6不支持

4. 简写边框

border-top
border-bottom
border-left
border-right

指定元素某条边框的宽度，样式，颜色

5. 最终简写边框

border

同时指定元素四条边框的宽度，样式，颜色（只能为四条边应用相同值）

p {border:2px solid #F70;}

在默认情况下，边框样式默认值为 border-style:none，所以边框默认不显示（不指定边框样式的前提下，边框永远不可能显示）

换句话说：显示边框的最快捷方式就是

p {border:solid;}

6. 边框圆角

border-top-left-radius（CSS3） 
border-top-right-radius（CSS3） 
border-bottom-left-radius（CSS3） 
border-bottom-right-radius（CSS3）
简写border-radius（CSS3） 

• 作用：指定元素圆角边框
  
• 默认值：0
  
• 适用于：所有元素
  
• 继承性：无
  
• 动画性：有
  
• 取值：所有长度值

非简写属性可接受两个值，以空格分隔，第一个值表示水平圆角半径，第二个值表示垂直圆角半径（省略第2个，则默认等于第1个值）

border-top-left-radius:10px 20px;
border-radius:10px 20px/20px;

简写属性可接受两个参数，以“/”分隔，每个参数可设置1~4个值，第一个参数表示四个水平圆角半径，第二个参数表示四个垂直圆角半径，省略第2个，则默认等于第1个值

• 四个参数，如果只提供一个，将用于全部的于四个角
  
• 如果提供两个，第一个用于上左、下右，第二个用于上右、下左
  
• 如果提供三个，第一个用于上左，第二个用于上右、下左，第三个用于下右
  
• 如果提供全部四个参数值，将按上左、上右、下右、下左的顺序作用于四个角

7. 边框图片

border-image-source属性（CSS3）

• 作用：指定元素边框使用的图片
  
• 默认值：none
  
• 适用于：所有元素（除table元素设置了border-collapse为collapse之外）
  
• 继承性：无
  
• 动画性：无
  
• 取值：none、图片地址URL

例：

border-image-source: url(1.png);

border-image-slice属性（CSS3）

• 作用：指定元素边框图片的分割方式
  
• 默认值：100%
  
• 适用于：所有元素（除table元素设置了border-collapse为collapse之外）
  
• 继承性：无
  
• 动画性：无
  
• 取值：百分数、数值（无单位）、fill

例：

border-image-slice: 1 9 fill;

border-image-width属性（CSS3）

• 作用：指定元素边框图片的宽度
  
• 默认值：1
  
• 适用于：所有元素（除table元素设置了border-collapse为collapse之外）
  
• 继承性：无
  
• 动画性：无
  
• 取值：所有长度值、auto（采用与border-image-slice相同的值）

例：

border-image-width: auto;

border-image-outset属性（CSS3）

作用：指定元素边框图片的扩展
默认值：0
适用于：所有元素（除table元素设置了border-collapse为collapse之外）
继承性：无
动画性：无
取值：长度值

例：

border-image-outset: 10px;

border-image-repeat属性（CSS3）

• 作用：指定元素边框图片的平铺方式
  
• 默认值：stretch
  
• 适用于：所有元素（除table元素设置了border-collapse为collapse之外）
  
• 继承性：无
  
• 动画性：无
  
• 取值：stretch、repeat、round、space

简写border-image属性（CSS3）

• 作用：指定元素边框图片
  
• 默认值：看每个独立属性
  
• 适用于：看每个独立属性
  
• 继承性：无
  
• 动画性：无
  
• 取值：看每个独立属性

8. box-shadow（CSS3）

• 作用：指定元素阴影
  
• 默认值：none
  
• 适用于：所有元素
  
• 继承性：无
  
• 动画性：有
  
• 取值：2~4个长度值，可选的颜色值和inset关键字

第一个值必须：表示阴影水平偏移值（允许负值）

第二个值必须：表示阴影垂直偏移值（允许负值）

第三个值可选：表示阴影模糊度

第四个值可选：表示阴影外延度

第五个值可选：表示阴影颜色

第六个值可选：表示将外部阴影改为内部阴影

可以设定多组效果，每组参数值以逗号分隔

9. box-sizing（CSS3）

• 作用：指定盒模型的组成模式
  
• 默认值：content-box
  
• 适用于：所有接受width和height的元素
  
• 继承性：无
  
• 动画性：无
  
• 取值：content-box、border-box

content-box：padding和border不被包含在定义的width和height之内

border-box：padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度

10. resize属性（CSS3）（IE都不支持）

• 作用：指定元素是否允许用户缩放
  
• 默认值：none
  
• 适用于：所有设置了overflow（visible值除外）的元素
  
• 继承性：无
  
• 动画性：无
  
• 取值：none、both、horizontal、vertical

如果希望此属性生效，需要设置元素的overflow属性，值可以是auto,hidden或scroll

11. box-reflect（CSS3）---only for webkit

• 作用：指定元素倒影
  
• 默认值：none
  
• 适用于：所有元素
  
• 继承性：无
  
• 动画性：有
  
• 取值：三个参数

第一个值：表示倒影方向（above、below、left、right）

第二个值：表示元素与倒影间隔（所有长度值）

第三个值：表示倒影的样式