CSS3 User Interface(用户界面)

User Interface 常用几项属性

box-sizing         定义盒子模型                               IE8+ chrome safari firefox opera支持                    bootstrap grid 系统采用

appearance      定义对象外观                             chrome safari firefox支持

user-select       控制文本是否可以选择                  chrome safari firefox支持

resize               对象的区域是否允许用户调尺寸       chrome safari firefox支持

例子

box-sizing: border-box | content-box

border-box:  内容宽度 = width-padding-border

content-box: 内容宽度 = width

在Standard 模式下

input[button|submit|reset] | button | hr | table                          默认盒子模型是border-box

非替换元素[div|p|h1|...] | img | iframe | input[text] |textarea       默认盒子模型centent-box

在Quirks模式下(chrome safari firefox opera)

input[button|submit|reset|text] |textarea | button | hr | table       默认盒子模型是border-box

非替换元素[div|p|h1|...] | img | iframe                                                默认盒子模型centent-box

在Quirks模式下(IE6 IE7 IE8)

input[button|submit|reset|text] |textarea | button | hr | table|非替换元素[div|p|h1|...]       默认盒子模型是border-box

img                                                                                                                                     默认盒子模型centent-box

appearance: normal | icon | window | button | menu | field;     默认normal

user-select: none | text | all | element;  默认text

resize: none | both | horizontal | vertical;  默认none

posted @ 2014-02-18 11:32  _彭建  阅读(231)  评论(0编辑  收藏  举报