1.什么是网页的布局方式?

• 网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的，有三种：
  1.标准流（又叫文档流/普通流）
  2.浮动流
  3.定位流

1.标准流(文档流/普通流)排版方式

• 1.1其实浏览器默认的排版方式就是标准流的排版方式

• 1.2在CSS中将元素分为三类, 分别是块级元素/行内元素/行内块级元素

• 1.3 在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版

  • 垂直排版, 如果元素是块级元素, 那么就会垂直排版

  • 水平排版, 如果元素是行内元素/行内块级元素, 那么就会水平排版

2.浮动流排版方式

• 2.1浮动流是一种 "半脱离标准流"的排版方式

• 2.2浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐

• 注意点:

  • 1.浮动流中没有居中对齐, 也就是没有center这个取值

  • 2.在浮动流中是不可以使用margin: 0 auto;

• 特点:

• 1.在浮动流中是不区分块级元素/行内元素/行内块级元素的
  无论是级元素/行内元素/行内块级元素都可以水平排版

• 2.在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高

• 3.综上所述, 浮动流中的元素和标准流中的行内块级元素很像

脱标: 脱离标准流

• 1.当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是浮动元素的脱标

• 2.浮动元素脱标之后会有什么影响?
  如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候前面一个元就会盖住后面一个元素

浮动元素排序规则

• 1.1相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面

• 1.2不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动

• 1.3浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定

浮动元素的贴靠现象

浮动元素的字围效果

案例：企业开发中，垂直方向一般使用标准流布局，水平方向使用浮动流布局

垂直方向使用标准流, 水平方向使用浮动流

• 2.拿到一个很复杂的界面如何入手?
  2.1从上至下布局
  2.2从外向内布局
  2.3水平方向可以先划分为一左一右再对左边或者右边进行进一步布局

浮动元素高度问题

1.在标准流中内容的高度可以撑起父元素的高度
2.在浮动流中浮动的元素是不可以撑起父元素的高度的

清除浮动的方式一：给父元素设置一个高度（企业开发中，能不写高度就不写高度）

清除浮动的方式二：给后面的盒子添加clear属性

clear属性取值:

• none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)

• left: 不要找前面的左浮动元素

• right: 不要找前面的右浮动元素

• both: 不要找前面的左浮动元素和右浮动元素

• 注意点:
  当我们给某个元素添加clear属性之后, 那么这个属性的margin属性就会失效

清除浮动的方式三：隔墙法

• 2.外墙法
  2.1在两个盒子中间添加一个额外的块级元素
  2.2给这个额外添加的块级元素设置clear: both;属性

• 注意点:
  外墙法它可以让第二个盒子使用margin-top属性
  外墙法不可以让第一个盒子使用margin-bottom属性

• 3.内墙法
  3.1在第一个盒子中所有子元素最后添加一个额外的块级元素
  3.2给这个额外添加的块级元素设置clear: both;属性

• 注意点:
  内墙法它可以让第二个盒子使用margin-top属性
  内墙法它可以让第一个盒子使用margin-bottom属性

• 4.外墙法和内墙法区别?
  外墙法不能撑起第一个盒子的高度, 而内墙法可以撑起第一个盒子的高度

• 5.在企业开发中不常用隔墙法来清除浮动

清除浮动的方式四：利用伪元素选择器清除浮动

• 本质上就是内墙法, 只不过是直接通过CSS代码添加了内墙, 其它特性和内墙法都一样

清除浮动的方式五：overflow: hidden;

• 1.overflow: hidden;作用
  1.1可以将超出标签范围的内容裁剪掉
  1.2清除浮动
  1.3可以通过overflow: hidden;让里面的盒子设置margin-top之后, 外面的盒子不被顶下来

• 注意点:
  IE6中不支持这种方式, 为了兼容IE6必须给前面的盒子添加*zoom:1;属性

3.定位流排版方式

• 1.定位流排版方式分类
  1.1相对定位
  1.2绝对定位
  1.3固定定位
  1.4静态定位

2.什么是相对定位?

相对定位就是相对于自己以前在标准流中的位置来移动

• 3.相对定位注意点
  3.1相对定位是不脱离标准流的, 会继续在标准流中占用一份空间
  3.2在相对定位中同一个方向上的定位属性只能使用一个
  3.3由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素
  3.4由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局

• 4.相对定位应用场景
  4.1用于对元素进行微调
  4.2配合后面学习的绝对定位来使用

绝对定位

就是相对于body来定位

• 2.绝对定位注意点
  2.1绝对定位的元素是脱离标准流的
  2.2绝对定位的元素是不区分块级元素/行内元素/行内块级元素

绝对定位规律

• 1.规律
  1.默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点

• 2.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点
  2.1只要是这个绝对定位元素的祖先元素都可以
  2.2指的定位流是指绝对定位/相对定位/固定定位
  2.3定位流中只有静态定位不行

• 3.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点

• 注意点
  1.如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点
  2.一个绝对定位的元素会忽略祖先元素的padding

• 相对定位不会脱离标准流, 会继续在标准流中占用一份空间, 所以不利于布局界面

绝对定位弊端:

• 默认情况下绝对定位的元素会以body作为参考点, 所以会随着浏览器的宽度高度的变化而变化

• 子绝父相
  子元素用绝对定位, 父元素用相对定位

绝对定位流中设置元素动态居中

• 1.只需要设置绝对定位元素的left:50%;

• 2.然后再设置绝对定位元素的margin-left: -元素宽度的一半px;

固定定位

• 1.什么是固定定位?
  固定定位和前面学习的背景关联方式很像, 背景定位可以让背景图片不随着滚动条的滚动而滚动, 而固定定位可以让某个盒子不随着滚动条的滚动而滚动

div{            width: 200px;            height: 2000px;            border: 1px solid #000;            background-image: url(images/girl.jpg);            background-repeat: no-repeat;            background-attachment: fixed;
        }

• 注意点:
  1.固定定位的元素是脱离标准流的, 不会占用标准流中的空间
  2.固定定位和绝对定位一样不区分行内/块级/行内块级

作者：叶子扬
链接：https://www.jianshu.com/p/562e34f02735