100天UI学习笔记-CSS3完善盒模型

CSS3改善了传统盒模型结构，增强盒子构成要素的功能，扩展了盒模型显示的方式。

定义显示方式

box-sizing属性

box-sizing:content-box 元素width/height=border+padding+content

box-sizing:border-box 元素width/height=content

定义元素尺寸大小

resize属性

resize:none 用户不能调节元素尺寸

resize:both 用户可以调节元素尺寸

resize:horizontal 用户可以调整元素宽度

resize:vertical 用户可以调整元素高度

溢出处理

overflow-x和overflow-y属性

visible 不剪切内容，不添加滚动条。默认值。

auto 在需要时剪切内容，添加滚动条。

hidden 不显示超出元素尺寸的内容。

scroll 当内容超过元素尺寸，添加滚动条。

定义轮廓

outline-color 轮廓颜色

outline-style 轮廓样式

outline-width 轮廓宽度

outline-offset 轮廓偏移位置的数值