浮动

浮动

1.标准文档流的排序方法是从上到下,从左到右，上面位置发生变化下面的位置也会随之发生变化
2.元素的分类

块元素：h1-h6，div，P，ul ,li ,ol ,dl ,dt dd 行内元素：span，strong，a , b, i ,em
,img

行内元素转换为块元素：display：block 行内块元素:display:line-block

行内元素与块级元素的转换

我们可以通过改变display的值来改变元素的类型。

块级元素转行内元素（了解）

display：inline;

行内元素转块级元素(重点)

display:block;

转行内块元素（重点）

display：inline-block；

行内块元素的特点

• 可以设置宽高，如果不设置，默认为内容的宽高。
• 可以与其他行内元素或者行内块元素在一排显示。

按显示分类（了解）

input img textarea这些标签都是行内元素，不过却可以设置宽高。

替换元素

替换元素就是浏览器会根据元素的属性，来决定元素的具体显示内容。

非替换元素

非替换元素不是通过标签的属性来决定元素的内容的，而是由标签中的标签体决定的。

2.脱离标准文档流（脱标）

脱离标准文档流的三种方式：

1. 浮动
2. 绝对定位
3. 固定定位

3.浮动

特性1 脱离标准文档流，

1. 可以与其他元素并排展示
2. 也可以设置宽高
3. 元素如果不设置宽高，默认为内容的宽高。

特性2 浮动的元素互相贴靠

浮动元素会努力贴靠上一个浮动元素的边。如果宽度不够，则当前浮动元素会换行显示。换行后顶部不会超过上一个浮动元素的底部。

特性3 浮动的元素有字围效果。

标准流的文字不会被浮动的盒子遮挡。而是会像水一样将浮动的盒子包围起来。