图解CSS3核心技术与案例实战（第七章CSS3盒模型）

1、在CSS中主要有以下几种盒模型：inline、inline-block、block、table、absolute position、float。
2、CSS中每一个元素都是一个盒模型
3、CSS中盒模型被分为两种：W3C的标准模型和IE的传统模型，比同之处是两者的计算方法不一样（比如元素高度等）
4、box-sizing属性：
事先定义盒模型的尺寸解析方式
① box-sizing：content-box | border-box | inherit
content-box ：默认值，让元素维持W3C的标准盒模型。元素的宽度和高度等于border+padding+content width/height
border-box:让元素维持IE传统的盒模型，元素的宽度和高度等于content width/height
inherit:此值使元素继承父元素的盒模型模式
5、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:默认值，表示不剪切容器中任何内容，不添加滚动条，元素将被剪切 为包含对象的窗口大小。
hidden：内容溢出容器时，所有内容都将隐藏，而且不显示滚定条
6、resize属性
用户通过拖动的方式来改变元素尺寸大小
①resize：none | both | horizontal | vertical | inherit
none:用户不能拖动元素修改尺寸大小
both：用户可以拖动元素，同时修改元素的宽度和高度
horizontal：用户可以拖动元素，仅仅修改元素的宽度
vertical：用户可以拖动元素，仅仅修改元素的高度
inherit：继承父元素的resize属性
②表单中的文本域textarea属性默认就具有resize功能，默认属性值为“both”
7、外轮廓属性outline
①外轮廓在页面呈现的效果和边框border呈现的效果极其相似，但和元素边框border完全不同，外轮廓不占用网页布局，不一定是矩形，外轮廓是属于一种动态样式，只有在元素获得焦点或者被激活时呈现
②outline和border的对比
a：border属于盒模型的一部分，直接影响元素盒子的大小
outline创建的外轮廓线是画在一个框的“上面”，不会影响该框或其他框的大小，因此outline创建的轮廓线不会影响文档流，也不会破坏网页布局
b：border创建的边框每个边可以不一样
outline创建的外轮廓在元素各边是一样 的
c ：border创建的元素边框可以单边设置
outline创建的外轮廓始终是闭合的