css3(下)

#再来补充下css3一些重要知识

##盒模型

###标准盒模型

###外盒模型

元素空间宽度 = content width + padding + border + margin的宽度

元素空间高度 = content height + padding + border + margin的高度

###内盒模型

元素宽度 = content width + padding + border的宽度

元素高度 = content height + padding + border的高度

IE盒模型(当IE6~8处于怪异模式下就会使用IE盒子模型,否则将使用W3C标准盒子模型。)

###外盒模型

元素空间宽度 = content width + margin的宽度

元素空间高度 = content height + margin的高度

###内盒模型

元素宽度 = content width

元素高度 = content height

box-sizing:content-box | border-box;

box-sizing有三个值,默认是content-box(表示元素使用W3C盒子模型),而border-box(表示元素使用IE盒子模型),inherit(从父元素上继承)

##float 浮动

float:left; float:right;

具有包裹性 本意作用是做文字环绕 float布局只是歪打正着的产物

##清除浮动

overflow:visible;hidden;scroll;

overflow:visible;默认值;

overflow:hidden;将所有超出盒子的所有内容都给隐藏掉

overflow:scroll;有超出盒子内容时 就会出现滚动条

overflow:auto;在必需时对象内容才会被裁切或显示滚动条

.clear:after {

    content:".";

    height:0;ß

    visibility:hidden;

    display:block;

    clear:both;

}