布局, 是指把网页分为多个块, 按照左中右、上中下等排列.

1. 布局分类

按照宽度, 布局可以分为三种, 即固定宽度布局、不固定宽度布局、响应式布局.

1.1 固定宽度布局

一般宽度为960px / 1000px / 1024px (都是8的倍数).

1.2 不固定宽度布局

主要靠文档流(normal flow)的原理来布局.

1.3 响应式布局

这是一种混合布局, 这种布局在PC上是固定宽度, 手机上则是不固定宽度.

2. 布局的两种思路

布局的思路有两种, 即从大到小、从小到大.
新人推荐用第二种, 因为小的简单; 老手一般用第一种, 因为老手熟练且有大局观.

2.1 从大到小

(1) 先定下大局;
(2) 然后完善每个部分的小布局.

2.2 从小到大

(1) 先完成小布局;
(2) 然后组合成大布局.

3. float, flex, grid三种布局选哪种?

3.1 需要兼容 IE 9 : float布局

左浮两个, 固定宽度, 不要用响应式. 必要时采用”负margin”.

3.2 不需兼容 IE9 + 不需只兼容最新浏览器: flex布局

必要时采用”负margin”.

3.3 不需兼容 IE 9 + 只兼容最新浏览器: grid布局

image.png

4. float布局

4.1 float布局的步骤

(1)子元素上加 float: left; 和 设置width.
(2)给父元素加上class=”clearfix”的类名并进行相应设置, 代码如下:

  1. .clearfix::after {
  2.     content: ' ' ;
  3.     display: block;
  4.     clear: both;
  5. }
  1.  这段代码的作用是使父元素有高度, 包住子元素.

4.2 float布局的经验

(1) 不用做响应式布局. 因为手机上没有IE, 而响应式布局恰好是专门为IE而用的.
(2) IE 6/7 双倍margin的bug, 解决办法有两个:
方法一: 将错就错, 针对IE 6/7把margin减半, 比如

  1. div.son {
  2.     float:left;
  3.     margin-left: 10px;
  4.     _margin-left: 5px;
  5. }
  1. 正常浏览器不会执行_margin-left: 5px;这个错误语法, 但是IE 6/7能够执行这个语法.
  3. 方法二: 在浮动之后加上display: inline-block; 比如
  1. div.son {
  2.     float:left;
  3.     margin-left: 10px;
  4.     display: inline-block;
  5. }

4.3 float布局实践

(1) 布局举例

  • 两栏布局, 如顶部条;
  • 三栏布局, 如内容区;
  • 四栏布局, 如导航;
  • 平均布局, 如产品展示区.
  • 图文混排, 比如左图右文, 左文右图等.

(2)布局经验

  • 在以上布局加上头尾, 即可满足所有PC页面需求;
  • 手机页面不用float;
  • float布局要计算各部分宽度, 不方便;
  • float用来兼容IE.

(3) 解决子元素被挤到下一行的方法

  • 使用border调试法之后, 把父元素的border去掉, 或者把border改为outline;

  • 使用”负margin”, 即在子元素之上增加一个父元素, 然后把所加父元素的相应的margin的值设为负数.

    1.    举例: 这里在子元素 .image上增加了一个父元素 .negative,<br />                  并且设置.negative的 margin-right=-12px<br />                  (左右上下四个margin, 根据具体情况设置其一; 负像素值的大小也根据具体情况设置).
    1. <div class="list">
    2.    <div class="negative">
    3.           <div class="image"></div>
    4.           <div class="image"></div>
    5.           <div class="image"></div>
    6.           <div class="image"></div>
    7.    </div>
    8. </div>
    1. .list > .negative { margin-right: -12px; }

(4) 块级元素(block)水平居中的方法

  • 方法一: margin: 0 auto; 

    1. 注意: 第一种方法有时可能会受到上下margin的干扰.

  • 方法二: margin-left: auto;

    1.            margin-right: auto;<br />         注意: 第二种方法两行代码要都写, 不能缺一. 方法二比较保险, 建议使用方法二.<br />(5) 去掉背景色超出文字的部分的方法

  • 方法一: 使用 vertical-align: top;

  • 方法二: 使用 vertical-align: middle; .