盒子模型
1 盒子尺寸
box-sizing 定义盒子模型的尺寸解析方式
值: content-box(默认) border-box
resize 否允许用户缩放,调节元素尺寸大小
值: none: 不允许用户调整元素大小。 (默认) both: 用户可以调节元素的宽度和高度。 horizontal: 用户可以调节元素的宽度 vertical: 用户可以调节元素的高度。
2 display
display 盒子是否以及如何显示
值:
none: 隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间
inline: 指定对象为内联元素。
block: 指定对象为块元素。
list-item: 指定对象为列表项目。
inline-block: 指定对象为内联块元素。(CSS2)
table: 指定对象作为块元素级的表格。类同于html标签<table>(CSS2)
inline-table: 指定对象作为内联元素级的表格。类同于html标签<table>(CSS2)
table-caption: 指定对象作为表格标题。类同于html标签<caption>(CSS2)
table-cell: 指定对象作为表格单元格。类同于html标签<td>(CSS2)
table-row: 指定对象作为表格行。类同于html标签<tr>(CSS2)
table-row-group: 指定对象作为表格行组。类同于html标签<tbody>(CSS2)
table-column: 指定对象作为表格列。类同于html标签<col>(CSS2)
table-column-group: 指定对象作为表格列组显示。类同于html标签<colgroup>(CSS2)
table-header-group: 指定对象作为表格标题组。类同于html标签<thead>(CSS2)
table-footer-group: 指定对象作为表格脚注组。类同于html标签<tfoot>(CSS2)
run-in: 根据上下文决定对象是内联对象还是块级对象。(CSS3)
box: 将对象作为弹性伸缩盒显示。(伸缩盒最老版本)(CSS3)
inline-box: 将对象作为内联块级弹性伸缩盒显示。(伸缩盒最老版本)(CSS3)
flexbox: 将对象作为弹性伸缩盒显示。(伸缩盒过渡版本)(CSS3)
inline-flexbox: 将对象作为内联块级弹性伸缩盒显示。(伸缩盒过渡版本)(CSS3)
flex: 将对象作为弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)
inline-flex: 将对象作为内联块级弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)
3 盒子阴影
box-shadow 设置元素的阴影
box-shadow:<length>① <length>②;
box-shadow:<length>① <length>② <color>;
box-shadow:<length>① <length>② <length>③;
box-shadow:<length>① <length>② <length>③ <color>;
box-shadow:<length>① <length>② <length>③ <length>④ <color>;
box-shadow:<length>① <length>② <length>③ <length>④ <color> inset;
box-shadow:<length>① <length>② inset;
取值:
none: 无阴影
<length>
①: 第1个长度值用来设置对象的阴影水平偏移值。可以为负值<length>
②: 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值<length>
③: 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值<length>
④: 如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值<color>
: 设置对象的阴影的颜色。 inset: 设置对象的阴影类型为内阴影。该值为空时,则对象的阴影类型为外阴影
可以设定多组效果,每组参数值以逗号分隔
test .outset {
box-shadow: 5px 5px rgba(0, 0, 0, .6);
}
.test .outset-blur {
box-shadow: 5px 5px 5px rgba(0, 0, 0, .6);
}
.test .outset-extension {
box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6);
}
.test .inset {
box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset;
}
.test .multiple-shadow {
box-shadow:
0 0 5px 3px rgba(255, 0, 0, .6),
0 0 5px 6px rgba(0, 182, 0, .6),
0 0 5px 10px rgba(255, 255, 0, .6);
}
4 盒子倒影
-webkit-box-reflect 倒影 (仅webkit 支持)
值: box-reflect:none | direction offset? mask-box-image?
取值:
direction:
above: 指定倒影在对象的上边 below: 指定倒影在对象的下边 left: 指定倒影在对象的左边 right: 指定倒影在对象的右边
offset:
<length>: 用长度值来定义倒影与对象之间的间隔。可以为负值 <percentage>: 用百分比来定义倒影与对象之间的间隔。可以为负值
mask-box-image:
none: 无遮罩图像 <url>: 使用绝对或相对地址指定遮罩图像。 <linear-gradient>: 使用线性渐变创建遮罩图像。 <radial-gradient>: 使用径向(放射性)渐变创建遮罩图像。 <repeating-linear-gradient>: 使用重复的线性渐变创建背遮罩像。 <repeating-radial-gradient>: 使用重复的径向(放射性)渐变创建遮罩图像。
5 盒子不透明度
opacity 检索或设置对象的不透明度。 值是0~1的范围。
对于尚不支持opacity属性的IE浏览器可以使用IE私有的滤镜属性来实现与opacity相同的效果
filter: alpha(opacity=透明值)