今天是八月份的最后一天 没有往常的秋高气爽

浮动

float

特性:

1.

float是有方向的

2.

尽可能的往上飘

3.

脱离文档流

设置浮动之后，会影响后面的元素

4.

宽度不够会掉下来。

5.

浮动后，如果没有设置宽度。宽度会尽可能的窄。窄到内容的宽度。

6.

行元素会变成块元素,可以设置宽高

7.

文本环绕

浮动三要素:

用浮动的时候一定要注意的东西。

a).同级元素设置了浮动，其他也要设置

b).浮动后，尽量的设置宽

c).设置浮动后，一定要清除浮动

position

left:;

top:;

right:;

bottom:;

相对定位

position: relative;

特性:

会提高层级

不会脱离文档流

相对于自身进行定位

不会改变元素的宽高

不会改变元素本身

绝对定位

position: absolute;

特性:

会提高层级

会脱离文档流

找有定位的父级，如果找不到，找body

宽度尽可能的窄，内容的宽度

会把元素变成块

元素定位之后，层级会提高

从小到大

普通元素<浮动元素<定位元素

父级元素<子级元素

永远子级都比父级高

改变层级

z-index

注意：只有元素设置定位了才能用

块标签可以嵌套任何标签

例外：P标签觉得不能嵌套块标签

行标签不能嵌套块标签，可以嵌套行标签

自己不能嵌套自己

display:block;变成块之后，同样不能嵌套块标签

盒子模型的组成

width/height+padding+border

margin塌陷

块标签

div p h1-h6

特点:

a).独占一行

b).宽度默认是父级的100%

c).可以设置宽高

d).不会受空格和回车的影响

行标签

a span strong b em i

特点:

a).共享一行

b).宽度由内容撑起来

c).不可以设置宽高

d).受空格和回车的影响

行内块

img

特点:

a).共享一行

b).可以设置宽高

c).受空格和回车的影响