网页布局方式

一、 网页的布局方式

1、 什么是网页的布局方式？

• 网页的布局方式就是指流浪器是如何对网页的元素进行排版的

2、 网页的布局方式
2.1 标准流/文档流/普通流排版方式

• 浏览器的默认的排版方式就是标准流排版方式
• 在css中将元素分为三类，分别是块级元素/行内元素/行内块级元素。
• 在标准流中有两种排版方式，一种是垂直排版，一种是水平排版。

垂直排版：如果是块级元素，那么就是垂直排版。
水平排版：如果是行内元素，那么就是水平排版。

2.2 浮动流排版方式
2.2.1 浮动流是一种“半脱离标准流”的排版方式
2.2.2 浮动流只有一种排版方式，就是水平排版，它只能设置某个元素在他的父元素中左对齐或者右对齐。

• 注意点：浮动流中没有居中对齐，也就是没有center取值。
• 注意点： 在浮动流中是不可以使用margin:0 auto的。
• 特点：在浮动流中是不区分块级元素和行内元素还是行内块级元素的，无论是块级还是行内还是行内块级元素。
• 特点：在浮动流中，无论是块级元素/行内元素/行内块级元素都可以设置宽高。
• 综上所述：浮动流中的元素和标准流中的行内块级元素很像。

float:left;

二 ，浮动元素脱标

1. 什么是浮动元素脱标？

• 脱标：脱离标准流。所有元素都可以脱标。
• 当某一个元素浮动之后，那么这个元素看上去就像被从标准流中删除了一样，这个就是浮动元素的脱标。
• 如果前面一个元素浮动了，而后面一个元素没有浮动，那么这个时候前面的一个元素就会盖住后面的一个元素。

三、浮动元素的排序规则

1、 相同方向上的浮动元素，先浮动的元素会显示在前面，后浮动的元素会显示在后面。
2、不同方向上的浮动元素，左浮动会找左浮动，右浮动会找右浮动。
3、浮动元素浮动之后的位置，由浮动元素浮动之前在标准流中的位置来确定。

贴靠原则

浏览器会让所有的元素在父元素中完整展示，如果有覆盖的情况，那么会触发贴靠原则。也就是寻找要贴靠的元素的前一个元素，如果没有，就寻找父元素进行贴靠。

写代码思维方式

1. 企业开发中什么时候使用标准流什么时候使用浮动流？

• 垂直方式使用标准流，水平方向使用浮动流

2. 拿一个很复杂的界面如何入手？

• 从上到下布局
• 从外到内布局
• 水平方向可以划分为一左一右再对左边或者右边进行一步布局