9.盒子模型与BFC（块级格式化上下文）

盒子模型（W3C标准）

W3C标准：box-sizing:border-content

width/heigh为内容属性不含border/padding/margin

IE怪盒子标准：box-sizing:border-box

width/heigh为内容属性包含border/padding/margin

marge（外边距）

padding（内边距）

border（边框）

content（内容）

margin有堆叠现象

padding有背景色而margin没有

padding和margin区别

相同处：都可以是两部分内容有一定间隔。

区别：padding有背景二margin没有

padding不能堆叠而margin可堆叠

10.CSS属性

display

block

独占一行

默认宽度是父容器的100%，默认高度取决于内容。

inline

同一行显示

设置高度宽度无效

具有自包裹性，根据内容决定高度和宽度

inline-block

没有换行作用

设置高度宽度有效

flex（弹性布局）？？？

flex-direction:row 横向

flex-wrap:wrap 自动换行

flex-grow:1 自动增长

iustify-coutent:flex-start 头

iustify-coutent:flex-end 尾

iustify-coutent:flex-center 中间

align-items:center 竖直对齐

10.2定位

static（默认）：按照普通的流式布局，依照文档流渲染。

position:absolute 绝对布局

top:.....;left:......;左上

right:....;buttom:....;右下

以父级相对定位

relative：相对定位，相对于窗口

position:sticky;right:200px;

对象在常态时遵循常规流（相当于relative与flex的合体）

10.3浮动（float）

脱离文档流，漂浮到父容器边缘

clear：清除浮动效果（那个位置的那条边就不能依托float元素，只对float以后的元素有效。？？？

效果：文字环绕图片、ul li横向排列、多列布局。

text-indent:.....;首行缩进

cursor:pointer;鼠标变成手的形状

10.4图片精灵？？？？？

多个背景图放到一个图片中

提高加载速度，降低下载量，好切换主题

z-index:....;数字越大，显示的越上层。

10.5padding

设置一个值：表示上右下左统一尺寸

两个值：上下（第一个）左右（第二个）

三个值：上（第一个）左右（第二个）下（第三个）

四个值：上右下左依次

margin同上

容器标记与文本标记