CSS3 改善了传统盒模型结构,增强了盒子构成要素的功能,扩展了盒模型显示的方式。
改善结构:为盒子新增轮廓区;
增强功能:内容区增强 CSS 自动添加内容功能,增强内容移除、换行处理;允许多重定义背景图,控制背景图显示方式等;增加背景图边框,多重边框,圆角边框等功能;完善 margin:auto;布局特性;
扩展显示:完善传统的块显示特性,增加弹性,伸缩盒显示功能,丰富网页布局手段。
一、定义显示方式
CSS3中可以通过box-sizing 来指定盒模型,即可指定为content-box、border-box,这样我们计算盒子大小的方式就发生了改变。
语法格式:
box-sizing: content-box | border-box | inherit;
可以分成两种情况:
1、box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值,其让元素维持 W3C 的标准Box Model
2、box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的
注:上面的标注的width指的是CSS属性里设置的 length,content的值是会自动调整的。
二、定义元素尺寸大小(放置拖拽元素)
resize 属性允许用户通过拖动的方式改变元素的尺寸。目前主要用于可以使用 overflow 属性的任何容器元素中。
语法格式:
resize: none | both | horizontal | vertical | inerrit;
-
- none:浏览器不提供尺寸调整机制,用户不能操纵调节元素的尺寸;
- both:浏览器提供双向尺寸调整机制,允许用户调节元素的宽度和高度;
- horizontal:浏览器提供单向水平尺寸调整机制,允许用户调节元素的宽度;
- vertical:浏览器提供单向垂直尺寸的调整机制,允许用户调节元素的高度;
- inherit:默认继承。
- none:浏览器不提供尺寸调整机制,用户不能操纵调节元素的尺寸;
Tips:resize 属性初始值为 none,适用于所有 overflow 属性不为 visibile 的元素。
三、溢出处理
overflow 是 CSS2 中规范的特性,CSS3 在盒模型新加入 overflow-x 和 overflow-y 的特性。
overflow-x:定义了左右边(水平方向)的剪切。
overflow-y:定义了上下边(垂直方向)的剪切。
语法格式:
overflow-x:visible | hidden | scroll | auto | no-display | no-content;
overflow-y:visible | hidden | scroll | auto | no-display | no-content;
-
- visible:不剪切内容,也不添加滚动条。元素将被剪切包含对象的窗口大小,且 clip 属性设置失效。(默认值)
- auto:在需要时剪切内容并添加滚动条,该属性为 body 和 textarea 元素的默认值。
- hidden:不显示超出元素尺寸的内容。
- scroll:当内存超出元素尺寸, overflow-x 显示为横向滚动条,而 overflow-y 显示为纵向滚动条。
- no-display:当内容超出元素尺寸,则不显示元素。此时类似添加了 display:none 声明。
- no-content: 当内容超出元素尺寸,则不显示内容,此时类似添加了 visibility :hidden 声明。
- visible:不剪切内容,也不添加滚动条。元素将被剪切包含对象的窗口大小,且 clip 属性设置失效。(默认值)
四、定义轮廓
outline 属性定义块元素的轮廓线,在 CSS2 中被定义,但是没有获取广泛支持,CSS3 增强了该特性。
outline 是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
语法格式:
outline: [outline-color] | [outline-style] | [outline-width] | [outlineoffset] | inherit;
- <outline-color>:定义轮廓边框颜色;
- <outline-style>:定义轮廓边框轮廓样式;
- <outline-width>:定义轮廓边框宽度;
- <outline-offset>:定义轮廓边框偏移位置的数值;
- inherit:默认继承。
Tips:outline 属性创建的轮廓线是画在一个框“上面”,轮廓线总是在顶上,不会影响该框或任何其他框的尺寸。所有,显示或不显示不会影响文档流,也不会影响布局。
1、设置颜色
outline-color属性可以单独设置轮廓线的颜色。
语法格式:
outline-color: <color> | invert | inherit;
-
- <color>:可以是颜色名或者十六进制;
- invert:执行颜色反正(逆向的颜色)。可以确保轮廓线在不同的背景颜色中都是可见的;
- inherit:默认继承。
2、设置样式
outline-style 属性可以设置轮廓线的样式。
语法格式:
outline-style: auto | <border-style> | inherit;
-
- auto:根据浏览器自动设置;
- <border-style>:采用边框的样式;
- inherit:默认继承。
- none:初始值。
3、设置宽度
outline-width 属性可以单独设置轮廓线的宽度。
语法格式:
outline-thin | medium | thick | <length> | inherit;
-
- thin:定义细轮廓;
- medium:定义中等的轮廓;(默认值)
- thick:定义粗的轮廓;
- <length>:定义轮廓粗细的值;
- inherit:默认继承。
Tips:只有当轮廓样式不是 none 时,该属性才会起作用。
4、设置偏移
outline-offset 属性可以单独设置轮廓线的偏移位置。
语法格式:
outline-offset:<length> | inherit;
-
- <length>:定义轮廓距离容器的值;
- inherit:默认继承。
五、定义多色边框
border-color 属性可以设置边框的颜色。CSS3 中使用该属性可以设置更多的颜色。
语法格式:
border-color:<color>;
CSS3 在这个属性上派生了4个边框颜色属性:
birder-top-color: 定义指定元素顶部边框的色彩。
birder-right-color: 定义指定元素右侧边框的色彩。
birder-bottom-color: 定义指定元素底部边框的色彩。
birder-left-color: 定义指定元素左侧边框的色彩。
Tips: 目前仅有 MOzilla Gecko 引擎支持 -moz-border-color 私有属性。
六、定义边框背景
border-image 属性来模拟 background-image 属性功能。
语法格式:
border-image:none | <image> [<number> | <percentage>] {1,4} [ / <border-width>]{1,4}
-
- none:默认值,表示边框无背景图;
- <image>:使用绝对或相对URl 地址指定边框的背景图像;
- <number>:设置边框宽度或边框背景图图像大小,使用固定像素值表示;
- <percentage>:设置边框背景图像大小,使用百分比表示。
Tips:该属性适用于所有元素,除了 border-collapse 属性值为 collapse 的 table 元素。
派生子属性1:
border-top-image: 定义顶部边框背景图像。
border-right-image: 定义右侧边框背景图像。
border-bottom-image: 定义底部边框背景图像。
border-left-image: 定义左侧边框背景图像。
border-top-left-image: 定义左上角边框背景图像。
border-top-right-image: 定义右上角边框背景图像。
border-bottom-right-image: 定义右下角边框背景图像。
border-bottom-left-image: 定义左下角边框背景图像。
派生子属性2:
border-image-source: 定义边框的背景图像源,即图像 URL;
border-image-slice: 定义如何裁剪背景图像,与背景图像的定位功能不同;
border-image-repeat: 定义边框被图像的重复性;
border-image- 定义边框背景图像的显示大小(即边框显示大小);
border-image-outset: 定义边框背景图像的偏移位置;
Tips:webkit 引擎支持 -webkit-border-image 私有属性,Mozilla Gocko 引擎支持 -moz-border-image 私有属性; Presto 引擎支持 -o-border-image 私有属性。IE 浏览器暂时不支持 border-image 属性,也没有定义私有属性。