CSS基本概念(文档流)

143 阅读1分钟

文档流与脱离文档流

文档流(Normal  Flow)文本的流动方向

CSS里的元素分三种

inline元素(内联元素):

流动方向,从左到右,到达最右边才会换行,距离不够的话span会断开分为2行
宽度,为内部inline元素的和,不能用width指定
高度,由line-height 间接确定,跟height无关

block元素(块级元素):

流动方向,从上到下,每一个都另起一行
宽度,默认自动计算宽度,可以有width指定
高度,由内部文档流元素觉得,可以设height

inline-block元素(内联块元素):

流动方向,从左到右,不会跨行,自动换行
宽度,综合inline和block的特点,可以用width指定
高度,跟block元素类似,可设置height

overflow 溢出:

当内容的宽度或高度大于容器时,会溢出
可用overflow来设置是否显示滚动条
scroll,永远显示
visible,直接显示溢出部分
hidden,直接隐藏溢出部分
auto,灵活设置,自动

文本内容只出现在第一个页面

元素可以脱离文档流:

float:lest 脱离
position:absolute/fixed  

详细资料点击:CSS层叠样式表