content-box(标准盒模型,默认值)
width 只包括内容宽度,padding 和 border 在盒子外部向外扩展
设置 width: 100px, padding: 10px, border: 10px
content-box
内容区: 100px
实际占用宽度 = 100(内容) + 20(padding) + 20(border) = 140px
拍平
content-box 拍平
内容区: 100px
border-box
width 包括 border + padding + 内容,padding 和 border 在盒子内部向内挤压
设置 width: 100px, padding: 10px, border: 10px
border-box
内容区: 60px
实际占用宽度 = 100px(width 设置值)
内容宽度 = 100 - 20(padding) - 20(border) = 60px
拍平
border-box 拍平
内容区: 60px
并排对比(左:content-box 140px,右:border-box 100px)
设置 width: 100px, padding: 10px, border: 10px
content-box
border-box
scroll-view 组件
设置 width: 100px, padding: 10px, border: 10px
content-box
border-box
setProperty 设置与 getPropertyValue 获取
设置 width: 60px, padding: 10px, border: 10px
view 组件
设置值: {{data.boxSizing}}
获取值: {{data.boxSizingActual}}
view
text 组件
设置值: {{data.boxSizing}}
获取值: {{data.boxSizingActualText}}
text
image 组件
设置值: {{data.boxSizing}}
获取值: {{data.boxSizingActualImage}}
view 组件拍平
设置值: {{data.boxSizing}}
获取值: {{data.boxSizingActualFlat}}
view
text 组件拍平
设置值: {{data.boxSizing}}
获取值: {{data.boxSizingActualTextFlat}}
text
image 组件拍平
设置值: {{data.boxSizing}}
获取值: {{data.boxSizingActualImageFlat}}
第一个枚举值,'' (空字符串) - 空值情况
native-view组件: box-sizing: content-box 和 border-box
设置 width: 100px, padding: 10px, border: 10px