目录

一、标准流

块级元素

行内元素

与HTML元素之间的区别

二、盒子模型

三、浮动(Float)

四、定位(Position)

一、标准流

标准流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

块级元素

• 霸占一行，不能与其他任何元素并列
• 能设置宽与高

行内元素

• 与其他元素并列、
• 不能是指宽与高，默认的宽度就是文字的宽度

与HTML元素之间的区别

标准流里面的限制特别多。标准流做不出网页：因为能并排的不能改宽高。所以，要脱离标准流。

css中有三种手段可以使一个元素脱离标准文档流，分别为浮动和绝对定位,固定定位。

二、盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

一张图解释一下：

• Margin(外边距)?- 清除边框外的区域，外边距是透明的。
• Border(边框)?- 围绕在内边距和内容外的边框。
• Padding(内边距)?- 清除内容周围的区域，内边距是透明的。
• Content(内容)?- 盒子的内容，显示文本和图像

三、浮动(Float)

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列

img{
    float:right;  //左浮动
    float:left;  //右浮动
    clear:boty;  //清除浮动
}